<template>
    <el-container style="flex-direction: column">
      <el-main id="topContainer" class="nopadding" style="position: relative;margin-bottom: 10px;">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="混料工序" name="first">
              <scTable
              ref="table"
              :apiObj="apiObj"
              row-key="id"
              stripe
              :height="topHeight"
              :params="query"
              >
                <el-table-column type="index" width="50"/>
                <el-table-column label="任务编号" prop="number">
                </el-table-column>
                <el-table-column label="产品名称" prop="material"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="产品型号" prop="number">
                </el-table-column>
                <el-table-column label="产品规格" prop="number">
                </el-table-column>
                <el-table-column label="计划数量" prop="count">
                </el-table-column>
                <el-table-column label="计划日期" prop="count">
                </el-table-column>
                <el-table-column label="状态" prop="count">
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="left" width="120">
                    <template #default="scope">
                      <el-link
                          type="primary"
                          @click="table_edit(scope.row)"
                          v-if="scope.row.status==10"
                      >生产记录
                      </el-link>
                      <el-link
                          type="primary"
                          @click="table_show(scope.row)"
                          v-else
                      >查看
                      </el-link>
                    </template>
                </el-table-column>
              </scTable>
          </el-tab-pane>
          <el-tab-pane label="成型7车间" name="second">
            <scTable
              ref="table"
              :apiObj="apiObj"
              row-key="id"
              stripe
              :height="topHeight"
              :params="query"
              >
              <el-table-column type="index" width="50"/>
                <el-table-column label="任务编号" prop="number">
                </el-table-column>
                <el-table-column label="产品名称" prop="material"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="产品型号" prop="number">
                </el-table-column>
                <el-table-column label="产品规格" prop="number">
                </el-table-column>
                <el-table-column label="计划数量" prop="count">
                </el-table-column>
                <el-table-column label="计划日期" prop="count">
                </el-table-column>
                <el-table-column label="状态" prop="count">
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="left" width="120">
                    <template #default="scope">
                      <el-link
                          type="primary"
                          @click="table_edit(scope.row)"
                          v-if="scope.row.status==10"
                      >生产记录
                      </el-link>
                      <el-link
                          type="primary"
                          @click="table_show(scope.row)"
                          v-else
                      >查看
                      </el-link>
                    </template>
                </el-table-column>
              </scTable>
          </el-tab-pane>
          <el-tab-pane label="成型10车间" name="third">
            <scTable
              ref="table"
              :apiObj="apiObj"
              row-key="id"
              stripe
              :height="topHeight"
              :params="query"
              > 
              <el-table-column type="index" width="50"/>
              <el-table-column label="任务编号" prop="number">
              </el-table-column>
              <el-table-column label="产品名称" prop="material"  show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="产品型号" prop="number">
              </el-table-column>
              <el-table-column label="产品规格" prop="number">
              </el-table-column>
              <el-table-column label="计划数量" prop="count">
              </el-table-column>
              <el-table-column label="计划日期" prop="count">
              </el-table-column>
              <el-table-column label="状态" prop="count">
              </el-table-column>
              <el-table-column label="操作" fixed="right" align="left" width="120">
                  <template #default="scope">
                    <el-link
                        type="primary"
                        @click="table_edit(scope.row)"
                        v-if="scope.row.status==10"
                    >生产记录
                    </el-link>
                    <el-link
                        type="primary"
                        @click="table_show(scope.row)"
                        v-else
                    >查看
                    </el-link>
                  </template>
              </el-table-column>
            </scTable>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-main class="nopadding" style="position: relative;">
        <div>
          <el-row :gutter="20">
            <el-col :span="13" style="border-right: 1px solid #eeeeee;">工序进度
              <scTable
                ref="table"
                row-key="id"
                stripe
                :height="bottomHeight"
              >
                <el-table-column type="index" width="50"/>
                <el-table-column label="日期" prop="number">
                </el-table-column>
                <el-table-column label="工序" prop="material">
                </el-table-column>
                <el-table-column label="产品名称" prop="number">
                </el-table-column>
                <el-table-column label="型号" prop="number">
                </el-table-column>
                <el-table-column label="规格" prop="number">
                </el-table-column>
                <el-table-column label="计划数量" prop="count">
                </el-table-column>
                <el-table-column label="合格数量" prop="count">
                </el-table-column>
                <el-table-column label="操作人" prop="count">
                </el-table-column>
              </scTable>
            </el-col>
            <el-col :span="11">车间物料
              <scTable
                ref="table"
                row-key="id"
                stripe
                :height="bottomHeight"
              >
                <el-table-column type="index" width="50"/>
                <el-table-column label="产品编号" prop="material">
                </el-table-column>
                <el-table-column label="产品名称" prop="number">
                </el-table-column>
                <el-table-column label="型号" prop="number">
                </el-table-column>
                <el-table-column label="规格" prop="number">
                </el-table-column>
                <el-table-column label="数量" prop="count">
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="left" width="120">
                  <template #default="scope">
                    <el-link
                      type="primary"
                      @click="table_edit(scope.row)"
                      v-if="scope.row.state==10"
                    >编辑
                    </el-link>
                    <!-- 提交后变查看 -->
                    <el-link
                      v-else
                      type="primary"
                      @click="table_show(scope.row)"
                    >查看
                    </el-link>
                    <el-link
                      type="primary"
                      @click="table_edit(scope.row)"
                    >删除
                    </el-link>
                  </template>
                </el-table-column>
              </scTable>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
    <save-dialog
      v-if="dialog.save"
      ref="saveDialog"
      @success="handleSaveSuccess"
      @closed="dialog.save = false"
    ></save-dialog>
</template>
<script>
export default {
  name: "worktask",
  data() {
    return {
      dialog: {
        save: false,
      },
      apiObj: this.$API.pm.mtask.list,
      query: {
        page:1,
        page_size:20,
        date:''
      },
      activeName:'first',
      tableData: [],
      selection: [],
      state_: {
          10: '完好',
          20: '限用',
          30: '在修',
          40: '禁用',
        },
        topHeight:null,
        bottomHeight:null,
    };
  },
  mounted(){
    let heights = document.getElementById('topContainer').clientHeight;
    console.log('heights',heights)
    this.topHeight = (heights-50)+'px';
    this.bottomHeight = (heights-40)+'px';
  },
  methods: {
    handleClick(val){
      debugger;
      console.log(val.index);
      this.tableData = [];
      if(val==0){
        this.$API.wpm.mtask.list.req().then((res) => {
              this.$message.success("删除成功");
              return res;
          }).catch((err) => {
              return err;
          });
      }else if(val==1){

      }else if(val==2){

      }
    },
    //添加
    add() {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("add");
      });
    },
    //编辑
    table_edit(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("edit").setData(row);
      });
    },
    //查看
    table_show(row) {
      this.$nextTick(() => {
          this.$router.push({
          name: "worktaskFlog",
          query:{mtask:row.id}
          
        });
      });
    },
    //删除
    async table_del(row) {
      this.$confirm(`确定删除吗？`, "提示", {
      type: "warning",
      }).then(() => {
          this.$API.pm.mtask.delete.req(row.id).then((res) => {
              this.$message.success("删除成功");
              return res;
          }).catch((err) => {
              return err;
          });
      }).catch(() => {});
    },

    //本地更新数据
    handleSaveSuccess(data, mode) {
      if (mode == "add") {
        this.$refs.table.refresh();
      } else if (mode == "edit") {
        this.$refs.table.refresh();
      }
    },
    handleQuery() {
      this.$refs.table.queryData(this.query)
    },
    resetQuery() {
      this.query = {};
    },
  },
};
</script>
<style scoped>
    .el-main.nopadding{
      padding:0 20px 0 20px
    }
</style>