<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">订单号：</span>
        <el-input v-model="orderCode" placeholder="请输入订单号" clearable size="small" style="width: 150px"/>
        <span style="margin-left: 10px">产品型号：</span>
        <el-select v-model="engineTypeValue" placeholder="请选择产品型号" clearable size="small" style="width: 150px">
          <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="statePlanValue" placeholder="请选择状态" clearable size="small" style="width: 150px">
          <el-option v-for="item in statePlan" :key="item.value" :label="item.label" :value="item.value" size="mini"/>
        </el-select>
        <span style="margin-left: 10px">计划日期：</span>
        <el-date-picker
          v-model="importTime"
          size="small"
          type="daterange"
          align="center"
          style="width: 240px;"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="～"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
        <!--        <span style="margin-left: 10px">下达时间：</span>-->
        <!--        <el-date-picker-->
        <!--          v-model="releaseTime"-->
        <!--          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 = 30;
            pageCurrent = 1;
            searchOrder();
          ">查询
        </el-button>
        <!--        <el-button type="distribution" size="small" icon="el-icon-top" @click="topOrder()">上移</el-button>-->
        <!--        <el-button type="distribution" size="small" icon="el-icon-bottom" @click="downOrder()">下移</el-button>-->
        <!--        <el-button type="distribution" size="small" icon="el-icon-error" @click="stopOrder()">禁用</el-button>-->
        <!--        <el-button type="distribution" size="small" icon="el-icon-check" @click="startOrder">启用</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="700px"
        border
        size="mini">
        <!--        <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
        <!--<el-table-column align="center" width="80px" label="排序">-->
        <!--  <template slot-scope="scope">-->
        <!--    {{ scope.row.排序 }}-->
        <!--  </template>-->
        <!--</el-table-column>-->
        <el-table-column type="index" width="80px" label="序号" align="center" />
        <el-table-column align="center" label="订单号">
          <template slot-scope="scope">
            {{ scope.row.订单号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="120px" 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="装配方式" width="80px">
          <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" width="80px" label="动侧盆子">
          <template slot-scope="scope">
            {{ scope.row['50分线'] == 1 ? '已绑定' : '未绑定' }}
          </template>
        </el-table-column>
        <el-table-column align="center" width="80px" label="静侧盆子">
          <template slot-scope="scope">
            {{ scope.row['80分线'] == 1 ? '已绑定' : '未绑定' }}
          </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" label="计划开始时间" width="150">
          <template slot-scope="scope">
            {{ scope.row.计划开始时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="计划完成时间" width="150">
          <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="150">
          <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="260">
          <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>-->
            <el-button size="mini" type="text" icon="el-icon-edit" @click="updateShellCode(scope.row)">修改壳体码</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="clickEditBind(scope.row)">修改绑定</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="clickWorkOver(scope.row)">强制完工</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="stopOrder(scope.row)">删除</el-button>
            <!--            <el-button-->
            <!--              size="mini"-->
            <!--              type="text"-->
            <!--              icon="el-icon-check"-->
            <!--              @click="startOrder(scope.row)">启用</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          v-if="!loading"
          :current-page="pageCurrent"
          :page-sizes="[30, 50, 100]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <el-dialog
      :visible.sync="isShowEditBindForm"
      title="修改盆子绑定状态"
      center
      style="min-height: 200px"
      width="400px">
      <el-form ref="form1" :model="editBindForm" label-position="right" label-width="110px">
        <el-form-item label="动侧盆子" prop="engineTypeValue" style="display: inline-block">
          <el-select v-model="editBindForm.bind50" placeholder="请选择动侧盆子绑定状态" size="small">
            <el-option
              v-for="item in bindStatus"
              :key="item.label"
              :label="item.label"
              :value="item.value"
              size="mini"/>
          </el-select>
        </el-form-item>
        <el-form-item label="静侧盆子" prop="engineTypeValue" style="display: inline-block">
          <el-select v-model="editBindForm.bind80" placeholder="请选择静侧盆子绑定状态" size="small">
            <el-option
              v-for="item in bindStatus"
              :key="item.label"
              :label="item.label"
              :value="item.value"
              size="mini"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="EditBindFormClear()">取消</el-button>
        <el-button type="primary" size="small" @click="EditBindFormSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 总数据数组
      orderCode: '', // 订单号
      engineTypeValue: '', // 产品型号
      engineType: [], // 产品型号数组
      statePlan: [], // 计划状态数组
      statePlanValue: '', // 计划状态
      importTime: [], // 导入时间
      releaseTime: '', // 计划状态
      total: 0, // 总条数
      pageSize: 30, // 每页显示条数
      pageCurrent: 1, // 后台获取页
      mid: [], // id
      loading: false,
      MIDGroup: [],
      editBindForm: {
        id: null,
        bind80: null,
        bind50: null
      },
      bindStatus: [{
        label: '已绑定',
        value: 1
      }, {
        label: '未绑定',
        value: 0
      }],
      isShowEditBindForm: false
    }
  },
  created() {
    this.defaultDate()
    this.getStatePlan()
    this.getEndStation()
    this.searchOrder()
    console.log(this.$route)
  },
  methods: {
    defaultDate() {
      // 获取当前时间
      const date = new Date()
      // 获取当前时间的年份转为字符串
      const year = date.getFullYear().toString()
      // 获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
      const month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString() // '04'
      // 获取天，判断是否小于10，如果是在字符串前面拼接'0'
      const da =
        date.getDate() < 10
          ? '0' + date.getDate().toString()
          : date.getDate().toString() // '12'
      // 字符串拼接，开始时间，结束时间
      const end = year + '-' + month + '-' + da // 当天
      const beg = year + '-' + month + '-' + da // 当天
      this.importTime = [beg, end] // 将值设置给插件绑定的数据
    },
    // 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].订单计划状态代码
          })
        }
      })
    },

    // 查询订单
    searchOrder() {
      this.tableData = []
      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] = ['PageCurrent', this.pageCurrent]
      param[9] = ['PageSize', this.pageSize]
      param[10] = ['PageCount', '1111', 'int', '1']
      param[11] = ['ItemCount', '1111', 'int', '1']
      param[12] = ['订单状态_check', statePlan_check]
      param[13] = ['订单状态', this.statePlanValue]
      param[14] = ['订单号', this.orderCode]
      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
      })
    },
    // 关闭窗口按钮
    EditBindFormClear() {
      this.isShowEditBindForm = false
    },
    // 提交请求
    EditBindFormSubmit() {
      if (this.editBindForm.id) {
        var param = []
        param[0] = ['MID', this.editBindForm.id]
        param[1] = ['盆子50', this.editBindForm.bind50]
        param[2] = ['盆子80', this.editBindForm.bind80]
        var Data = this.CreateData(
          '12',
          '生产计划_派工订单_盆子绑定状态_修改',
          param
        )
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.pageCurrent = 1
            this.pageSize = 30
            this.searchOrder()
            this.isShowEditBindForm = false
          } else {
            this.$message.error('修改失败！')
          }
        })
      } else {
        this.$message.error('请选择订单！')
      }
    },
    // 修改绑定按钮
    clickEditBind(row) {
      console.log(row)
      this.editBindForm.id = row.MID
      this.editBindForm.bind50 = row['50分线']
      this.editBindForm.bind80 = row['80分线']
      this.isShowEditBindForm = true
    },
    // 修改壳体码
    updateShellCode(row){
      this.$prompt('请输入新壳体码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        var param = []
        param[0] = ['订单号', row.订单号]
        param[1] = ['壳体码', value]
        var Data = this.CreateData('12','生产计划_派工订单_修改壳体码', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.pageCurrent = 1
            this.pageSize = 30
            this.searchOrder()
            this.isShowEditBindForm = false
          } else {
            this.$message.error('修改失败！')
          }
        })
      })
    },
    // 上移订单
    topOrder(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 = 30
            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 = 30
            this.searchOrder()
          } else {
            this.$message.error('下移失败！')
          }
        })
      } else {
        this.$message.error('请选择订单！')
      }
    },
    // 禁用订单
    stopOrder(row) {
      if (row.MID) {
        this.$confirm('此操作将删除该订单号, 是否继续？请确认', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row.订单号)
          var param = []
          param[0] = ['订单号', row.订单号]
          console.log(param)
          var Data = this.CreateData(
            '11',
            '生产计划_派工订单_订单盆子上线状态_删除订单',
            param
          )
          this.ExecDatabase(Data).then(response => {
            console.log(response.data[0].result)
            if (response.data[0].result === 1) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.pageCurrent = 1
              this.pageSize = 30
              this.searchOrder()
            } else {
              this.$message.error('删除失败 有盆子已上线或存于库位中！')
            }
          })
        })
      } else {
        this.$message.error('请选择订单！')
      }
    },
    clickWorkOver(row){
      if (row.MID) {
        this.$confirm('此操作仅用于上线后未正常下线订单，请勿对未上线订单进行使用！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row.订单号)
          var param = []
          param[0] = ['订单号', row.订单号]
          console.log(param)
          var Data = this.CreateData(
            '11',
            '生产计划_派工订单_订单状态_强制完工',
            param
          )
          this.ExecDatabase(Data).then(response => {
            console.log(response.data[0].result)
            if (response.data[0].result === 1) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.pageCurrent = 1
              this.pageSize = 30
              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 = 30
            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 (Number(row.订单状态) === 1) {
        return 'is-putProduct'
      }
      if (Number(row.订单状态) === 3) {
        return 'is-Working'
      }
      if (Number(row.订单状态) === 4) {
        return 'is-complete'
      }
      return 'is-putProduct'
    },
    // 分页
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchOrder()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchOrder()
    }
  }
}
</script>
<style>
.el-table .is-putProduct {
  background: #fcfcfc !important;
}

.el-table .is-Working {
  background: #fff582 !important;
}

.el-table .is-complete {
  background: #00893d !important;
  color: white;
}
</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>
