<template>
  <div style="width: 100%;">
    <div style="z-index: 99999;background: #fff">
      <div style="width: 98%;margin: auto">
        <div style="width: 100%;height: 40px">
          <div style="float: left;width: 120px;font-size: 16px;line-height: 40px">机台任务</div>
          <div @click="clickClose"
               style="float: right;width: 70px;font-size: 20px;text-align:center;line-height: 40px;color: #333;font-weight: bold;cursor: pointer;">
            <i class="el-icon-close"></i></div>
          <div style="clear: both"></div>
        </div>

        <div class="sortTable-con">
          <el-badge
            size="mini"
            v-for="(item,index) in machineInfList"
            :key="item.id"
            class="item-badge">
            <el-button @click="handleClick(index)" v-if="activeName==item.machineName" type="primary" size="mini"
                       class="share-button">
              {{ item.machineName }}
              <span
                style="line-height: 14px;display:block">({{ item.psGroupCount }}/{{
                  item.printCount1000.toFixed(3)
                }})</span>
            </el-button>
            <el-button @click="handleClick(index)" v-else size="mini" class="share-button">
              {{ item.machineName }}
              <span
                style="line-height: 14px;display:block">({{ item.psGroupCount }}/{{
                  item.printCount1000.toFixed(3)
                }})</span>
            </el-button>
          </el-badge>

        </div>
        <div>
          <el-table
            size="mini"
            v-loading="listLoadingSort"
            class="dropTable"
            id="dropTable"
            max-height="320"
            :data="activeMachineInfList"
            tooltip-effect="dark"
            style="width: 100%;margin-bottom: 20px;"
            row-key="index"
            border
            default-expand-all>
            <el-table-column
              label="序号"
              width="50px"
              align="center"
              type="index"
              :index="indexMethod">
            </el-table-column>
            <el-table-column
              label="施工单号"
              fixed
              width="120px"
            >
              <template slot-scope="{row}">
                      <span @click="getOrderStep(row.idPrintBill)"
                            style="color: #409EFF;cursor: pointer" v-html="row.printBill.billCode"></span>
                <el-image v-if="row.printBill.importantBill == 1" :src="new_badge"></el-image>
              </template>
            </el-table-column>
            <el-table-column
              label="版名称"
              fixed
              show-overflow-tooltip
              width="160px"
            >
              <template slot-scope="{row}">
                    <span @click="handleDetail(row.idPrintBill)"
                          style="color: #409EFF;cursor: pointer">{{ row.printBreed.breedName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="160"
              show-overflow-tooltip
              label="工单消息">
              <template slot-scope="{row}">
                {{ row.breedMsg }}
              </template>
            </el-table-column>

            <el-table-column label="生产状态" align="center" width="110px" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <div v-if="row.pauseStatus==0">
                  <el-tag size="mini" type="info" v-if="row.taskStatus==0">未开始</el-tag>
                  <!--            <el-tag type="warning" type="info" v-if="row.taskStatus==0 && row.pauseStatus==1">暂停</el-tag>-->
                  <el-tag size="mini" type="success" v-if="row.taskStatus==1">生产中</el-tag>
                  <el-tag size="mini" type="danger" v-if="row.taskStatus==2">终止</el-tag>
                  <el-tag size="mini" type="" v-if="row.taskStatus==5">完成</el-tag>
                  <el-tag size="mini" type="su" v-if="row.taskStatus==10">已完成</el-tag>
                </div>
                <div v-if="row.pauseStatus==1">
                  <el-tag size="mini" type="warning" v-if="row.taskStatus==0 || row.taskStatus==1">暂停</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="客户名称">
              <template slot-scope="{row}">
                <el-tooltip :content="row.printBill.clientName" placement="top-start" effect="light">
                  <span class="ellipsis"> {{ row.printBill.clientName }}</span>
                </el-tooltip>


              </template>
            </el-table-column>
            <el-table-column
              label="印品名称">
              <template slot-scope="{row}">
                <el-tooltip :content="row.printBill.billName" placement="top-start" effect="light">
                  <span class="ellipsis"> {{ row.printBill.billName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              width="120"
              show-overflow-tooltip
              label="工单下纸">
              <template slot-scope="{row}">
                {{ row.printBreed.paperName }}
              </template>
            </el-table-column>
            <el-table-column
              width="170"
              show-overflow-tooltip
              label="实际用纸">
              <template slot-scope="{row}">
                {{ row.printBreed.actualPaperName }}
              </template>
            </el-table-column>
            <el-table-column
              width="60"
              label="纸张开数">
              <template slot-scope="{row}">
                {{ row.printBreed.cutName }}
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              show-overflow-tooltip
              label="开纸尺寸">
              <template slot-scope="{row}">
                {{ row.printBreed.cutSize }}
              </template>
            </el-table-column>
            <el-table-column
              label="开单日期"
              width="120px"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.createTime">{{ scope.row.createTime | getTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="60"
              label="翻版方式">
              <template slot-scope="{row}">
                <span v-if="row.printBreed.breedFlipType==1">正反</span>
                <span v-if="row.printBreed.breedFlipType==2">滚翻</span>
                <span v-if="row.printBreed.breedFlipType==3">自翻</span>
                <span v-if="row.printBreed.breedFlipType==4">单面</span>
              </template>
            </el-table-column>
            <el-table-column
              width="60"
              label="ps版套数">
              <template slot-scope="{row}">
                {{ row.printBreed.psGroupCount }}
              </template>
            </el-table-column>
            <el-table-column
              width="60"
              label="千印数">
              <template slot-scope="{row}">
                {{ row.printBreed.printCount1000.toFixed(3) }}
              </template>
            </el-table-column>
            <el-table-column
              width="120"
              label="印工放数+后工放数">
              <template slot-scope="{row}">
                {{ row.printBreed.printFlowCount }}+{{ row.printBreed.craftFlowCount }}
              </template>
            </el-table-column>
            <el-table-column
              width="80"
              label="拼版人">
              <template slot-scope="{row}">
                <span v-if="row.assembleStatusInt==10"> {{ row.assembleMan }}</span>
              </template>
            </el-table-column>
            <!--                  <el-table-column-->
            <!--                    width="100"-->
            <!--                    label="拼版人确认人">-->
            <!--                    <template slot-scope="{row}">-->
            <!--                      {{ row.assembleMan }}-->
            <!--                    </template>-->
            <!--                  </el-table-column>-->
            <el-table-column
              width="80"
              label="制版人">
              <template slot-scope="{row}">
                <span v-if="row.madeBreedStatusInt==10"> {{ row.madeBreedMan }}</span>

              </template>
            </el-table-column>
            <el-table-column
              width="80"
              label="白料裁切人">
              <template slot-scope="{row}">
                <span v-if="row.cutPaperStatusInt==10"> {{ row.cutPaperMan }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="60"
              label="大纸张数">
              <template slot-scope="{row}">
                {{ row.printBreed.wholePaperCount }}
              </template>
            </el-table-column>
            <el-table-column
              width="60"
              label="印量">
              <template slot-scope="{row}">
                {{ row.printBreed.printCount }}
              </template>
            </el-table-column>
            <el-table-column
              width="110"
              label="印刷耗时（分钟）">
              <template slot-scope="{row}">
                {{ row.expectedWorkTime }}
              </template>
            </el-table-column>

          </el-table>
        </div>
      </div>
      <printbill-detail ref="printbillDetail"></printbill-detail>
      <print-step ref="printStep"></print-step>
    </div>



  </div>
</template>

<script>
import {calcAllMachineTaskCollection} from "@/api/printbill/breedTasks/breedTasks";
import PrintbillDetail from "@/components/printbillDetail/printbillDetail";
import printStep from "@/components/printbillDetail/printStep";
import {getMachineInfoByID} from "@/api/baseInfo/machineInfo";
import new_badge from '@/assets/new_badge.gif'

export default {
  name: "machinefList",
  components: {
    PrintbillDetail,
    printStep
  },
  data() {
    return {
      new_badge: new_badge,
      listLoadingSort: false,
      idMachineInfo: "",
      listLoading: false,
      drawer: false,
      direction: 'btt',
      taskListStr: false,
      activeIndex: '',
      activeName: '',
      activeMachineInfList: [],
      machineInfList: [],
    }
  },

  created() {
    // this.getList()
  },
  methods: {
    clickClose() {
      const _that = this;
      _that.$emit('closeDrawer');
    },
    getOrderStep(id) {
      const _that = this;
      _that.$refs.printStep.idOrder = id;
      _that.$refs.printStep.drawer = true;
      _that.$refs.printStep.getStep();
    },
    handleDetail(id) {
      const _that = this;
      _that.$refs.printbillDetail.idOrder = id;
      _that.$refs.printbillDetail.getDetail()
    },
    getMachineInfoRefresh() {
      const _that = this;
      _that.getMachine();
    },
    // handleClick(tab, event) {
    //   const _that = this;
    //   _that.taskListStr = false;
    //   _that.activeIndex = tab.index;
    //   _that.activeName = _that.machineInfList[tab.index].machineName;
    //   _that.activeMachineInfList = _that.machineInfList[_that.activeIndex].taskList;
    //   if (_that.activeMachineInfList.length > 0) {
    //     _that.taskListStr = true;
    //   }
    //   _that.idMachineInfo = _that.machineInfList[tab.index].id;
    //   _that.$emit('searchList', _that.idMachineInfo);
    //   // console.log("222",_that.activeMachineInfList);
    // },
    // handleClick(tabIndex) {
    //   const _that = this;
    //   _that.activeIndex = tabIndex;
    //   _that.activeMachineInfList = _that.machineInfList[_that.activeIndex].taskList;
    //   _that.activeName = _that.machineInfList[tabIndex].machineName;
    //   _that.idMachineInfo = _that.machineInfList[tabIndex].id;
    //   _that.$emit('searchList', _that.idMachineInfo);
    // },
    handleClick(tabIndex) {
      const _that = this;
      _that.activeIndex = tabIndex;
      _that.getMachineInfo(_that.machineInfList[tabIndex].idMachine)
      // _that.activeMachineInfList = _that.machineInfList[_that.activeIndex].taskList;
      _that.activeName = _that.machineInfList[tabIndex].machineName;
      _that.activeName2 = _that.machineInfList[tabIndex].machineName;
      _that.activeIndex2 = tabIndex;
      _that.idMachineInfo = _that.machineInfList[tabIndex].idMachine;
      _that.$emit('searchList', _that.idMachineInfo);
    },
//获取机台任务
    getMachine(activeName = '', activeIndex = 0) {
      const _that = this;
      calcAllMachineTaskCollection({}).then(response => {
        _that.machineInfList = response.data;
        if (activeIndex) {
          _that.activeIndex = activeIndex;
          _that.activeName = _that.machineInfList[activeIndex].machineName;
          _that.getMachineInfo(_that.machineInfList[activeIndex].idMachine)
        } else {
          _that.activeIndex = 0;
          _that.activeName = _that.machineInfList[0].machineName;
          _that.getMachineInfo(_that.machineInfList[0].idMachine)
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    getMachineInfo(id) {
      const _that = this;
      _that.listLoadingSort = true;
      const params = {
        idMachineInfo: id,
        getDetail: 1
      }
      getMachineInfoByID(params).then(res => {
        // console.log(res);
        _that.activeMachineInfList = res.data.taskList;
        _that.listLoadingSort = false;
      })
    },
    compare(propertyName) {
      return function (object1, object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        if (value2 < value1) {
          return 1;
        } else if (value2 > value1) {
          return -1;
        } else {
          return 0;
        }
      }
    },
    indexMethod(index) {
      return index + 1;
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .sortTable-con .el-button--mini {
  padding: 3px 3px !important;
}

::v-deep .el-drawer__header {
  margin-bottom: 5px !important;
}

.item-badge {
  margin-right: 10px;
  margin-bottom: 10px;
}

</style>
