<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: 200px">
          <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-select v-model="engineTypeValue" placeholder="请选择产品图号" size="small" style="width: 250px">
          <el-option v-for="item in engineType" :key="item.value" :label="item.label" :value="item.value" size="mini" />
        </el-select>
        <el-button icon="el-icon-order" plain size="small" type="primary" @click="searchTable()">查询</el-button>
        <el-button icon="el-icon-circle-plus-outline" size="small" type="distribution" @click="addTo">上传</el-button>
      </div>
      <span>图片尺寸要求：宽高比例（16:9），点击图片进行全屏预览</span>
      <div v-for="(url, key) in urls" :key="key" style="width: 1285px; height: 745px; border: 1px solid black">
        <!-- <div style="height: 20px; border-bottom: 1px solid #00893d; background-color: #8dc2ff; text-align: center">
          第{{ key + 1 }}张图片 <el-link type="danger" @click="deleteImg(url)">删除</el-link>
        </div> -->
        <div style="width: 1280px; height: 720px">
          <el-image :key="url.url" :preview-src-list="urls1" :src="url.url" lazy style="width: 680px; height: 560px" />
        </div>
      </div>
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :visible.sync="dialogFormVisible"
      center
      style="height: 800px"
      title="上传图片"
      width="17%"
    >
      <el-upload
        id="invoiceScan"
        ref="upload"
        :action="upload"
        :auto-upload="false"
        :before-upload="beforeUpload"
        :data="Data"
        :limit="limit"
        :multiple="true"
        :on-change="handelLimit"
        :on-exceed="warningExceed"
        :on-preview="handlePictureCardPreview"
        :on-remove="handelLimitStyle"
        :on-success="uploadSuccess"
        list-type="picture-card"
        style="margin-left: 60px"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button style="width: 70px" type="primary" @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: {},
  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 => {
        if (response.data.length) this.stationNumberValue = response.data[0].工位号
        for (let i = 0; i < response.data.length; i++) {
          this.stationNumber.push({
            label: `【${response.data[i].工位号}】${response.data[i].工位名称}`,
            value: response.data[i].工位号
          })
        }
      })
    },
    // 初始化获取产品型号
    getEndStation() {
      this.engineType = []
      var param = []
      var Data = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length) this.engineTypeValue = response.data[0].产品型号代码
        for (let i = 0; i < response.data.length; i++) {
          this.engineType.push({
            label: response.data[i].产品型号,
            value: response.data[i].产品型号代码
          })
        }
      })
    },
    // 查询MES消息
    searchTable() {
      this.urls = []
      this.urls1 = []
      var param = []
      param[0] = ['产品型号代码', this.engineTypeValue]
      param[1] = ['工位号', this.stationNumberValue]
      var Data = this.CreateData('11', '电子看板_工位名称与产品型号产品图片_查询', 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].产品图片)
          }
        }
      })
    },
    // 删除指定图片
    deleteImg(item) {
      // 提示是否需要删除
      this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除图片
        var param = []
        param[0] = ['id', item.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('图片删除失败！')
          }
        })
      })
    },
    addTo() {
      this.title = '添加'
      this.dialogFormVisible = true
    },
    handelLimit() {},
    handelLimitStyle() {},
    warningExceed() {
      this.$message.error('仅可上传一张照片')
    },
    beforeUpload(file) {
      // 上传前检测
      const isJPG = /^image\/.*/.test(file.type)
      if (!isJPG) {
        this.$message.error('只能上传图片。。')
      }
      return isJPG
    },
    uploadSuccess() {
      // 上传成功回调
      this.dialogFormVisible = false
      this.$refs.upload.clearFiles()
      this.$message.success('图片上传成功!')
      setTimeout(() => {
        this.searchTable()
      }, 500)
    },
    updatePicture() {
      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 = ''
    },
    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;
}

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

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