<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">产品型号：</span>
        <el-select
          v-model="engineTypeValue"
          placeholder="请选择产品型号"
          clearable
          size="small"
          style="width: 150px"
          @change="getPartCodeList">
          <el-option v-for="item in engineType" :key="item.value" :label="item.label" :value="item.value" size="mini" />
        </el-select>
        <span style="margin-left: 10px">总成号：</span>
        <el-select v-model="partCodeValue" placeholder="请选择状态" clearable filterable size="small" style="width: 150px">
          <el-option v-for="item in partCodeList" :key="item.value" :label="item.label" :value="item.value" size="mini" />
        </el-select>
        <span style="margin-left: 10px">是否合格：</span>
        <el-select v-model="isOk" placeholder="是否合格" clearable size="small" style="width: 100px">
          <el-option label="全部" value="0" size="mini" />
          <el-option label="合格" value="1" size="mini" />
          <el-option label="不合格" value="2" size="mini" />
        </el-select>
        <span style="margin-left: 10px">计划日期：</span>
        <el-date-picker
          v-model="importTime"
          :clearable="false"
          size="small"
          type="daterange"
          align="center"
          style="width: 240px;"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期" />
        <el-button
          type="primary"
          plain
          size="small"
          icon="el-icon-search"
          style="margin-left: 5px"
          @click="pageSize = 50; pageCurrent = 1; searchOrder()">查询</el-button>
          <!--        <el-button type="info" size="small" icon="el-icon-download" @click="exportExcel()">Excel</el-button>-->
      </div>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :cell-class-name="tableRowClassName"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        class="main"
        tooltip-effect="dark"
        style="width: 100%;height: 77vh;overflow-y: auto"
        border
        size="mini">
        <el-table-column align="center" type="index" width="80px" label="序号" />
        <el-table-column align="center" label="总成编号" min-width="120px">
          <template slot-scope="scope">
            {{ scope.row.变速箱总成号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单号">
          <template slot-scope="scope">
            {{ scope.row.订单号 }}
          </template>
        </el-table-column>
        <!--        <el-table-column align="center" label="产品型号" width="80px">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.row.机型 }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" min-width="80px" label="总成号">
          <template slot-scope="scope">
            {{ scope.row.零件号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="计划开始日期">
          <template slot-scope="scope">
            {{ scope.row.计划开始时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="计划完成日期">
          <template slot-scope="scope">
            {{ scope.row.计划完成时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="总装上线时间">
          <template slot-scope="scope">
            {{ scope.row.上线时间 ? scope.row.上线时间 : '未上线' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="总装下线时间">
          <template slot-scope="scope">
            {{ scope.row.下线时间 ? scope.row.下线时间 : '未下线' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="测试上线时间">
          <template slot-scope="scope">
            {{ scope.row.测试上线时间 ? scope.row.测试上线时间 : '未上线' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="测试下线时间">
          <template slot-scope="scope">
            {{ scope.row.测试下线时间 ? scope.row.测试下线时间 : '未下线' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="装配完工" width="90">
          <template slot-scope="scope">
            <el-tag @click="routerToExcelData(scope.row)" v-if="scope.row.是否下线 == 1" type="success">已完工</el-tag>
            <el-tag @click="routerToExcelData(scope.row)" v-else-if="scope.row.是否上线 == 1 && scope.row.是否下线 == 0" type="warning">已上线</el-tag>
            <el-tag @click="routerToExcelData(scope.row)" v-else type="info">无状态</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="测试完工" width="90">
          <template slot-scope="scope">
            <el-tag @click="routerToExcelData(scope.row)" v-if="scope.row.测试下线 == 1" type="success">已完工</el-tag>
            <el-tag @click="routerToExcelData(scope.row)" v-else-if="scope.row.测试上线 == 1 && scope.row.测试下线 == 0" type="warning">已上线</el-tag>
            <el-tag @click="routerToExcelData(scope.row)" v-else type="info">无状态</el-tag>
          </template>
        </el-table-column>
        <!--<el-table-column align="center" label="操作" width="180">-->
        <!--  <template slot-scope="scope">-->
        <!--    <el-button-->
        <!--      size="mini"-->
        <!--      type="text"-->
        <!--      icon="el-icon-top"-->
        <!--      @click="topOrder(scope.row)">上移</el-button>-->
        <!--    <el-button-->
        <!--      size="mini"-->
        <!--      type="text"-->
        <!--      icon="el-icon-bottom"-->
        <!--      @click="downOrder(scope.row)">下移</el-button>-->
        <!--      &lt;!&ndash;<el-button&ndash;&gt;-->
        <!--      &lt;!&ndash;  size="mini"&ndash;&gt;-->
        <!--      &lt;!&ndash;  type="text"&ndash;&gt;-->
        <!--      &lt;!&ndash;  icon="el-icon-error"&ndash;&gt;-->
        <!--      &lt;!&ndash;  @click="stopOrder(scope.row)">禁用</el-button>&ndash;&gt;-->
        <!--      &lt;!&ndash;<el-button&ndash;&gt;-->
        <!--      &lt;!&ndash;  size="mini"&ndash;&gt;-->
        <!--      &lt;!&ndash;  type="text"&ndash;&gt;-->
        <!--      &lt;!&ndash;  icon="el-icon-check"&ndash;&gt;-->
        <!--      &lt;!&ndash;  @click="startOrder(scope.row)">启用</el-button>&ndash;&gt;-->
        <!--  </template>-->
        <!--</el-table-column>-->
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          v-if="!loading"
          :current-page="pageCurrent"
          :page-sizes="[50, 100, 200]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
// import { getNowTime3 } from '@/utils/tool'

export default {
  data() {
    return {
      partCodeList: [], // 零件号数组
      partCodeValue: '', // 零件号
      isOk: '', // 是否合格
      tableData: [], // 总数据数组
      engineTypeValue: '', // 产品型号
      engineType: [], // 产品型号数组
      statePlan: [], // 计划状态数组
      statePlanValue: '', // 计划状态
      importTime: [], // 计划状态
      releaseTime: '', // 计划状态
      total: 0, // 总条数
      pageList: 50, // 每页显示条数
      pageSize: 50, // 每页显示条数
      pageCurrent: 1, // 后台获取页
      mid: [], // id
      loading: false,
      MIDGroup: []
    }
  },
  created() {
    this.date = new Date() // 修改数据date
    const year = new Date().getFullYear()
    const month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
    const day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
    const audiTime = year + '-' + month + '-' + day
    this.importTime = [audiTime, audiTime]
    // this.getStatePlan()
    this.getPartCodeList()
    this.getEndStation()
    this.searchOrder()
  },
  methods: {
    // handleSelectionChange(val) {
    //   if (val.length > 0) {
    //     if (val.length > 1) {
    //       this.$refs.multipleTable.clearSelection()
    //       this.$refs.multipleTable.toggleRowSelection(val.pop())
    //     } else {
    //       this.mid = val.map((item) => item.MID)
    //     }
    //   } else {
    //     this.mid = []
    //   }
    //   console.log(this.mid, 'this.mid')
    // },
    // @select 事件方法
    // selectable(selection, row) {
    //   return true
    // },
    // 初始化获取产品型号
    getEndStation() {
      this.engineType = []
      var param = []
      var Data = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.engineType.push({
            label: response.data[i].发动机型号,
            value: response.data[i].发动机型号
          })
        }
      })
    },
    // 初始化获取订单号
    getStatePlan() {
      this.statePlan = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_发动机订单计划_状态_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.statePlan.push({
            label: response.data[i].订单计划状态名称,
            value: response.data[i].订单计划状态代码
          })
        }
      })
    },
    // 初始化获取产品型号
    getPartCodeList() {
      this.partCodeList = []
      var param = []
      param[0] = ['基本机型', this.engineTypeValue]
      var Data = this.CreateData('11', '北汽福田订单创建零件号_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length === 0) {
          this.$message({
            type: 'error',
            message: '该机型没有对应的总成号'
          })
          return false
        } else {
          for (let i = 0; i < response.data.length; i++) {
            this.partCodeList.push({
              label: response.data[i].零件号,
              value: response.data[i].零件号
            })
          }
        }
      })
    },
    // 路由到excel报表中去 并且在报表中拉取出相应的数据
    routerToExcelData(row){
      let row1 = row || this.clickRow
      this.$confirm('是否跳转到该工件质量数据报表页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({
          path: '/ProcessParameterMaintenance/ExcelHeadMaintenance',
          query: {
            engineId: row1.发动机号,
          }
        })
      })
    },
    // 查询订单
    searchOrder() {
      this.tableData = []
      let isOk_check
      this.isOk != '0' ? isOk_check = 1 : isOk_check = 0
      var param = []
      param[0] = ['零件号', this.partCodeValue]
      param[1] = ['导入开始时间', this.importTime[0] + ' ' + '00:00:00']
      param[2] = ['导入完成时间', this.importTime[1] + ' ' + '23:59:59']
      param[3] = ['产品型号', this.engineTypeValue]
      param[4] = ['PageCurrent', this.pageCurrent]
      param[5] = ['PageSize', this.pageSize]
      param[6] = ['PageCount', '1111', 'int', '1']
      param[7] = ['ItemCount', '1111', 'int', '1']
      param[8] = ['合格标志_check', isOk_check]
      param[9] = ['合格标志', this.isOk]
      var Data = this.CreateData('11', 'MES_计划BOM_发动机订单计划_下发查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.result.length !== 0) {
          this.tableData = response.data.result
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    // 上移订单
    topOrder(row) {
      console.log(row)
      if (row.MID) {
        var param = []
        param[0] = ['id', row.MID]
        console.log(param)
        var Data = this.CreateData('12', 'MES_计划BOM_发动机订单计划_订单上移', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '上移成功',
              type: 'success'
            })
            this.pageCurrent = 1
            this.pageSize = 50
            this.searchOrder()
          } else {
            this.$message.error('上移失败！')
          }
        })
      } else {
        this.$message.error('请选择订单！')
      }
    },
    // 下移订单
    downOrder(row) {
      if (row.MID) {
        var param = []
        param[0] = ['id', row.MID]
        console.log(param)
        var Data = this.CreateData('12', 'MES_计划BOM_发动机订单计划_订单下移', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '下移成功',
              type: 'success'
            })
            this.pageCurrent = 1
            this.pageSize = 50
            this.searchOrder()
          } else {
            this.$message.error('下移失败！')
          }
        })
      } else {
        this.$message.error('请选择订单！')
      }
    },
    // 禁用订单
    stopOrder(row) {
      if (row.MID) {
        var param = []
        param[0] = ['MID', row.MID]
        console.log(param)
        var Data = this.CreateData('12', 'MES_计划BOM_发动机订单计划_订单禁用', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '禁用成功',
              type: 'success'
            })
            this.pageCurrent = 1
            this.pageSize = 50
            this.searchOrder()
          } else {
            this.$message.error('禁用失败！')
          }
        })
      } else {
        this.$message.error('请选择订单！')
      }
    },
    // 启用订单
    startOrder(row) {
      if (row.MID) {
        var param = []
        param[0] = ['MID', row.MID]
        console.log(param)
        var Data = this.CreateData('12', 'MES_计划BOM_发动机订单计划_订单启用', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '启用成功',
              type: 'success'
            })
            this.pageCurrent = 1
            this.pageSize = 50
            this.searchOrder()
          } else {
            this.$message.error('启用失败！')
          }
        })
      } else {
        this.$message.error('请选择订单！')
      }
    },
    exportExcel() {
      if (this.tableData.length !== 0) {
        let engineTypeValue_check, statePlan_check, importTime_check, releaseTime_check
        this.importTime ? importTime_check = 1 : (importTime_check = 0, this.importTime = '')
        this.engineTypeValue ? engineTypeValue_check = 1 : (engineTypeValue_check = 0, this.engineTypeValue = '')
        this.statePlanValue ? statePlan_check = 1 : (statePlan_check = 0, this.statePlanValue = '')
        this.releaseTime ? releaseTime_check = 1 : (releaseTime_check = 0, this.releaseTime = '')
        var param = []
        param[0] = ['导入时间_check', importTime_check]
        param[1] = ['导入开始时间', this.importTime[0]]
        param[2] = ['导入完成时间', this.importTime[1]]
        param[3] = ['下发时间_check', releaseTime_check]
        param[4] = ['下发开始时间', this.releaseTime[0]]
        param[5] = ['下发完成时间', this.releaseTime[1]]
        param[6] = ['产品型号_check', engineTypeValue_check]
        param[7] = ['产品型号', this.engineTypeValue]
        param[8] = ['订单状态_check', statePlan_check]
        param[9] = ['订单状态', this.statePlanValue]
        var Data = this.CreateData('2001', 'MES_计划BOM_发动机订单计划_订单导出新', param)
        this.exportExcel_NPOI(Data)
      } else {
        this.$message.warning('暂无数据')
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.是否下线 === 1 || row.测试下线 === 1) {
        return 'complete'
      }
      if (row.是否上线 === 1 || row.测试上线 === 1) {
        return 'is-group'
      }
      if (row.是否上线 === 0 || row.测试上线 === 0) {
        return 'no-accept'
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchOrder()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchOrder()
    }
  }
}
</script>
<style>
.el-table .no-accept {
  background: #ffffff !important;
}

.el-table .is-group {
  background: #FFF582 !important;
}

.el-table .assembly {
  background: #C4E1FF !important;
}

.el-table .complete {
  background: #c6d7b3 !important;
}

.el-table .suspend {
  background: #FFD1A4 !important;
}
</style>
<style scoped>
.topCard {
  margin: 5px;
}

.topDiv {
  margin-bottom: 10px;
}

.el-select {
  width: 200px
}

.el-input {
  width: 200px
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  position: absolute;
  right: 6px;
  top: 80px;
  width: 300px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

