<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">工位号：</span>
        <el-select v-model="stationNumberValue" placeholder="请选择工位号" size="small" style="width: 150px">
          <el-option
            v-for="item in stationNumber"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span style="margin-left: 10px">工位名称：</span>
        <el-input v-model="stationName" disabled style="width:150px;" placeholder="" size="small"/>
        <span style="margin-left: 10px">产品型号：</span>
        <el-select v-model="engineTypeValue" placeholder="请选择产品型号" 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>
        <el-button type="primary" plain size="small" icon="el-icon-order" @click="searchTable()">查询</el-button>
        <el-button type="distribution" icon="el-icon-circle-plus-outline" size="small" @click="addTo">上传</el-button>
      </div>
      <span>图片尺寸要求：宽*高（770 * 640）</span>
      <div
        v-for="(url, key) in urls"
        :key="key"
        style="width: 770px;height: 640px;border: 1px solid black;display: flex;justify-content: center;align-items: center;">
        <el-image :key="url.url" :src="url.url" :preview-src-list="urls1" lazy style="width: 760px; height: 630px"/>
      </div>
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :visible.sync="dialogFormVisible"
      title="上传图片"
      center
      style="height: 800px"
      width="17%">
      <el-upload
        id="invoiceScan"
        ref="upload"
        :on-remove="handelLimitStyle"
        :on-change="handelLimit"
        :multiple="true"
        :auto-upload="false"
        :on-success="uploadSuccess"
        :on-preview="handlePictureCardPreview"
        :before-upload="beforeUpload"
        :on-exceed="warningExceed"
        :limit="limit"
        :data="Data"
        :action="upload"
        style="margin-left: 60px"
        list-type="picture-card">
        <i class="el-icon-plus"/>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取消</el-button>
        <el-button type="primary" style="width: 70px" @click="submitPicture()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { url } from '@/utils/request'

export default {
  data() {
    return {
      urls: [], // 图片数组
      urls1: [], // 图片数组
      dialogVisiblePictureCard: false,
      dialogImageUrl: '',
      limit: 1,
      Data: {},
      upload: url,
      tableData: [], // 总数据数组
      stationNumber: [],
      stationNumberValue: '',
      stationName: '',
      moduleDescription: [],
      moduleDescriptionValue: '',
      engineTypeValue: '',
      engineTypeValue1: '',
      engineTypeName: '',
      engineType: [],
      isDisableValue: 0,
      labelText: '',
      labelNumber: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      title: ''
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token',
      'departmentName'
    ])
  },
  watch: {
    stationNumberValue() {
      for (let i = 0; i < this.stationNumber.length; i++) {
        if (this.stationNumber[i].value === this.stationNumberValue) {
          this.stationName = this.stationNumber[i].labelName
        }
      }
      if (!this.stationNumberValue) {
        this.stationName = ''
      }
    }
  },
  created() {
    // this.searchTable()
    this.getStationNumber()
    this.getEndStation()
  },
  methods: {
    getStationNumber() {
      this.stationNumber = []
      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.stationNumber.push({
            label: response.data[i].工位号,
            value: response.data[i].工位号,
            labelName: response.data[i].工序名称
          })
        }
      })
    },
    // 初始化获取产品型号
    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].发动机型号,
            labelName: response.data[i].发动机机型标志
          })
        }
      })
    },
    // 表格颜色变化
    tableRowClassName({ row, rowIndex }) {
      // console.log(row, rowIndex)
      if (rowIndex % 2 === 0) {
        return 'black'
      } else {
        return 'red'
      }
    },
    // 查询MES消息
    searchTable() {
      this.urls = []
      this.urls1 = []
      var param = []
      param[0] = ['发动机型号', this.engineTypeValue]
      param[1] = ['工位号', this.stationNumberValue]
      var Data = this.CreateData('11', '电子看板_工位名称与产品型号产品图片_SPC查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          console.log(response.data, 'response.data')
          if (response.data[i].产品图片) {
            this.urls.push({
              url: 'data:image/png;base64,' + response.data[i].产品图片,
              id: response.data[i].id
            })
            this.urls1.push('data:image/png;base64,' + response.data[i].产品图片)
          }
        }
      })
    },
    addTo() {
      this.title = '添加'
      this.dialogFormVisible = true
    },
    handelLimit() {
      console.log(12345678)
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === '') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'none'
        }
      }
    },
    handelLimitStyle() {
      console.log(12345678)
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === 'none') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'block'
        }
      }
    },
    warningExceed() {
      this.$message.error('仅可上传一张照片')
    },
    beforeUpload(file) { // 上传前检测
      const isJPG = /^image\/.*/.test(file.type)
      if (!isJPG) {
        this.$message.error('只能上传图片。。')
      }
      return isJPG
    },
    uploadSuccess(res) { // 上传成功回调
      this.dialogFormVisible = false
      this.$refs.upload.clearFiles()
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === 'none') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'block'
        }
      }
    },
    updatePicture(row) {
      this.dialogFormVisible = true
      // this.purchaseContractID = row.采购合同流水号
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisiblePictureCard = true
    },
    submitPicture() {
      var param = []
      param[0] = ['发动机型号', this.engineTypeValue]
      param[1] = ['工位号', this.stationNumberValue]
      param[2] = ['文件名称', '']
      param[3] = ['文件后缀', '']
      param[4] = ['文件内容', null]
      console.log(param)
      var Data1 = this.CreateData('15', '电子看板_工位名称与产品型号产品图片_保存图片新', param)
      this.Data.param = Data1
      this.$refs.upload.submit()
      this.dialogFormVisible = false
    },
    callOff() {
      this.dialogFormVisible = false
      this.$refs['form'].resetFields()
      this.form.stationNumber = ''
      this.form.moduleDescription = ''
      this.form.number = ''
      this.form.text = ''
      this.engineTypeName = ''
      this.title = ''
    },
    callOff1() {
      this.dialogFormVisible1 = false
      this.$refs['form1'].resetFields()
      this.form.stationNumber = ''
      this.form.moduleDescription = ''
      this.form.number = ''
      this.form.text = ''
      this.engineTypeName = ''
      this.title = ''
    },
    editInformation(row) {
      this.labelNumber = row.ID
      this.form1.number = row.工步号
      this.form1.text = row.操作内容
      this.title = '编辑'
      this.dialogFormVisible1 = true
    },
    // 编辑消息
    submitUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['工步号', this.form1.number]
          param[1] = ['操作内容', this.form1.text]
          param[2] = ['ID', this.labelNumber]
          console.log(param)
          var Data = this.CreateData('12', '电子看板_工序内容_修改_要点理由YC', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.dialogFormVisible1 = false
              this.searchTable()
            } else {
              this.$message.error('修改失败！')
            }
          })
        } else {
          return false
        }
      })
    },
    deleteInformation(row) {
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['ID', row.ID]
        var Data = this.CreateData('12', '电子看板_工序内容_删除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '订单删除成功',
              type: 'success'
            })
            this.searchTable()
          } else {
            this.$message.error('订单删除失败！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<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;
}

/deep/ .el-input.is-disabled .el-input__inner {
  color: #606266 !important;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white !important;
}
</style>

