<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addTo">新增</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        height="650px"
        class="main"
        tooltip-effect="dark"
        style="width: 70%"
        border
        size="mini">
        <el-table-column type="index" width="50px" label="序号" align="center"/>
        <el-table-column align="center" label="标记名称" width="150px">
          <template slot-scope="scope">
            {{ scope.row.标记名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" width="150px" label="标记图片">
          <template slot-scope="scope">
            <el-image :src="scope.row.fileContentImg" 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="标记说明">
          <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">
            <el-button type="text" style="color: #8400ff" @click="editInformation_pic(scope.row)"><i class="el-icon-picture-outline"/></el-button>
            <el-button type="text" @click="editInformation(scope.row)"><i class="el-icon-edit"/></el-button>
            <el-button type="text" style="color: #ff0000" @click="deleteInformation(scope.row)"><i class="el-icon-delete"/></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="添加工步标记" center style="min-height: 200px;" width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="90px">
        <el-form-item label="标记名称" prop="markName" style="display: inline-block">
          <el-input v-model="form.markName" size="small" placeholder="请输入标记名称" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="标记说明" prop="markContent" style="display: inline-block">
          <el-input
            v-model="form.markContent"
            :rows="2"
            type="textarea"
            clearable
            size="small"
            style="width: 250px"
            placeholder="请输入标记说明"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff('form')">取消</el-button>
        <el-button type="primary" size="small" @click="submitAdd('form')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible1" title="编辑工步标记" center style="min-height: 200px;" width="400px">
      <el-form ref="form1" :model="form1" :rules="rules1" label-position="right" label-width="90px">
        <el-form-item label="标记名称" prop="markName" style="display: inline-block">
          <el-input v-model="form1.markName" readonly size="small" placeholder="请输入标记名称" class="myReadOnly-input" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="标记说明" prop="markContent" style="display: inline-block">
          <el-input
            v-model="form1.markContent"
            :rows="2"
            type="textarea"
            clearable
            size="small"
            style="width: 250px"
            placeholder="请输入标记说明"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff1('form1')">取消</el-button>
        <el-button type="primary" size="small" @click="submitUpdate('form1')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible6" title="上传标记图片" center style="min-height: 200px;" width="400px">
      <el-form ref="form6" :model="form6" :rules="rules6" label-position="right" label-width="90px">
        <el-form-item label="标记名称" prop="stepContent" style="display: inline-block">
          <el-input
            v-model="form6.markName"
            size="small"
            readonly
            class="myReadOnly-input"
            style="width: 250px"/>
        </el-form-item>
        <el-form-item label="指导图片" prop="materialCodeName" style="display: inline-block">
          <el-upload
            id="invoiceScan"
            ref="upload"
            :on-remove="handelLimitStyle"
            :on-change="handelLimit"
            :multiple="true"
            :auto-upload="false"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
            :on-exceed="warningExceed"
            :limit="limit"
            :data="Data"
            :action="upload"
            accept=".png,.jpg"
            style="margin-left: 0"
            list-type="picture-card">
            <i class="el-icon-plus"/>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOffBindingPicture('form6')">取消</el-button>
        <el-button type="primary" size="small" @click="submitPicture('form6')">确定</el-button>
      </div>
    </el-dialog>
    <el-image-viewer
      v-if="imgViewerVisible"
      :url-list="imgViewerList"
      :on-close="()=>{imgViewerVisible=false}"
      style="z-index: 98965"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { url } from '@/utils/request'
import elImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: {
    'el-image-viewer': elImageViewer
  },
  data() {
    return {
      imageType: ['bmp', 'jpg', 'png', 'gif'],
      imgViewerList: [],
      imgViewerVisible: false,
      tableData: [], // 总数据数组
      loading1: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible6: false,
      limit: 1,
      Data: {},
      upload: url,
      form: {
        markName: '',
        markContent: ''
      },
      rules: {
        markName: [{ required: true, message: '请输入标记名称', trigger: 'blur' }]
      },
      form1: {
        ID: '',
        markName: '',
        markContent: ''
      },
      rules1: {
      },
      form6: {
        markName: '',
        ID: ''
      },
      rules6: { // 订单下发验证
      },
      multipleSelection: []
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token',
      'departmentName'
    ])
  },
  watch: {
  },
  created() {
    this.searchTable()
  },
  mounted() {
  },
  methods: {
    // 查询MES消息
    searchTable() {
      this.tableData = []
      var param = []
      var Data = this.CreateData('11', '电子看板_工序内容_标记_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          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
            }
            response.data[i]['fileContentImg'] = fileContentImg
          }
          this.tableData = response.data
        }
      })
    },
    async submitAdd5(number, text) {
      var param = []
      param[0] = ['工位号', this.form4.stationNumberValue]
      param[1] = ['产品型号代码', this.form4.engineTypeValue]
      param[2] = ['工步号', number]
      param[3] = ['操作内容', text]
      param[4] = ['发动机型号', this.form4.engineTypeValue]
      var Data = this.CreateData('12', '电子看板_工序内容_增加', param)
      return new Promise((resolve, reject) => {
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            console.log('1')
            resolve(1)
          } else {
            console.log('0')
            reject(2)
          }
        })
      })
    },
    callOff4() {
      this.dialogFormVisible4 = false
    },
    addTo() {
      this.dialogFormVisible = true
    },
    submitAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['标记名称', this.form.markName]
          param[1] = ['标记说明', this.form.markContent]
          var Data = this.CreateData('12', '电子看板_工序内容_标记_增加', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '增加成功',
                type: 'success'
              })
              this.searchTable()
              this.callOff('form')
            } else {
              this.$message.error('增加失败！')
            }
          })
        } else {
          return false
        }
      })
    },
    callOff(form) {
      this.dialogFormVisible = false
      this.$refs[form].resetFields()
    },
    callOff1(form) {
      this.dialogFormVisible1 = false
      this.$refs[form].resetFields()
    },
    editInformation(row) {
      this.form1.ID = row.ID
      this.form1.markName = row['标记名称']
      this.form1.markContent = row['标记说明']
      this.dialogFormVisible1 = true
    },
    editInformation_material(row) {
      this.multipleSelection = []
      this.form5.ID = row.ID
      this.form5.stepContent = row['操作内容']
      this.form5.materialCodeList = ''
      this.form5.materialCodeName = ''
      this.dialogFormVisible5 = true
    },
    editInformation_pic(row) {
      this.form6.ID = row.ID
      this.form6.markName = row['标记名称']
      this.dialogFormVisible6 = true
      setTimeout(() => {
        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'
          }
        }
      }, 100)
    },
    // 编辑消息
    submitUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['ID', this.form1.ID]
          param[1] = ['标记说明', this.form1.markContent]
          var Data = this.CreateData('12', '电子看板_工序内容_标记_编辑', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.searchTable()
              this.callOff1('form1')
            } 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: '已取消删除'
        })
      })
    },
    // 处理图片字符串的方法
    parseImages(imageString) {
      if (!imageString) return []
      return imageString
        .split('^')
        .map(item => item.trim())
        .filter(item => item)
        .map(item => {
          const [id, name] = item.split('&')
          return {
            id: id.trim(),
            name: name.trim()
          }
        })
    },
    // 处理图片字符串的方法
    parseMaterialCode(materialString) {
      if (!materialString) return []
      return materialString
        .split('^')
        .map(item => item.trim())
        .filter(item => item)
        .map(item => {
          const [id, name] = item.split('&')
          return {
            id: id.trim(),
            name: name.trim()
          }
        })
    },
    handelLimit() {
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === 'block' || obj[0].style.display === '') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'none'
        }
      }
    },
    handelLimitStyle() {
      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.dialogFormVisible6 = false
      this.$refs.upload.clearFiles()
      this.$message.success('上传成功！')
      this.searchTable()
      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'
        }
      }
    },
    submitPicture() {
      var param = []
      param[0] = ['ID', this.form6.ID]
      param[1] = ['文件名称', '']
      param[2] = ['文件后缀', '']
      param[3] = ['文件内容', null]
      var Data1 = this.CreateData('15', '电子看板_工序内容_标记_上传图片', param)
      this.Data.param = Data1
      this.$refs.upload.submit()
    },
    callOffBindingPicture(formName) {
      this.dialogFormVisible6 = false
      this.$refs[formName].resetFields()
    }
  }
}
</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 textarea{
  height: 100px;
}
</style>

