<template>
  <el-container style="flex-direction: column">
    <el-main id="topContainer" class="nopadding" style="position: relative;margin-bottom: 10px;">
      <div class="right-panel btnsContainer">
        <el-button type="primary" icon="el-icon-plus" @click="add">新增任务</el-button>
        <!-- <el-button type="primary" @click="utaskDepuse" v-loading="isloading">任务分解</el-button> -->
        <el-button type="primary" @click="utaskDepuse" v-loading="isloading">任务下达</el-button>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <!-- <el-tab-pane label="混料工序" name="8车间">
          <scTable
            ref="table8"
            :apiObj="apiUtask"
            row-key="id"
            stripe
            :height="topHeight"
            :params="paramsUtask8"
            @selection-change="handleSelectionChange"
          >
          <el-table-column type="selection" width="40" />
            <el-table-column type="index" width="40" />
            <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="state">
              <template #default="scope">
                  <el-tag v-if="scope.row.state!==40">
                    {{ state_[scope.row.state] }}
                  </el-tag>
                  <el-tag v-else type="success">
                    {{ state_[scope.row.state] }}
                  </el-tag>
                </template>
            </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="start_date">
            </el-table-column>
            <el-table-column label="计划完工时间" prop="end_date">
            </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" width="150">
              <template #default="scope">
                <el-link type="primary" @click="table_show(scope.row)">
                  查看
                </el-link>
                <el-divider direction="vertical" v-if="scope.row.state==10"></el-divider>
                <el-link type="primary" @click="table_edit(scope.row)" v-if="scope.row.state==10">
                  编辑
                </el-link>
                <el-divider direction="vertical" v-if="scope.row.state==30"></el-divider>
                <el-link type="primary" @click="table_end(scope.row)" v-if="scope.row.state==30">终止</el-link>
                <el-divider direction="vertical" v-if="scope.row.state==10||scope.row.state==20"></el-divider>
                <el-link type="danger" @click="table_del(scope.row)" v-if="scope.row.state==10||scope.row.state==20">
                  删除
                </el-link>
              </template>
            </el-table-column>
          </scTable>
        </el-tab-pane> -->
        <el-tab-pane label="成型7车间" name="7车间">
          <scTable ref="table7" :apiObj="apiUtask" row-key="id" stripe :height="topHeight" :params="paramsUtask7"
            @row-click="rowclick" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" />
            <el-table-column type="index" width="40" />
            <el-table-column label="任务编号" prop="number">
            </el-table-column>
            <el-table-column label="产品名称" prop="material_" show-overflow-tooltip>
              <template #default="scope">
                {{ scope.row.material_.name }}
              </template>
            </el-table-column>
            <el-table-column label="规格" prop="material_">
              <template #default="scope">
                {{ scope.row.material_.specification }}
              </template>
            </el-table-column>
            <el-table-column label="型号" prop="material_">
              <template #default="scope">
                {{ scope.row.material_.model }}
              </template>
            </el-table-column>
            <el-table-column label="任务状态" prop="state">
              <template #default="scope">
                <el-tag v-if="scope.row.state !== 40">
                  {{ state_[scope.row.state] }}
                </el-tag>
                <el-tag v-else type="success">
                  {{ state_[scope.row.state] }}
                </el-tag>
              </template>
            </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_day">
            </el-table-column>
            <el-table-column label="计划开工时间" prop="start_date">
            </el-table-column>
            <el-table-column label="计划完工时间" prop="end_date">
            </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" width="150">
              <template #default="scope">
                <el-link type="primary" @click="table_show(scope.row)">
                  查看
                </el-link>
                <el-divider direction="vertical" v-if="scope.row.state == 10"></el-divider>
                <el-link type="primary" @click="table_edit(scope.row)" v-if="scope.row.state == 10">
                  编辑
                </el-link>
                <el-divider direction="vertical" v-if="scope.row.state == 10 || scope.row.state == 14"></el-divider>
                <el-link type="danger" @click="table_del(scope.row)"
                  v-if="scope.row.state == 10 || scope.row.state == 14">
                  删除
                </el-link>
              </template>
            </el-table-column>
          </scTable>
        </el-tab-pane>
        <el-tab-pane label="成型10车间" name="10车间">
          <scTable ref="table10" :apiObj="apiUtask" row-key="id" stripe :height="topHeight" :params="paramsUtask10"
            @row-click="rowclick" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" />
            <el-table-column type="index" width="40" />
            <el-table-column label="任务编号" prop="number">
            </el-table-column>
            <el-table-column label="产品名称" prop="material" show-overflow-tooltip>
              <template #default="scope">
                {{ scope.row.material_.name }}
              </template>
            </el-table-column>
            <el-table-column label="型号" prop="number">
            </el-table-column>
            <el-table-column label="任务状态" prop="state">
              <template #default="scope">
                <el-tag v-if="scope.row.state !== 40">
                  {{ state_[scope.row.state] }}
                </el-tag>
                <el-tag v-else type="success">
                  {{ state_[scope.row.state] }}
                </el-tag>
              </template>
            </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="start_date">
            </el-table-column>
            <el-table-column label="计划完工时间" prop="end_date">
            </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" width="150">
              <template #default="scope">
                <el-link type="primary" @click="table_show(scope.row)">
                  查看
                </el-link>
                <el-divider direction="vertical" v-if="scope.row.state == 10"></el-divider>
                <el-link type="primary" @click="table_edit(scope.row)" v-if="scope.row.state == 10">
                  编辑
                </el-link>
                <el-divider direction="vertical" v-if="scope.row.state == 30 || scope.row.state == 20"></el-divider>
                <el-link type="danger" @click="table_end(scope.row)"
                  v-if="scope.row.state == 30 || scope.row.state == 20">终止</el-link>
                <el-divider direction="vertical" v-if="scope.row.state == 10 || scope.row.state == 14"></el-divider>
                <el-link type="danger" @click="table_del(scope.row)"
                  v-if="scope.row.state == 10 || scope.row.state == 14">
                  删除
                </el-link>
              </template>
            </el-table-column>
          </scTable>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <el-main class="nopadding" style="position: relative;">
      <el-header style="justify-content: space-between;">
        <div class="left-panel">
          <span style="font-size:14px ;">生产进度</span>
        </div>
        <div class="right-panel">
          <el-date-picker v-model="query.date" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD" />
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        </div>
      </el-header>
      <scTable ref="table2" :data="dataList" row-key="id" stripe :height="bottomHeight" :hideDo="hideDo" :params="query">
        <el-table-column type="index" width="50" />
        <el-table-column label="任务编号" prop="number" width="100" fixed="left">
        </el-table-column>
        <el-table-column label="产品名称" prop="material" width="100" show-overflow-tooltip fixed="left">
          <template #default="scope">
            {{ scope.row.material_.name }}
          </template>
        </el-table-column>
        <el-table-column label="规格" prop="specification" width="100" fixed="left">
          <template #default="scope">
            {{ scope.row.material_.specification }}
          </template>
        </el-table-column>
        <el-table-column label="型号" prop="model" width="100" fixed="left">
          <template #default="scope">
            {{ scope.row.material_.model }}
          </template>
        </el-table-column>
        <el-table-column label="计划量" prop="count" width="100" fixed="left">
        </el-table-column>
        <el-table-column label="日均产量" prop="count_day" width="100" fixed="left">
        </el-table-column>
        <el-table-column label="计划开工时间" prop="start_date" width="100" fixed="left">
        </el-table-column>
        <el-table-column label="计划完工时间" prop="end_date" width="100" fixed="left">
        </el-table-column>
        <el-table-column v-for="item in columList" :label="item.data" :key="item" width="100">
          <div :class="bindClass(item)">
            <div v-if="activeName == '10车间'">{{ item.count1 }}</div>
            <div>{{ item.count2 }}</div>
            <div>{{ item.count3 }}</div>
          </div>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <save-dialog v-if="dialog.save" ref="saveDialog" :activeName="activeName" @success="handleSaveSuccess"
    @closed="dialog.save = false"></save-dialog>
  <el-drawer title="任务详情" v-model="visibleRecord" :size="800" destroy-on-close @closed="visibleRecord = false">
    <div class="right-panel tabsHeader">
      <el-date-picker v-model="paramsObj.start_date" type="date" value-format="YYYY-MM-DD" />
      <el-button type="primary" icon="el-icon-search" @click="handleDetailQuery">查询</el-button>
    </div>
    <el-container v-loading="isloading">
      <el-main style="padding: 0 20px 20px 20px">
        <scTable ref="drawer_table" :apiObj="apiObj" row-key="id" stripe :params="paramsObj">
          <el-table-column type="index" width="50" />
          <el-table-column label="工段" prop="mgroup_name" show-overflow-tooltip>
          </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="start_date">
          </el-table-column>
          <el-table-column label="状态" prop="state" show-overflow-tooltip>
            <template #default="scope">
              <el-tag v-if="scope.row.state !== 40">
                {{ state_[scope.row.state] }}
              </el-tag>
              <el-tag v-else type="success">
                {{ state_[scope.row.state] }}
              </el-tag>
            </template>
          </el-table-column>
        </scTable>
      </el-main>
    </el-container>
  </el-drawer>
</template>
<script>
import saveDialog from "./mtask_form.vue";
export default {
  name: "rparty",
  components: {
    saveDialog,
  },
  data() {
    return {
      dialog: {
        save: false,
      },
      apiUtask: this.$API.pm.utask.list,
      paramsUtask7: { belong_dept__name: '7车间' },
      paramsUtask8: { belong_dept__name: '8车间' },
      paramsUtask10: { belong_dept__name: '10车间' },
      apiObj: null,
      paramsObj: { utask: '' },
      query: {
        page: 1,
        page_size: 20,
        date: ''
      },
      utaskId: '',
      isloading: false,
      visibleRecord: false,
      tableHeight: null,
      hideDo: true,
      activeName: '7车间',
      dataList: [
        // {number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:200, count03:300 },
        // {number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:250, count03:300 },
      ],
      // columList:['10.15','10.16','10.17'],
      columList: [],
      selection: [],
      selectedIds: [],
      state_: {
        10: '创建中',
        14: '已分解',
        20: '已下达',
        30: '生产中',
        40: '已提交'
      },
      topHeight: null,
      bottomHeight: null,
    };
  },
  mounted() {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let timeNow = date.getTime();
    let timer = 1000 * 60 * 60 * 24 * 2;
    let data2 = new Date(timeNow - timer);//2天前日期
    let year2 = data2.getFullYear();
    let month2 = data2.getMonth() + 1;
    let day2 = data2.getDate();
    let startDate = year2 + '-' + month2 + '-' + day2;
    let endDate = year + '-' + month + '-' + day;
    this.query.date = [startDate, endDate];
    let heights = document.getElementById('topContainer').clientHeight;
    this.topHeight = (heights - 45) + 'px';
    this.bottomHeight = (heights - 65) + 'px';
  },
  methods: {
    // 动态绑定Class
    bindClass(item) {
      let count = item.count;
      let classInfo = { countBlock: true, redColor: false, greenColor: false, orangeColor: false };
      let countok = 0;
      if (this.activeName == '10车间') {
        countok = item.count3;
      } else {
        countok = item.count2;
      }
      if (item.state != 40) {
        classInfo.orangeColor = true;
      } else {
        if (countok >= count) {
          classInfo.greenColor = true;
        } else {
          classInfo.redColor = true;
        }
      }

      return classInfo
    },
    //添加
    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);
      });
    },
    //删除
    async table_del(row) {
      this.$confirm(`确定删除吗？`, "提示", {
        type: "warning",
      }).then(() => {
        this.$API.pm.utask.delete.req(row.id).then((res) => {
          this.$message.success("删除成功");
          this.$refs.table7.refresh();
          return res;
        }).catch((err) => {
          return err;
        });
      }).catch(() => { });
    },
    //终止
    table_end(row) {
      this.$confirm(`确定终止该任务吗？`, "提示", {
        type: "warning",
      }).then(() => {
        this.$API.pm.utask.stop.req(row.id).then((res) => {
          this.$message.success("操作成功");
          this.$refs.table10.refresh();
          return res;
        }).catch((err) => {
          return err;
        });
      }).catch(() => { });
    },
    //本地更新数据
    handleSaveSuccess(data, mode) {
      this.$refs.table7.refresh();
      // this.$refs.table8.refresh();
      this.$refs.table10.refresh();
    },
    handleQuery() {
      let startDate = this.query.date[0];
      let endDate = this.query.date[1];
      let arr = this.getBetweenDate(startDate, endDate);
      // this.columList = arr;
    },
    getBetweenDate(start, end) {
      let arr = [];
      let startTimer = new Date(start).getTime();
      let endTimer = new Date(end).getTime();
      let oneTime = 1000 * 60 * 60 * 24;//1天时间
      let tempTime = startTimer;
      while (tempTime <= endTimer) {
        let dates = new Date(tempTime);
        let year = dates.getFullYear();
        let month = dates.getMonth() + 1;
        let day = dates.getDate();
        let item = year + '-' + month + '-' + day;
        arr.push(item);
        tempTime = tempTime + oneTime;
      }
      return arr;
    },
    resetQuery() {
      this.query = {};
    },
    handleSelectionChange(selection) {
      this.selectedIds = [];
      selection.forEach(item => {
        this.selectedIds.push(item.id)
      });
    },
    //任务分解
    utaskDepuse() {
      let that = this;
      if (that.selectedIds.length > 0) {
        let ids = that.selectedIds;
        that.isloading = true;
        that.$API.pm.utask.scheduemtasks.req({ ids: ids }).then(res => {
          that.$API.pm.utask.assgin.req({ ids: ids }).then(res => {
            that.$message.success('下达任务成功');
            that.isloading = false;
            that.$refs.table7.refresh();
            // that.$refs.table8.refresh();
            that.$refs.table10.refresh();
          }).catch(() => {
            that.isloading = false;
          })

        }).catch(() => {
          that.isloading = false;
        })
      } else {
        this.$message.error('未选择任何任务')
      }
    },
    utaskAssgin() {
      let that = this;
      if (that.selectedIds.length > 0) {
        that.isloading = true;
        that.$API.pm.utask.assgin.req({ ids: that.selectedIds }).then(res => {
          that.$message.success('下达任务成功');
          that.isloading = false;
          that.$refs.table7.refresh();
          // that.$refs.table8.refresh();
          that.$refs.table10.refresh();
        }).catch(() => {
          that.isloading = false;
        })
      } else {
        this.$message.error('未选择任何任务')
      }
    },
    //查看
    table_show(row) {
      this.utaskId = row.id;
      this.paramsObj.utask = row.id;
      this.apiObj = this.$API.pm.mtask.list;
      this.visibleRecord = true;
    },
    handleClick() {
      this.columList = [];
      this.dataList = [];
    },
    rowclick(val) {
      let that = this;
      that.columList = [];
      let utask = val.id;
      that.dataList = [val]
      this.$API.pm.mtask.list.req({ utask: utask, page: 0 }).then(res => {
        let columList = []
        res.forEach(item => {
          let obj = {};

          obj.state = item.state
          obj.count1 = 0; obj.count2 = 0; obj.count3 = 0;
          obj.count = item.count;
          obj.data = item.start_date;
          if (that.activeName == '7车间') {
            let rate = (item.count_ok / item.count) * 100;
            obj.count2 = item.count_ok;//7车间count_ok
            obj.count3 = rate + '%';//7车间合格率
          } else if (that.activeName == '10车间') {
            let mlogs = item.mlogs;
            if (mlogs.length > 0) {
              for (let i = 0; i < mlogs.length; i++) {
                if (mlogs[i].shift_name == '白班') {
                  obj.count1 = mlogs[i].count_ok;//10车间白班
                } else {
                  obj.count2 = mlogs[i].count_ok;//10车间夜班
                }
                obj.count3 = obj.count1 + obj.count2;//10车间合计
              }
            }
          }
          columList.push(obj);

        })
        this.columList = columList
        console.log(columList)
      })
    },
  },
};
</script>
<style scoped>
.right-panel>*+* {
  margin-left: 10px;
}

.countBlock {
  width: 80px;
  color: #ffffff;
  text-align: center;
}

.redColor {
  background-color: brown;
}

.greenColor {
  background-color: green;
}

.orangeColor {
  background-color: orange;
}

.el-main.nopadding {
  padding: 0 20px 0 20px
}

.btnsContainer {
  display: inline-block;
  position: absolute;
  right: 20px;
  margin-top: 4px;
  z-index: 100
}
</style>