<template>
  <div class="container" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="header">
      <el-input class="head-inp" placeholder="扫物料码/批次码" v-model="bm" clearable @clear='clearData()'>
      </el-input>
      <el-button @click="gxzjEventEvent" icon="el-icon-check" class="head-btn">确定</el-button>
    </div>
    <div class="content">
      <p class="form-item">
        <label class="form-item-label"><strong>*</strong>生产产线：</label>
        <el-select class="form-item-input" v-model="sccx" placeholder="请选择" @change="getscdd">
          <el-option v-for="item in sccxsz" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </p>
      <p class="form-item">
        <label class="form-item-label"><strong>*</strong>检测类型：</label>
        <el-select class="form-item-input" v-model="jclx" placeholder="请选择">
          <el-option v-for="item in jclxsz" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </p>
      <p class="form-item">
        <label class="form-item-label">物料名称：</label>
        <el-input class="form-item-input" placeholder="暂无数据" v-model="gxwl" readonly>
        </el-input>
      </p>
      <p class="form-item">
        <label class="form-item-label"><strong>*</strong>物料编码：</label>
        <el-input class="form-item-input" placeholder="暂无数据" v-model="wldh" readonly>
        </el-input>
      </p>
      <p class="form-item">
        <label class="form-item-label"><strong>*</strong>物料批次：</label>
        <el-input class="form-item-input" placeholder="暂无数据" v-model="wlpc" readonly>
        </el-input>
      </p>
      <p class="form-item">
        <label class="form-item-label">批次数量：</label>
        <el-input class="form-item-input" placeholder="暂无数据" v-model="pcsl" readonly>
        </el-input>
      </p>
      <p class="form-item">
        <label class="form-item-label">规格型号：</label>
        <el-input class="form-item-input" placeholder="暂无数据" v-model="ggxh" readonly>
        </el-input>
      </p>
      <p class="form-item">
        <label class="form-item-label"><strong>*</strong>生产订单：</label>
        <!-- <el-input class="form-item-input" placeholder="暂无数据" v-model="scdd" readonly>
        </el-input> -->
        <el-select class="form-item-input" v-model="scdd" placeholder="请选择">
          <el-option v-for="item in scddsz" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </p>
    </div>
    <div class="foot">
      <el-button @click="furtherEvent(false)" icon="el-icon-close">不合格</el-button>
      <el-button @click="furtherEvent(true)" icon="el-icon-check">合格</el-button>
    </div>
    <el-dialog center top="5vh" :visible.sync="dialogVisible" width="90%" :show-close="false"
      :close-on-click-modal="false">
      <div class="dialogMain">
        <p class="form-item">
          <label class="form-item-label"><strong>*</strong>原因：</label>
          <el-select filterable class="form-item-input" v-model="bhgyy" placeholder="请选择">
            <el-option v-for="item in bhgyysz" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </p>
        <p class="form-item">
          <label class="form-item-label"><strong>*</strong>处理：</label>
          <el-select class="form-item-input" v-model="bhgcl" placeholder="请选择">
            <el-option v-for="item in bhgclsz" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </p>
        <p class="form-item">
          <label class="form-item-label"><strong>*</strong>数量：</label>
          <el-input-number class="form-item-input" v-model="bhgsl" :min="1" label="描述文字"></el-input-number>
        </p>
        <p class="form-item">
          <label class="form-item-label">&nbsp;备注：</label>
          <el-input class="form-item-input textarea1" type="textarea" :rows="2" placeholder="请输入内容" v-model="bz">
          </el-input>
        </p>
        <p class="form-item pz">
          <label class="form-item-label form-item-lastlabel">&nbsp;拍照：</label>
          <el-switch class="form-item-input switch1" v-model="sfsctp" active-color="#13ce66" inactive-color="#0052c0">
          </el-switch>
        </p>
        <p v-if="sfsctp" class="form-item tp">
          <el-upload id="invoiceScan" ref="upload" :multiple="true" :auto-upload="false" :on-success="uploadSuccess"
            :before-upload="beforeUpload" :on-exceed="warningExceed" :limit="5" :data="uploadImgData" :action="action1"
            list-type="picture-card">
            <i class="el-icon-plus" />
          </el-upload>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="bhgclEvent" icon="el-icon-check" type="primary">确
          定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
//
import request from '@/utils/request'
var requestConfig = window.dt_Config.requestConfig
export default {
  created () {

  },
  mounted () {},
  data () {
    return {
      userInfo: null,
      pcsl: '',
      fullscreenLoading: false,
      action1: '',
      uploadImgData: {},
      sccx: '',
      sccxsz: [],
      gxwl: '',
      gdid: '',
      bm: '',
      jclx: '巡检',
      wldh: '',
      wlpc: '',
      ggxh: '',
      scdd: '',
      bhgyy: '',
      bhgcl: '',
      bhgsl: 1,
      bz: '',
      sfsctp: false,
      fileList: [],
      dialogVisible: false,
      scddsz: [],
      jclxsz: [ // 检测类型数组
        {
          label: '首检',
          value: '首检'
        }, {
          label: '巡检',
          value: '巡检'
        }, {
          label: '终检',
          value: '终检'
        }
      ],
      bhgyysz: [],
      bhgclsz: []
    }
  },
  methods: {
    init () {
      this.action1 = requestConfig
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.getcxlb()
    },
    clearData () {
      this.bm = ''
      this.sccx = ''
      this.jclx = '巡检'
      this.pcsl = ''
      this.scdd = ''
      this.gdid = ''
      this.gxwl = ''
      this.wldh = ''
      this.wlpc = ''
      this.ggxh = ''
      this.bhgyy = ''
      this.bhgcl = ''
      this.bhgsl = 1
      this.bz = ''
      this.sfsctp = false
    },
    getMqttMessage (newVal) {
      this.bm = newVal
      if (newVal) {
        if (!this.scdd) {
          this.$message({
            type: 'warning',
            message: '请选择生产订单',
            duration: 1000
          })
        } else {
          if (newVal.length === 10) {
            this.gxzjEvent(newVal, '')
          } else {
            this.gxzjEvent('', newVal)
          }
        }
      }
    },
    getscdd (val) {
      let data = {
        method: 'post',
        data: this.CreateData1('11', '质量管理_物料检测产线订单_查询', [
          ['产线id', val]
        ])
      }
      request(data).then(res => {
        let scddsz = []
        res.data.map(item => {
          item.label = item.工单号
          item.value = item.工单id
          scddsz.push(item)
        })
        this.scddsz = scddsz
        if (res.data.length > 0) {
          let idx = res.data.findIndex(tar => tar.工单状态 === 2)
          if (idx >= 0) {
            this.scdd = res.data[idx].工单id
          } else {
            this.scdd = res.data[0].工单id
          }
        } else {
          this.scdd = ''
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getcxlb () { // 获取生产产线
      let data = this.CreateData('Select', '基础表_产线名称', ['产线id', '产线名称'])
      const param = {
        method: 'post',
        data: data
      }
      this.fullscreenLoading = true
      request(param).then(res => {
        let sccxsz = []
        res.data.map(item => {
          sccxsz.push({
            label: item.产线名称,
            value: item.产线id
          })
        })
        this.sccxsz = sccxsz
        this.fullscreenLoading = false
      }).catch(err => {
        console.log(err)
        this.fullscreenLoading = false
        if (err.code === 'ERR_NETWORK' || err.code === 'ECONNABORTED') {
          this.$message({
            duration: 1000,
            type: 'error',
            message: '网络错误'
          })
        }
      })
    },
    uploadSuccess (res) { // 上传成功回调
      this.$refs.upload.clearFiles()
      this.clearData()
      this.dialogVisible = false
      this.$message({
        type: 'success',
        message: '操作成功',
        duration: 1000
      })
      this.fullscreenLoading = false
    },
    beforeUpload (file) { // 上传前检测
      const isJPG = /^image\/.*/.test(file.type)
      if (!isJPG) {
        this.$message({
          type: 'warning',
          message: '只能上传图片',
          duration: 1000
        })
      }
      return isJPG
    },
    warningExceed () {
      this.$message({
        type: 'warning',
        message: '仅可上传五张照片',
        duration: 1000
      })
    },
    getbhgclsz () { // 获取不合格处理数组
      return new Promise((resolve, reject) => {
        let data = this.CreateData('Select', '质量管理_不合格处理', ['不合格处理id', '不合格处理'])
        const param = {
          method: 'post',
          data: data
        }
        request(param).then(res => {
          let bhgclsz = []
          res.data.map(item => {
            bhgclsz.push({
              label: item.不合格处理,
              value: item.不合格处理id
            })
          })
          this.bhgclsz = bhgclsz
          resolve('')
        }).catch(err => {
          reject(err)
        })
      })
    },
    getbhgyysz () { // 获取不合格原因数组
      return new Promise((resolve, reject) => {
        let data = this.CreateData('Select', '质量管理_不合格原因', ['不合格原因id', '不合格原因', '代码'])
        const param = {
          method: 'post',
          data: data
        }
        request(param).then(res => {
          let bhgyysz = []
          res.data.map(item => {
            bhgyysz.push({
              label: item.不合格原因 + item.代码,
              value: item.不合格原因id
            })
          })
          this.bhgyysz = bhgyysz
          resolve('')
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**
       * 扫码确定
       */
    gxzjEventEvent () {
      if (!this.bm) {
        this.$message({
          type: 'warning',
          message: '请输入编码',
          duration: 1000
        })
        return
      }
      if (!this.scdd) {
        this.$message({
          type: 'warning',
          message: '请选择生产订单',
          duration: 1000
        })
        return
      }
      if (this.bm.length === 10) {
        this.gxzjEvent(this.bm, '')
      } else {
        this.gxzjEvent('', this.bm)
      }
    },
    async furtherEvent (val) { // 合格不合格事件
      if (this.jclx && this.sccx && this.scdd && this.wlpc && this.wldh) {
        if (val) { // 合格处理
          this.hgclEvent()
        } else { // 不合格处理
          this.fullscreenLoading = true
          try {
            await this.getbhgclsz()
            await this.getbhgyysz()
            if (this.pcsl && this.pcsl > 0) {
              this.bhgsl = JSON.parse(JSON.stringify(this.pcsl))
            }
            this.dialogVisible = true
          } catch (err) {
            if (err.code === 'ERR_NETWORK' || err.code === 'ECONNABORTED') {
              this.$message({
                duration: 1000,
                type: 'error',
                message: '网络错误'
              })
            }
          } finally {
            this.fullscreenLoading = false
          }
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请确保必要字段存在数据',
          duration: 1000
        })
      }
    },
    bhgclEvent () { // 不合格处理
      if (!this.bhgcl || !this.bhgyy) {
        this.$message({
          type: 'warning',
          message: '请选择不合格处理与不合格原因',
          duration: 1000
        })
        return
      }
      let param = []
      param[0] = ['检测人', this.$store.state.userInfo.人员编号]
      param[1] = ['备注', this.bz]
      param[2] = ['不合格处理', this.bhgcl] // this.bhgyy.value
      param[3] = ['不合格原因', this.bhgyy] // this.bhgcl.value
      param[4] = ['工位id', 1]
      param[5] = ['是否合格', 0]
      param[6] = ['检测类型', this.jclx]
      param[7] = ['物料码', this.wldh]
      param[8] = ['物料名称', this.gxwl]
      param[9] = ['产品名称', '111']
      param[10] = ['物料批次', this.wlpc]
      param[11] = ['规格型号', this.ggxh]
      param[12] = ['操作者', this.czz]
      param[13] = ['不合格数量', this.bhgsl]
      param[14] = ['工单id', this.gdid]
      param[15] = ['质量id', '1111', 'int', '1']
      param[16] = ['数据类型', 2]
      let data = {
        method: 'post',
        data: this.CreateData1('12', '质量管理_工序质检_不合格处理', param)
      }
      this.fullscreenLoading = true
      request(data).then(res => {
        if (this.sfsctp && this.$refs.upload.$data.uploadFiles.length > 0) {
          this.bhgscEvent(res.data.output[0].质量id)
        } else {
          if (res.data.result[0].result === '1') {
            this.$message({
              type: 'success',
              message: '操作成功',
              duration: 1000
            })
            this.clearData()
            this.dialogVisible = false
          } else {
            this.$message({
              type: 'error',
              message: '操作失败',
              duration: 1000
            })
          }
          this.fullscreenLoading = false
        }
      }).catch(err => {
        this.fullscreenLoading = false
        if (err.code === 'ERR_NETWORK' || err.code === 'ECONNABORTED') {
          this.$message({
            duration: 1000,
            type: 'error',
            message: '网络错误'
          })
        }
      })
    },
    bhgscEvent (id) { // 不合格图片上传
      var param = []
      param[0] = ['质量id', id]
      param[1] = ['文件名称', '']
      param[2] = ['文件后缀', '']
      param[3] = ['文件内容', null]
      var Data1 = this.CreateData1('15', 'PDA_文件存储_增加', param)
      this.uploadImgData.param = Data1
      this.$refs.upload.submit()
    },
    hgclEvent () { // 合格处理
      let param = []
      param[0] = ['检测人', this.$store.state.userInfo.人员编号]
      param[1] = ['工位id', 1]
      param[2] = ['是否合格', 1]
      param[3] = ['检测类型', this.jclx]
      param[4] = ['物料码', this.wldh]
      param[5] = ['物料名称', this.gxwl]
      param[6] = ['产品名称', '111']
      param[7] = ['物料批次', this.wlpc]
      param[8] = ['规格型号', this.ggxh]
      param[9] = ['操作者', this.czz]
      param[10] = ['工单id', this.gdid]
      param[11] = ['数据类型', 2]
      let data = {
        method: 'post',
        data: this.CreateData1('12', '质量管理_工序质检_合格处理', param)
      }
      this.fullscreenLoading = true
      request(data).then(res => {
        if (res.data[0].result === '1') {
          this.clearData()
          this.$message({
            type: 'success',
            message: '操作成功',
            duration: 1000
          })
        } else {
          this.$message({
            type: 'error',
            message: '操作失败',
            duration: 1000
          })
        }
        this.fullscreenLoading = false
      }).catch(err => {
        this.fullscreenLoading = false
        if (err.code === 'ERR_NETWORK' || err.code === 'ECONNABORTED') {
          this.$message({
            duration: 1000,
            type: 'error',
            message: '网络错误'
          })
        }
      })
    },
    /**
       * 查询信息
       */
    gxzjEvent (wlbm, wlpc) { // 工序质检
      let whereArr = []
      let gd = this.scddsz.find(tar => tar.工单id === this.scdd)
      if (wlbm) {
        whereArr = [{
          fieldname: '物料编码',
          value: wlbm
        }, {
          fieldname: '生产订单',
          value: gd ? gd.工单号 : ''
        }]
      } else {
        whereArr = [{
          fieldname: '物料批次',
          value: wlpc
        }, {
          fieldname: '生产订单',
          value: gd ? gd.工单号 : ''
        }]
      }
      const data = this.CreateData(
        'Select',
        '仓储管理_物料配送单明细_视图',
        ['单据编号', '是否接收', '工单id', '配送单明细id', '物料编码', '规格型号', '物料名称', '单位', '配送数量', '物料批次', '已领数量',
          '线边已领数量', '生产订单', '生产产线'
        ], {
          where: whereArr
        }
      )
      const param = {
        method: 'post',
        data: data
      }
      this.fullscreenLoading = true
      request(param).then(res => {
        if (res.data.length > 0) {
          this.gxwl = res.data[0].物料名称
          this.wldh = res.data[0].物料编码
          this.wlpc = res.data[0].物料批次
          this.ggxh = res.data[0].规格型号
          this.gdid = res.data[0].工单id
          this.pcsl = res.data[0].配送数量
        } else {
          this.$message({
            type: 'warning',
            message: '无数据',
            duration: 1000
          })
        }
        this.fullscreenLoading = false
      }).catch(err => {
        this.fullscreenLoading = false
        if (err.code === 'ERR_NETWORK' || err.code === 'ECONNABORTED') {
          this.$message({
            duration: 1000,
            type: 'error',
            message: '网络错误'
          })
        }
      })
    }
  },
  computed: {},
  components: {},
  watch: {},
  props: {}
}

</script>
<style lang="less" scoped>
  .container {
    height: 100%;
    width: 100%;

    /deep/.header {
      padding: 1rem 1rem 1rem 2rem;
      display: flex;
      height: 4rem;

      .head-inp {

        .el-input__inner {
          font-size: 2rem;
          height: 100%;
        }

        input::-webkit-input-placeholder {
          text-align: center;
        }
      }

      .head-btn {
        height: 100%;
        padding: 0;
        display: block;
        width: 15rem;
        margin-left: 1rem;
        font-size: 1.8rem;
        border-radius: 0.5rem;
        background-color: rgba(0, 82, 192, 0.1);
        color: #0052c0;
        border: 1px solid #7da7df;
      }
    }

    /deep/.form-item {
      font-size: 2rem;
      margin-top: 1rem;
      margin-bottom: 0;
      display: flex;
      align-items: center;

      .form-item-label {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        strong {
          color: red;
        }
      }

      .form-item-input {
        width: 68%;
        font-size: 2rem;

        .el-input__inner {
          font-size: 2rem;
          border: 0;
          background-color: #f9fdff;
          border-radius: 0;
          border-bottom: 1px solid #5a8fd7;

        }
      }

      &:first-child {
        .el-input__inner {
          border-radius: 5px;
          border: 1px solid #5a8fd7;
        }
      }

      &:last-child {
        .el-input__inner {
          border-radius: 5px;
          border: 1px solid #5a8fd7;
        }
      }

      &:nth-child(2) {
        .el-input__inner {
          border-radius: 5px;
          border: 1px solid #5a8fd7;
        }
      }
    }

    /deep/.foot {
      padding: 0;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 6rem;
      position: relative;
      bottom: 0rem;

      .el-button {
        width: 18rem;
        background-color: #c70019;
        color: #fff;
        height: 6rem;
        font-size: 3rem;
      }

      .el-button:last-child {
        background-color: #0052c0;
      }
    }

    .content {
      overflow: auto;
      height: calc(90% - 12rem);
      min-height: 60vh;

      .form-item {
        &:nth-child(2) {
          .form-item-input {
            width: 40%
          }
        }

      }
    }

    /deep/.el-dialog__header {
      padding: 0;
    }

    /deep/.el-dialog__body {
      padding-bottom: 0;
      padding: 30px 5px;
    }

    /deep/.el-dialog__footer {
      padding: 0.1rem;
    }

    /deep/.dialog-footer {
      padding: 0;
      display: flex;
      justify-content: space-between;

      .el-button {
        width: 16rem;
        font-size: 2rem;

        &:first-child {
          background-color: #aaaaaa;
          color: #fff;
        }

        &:last-child {
          background-color: #0052c0;
        }
      }

    }

    .dialogMain {
      /deep/.form-item {
        width: 100%;
        padding: 0 0rem;
        margin-top: 2rem;
        display: flex;
        align-items: center;

        .form-item-label {
          font-size: 2rem;
          width: fit-content;
          white-space: nowrap;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          strong {
            color: red;
          }
        }

        .form-item-input {
          width: max-content;
          font-size: 2rem;
          border-radius: 0.3rem;

          .el-input__inner {
            font-size: 2rem;
            border-radius: 5px;
            border: 1px solid #6294d8;
          }

          .el-input-number__increase {
            color: #333333;
            font-weight: bold;
            background-color: transparent;
            border: 0;
          }

          .el-input-number__decrease {
            color: #333333;
            font-weight: bold;
            background-color: transparent;
            border: 0;
          }
        }

        .textarea1 {
          width: -webkit-fill-available;

          .el-textarea__inner {
            border: 1px solid #6294d8;
          }
        }

      }

      .pz {
        .form-item-lastlabel {
          width: fit-content;
        }

        .switch1 {
          width: max-content;
          border: 0;
        }
      }

      .tp {
        display: flex;
        justify-content: center;
      }

      /deep/.el-upload-list--picture-card {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
      }

      /deep/.el-upload-list--picture-card .el-upload-list__item {
        width: 10rem;
        height: 10rem;
      }

      /deep/.el-upload--picture-card {
        width: 10rem;
        display: flex;
        height: 10rem;
        align-items: center;
        justify-content: center;
      }

    }
  }

</style>
