<template>
  <div>
    <el-card>
      <div style="padding: 10px;background-color:#F5F5F5">
        <el-select v-model="machineShop" style="width:180px;margin-left: 10px" clearable class="select12" placeholder="请选择车间" @change="pageCurrent=1;searchProductionLine();searchTable()">
          <el-option
            v-for="item in machineShops1"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-select v-model="productionLine" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择产线" @change="pageCurrent=1;searchRegion();searchTable()">
          <el-option
            v-for="item in productionLines1"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-select v-model="region" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择工序" @change="pageCurrent=1;searchEquipment();searchTable()">
          <el-option
            v-for="item in regions1"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-select v-model="equipment" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择设备" @change="pageCurrent=1;searchTable()">
          <el-option
            v-for="item in equipments"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <div style="float: left">{{ item.label }}</div>
            <div style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</div>
          </el-option>
        </el-select>
        <el-date-picker
          v-model="dateRange"
          :picker-options="pickerOptions"
          type="daterange"
          align="right"
          unlink-panels
          class="select12"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-left: 20px;height: 48px"
          size="small"
          @change="pageCurrent=1;searchTable()"/>
        <el-button
          v-loading="disabled"
          type="primary"
          icon="el-icon-refresh"
          class="button11"
          style="height: 48px;margin: 0px"
          @click="createPlan()">生成计划</el-button>
        <el-button
          :disabled="disabled1"
          type="primary"
          icon="el-icon-download"
          style="height: 48px;"
          @click="exportExcel()">导出</el-button>
        <span style="margin-top: 20px;font-weight: bold;font-size: 14px">上次生成日期：{{ benchmarkDate }}</span>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="tableHeaderColor"
        :cell-style="tableColor"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        tooltip-effect="dark"
        style="width: 100%"
        height="700px">
        <el-table-column align="left" label="序号" type="index" width="70px"/>
        <el-table-column align="left" label="车间" width="110">
          <template slot-scope="scope">
            <span>{{ scope.row.车间 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="产线" width="110">
          <template slot-scope="scope">
            <span>{{ scope.row.产线名称 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="工序" width="110">
          <template slot-scope="scope">
            <span>{{ scope.row.工序名称 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="设备名称" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.设备名称 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="设备编号" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.设备编号 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="计划开始日期" width="150">
          <template slot-scope="scope">
            <span >{{ scope.row.计划开始日期 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="检修项目" min-width="260">
          <template slot-scope="scope">
            <span>{{ scope.row.检修项目 }}</span>
          </template>
        </el-table-column>
        <el-table-column width="160px" align="left" label="操作" >
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-search" @click="searchDetails(scope.row)">详情</el-button>
            <el-button type="text" icon="el-icon-bottom" @click="placeAnOrder(scope.row)">下单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      <el-dialog :visible.sync="dialogFormVisible" width="80%" >
        <el-table
          :data="tableData1"
          :header-cell-style="tableHeaderColor"
          :cell-style="tableColor"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          tooltip-effect="dark"
          style="width: 100%"
          height="500px">
          <el-table-column align="left" label="部位" width="85">
            <template slot-scope="scope">
              <span>{{ scope.row.部位 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="部件" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.部件 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="检修项目" min-width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.检修项目 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="方法/要领" width="85">
            <template slot-scope="scope">
              <span>{{ scope.row.方法要领 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="工具材料" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.工具材料 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="判定基准" min-width="150">
            <template slot-scope="scope">
              <span >{{ scope.row.判定基准 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="要领书" width="85">
            <template slot-scope="scope">
              <span>{{ scope.row.要领书 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="周期" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.周期 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="实施部门" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.实施部门 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="设备状态" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.设备状态 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="点检" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.点检 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="给油" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.给油 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="更换" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.更换 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="清扫" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.清扫 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="工时/min" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.工时 }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { ExecDatabase } from '@/main'
import UploadExcelComponent from '@/views/UploadExcel/index.vue'
import { mapGetters } from 'vuex'
export default {
  components: { UploadExcelComponent },
  data() {
    return {
      disabled: false,
      disabled1: false,
      dateRange: [],
      pickerOptions: {
        shortcuts: [{
          text: '往后一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '往后一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '往后三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      benchmarkDate: '',
      testItems: '', // 检测项ID
      order: '', // 顺序
      tableData1: [],
      worksheet: [],
      itemFile: [],
      equipments: [],
      equipment: '',
      equipmentLabel: '',
      positionGroup: '',
      partsGroup: '',
      projectGroup: '',
      methodGroup: '',
      toolGroup: '',
      benchmarkGroup: '',
      EssentialsGroup: '',
      cycleGroup: '',
      departmentGroup: '',
      stateGroup: '',
      spotCheckGroup: '',
      oilSupplyGroup: '',
      replaceGroup: '',
      cleanGroup: '',
      workingHoursGroup: '',
      keyword: '', // 关键词
      keyword_check: 0,
      loading: false,
      tableData: [],
      title: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      machineShops: [], // 车间
      regions: [], // 工序
      productionLines: [], // 产线
      machineShops1: [], // 车间
      regions1: [], // 工序
      productionLines1: [], // 产线
      machineShop: '', // 车间
      region: '', // 工序
      productionLine: '', // 产线
      form: {
        position: '', // 部位
        parts: '', // 部件
        project: '', // 项目
        method: '', // 方法要领
        tool: '', // 工具材料
        benchmark: '', // 判定基准
        Essentials: '', // 要领书
        cycle: '', // 周期
        department: '', // 实施部门
        state: '', // 设备状态
        spotCheck: false, // 点检
        oilSupply: false, // 给油
        replace: false, // 更换
        clean: false, // 清扫
        workingHours: '' // 工时
      },
      rules: {
        position: [{ required: true, message: '请输入部位', trigger: 'blur' }],
        parts: [{ required: true, message: '请输入部件', trigger: 'blur' }],
        project: [{ required: true, message: '请输入项目', trigger: 'blur' }],
        method: [{ required: true, message: '请输入方法要领', trigger: 'blur' }],
        tool: [{ required: true, message: '请输入工具材料', trigger: 'blur' }],
        benchmark: [{ required: true, message: '请输入判定基准', trigger: 'blur' }],
        Essentials: [{ required: true, message: '请输入要领书', trigger: 'blur' }],
        cycle: [{ required: true, message: '请输入周期', trigger: 'blur' }],
        department: [{ required: true, message: '请输入实施部门', trigger: 'blur' }],
        state: [{ required: true, message: '请选择设备状态', trigger: 'blur' }],
        workingHours: [{ required: true, message: '请输入工时', trigger: 'blur' }]
      },
      form1: {
        benchmarkDate: ''
      },
      rules1: {
        benchmarkDate: [{ required: true, message: '请选择基准日期', trigger: 'blur' }]
      },
      aaa: -1,
      total: 0, // 总条数
      pageSize: 10, // 每页显示条数
      pageCurrent: 1 // 后台获取页
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id',
      'token',
      'cname'
    ])
  },
  watch: {
    equipment(val) {
      this.equipmentLabel = ''
      for (let i = 0; i < this.equipments.length; i++) {
        if (val === this.equipments[i].value) {
          this.equipmentLabel = this.equipments[i].label
        }
      }
    }
  },
  created() {
    this.searchMachineShop()
    this.getWeekFormatDate()
    this.searchDate()
  },
  methods: {
    searchDate() {
      var param = []
      var Data = this.CreateData('11', '设备管理_预防维修_刷新日期_查询', param)
      ExecDatabase(Data).then(response => {
        this.benchmarkDate = response.data[0].刷新日期
      })
    },
    placeAnOrder(row) {
      this.$confirm('是否确认下单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['设备代码', row.设备代码]
        param[1] = ['计划开始日期', row.计划开始日期]
        param[2] = ['申请人', this.id]
        param[3] = ['用户', this.cname]
        param[4] = ['维修工单代码', '1', 'int', '1']
        var Data = this.CreateData('12', '维修工单_计划检修_增加_带返回值', param)
        ExecDatabase(Data).then(response => {
          const res = response.data
          if (res.hasOwnProperty('output') === false) {
            if (res[0].result === '0') {
              this.$notify.error(`下单失败`)
            }
          } else {
            if (res.result[0].result === '0') {
              this.$notify.error(`下单失败`)
            } else {
              this.$message({
                message: '下单成功',
                type: 'success'
              })
              this.$router.push({
                name: 'Test1',
                query: {
                  jobNumber: res.output[0].维修工单代码,
                  equipmentNumber: row.设备编号
                }
              })
            }
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下单'
        })
      })
    },
    getWeekFormatDate() {
      var endDate = new Date()
      endDate.setTime(endDate.getTime() + 3600 * 1000 * 24 * 7)
      var seperator = '-'
      var year = endDate.getFullYear()
      var month = endDate.getMonth() + 1
      var strDate = endDate.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= '0' && strDate <= '9') {
        strDate = '0' + strDate
      }
      endDate = year + seperator + month + seperator + strDate
      this.getNowFormatDate(endDate)
    },
    getNowFormatDate(endDate) {
      var startDate = new Date()
      var seperator = '-'
      var year = startDate.getFullYear()
      var month = startDate.getMonth() + 1
      var strDate = startDate.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= '0' && strDate <= '9') {
        strDate = '0' + strDate
      }
      startDate = year + seperator + month + seperator + strDate
      this.dateRange[0] = startDate
      this.dateRange[1] = endDate
    },
    exportExcel() {
      if (this.tableData.length > 0) {
        this.disabled1 = true
        let machineShop_check, productionLine_check, region_check, equipment_check
        this.machineShop ? machineShop_check = 1 : machineShop_check = 0
        this.productionLine ? productionLine_check = 1 : productionLine_check = 0
        this.region ? region_check = 1 : region_check = 0
        this.equipment ? equipment_check = 1 : equipment_check = 0
        var param = []
        param[0] = ['车间_check', machineShop_check]
        param[1] = ['车间', this.machineShop]
        param[2] = ['产线_check', productionLine_check]
        param[3] = ['产线', this.productionLine]
        param[4] = ['工序_check', region_check]
        param[5] = ['工序', this.region]
        param[6] = ['设备_check', equipment_check]
        param[7] = ['设备', this.equipment]
        param[8] = ['开始日期', this.dateRange[0]]
        param[9] = ['结束日期', this.dateRange[1]]
        var Data = this.CreateData('2001', '维修工单_预防维修_任务查询_导出', param)
        this.exportExcel_NPOI(Data)
        this.disabled1 = false
      } else {
        this.$message.warning('当前表无数据')
      }
    },
    createPlan() {
      this.disabled = true
      var param = []
      var Data = this.CreateData('12', '设备管理_预防维修_生成计划', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '生成成功',
            type: 'success'
          })
          this.searchTable()
          this.searchDate()
          this.disabled = false
        }
      })
    },
    searchDetails(row) {
      var param = []
      param[0] = ['设备代码', row.设备代码]
      param[1] = ['计划开始日期', row.计划开始日期]
      var Data = this.CreateData('11', '维修工单_预防维修_详情查询', param)
      ExecDatabase(Data).then(response => {
        this.tableData1 = response.data
      })
      this.dialogFormVisible = true
    },
    // 新建工单
    submitOrder(row) {
      var param = []
      if (this.machineValue === '') {
        this.$message.error('信息增加失败,重新选择设备')
      } else {
        param[0] = ['设备代码', row.设备代码]
        param[1] = ['申请人', this.id]
        param[2] = ['用户', this.cname]
        var Data = this.CreateData('12', '维修工单_计划检修_增加', param)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '下单成功',
              type: 'success'
            })
          }
        })
      }
    },
    tableHeaderColor() {
      return 'background-color: rgb(250, 250, 250);' +
        'height:20px;' +
        'border-bottom: 4px rgb(170, 170, 170) solid;color: rgb(35, 35, 35);' +
        'font-weight: 5000;' +
        'padding: 5px 10px'
    },
    tableColor() {
      return 'border-color: #E8E8E8;padding: 6px 0px 4px 0px'
    },
    tableColor1() {
      return 'border-color: #E8E8E8;padding: 7px 0px 5px 0px'
    },
    tableColor2() {
      return 'border-color: #E8E8E8;padding: 10px 0px 8px 0px'
    },
    // 获得车间
    searchMachineShop() {
      this.machineShops1 = []
      this.machineShop = ''
      var param = []
      var Data = this.CreateData('11', '设备管理_车间_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.machineShops1.push({
            label: v.车间,
            value: v.车间代码
          })
        })
      }).then(() => {
      })
    },
    // 获得产线
    searchProductionLine() {
      this.productionLines1 = []
      this.productionLine = ''
      this.regions1 = []
      this.region = ''
      this.equipments = []
      this.equipment = ''
      var param = []
      param[0] = ['车间代码', this.machineShop]
      var Data = this.CreateData('11', '设备管理_产线_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.productionLines1.push({
            label: v.产线名称,
            value: v.产线代码
          })
        })
      }).then(() => {
      })
    },
    // 获得工序
    searchRegion() {
      this.regions1 = []
      this.region = ''
      this.equipments = []
      this.equipment = ''
      var param = []
      param[0] = ['产线代码', this.productionLine]
      var Data = this.CreateData('11', '设备管理_工序_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.regions1.push({
            label: v.工序名称,
            value: v.工序代码
          })
        })
      }).then(() => {
      })
    },
    // 获得设备
    searchEquipment() {
      this.equipments = []
      this.equipment = ''
      var param = []
      param[0] = ['工序代码', this.region]
      var Data = this.CreateData('11', '基础数据_设备列表_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.equipments.push({
            name: v.设备名称,
            label: v.设备编号,
            value: v.设备代码
          })
        })
      }).then(() => {
      })
    },
    // 查询
    searchTable() {
      if (this.dateRange) {
        this.loading = true
        let machineShop_check, productionLine_check, region_check, equipment_check
        this.machineShop ? machineShop_check = 1 : machineShop_check = 0
        this.productionLine ? productionLine_check = 1 : productionLine_check = 0
        this.region ? region_check = 1 : region_check = 0
        this.equipment ? equipment_check = 1 : equipment_check = 0
        var param = []
        param[0] = ['车间_check', machineShop_check]
        param[1] = ['车间', this.machineShop]
        param[2] = ['产线_check', productionLine_check]
        param[3] = ['产线', this.productionLine]
        param[4] = ['工序_check', region_check]
        param[5] = ['工序', this.region]
        param[6] = ['设备_check', equipment_check]
        param[7] = ['设备', this.equipment]
        param[8] = ['开始日期', this.dateRange[0]]
        param[9] = ['结束日期', this.dateRange[1]]
        var Data = this.CreateData('11', '维修工单_预防维修_任务查询', param, this.pageSize, this.pageCurrent)
        ExecDatabase(Data).then(response => {
          this.tableData = response.data.rows
          this.total = response.data.total
          this.loading = false
        })
      } else {
        this.$message.warning('请选择日期')
      }
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

<style scoped>
  .machine-divider {
    margin: 5px 0;
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
  .div {
    width: 220px;
    height:45px;
    margin-top: 0px;
    border-bottom: rgb(220,220,220) solid 2px
  }
  >>>.el-form--label-top .el-form-item__label {
    padding: 0px;
  }
  >>>.el-dialog__body {
    padding: 0px 30px;
    color: #606266;
    font-size: 20px;
    word-break: break-all;
  }
  >>>.el-tabs__item {
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 50px;
  }
  /*搜索框*/
  .input1 >>> .el-input__inner{
    height: 50px;
    border-radius: 0px;
  }
  /*只有下边框*/
  .input2 >>> .el-input__inner{
    height: 40px;
    border-radius: 0px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    background: #ffffff;
  }
  .el-form-item {
    margin-bottom: 18px;
  }
  .el-range-editor.el-input__inner {
    padding: 9px 10px;
  }
</style>

