<template>
    <el-container style="flex-direction: column">
      <el-main id="topContainer" class="nopadding" style="position: relative;margin-bottom: 10px;">
        <div class="right-panel tabsHeader">
          <el-date-picker
              v-model="query.date"
              type="date"
              value-format="YYYY-MM-DD"
            />
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            >查询</el-button>
          </div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="粗加工6车间" name="first">
              <scTable
              ref="table"
              :apiObj="apiObj"
              row-key="id"
              stripe
              :height="topHeight"
              :params="query"
              hidePagination
              @row-click="rowClick"
              >
                <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;">
              <div class="tableTitle">工序进度</div>
              <scTable
                ref="tableprocess"
                row-key="id"
                stripe
                :hideDo="hideDo"
                :data="processList"
                :height="bottomHeight"
              >
                <el-table-column type="index" width="50"/>
                <el-table-column label="日期" prop="start_date">
                </el-table-column>
                <el-table-column label="工序" prop="mgroup_name">
                </el-table-column>
                <el-table-column label="产品名称" prop="number">
                </el-table-column>
                <el-table-column label="型号规格" prop="specification">
                </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_ok">
                </el-table-column>
                <el-table-column label="操作人" prop="">
                </el-table-column>
              </scTable>
            </el-col>
            <el-col :span="11">
              <div class="tableTitle" style="display:flex;justify-content: space-between;">
                <div>车间物料</div>
                <div class="btnsContainer" style=" ">
                  <el-button type="primary" @click="tomio">车间入库</el-button>
                  <el-button type="primary" @click="tomio">车间出库</el-button>
                </div>
              </div>
              <scTable
                ref="tableMaterial"
                row-key="id"
                stripe
                :hideDo="hideDo"
                :data="wMaterial"
                :height="bottomHeight"
              >
                <el-table-column type="index" width="50"/>
                <el-table-column label="产品编号" prop="material_">
                  <template #default="scope">
                    <span v-if="scope.row.material_">{{ scope.row.material_.number }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="产品名称" prop="material_">
                  <template #default="scope">
                    <span v-if="scope.row.material_">{{ scope.row.material_.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="型号规格" prop="specification">
                </el-table-column>
                <el-table-column label="数量" prop="count">
                </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: "",
      query: {
        page:1,
        page_size:20,
        belong_dept_name:'6车间',
        date:'2023-10-24'
      },
      activeName:'first',
      tableData: [],
      selection: [],
      wMaterial:[],//车间物料
      processList:[],//工序进度
      state_: {
          10: '完好',
          20: '限用',
          30: '在修',
          40: '禁用',
        },
        hideDo:true,
        topHeight:null,
        bottomHeight:null,
    };
  },
  mounted(){
    let heights = document.getElementById('topContainer').clientHeight;
    console.log('heights',heights)
    this.topHeight = (heights-50)+'px';
    this.bottomHeight = (heights-50)+'px';
    this.getWorkSpaceMaterial();
    let NowDate = new Date();
    let month = NowDate.getMonth()>8?NowDate.getMonth()+1:'0'+(NowDate.getMonth()+1)
    this.query.date  = NowDate.getFullYear()+'-'+(NowDate.getMonth()+1)+'-'+NowDate.getDate();
    this.apiObj = this.$API.pm.mtask.daylist;
  },
  methods: {
    //车间物料
    getWorkSpaceMaterial(){
      let that = this;
      this.$API.wpm.wmaterial.list.req({belong_dept_name:'6车间'}).then(res=>{
        that.wMaterial = res.results;
      })
    },
    handleClick(val){
      if(val==0){
        
      }else if(val==1){

      }
    },
    //点击任务
    rowClick(row){
      debugger;
      console.log(row)
      let that = this;
      this.$API.pm.mtask.list.req({start_date:row.start_date,end_date:row.end_date,mgroup__belong_dept__name:'6车间',utask:row.utask}).then(res=>{
        // debugger;
        console.log('工序进度')
        console.log(res)
        that.processList = res.results;
      })
    },
    //添加
    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 = {};
    },
    tomio(){
      this.$router.push('/inm/mio')
    },
  },
};
</script>
<style scoped>
    .tabsHeader{
      display: inline-block;
      position: absolute;
      right: 20px;
      margin-top: 4px;
      z-index:100
    }
    .el-main.nopadding{
      padding:0 20px 0 20px
    }
    .tableTitle{
      height: 40px;
    line-height: 40px;
    font-size: 14px;
    box-sizing: border-box;
    border-bottom: 1px solid #eeeeee;
    }
</style>