<template>
  <div style="width: 100%; height: 100%; position: relative;">
    <el-row style=" width: 100%;height: 100%; background-color: #d7dee6">
      <el-row style="height: 50%;border: 0px solid #797979;padding: 0 3px">
        <el-table
            class="touch-scrollbar"
            :header-cell-style="{background:'#f9fbfe',padding: '3px 0', color: '#0b4db0'}"
            :data="processList_table"
            :row-style="setProcessListRowStyle"
            style="width: 100%; height: 100%;border-radius: 5px"
            height="100%"
            size="mini"
            tooltip-effect="dark"
        >
          <el-table-column align="center" width="60px" label="标记">
            <template #default="scope">
              <el-image :src="getStepFlag(scope.row.标记名称)" style="width: 20px;height: 20px;background-color: #fff" fit="contain">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"/>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" label="序号" width="70px">
            <template #default="scope">
              <div class="table-cell-text">
                {{ scope.$index+1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="主要步骤" width="200px">
            <template #default="scope">
              <div class="table-cell-text">
                {{ scope.row.操作内容 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="关键要素" width="250px">
            <template #default="scope">
              <div class="table-cell-text">
                {{ scope.row.技术要求 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="扭矩(Nm)" width="100px" >
            <template slot-scope="scope">
              <div style="white-space: pre-line !important;">{{ scope.row.扭矩 }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="等级" width="100px" >
            <template slot-scope="scope">
              <div style="white-space: pre-line !important;">{{ scope.row.等级 }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="选装代码" width="100px" >
            <template slot-scope="scope">
              <div style="white-space: pre-line !important;">{{ scope.row.选装代码 }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量" width="100px" >
            <template slot-scope="scope">
              <div style="white-space: pre-line !important;">{{ scope.row.数量 }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="辅料号" width="100px" >
            <template slot-scope="scope">
              <div style="white-space: pre-line !important;">{{ scope.row.辅料号 }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="辅料名称" width="100px" >
            <template slot-scope="scope">
              <div style="white-space: pre-line !important;">{{ scope.row.辅料名称 }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="工夹具名称" width="120px" >
            <template slot-scope="scope">
              <div style="white-space: pre-line !important;">{{ scope.row.工夹具名称 }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="工夹具型号/序列号" width="150px" >
            <template slot-scope="scope">
              <div style="white-space: pre-line !important;">{{ scope.row.工夹具型号_序列号 }}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row style="height: 50%;">
        <el-col :span="16" style="height: 100%;border: 0px solid #797979;width: calc(100% - 315px)">
          <div style="height: 25px;display: flex;align-items: center;justify-content: flex-start">
            <img :src="require('@/assets/image/metrial.png')" height="20px" style="margin: 0 3px;" />
            <span style="color: #13227a;font-size: 1rem">{{ showMaterialList ? '物料列表' : '4M管理' }}</span>
            <span style="color: #A8B8CC;font-size: 0.8rem;padding: 0 10px 0 0;margin-left: auto;">{{ showMaterialList ? 'Material List' : '4M Management' }}</span>
          </div>
          <div style="height: calc(100% - 25px);padding: 0 3px 3px 3px">
            <!-- 显示物料列表 -->
            <el-table
                v-if="showMaterialList"
                :cell-class-name="cellClassName"
                :data="materialList_table"
                :header-cell-style="{background:'#f9fbfe',padding: '3px 0', color: '#0b4db0'}"
                style="width: 100%; border-radius: 5px;"
                stripe
                size="mini"
                height="100%"
                tooltip-effect="dark"
            >
              <el-table-column align="center" label="#" show-overflow-tooltip type="index" width="40px"/>
              <el-table-column align="center" label="物料号" width="120px">
                <template #default="scope">
                  {{ scope.row.物料号 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="物料名称">
                <template #default="scope">
                  {{ scope.row.零件名称 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="用量" width="75px">
                <template #default="scope">
                  {{ scope.row.零件数量 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="物料条码" min-width="100px">
                <template #default="scope">
                  {{ scope.row.物料条码 }}
                </template>
              </el-table-column>
            </el-table>
            <!-- 显示4M列表 -->
            <el-table
                v-else
                :data="fourMList_table"
                :header-cell-style="{background:'#f9fbfe',padding: '3px 0', color: '#0b4db0'}"
                style="width: 100%; border-radius: 5px;"
                stripe
                size="mini"
                height="100%"
                tooltip-effect="dark"
            >
              <el-table-column align="center" label="序号" width="80px">
                <template #default="scope">
                  {{ scope.row.序号 }}
                </template>
              </el-table-column>
              <el-table-column align="left" label="内容">
                <template #default="scope">
                  {{ scope.row.内容 }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="8" style="height: 100%;width: 315px">
          <log />
        </el-col>
      </el-row>
    </el-row>
    <el-dialog v-el-drag-dialog :append-to-body="true" :visible.sync="opNameInputDataVisible" center
               style="text-align: center" title="录入数据" width="415px">
      <div style="text-align: center">
        <el-form
            :model="opNameInputDataForm"
            label-position="right"
            label-width="100px"
            style="width: 100%;margin: auto"
        >
          <el-form-item label="数据类型" prop="engineTypeValue" style="text-align: right;width: 90%">
            <el-select v-model="opNameInputDataForm.dataType" placeholder="请选择数据类型" size="small"
                       @change="getOpNameInputDataList(2,$event)">
              <el-option
                  v-for="item in opNameInputDataTypeList"
                  :key="item"
                  :label="item"
                  :value="item"
                  size="mini"/>
            </el-select>
          </el-form-item>
          <el-form-item label="数据名称" prop="engineTypeValue" style="text-align: right;width: 90%">
            <el-select
                v-model="opNameInputDataForm.dataName"
                placeholder="请选择数据名称"
                size="small"
            >
              <el-option
                  v-for="item in opNameInputDataNameList"
                  :key="item"
                  :label="item"
                  :value="item"
                  size="mini"/>
            </el-select>
          </el-form-item>
          <el-form-item
              label="记录值"
              prop="engineTypeValue" style="width: 90%">
            <el-input v-model="opNameInputDataForm.dataValue" placeholder="请输入记录值" size="small"
                      style="width:200px;"/>
          </el-form-item>
          <!--底部按钮-->
          <div style="text-align: center; margin-top: 20px">
            <el-button class="el-icon-check" type="primary" @click="opNameInputDataSubmit()">确定</el-button>
            <el-button class="el-icon-close" style="margin-left: 50px" @click="opNameInputDataVisible = false">关闭
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog v-el-drag-dialog :append-to-body="true" :visible.sync="checkDataInputVisible" center
               style="text-align: center" title="录入检查项" width="750px">
      <div style="text-align: center">
        <el-form
            :model="opNameInputDataForm"
            label-position="right"
            label-width="300px"
            max-height="600px"
            style="width: 100%;overflow: auto"
        >
          <el-form-item
              :label="item.质检项分类 + '-' +item.质检项描述"
              prop="engineTypeValue" style="width: 90%" v-for="item in checkDataInputList" :key="item.ID">
            <el-input v-model="item.检验结果" :placeholder="item.符合标准及条例" size="small"
                      style="width:400px;"/>
          </el-form-item>
          <!--底部按钮-->
          <div style="text-align: center; margin-top: 20px;">
            <el-button class="el-icon-check" type="primary" @click="saveCheckInputDataList()">保存</el-button>
            <el-button class="el-icon-close" style="margin-left: 50px" @click="checkDataInputVisible = false">关闭
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Log from '@/views/Log/index.vue'
export default {
  components: {
    Log
  },
  data() {
    return {
      imageType: ['bmp', 'jpg', 'png', 'gif'],
      stepFlagList: [],
      picShow: [],
      MesWebCode: Number(this.$store.state.station.MesWebCode),
      file_is_show: true,
      fourMList_table: [],
      subscription: {
        topic: '',
        qos: 0
      },
      publication: {
        topic: '',
        qos: 0,
        payload: ''
      },
      imgCheckDialogFormVisible: false,
      opNameInputDataVisible: false,
      imgCheckDirectFileList: [],
      opNameInputDataTypeList: [],
      opNameInputDataNameList: [],
      opNameInputDataForm: {
        opName: '',
        order: '',
        engineID: '',
        engineType: '',
        dataType: '',
        dataName: '',
        dataValue: '',
        jobNumber: ''
      },
      checkButtonDisable: true,
      checkDataInputVisible: false,
      checkDataInputList: [],
      opNameType: 1, // 工位类型 0 手动工位 1 自动工位
      picList1: []
    }
  },
  created() {
    // 获取工位类型 根据不同类型切换显示界面
    this.getStepFlagInit()
    this.getOpNameType()
    this.getFourMList()
    this.picList1.push(this.pic)
    // console.log('this.$store.state.station.MesWebCode', this.$store.state.station.MesWebCode)
  },
  computed: {
    // ...mapState({
    //   processList_table: state => this.$store.state.operationGuide.processList_table
    // })
    ...mapGetters([
      'processList_table',
      'materialList_table',
      'pic',
      'picList',
      'tighteningPosition',
      'smile',
      'tempDataObject'
    ]),
    // 判断是否显示物料列表(true显示物料列表，false显示4M列表)
    showMaterialList() {
      // 当产品进站(状态3为1)时显示物料列表，否则显示4M列表
      const statusValue = this.$store.state.station.statusValue
      if (statusValue && statusValue[3]) {
        return statusValue[3].status == 1
      }
      return false
    }
  },
  watch: {
    // 监听变量数据的某个对象
    'tempDataObject.checkWorkOverIsShow': {
      handler(newV, oldV) {
        console.log('tempDataObject.checkWorkOverIsShow 发生了改变！！！！', newV)
        if (newV === 1) {
          this.checkButtonDisable = true
        } else if (newV === 0) {
          this.checkButtonDisable = false
        }
      },
      deep: true
    }
  },
  methods: {
    // 获取4M列表
    getFourMList() {
      this.fourMList_table = []
      var param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      var Data = this.CreateData('11', 'MES_4M管理_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.fourMList_table = response.data
        }
      }).catch(() => {
        console.log('4M列表查询失败')
      })
    },
    // 获取工步标记
    getStepFlagInit() {
      this.stepFlagList = []
      var param = []
      var Data = this.CreateData('11', '电子看板_工序内容_标记_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          const fileType = response.data[i]['图片类型']
          let fileContentImg = response.data[i]['产品图片']
          if (this.imageType.indexOf(fileType) !== -1) {
            fileContentImg = 'data:image/png;base64,' + fileContentImg
          }
          this.stepFlagList.push({
            fileContentImg: fileContentImg,
            label: response.data[i].标记名称,
            value: response.data[i].标记名称
          })
        }
      })
    },
    getStepFlag(stepFlag) {
      console.log(stepFlag)
      for (let i = 0; i < this.stepFlagList.length; i++) {
        if (this.stepFlagList[i].value === stepFlag) {
          return this.stepFlagList[i].fileContentImg
        }
      }
      return ''
    },
    getOpNameType() {
      var param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_工位类型_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.opNameType = response.data[0].工位类型
        }
      })
    },
    cellClassName({ row, column }) {
      if (parseInt(row.是否完成扫描物料条码) === 0 && column.label === '物料条码' && parseInt(row.物料验证) === 1) {
        return 'materialList-row'
      }
      if (parseInt(row.是否完成扫描物料条码) === 1 && column.label === '物料条码' && parseInt(row.物料验证) === 1) {
        return 'materialListOK-row'
      }
      if (parseInt(row.是否完成扫描物料条码) === 1 && column.label === '物料条码' && parseInt(row.物料验证) === 0) {
        return 'materialListBatch-row'
      }
      return ''
    },
    setProcessListRowStyle({ row, rowIndex }) {
      if (parseInt(row['工步状态']) === 1) {
        return {
          backgroundColor: '#03a9f4', // 正在进行的
          color: '#fff'
        }
      }
      if (parseInt(row['工步状态']) === 2) {
        return {
          backgroundColor: '#00893d', // 完成的
          color: '#fff'
        }
      }
      // 未进行的
      return {}
    },
    outLineOpNameWorkOver() {
      const statusValue = this.$store.state.station.statusValue
      if (!statusValue || !statusValue[6] || statusValue[6].status === 0) {
        this.$message({
          type: 'warning',
          message: '请在允许工作后再进行此操作！'
        })
        return
      }
      this.$confirm(`请确认是否生产完成，完成后不可重新录入该工件数据`, '提示', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['工位号', this.$store.state.station.stationNumber]
        var Data = this.CreateData('11', '电子看板_工序内容_临时表_填写项_校验', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === 1) {
            this.publication.topic = window.g.mqttPublishTopic
            this.publication.payload = 'WEB|outLineOpNameWorkOver|' + this.$store.state.station.stationNumber + '|' + 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
              })
            }
          } else {
            this.$message.error(response.data[0].msg)
          }
        })
      })
    },
    checkWorkOver() {
      const statusValue = this.$store.state.station.statusValue
      if (!statusValue || !statusValue[6] || statusValue[6].status === 0) {
        this.$message({
          type: 'warning',
          message: '请在允许工作后再进行此操作！'
        })
        return
      }
      this.$confirm(`请确认检查项是否都检查完成，请确认后放行工件`, '提示', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['工位号', this.$store.state.station.stationNumber]
        var Data = this.CreateData('11', '电子看板_工序内容_临时表_填写项_校验', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === 1) {
            this.publication.topic = window.g.mqttPublishTopic
            this.publication.payload = 'WEB|checkWorkOver|' + this.$store.state.station.stationNumber + '|' + 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
              })
            }
          } else {
            this.$message.error(response.data[0].msg)
          }
        })
      })
    },
    selectOrderForm(EngineID) {
      if (EngineID) {
        this.publication.topic = window.g.mqttPublishTopic
        this.publication.payload = 'WEB|SelectOrderForm|' + this.$store.state.station.stationNumber + '|' + EngineID
        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
          })
        }
      } else {
        this.$notify.error({
          title: '提示',
          message: '请选择工件编号再发送！',
          position: 'bottom-right',
          offset: 170
        })
      }
    },
    // 查询
    getOpNameInputDataList(type, dataType = null) {
      const statusValue = this.$store.state.station.statusValue
      if (!statusValue || !statusValue[3] || statusValue[3].status !== 1) {
        this.$message({
          type: 'warning',
          message: '当前无工作中工件，请在传递机型后再进行此操作！'
        })
        return
      }

      if (!this.$store.state.station.engineValue.EngineID) {
        this.$message({
          type: 'warning',
          message: '请确认工位当前存在工件，工件信息完善！'
        })
        return
      }

      if (type === 1) {
        this.opNameInputDataTypeList = []
      } else {
        this.opNameInputDataNameList = []
      }
      var param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      param[1] = ['数据类型', dataType]
      param[2] = ['type', type]
      var Data = this.CreateData('11', 'MES_工位手动录入_基本表_工位_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (const item of response.data) {
            if (type === 1) {
              this.opNameInputDataTypeList.push(item.Value)
            } else if (type === 2) {
              this.opNameInputDataNameList.push(item.Value)
            }
          }
          this.opNameInputDataVisible = true
        } else {
          this.$message.error('该工位无工位录入项，请在管理系统中添加后再试！')
        }
      })
    },
    // 检查项录入
    getCheckDataInput() {
      const statusValue = this.$store.state.station.statusValue
      if (!statusValue || !statusValue[3] || statusValue[3].status !== 1) {
        this.$message({
          type: 'warning',
          message: '当前无工作中工件，请在传递机型后再进行此操作！'
        })
        return
      }

      if (!this.$store.state.station.engineValue.EngineID) {
        this.$message({
          type: 'warning',
          message: '请确认工位当前存在工件，工件信息完善！'
        })
        return
      }

      var param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      var Data = this.CreateData('11', '电子看板_工序内容_临时表_填写项_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.checkDataInputVisible = true
          this.checkDataInputList = response.data
        } else {
          this.checkDataInputList = []
          this.$message.error('该工件无录入项或已提交录入结果！')
        }
      })
    },
    // 提交修改
    opNameInputDataSubmit() {
      const statusValue = this.$store.state.station.statusValue
      if (!statusValue || !statusValue[3] || statusValue[3].status !== 1) {
        this.$message({
          type: 'warning',
          message: '当前无工作中工件，请在传递机型后再进行此操作！'
        })
        return
      }
      if (!this.opNameInputDataForm.dataType || !this.opNameInputDataForm.dataName || !this.opNameInputDataForm.dataValue) {
        this.$message({
          type: 'warning',
          message: '请将信息填写完善后再进行保存！'
        })
        return
      }

      if (!this.$store.state.station.engineValue.EngineID) {
        this.$message({
          type: 'warning',
          message: '请确认工位当前存在工件，工件信息完善！'
        })
        return
      }

      var param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      param[1] = ['订单号', this.$store.state.station.engineValue.OrderForm]
      param[2] = ['工件编号', this.$store.state.station.engineValue.EngineID]
      param[3] = ['机型', this.$store.state.station.engineValue.EngineType]
      param[4] = ['数据类型', this.opNameInputDataForm.dataType]
      param[5] = ['数据名称', this.opNameInputDataForm.dataName]
      param[6] = ['记录值', this.opNameInputDataForm.dataValue]
      param[7] = ['操作者工号', this.$store.state.station.stationUserCount]
      var Data = this.CreateData('12', 'MES_工位手动录入_记录表_增加', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.opNameInputDataVisible = false
        } else {
          this.$message.error('保存失败，请确认当前工件信息是否完善')
        }
      })
    },
    // 保存检验项列表数据
    saveCheckInputDataList() {
      for (const item of this.checkDataInputList) {
        var param = []
        param[0] = ['ID', item.ID]
        param[1] = ['检验结果', item.检验结果]
        var Data = this.CreateData('12', '电子看板_工序内容_临时表_填写项_保存', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result !== '1') {
            this.$message.error('保存数据失败！')
          }
        })
      }
      this.$message.success('保存成功！')
      this.checkDataInputVisible = false
    },
    onmessage(message) {
      this.content = this.content + message.data + '\r'
      // 获取滚动信息  注意是两个codemirror.codemirror
      const sc = this.$refs.codemirror.codemirror.getScrollInfo()
      // 滚动 注意是两个codemirror.codemirror
      this.$refs.codemirror.codemirror.scrollTo(sc.left, (sc.height + sc.top))
    }
  }
}
</script>

<style scoped>
::v-deep.el-table .materialList-row {
  background: rgba(255, 255, 0, 0.5) !important;
}
::v-deep.el-table .el-table__body .materialListOK-row {
  background: rgb(0, 137, 61) !important;
  color: #fff !important;
}
::v-deep.el-table .el-table__body .materialListBatch-row {
  background: #03a9f4 !important;
  color: #fff !important;
}
::v-deep.el-table .el-table__cell {
  padding: 3px 0;
}
::v-deep.el-table .el-table__row .cell {
  font-size: 0.8rem !important;
}

::v-deep.el-table th.el-table__cell > .cell {
  font-size: 0.9rem;
}
.table-cell-text {
  white-space:pre-line;
  margin-top: -1.6em;
  font-size: 0.8rem;
  font-weight: bolder
}
</style>
<style scoped>
/* 触摸屏专用 - 加宽表格滚动条 */
.touch-scrollbar >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 22px !important; /* 加宽右侧滚动条，便于触摸点击 */
  height: 22px !important;
}
.touch-scrollbar >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important;
  border: 6px solid transparent !important; /* 增加可抓取面积同时保持视觉舒适 */
  background-clip: content-box !important;
  -webkit-box-shadow: none !important;
}
.touch-scrollbar >>> .el-table__body-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  -webkit-box-shadow: none !important;
}
.touch-scrollbar >>> .el-table__body-wrapper::-webkit-scrollbar-button {
  display: none !important;
}
</style>
