<template>
  <div class="app-container">
    <el-card class="topCard">
      <span style="font-size: 1rem">订单号：</span>
      <el-input v-model="order" size="small" clearable style="width: 200px" />
      <span style="font-size: 1rem;margin-left: 15px">生产日期：</span>
      <el-date-picker
        v-model="orderStartDate"
        clearable
        size="small"
        type="daterange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        style="width: 220px"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="getTable" />
      <el-button
        type="success"
        size="small"
        icon="el-icon-search"
        style="margin-left: 15px"
        @click="getTable">查询订单</el-button>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-add"
        style="margin-left: 15px"
        @click="orderAdd">新增订单</el-button>
      <div style="margin-top: 5px">
        <el-table
          :data="orderCompletion_table1"
          :header-cell-style="{ background: '#F5F5F5', fontSize: '24px' }"
          style="width: 90%; border: 1px solid #9e9b9b"
          border
          height="690px"
          tooltip-effect="dark">
          <el-table-column type="index" align="center" label="序号" width="80px" />
          <el-table-column align="center" label="订单号">
            <template slot-scope="scope">
              {{ scope.row.订单号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="机型代码" width="120">
            <template slot-scope="scope">
              {{ scope.row.机型代码 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品型号" width="120">
            <template slot-scope="scope">
              {{ scope.row.产品型号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划数量" width="100">
            <template slot-scope="scope">
              {{ scope.row.计划数量 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划开始时间" width="150">
            <template slot-scope="scope">
              {{ scope.row.计划开始时间 ? scope.row.计划开始时间.substring(0, 10) : '' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划完成时间" width="150">
            <template slot-scope="scope">
              {{ scope.row.计划完成时间 ? scope.row.计划完成时间.substring(0, 10) : '' }}
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="订单状态" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.订单状态 === 1" size="mini" type="info">未开始</el-tag>
              <el-tag v-else-if="scope.row.订单状态 === 2" size="mini" type="warning">已开始</el-tag>
              <el-tag v-else-if="scope.row.订单状态 === 3" size="mini" type="success">已完成</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="下发时间" width="180">
            <template slot-scope="scope">
              {{ scope.row.下发时间 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否执行" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.是否执行 === 1" size="mini" type="success">执行中</el-tag>
              <el-tag v-else size="mini" type="info">未执行</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="350">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.是否下发 === 0"
                size="mini"
                type="text"
                icon="el-icon-bottom"
                @click="orderWork(scope.row, 1)">
                下发计划
              </el-button>
              <el-button
                v-if="scope.row.是否下发 === 1"
                :disabled="scope.row.订单状态 != 1"
                size="mini"
                type="text"
                icon="el-icon-top"
                @click="orderWork(scope.row, 0)">
                取消下发
              </el-button>
              <el-button
                v-if="scope.row.是否执行 === 0 && scope.row.是否下发 === 1"
                size="mini"
                type="text"
                icon="el-icon-video-play"
                style="color: #67c23a"
                @click="orderExecute(scope.row, 1)">
                开始执行
              </el-button>
              <el-button
                v-if="scope.row.是否执行 === 1"
                size="mini"
                type="text"
                icon="el-icon-video-pause"
                style="color: #e6a23c"
                @click="orderExecute(scope.row, 0)">
                取消执行
              </el-button>
              <el-button
                :disabled="scope.row.是否下发 != 0 || scope.row.订单状态 != 1"
                size="mini"
                type="text"
                icon="el-icon-delete"
                style="color: #ff0000"
                @click="orderDeleteSubmit(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!--    新增订单 -->
    <el-dialog :visible.sync="orderAddDialogVisible" :append-to-body="true" title="新增订单" center width="800px">
      <el-form
        ref="orderAddForm"
        :model="orderAddForm"
        :rules="orderAddRules"
        label-position="center"
        label-width="110px"
        class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单号" prop="orderCode">
              <el-input v-model="orderAddForm.orderCode" size="small" clearable style="width:200px" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品型号" prop="productCode">
              <el-select v-model="orderAddForm.productCode" size="small" placeholder="请选择产品型号" style="width: 200px;">
                <el-option v-for="item in productTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划开始时间" prop="planStartDate">
              <el-date-picker
                v-model="orderAddForm.planStartDate"
                :clearable="false"
                type="date"
                size="small"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width:200px" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束时间" prop="planEndDate">
              <el-date-picker
                v-model="orderAddForm.planEndDate"
                :clearable="false"
                type="date"
                size="small"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width:200px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生产数量" prop="orderCount">
              <el-input-number v-model="orderAddForm.orderCount" :min="1" :step="1" size="small" style="width:200px" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="orderAddCancel('orderAddForm')">取消</el-button>
        <el-button type="primary" size="small" @click="orderAddSubmit('orderAddForm')">确定</el-button>
      </div>
    </el-dialog>
    <!--    编辑订单 -->
    <el-dialog :visible.sync="orderEditDialogVisible" :append-to-body="true" title="编辑订单" center width="400px">
      <el-form
        ref="orderEditForm"
        :model="orderEditForm"
        :rules="orderEditRules"
        label-position="center"
        label-width="110px"
        class="demo-ruleForm">
        <el-form-item label="订单号" prop="orderCode">
          <el-input v-model="orderEditForm.orderCode" size="small" disabled style="width:200px" />
        </el-form-item>
        <el-form-item label="产品型号" prop="EngineType">
          <el-select
            v-model="orderEditForm.EngineTypeID"
            size="small"
            disabled
            placeholder="请选择产品型号"
            style="width: 200px;">
            <el-option v-for="item in productTypes" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="生产数量" prop="orderCount">
          <el-input-number v-model="orderEditForm.orderCount" :min="1" :step="1" size="small" style="width:200px" />
        </el-form-item>
        <el-form-item label="生产日期" prop="orderDate">
          <el-date-picker
            v-model="orderEditForm.orderDate"
            :clearable="false"
            type="date"
            size="small"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width:200px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="orderEditCancel('orderEditForm')">取消</el-button>
        <el-button type="primary" size="small" @click="orderEditSubmit('orderEditForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getNowTime2 } from '@/utils/tool'
export default {
  data() {
    return {
      orderAddDialogVisible: false,
      orderEditDialogVisible: false,
      orderAddRules: {
        orderCode: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
        productCode: [{ required: true, message: '请选择产品型号', trigger: 'change' }],
        planStartDate: [{ required: true, message: '请选择计划开始时间', trigger: 'change' }],
        planEndDate: [{ required: true, message: '请选择计划结束时间', trigger: 'change' }],
        orderCount: [{ required: true, message: '请输入计划数量', trigger: 'blur' }]
      },
      orderAddForm: {
        orderCode: '',
        orderCount: '',
        productCode: '',
        planStartDate: '',
        planEndDate: ''
      },
      orderEditRules: {
        orderCount: [{ required: true, message: '请输入计划数量', trigger: 'blur' }],
        orderDate: [{ required: true, message: '请选择生产日期', trigger: 'blur' }]
      },
      orderEditForm: {
        orderCode: '',
        orderCount: '',
        orderDate: ''
      },
      productTypes: [],
      checked: false,
      Type: [{ label: '', value: '' }],
      count: true,
      order: '',
      orderStartDate: [],
      intdex: true,
      xianshou: '',
      expandsDetail: [],
      orderCompletion_table1: [],
      tableDataPrintDetail: [],
      PersonaSex: [],
      jixingName: [],
      Sex: [],
      title: '',
      publication: {
        topic: '',
        qos: 0,
        payload: ''
      },
      dialogFormVisible1: false,
      form1: {
        订单号: '',
        产品型号: '',
        零件号: '',
        计划数量: '',
        完成数量: '',
        计划时间: '',
        状态: ''
      },
      rules: {
        排序: [{ required: true, message: '序号为空', trigger: 'change' }],
        订单号: [{ required: true, message: '订单号为空', trigger: 'change' }],
        产品机型: [{ required: true, message: '产品机型为空', trigger: 'change' }],
        零件号: [{ required: true, message: '机型代码为空', trigger: 'change' }],
        计划数量: [{ required: true, message: '计划数量为空', trigger: 'change' }],
        完成数量: [{ required: true, message: '完成数量为空', trigger: 'change' }],
        计划时间: [{ required: true, message: '计划时间为空', trigger: 'change' }],
        状态: [{ required: true, message: '状态为空', trigger: 'change' }]
      }
    }
  },
  created() {
    // 日期范围默认为空，用户可选择输入
    this.orderStartDate = null
    this.getProductType()
  },
  mounted() {
    this.getTable()
  },
  methods: {
    getProductType() {
      const param = []
      this.productTypes = []
      const Data = this.CreateData('11', 'CATL_基础_整机_产品代码_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.productTypes.push({
            label: response.data[i]['产品名称'],
            value: response.data[i]['产品代码']
          })
        }
      })
    },
    // 订单下发
    orderWork(row, flag) {
      let msg = ``
      let msg1 = ``
      if (flag === 1) {
        msg = `是否下发订单：【${row.订单号}】`
        msg1 = `下发订单`
      }
      if (flag === 0) {
        msg = `是否取消下发订单：【${row.订单号}】`
        msg1 = `取消下发`
      }
      this.$confirm(msg, msg1, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = []
        param[0] = ['订单号', row.订单号]
        param[1] = ['下发标识', flag]
        const Data = this.CreateData('12', 'CATL_生产计划_计划下发', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data.length > 0) {
            if (response.data[0]['result'] === '1') {
              if (flag === 1) {
                this.$message.success('订单下发成功！')
              }
              if (flag === 0) {
                this.$message.success('取消下发成功！')
              }
            } else {
              this.$message.error('订单下发失败！')
            }
            this.getTable()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作！'
        })
      })
    },
    // 订单执行/取消执行
    orderExecute(row, flag) {
      let msg = ``
      let msg1 = ``
      if (flag === 1) {
        msg = `是否开始执行订单：【${row.订单号}】`
        msg1 = `开始执行`
      }
      if (flag === 0) {
        msg = `是否取消执行订单：【${row.订单号}】`
        msg1 = `取消执行`
      }
      this.$confirm(msg, msg1, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = []
        param[0] = ['MID', row.MID]
        param[1] = ['执行状态', flag]
        const Data = this.CreateData('12', '生产计划_派工订单_执行', param)
        this.ExecDatabase(Data).then(response => {
          if (flag === 1) {
            this.$message.success('订单开始执行！')
          } else {
            this.$message.success('已取消执行！')
          }
          this.getTable()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作！'
        })
      })
    },
    orderAdd() {
      if (this.$refs.orderAddForm) {
        this.$refs.orderAddForm.resetFields()
      }
      const today = getNowTime2()
      this.orderAddForm.orderCount = 1
      this.orderAddForm.planStartDate = today
      this.orderAddForm.planEndDate = today
      this.orderAddDialogVisible = true
    },
    // 新增订单提交
    orderAddSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = []
          param[0] = ['订单号', this.orderAddForm.orderCode]
          param[1] = ['机型代码', this.orderAddForm.productCode]
          param[2] = ['计划数量', this.orderAddForm.orderCount]
          param[3] = ['计划开始时间', this.orderAddForm.planStartDate]
          param[4] = ['计划完成时间', this.orderAddForm.planEndDate]
          const Data = this.CreateData('11', 'CATL_生产计划_增加', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data.length > 0) {
              if (response.data[0].result === 1) {
                this.$message.success(response.data[0]['msg'])
                this.orderAddDialogVisible = false
                this.getTable()
              } else {
                this.$message.error(response.data[0]['msg'])
              }
            } else {
              this.$message.error('新增订单失败！')
            }
          })
        }
      })
    },
    //  新增订单取消
    orderAddCancel(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.orderAddDialogVisible = false
    },
    orderEdit(row) {
      this.orderEditForm.orderCode = row.订单号
      this.orderEditForm.EngineType = row.机型号
      this.orderEditForm.EngineTypeID = row.机型ID
      this.orderEditForm.orderCount = row.数量
      this.orderEditForm.orderDate = row.上线日期
      this.orderEditDialogVisible = true
    },
    // 编辑订单提交
    orderEditSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = []
          param[0] = ['订单号', this.orderEditForm.orderCode]
          param[1] = ['上线日期', this.orderEditForm.orderDate]
          param[2] = ['数量', this.orderEditForm.orderCount]
          param[3] = ['上线序号', 1]
          param[4] = ['操作者', this.$store.state.user.name]
          const Data = this.CreateData('11', 'CATL_生产计划_修改', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data.length > 0) {
              if (response.data[0].result === 1) {
                this.$message.success(response.data[0]['msg'])
                this.orderEditDialogVisible = false
                this.getTable()
              } else {
                this.$message.error(response.data[0]['msg'])
              }
            } else {
              this.$message.error('修改订单失败！')
            }
          })
        }
      })
    },
    //  编辑订单取消
    orderEditCancel(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.orderEditDialogVisible = false
    },
    // 删除订单提交
    orderDeleteSubmit(row) {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = []
        param[0] = ['订单号', row.订单号]
        const Data = this.CreateData('11', 'CATL_生产计划_删除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data.length > 0) {
            if (response.data[0].result === 1) {
              this.$message.success(response.data[0]['msg'])
              this.getTable()
            } else {
              this.$message.error(response.data[0]['msg'])
            }
          } else {
            this.$message.error('修改订单失败！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    tableRowClassName({ row }) {
      if (row.上线状态 === 1) {
        return 'success-row'
      }
    },
    getQualityData(row) {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      param[1] = ['发动机号', row.发动机号]
      const Data = this.CreateData('11', '测量数据合格_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.qualityData = response.data
      })
    },
    changeRadio() {
      if (this.checked) {
        this.intdex = false
        if (this.xianshou === 1) {
          this.count = true
        }
      } else if (!this.checked) {
        this.intdex = true
        if (this.xianshou === 1) {
          this.count = false
        }
      }
    },
    cancel() {
      this.dialogFormVisible1 = false
    },
    confirm11(form) {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      param[1] = ['订单号', this.form1.订单号]
      const Data2 = this.CreateData('12', '测量数据工位_监控系统_订单号_增加', param)
      this.ExecDatabase(Data2).then(response => {
        if (response.data[0].result === '1') {
          this.$notify.success({
            title: '提示',
            message: '订单选择成功！',
            position: 'bottom-right',
            offset: 170
          })
        } else {
          this.$message.error('订单选择失败')
        }
        this.getTable()
      })
      // this.publication.topic = window.g.mqttPublishTopic
      // this.publication.payload  = 'WEB|SetMoby|' + this.$store.state.station.stationName + '|' + '1'
      // const result = window.g.mqttClient.doPublish(this.publication)
      // if (result === true) {
      //   this.$notify.success({
      //     title: '提示',
      //     message: '订单增加传递成功！',
      //     position: 'bottom-right',
      //     offset: 170
      //   })
      // } else {
      //   this.$notify.error({
      //     title: '提示',
      //     message: '订单增加传递失败！',
      //     position: 'bottom-right',
      //     offset: 170
      //   })
      // }
      this.dialogFormVisible1 = false
    },
    getTable() {
      this.orderCompletion_table1 = []
      const param = []
      param[0] = ['订单号', this.order || '']
      param[1] = ['开始时间', this.orderStartDate && this.orderStartDate[0] ? this.orderStartDate[0] : '']
      param[2] = ['结束时间', this.orderStartDate && this.orderStartDate[1] ? this.orderStartDate[1] : '']
      param[3] = ['PageCurrent', 1]
      param[4] = ['PageSize', 1000]
      param[5] = ['PageCount', 1000, 'int', 'output']
      param[6] = ['ItemCount', 1000, 'int', 'output']
      const Data = this.CreateData('11', 'CATL_生产计划_分页_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.orderCompletion_table1 = response.data.result || response.data
      })
    },
    // 获取展开列的工单号
    getRowKeys(row) {
      return row.订单号
    },
    // 控制展开列
    selectPlan(row, expandedRows) {
      if (expandedRows.length) {
        this.expandsDetail = []
        if (row) {
          this.tableDataPrintDetail = []
          var param = []
          param[0] = ['订单号', row.订单号]
          var Data = this.CreateData('11', 'CATL_生产计划_执行计划_查询', param)
          this.ExecDatabase(Data).then(response => {
            console.log(response.data)
            if (response.data.length !== 0) {
              this.tableDataPrintDetail = response.data
            }
            this.expandsDetail.push(row.订单号)
          })
        }
      } else {
        this.expandsDetail = []
      }
    },
    choose(row) {
      if (this.qualityData) {
        this.qualityData = []
      }
      this.getQualityData(row)
      this.dialogFormVisible1 = true
    }
  }
}
</script>

<style scoped>
::v-deep.el-table .success-row {
  background-color: #7fe1e9;
}
</style>