<template>
  <div class="app-container">
    <el-card>
      <div>
        <span style="line-height: 25px;font-size: 20px">设备对应点检类型维护</span>
        <!--        <div style="float: right;margin: 5px">-->
        <!--          <el-select v-model="OPnameValue" filterable size="small" placeholder="工位号" style="width: 110px">-->
        <!--            <el-option-->
        <!--              v-for="item in OPname"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"/>-->
        <!--          </el-select>-->
        <!--          <span>选择月份：</span>-->
        <!--          <el-date-picker v-model="monthssss" size="small" type="month" value-format="yyyy-MM" format="yyyy-MM" style="width: 120px" placeholder="选择月"/>-->
        <!--          <el-button v-positive="'loading'" :disabled="false" size="small" type="warning" style="margin-right: 50px" plain @click="exportOut()">导出日点检表</el-button>-->
        <!--        </div>-->
      </div>
      <el-table v-loading="loading1" :data="tableData1" stripe height="420" border>
        <el-table-column align="center" label="序号" type="index" width="50"/>
        <el-table-column align="center" label="工位号">
          <template slot-scope="scope">
            {{ scope.row.工位号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工位名称">
          <template slot-scope="scope">
            {{ scope.row.工位名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="点检表类型" min-width="150">
          <template slot-scope="scope">
            <el-select v-model="tableData1[scope.$index].点检表类型流水号" filterable size="small" placeholder="点检表类型" style="margin:3px 10px;width: 150px" @change="editType(scope.row)">
              <el-option
                v-for="item in 点检表类型"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="点检指导图片" show-overflow-tooltip min-width="200">
          <template slot-scope="scope">
            <el-image :src="scope.row.点检图片url" :preview-src-list="[scope.row.点检图片url]" style="width: 50px; height: 50px"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-edit" @click="uploadShow(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <el-col :span="6">
        <span>点检类型维护</span>
        <el-button type="distribution" icon="el-icon-circle-plus-outline" size="small" style="margin: 10px 0 3px 10px" @click="handleAdd1('form1')" >新增</el-button>
        <el-table v-loading="loading2" :data="tableData2" height="300" highlight-current-row border @row-click="getTableData3">
          <el-table-column align="center" label="序号" type="index" width="50"/>
          <el-table-column align="center" label="点检类型名称" min-width="150">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.点检表类型名称" style="width:120px;margin-right:3px" clearable size="mini" width="120"/>
              </template>
              <span v-else>{{ scope.row.点检表类型名称 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button v-if="scope.row.edit" type="text" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit1(scope.row)">确定</el-button>
              <el-button v-if="scope.row.edit" class="cancel-btn" size="mini" type="text" @click="cancelEdit1(scope.$index, scope.row)">取消</el-button>
              <el-button v-else type="text" size="mini" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit"/>
              <el-button v-if="!scope.row.edit" type="text" size="mini" plain icon="el-icon-delete" @click="openDelete1(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="18">
        <span>点检内容维护</span>
        <el-button type="distribution" icon="el-icon-circle-plus-outline" size="small" style="margin: 10px 0 3px 10px" @click="handleAdd2('form2')" >新增</el-button>
        <el-table v-loading="loading3" :data="tableData3" height="300" highlight-current-row border>
          <el-table-column align="center" label="序号" type="index" width="50"/>
          <el-table-column align="center" label="保养周期" min-width="110">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select v-model="tableData3[scope.$index].保养周期" filterable size="small" placeholder="点检表类型" style="margin:3px 10px;width: 150px" @change="editType(scope.row)">
                  <el-option
                    v-for="item in 保养周期"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </template>
              <template v-else slot-scope="scope">
                <span v-if="scope.row.保养周期 === 1">日</span>
                <span v-if="scope.row.保养周期 === 7">周</span>
                <span v-if="scope.row.保养周期 === 30">月</span>
                <span v-if="scope.row.保养周期 === 90">季</span>
                <span v-if="scope.row.保养周期 === 365">年</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="保养项目" min-width="250">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.保养项目" style="width: 90%;margin-right:3px" clearable size="mini" width="120"/>
              </template>
              <span v-else>{{ scope.row.保养项目 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button v-if="scope.row.edit" type="text" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit2(scope.row)">确定</el-button>
              <el-button v-if="scope.row.edit" class="cancel-btn" size="mini" type="text" @click="cancelEdit2(scope.$index, scope.row)">取消</el-button>
              <el-button v-else type="text" size="mini" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit"/>
              <el-button v-if="!scope.row.edit" type="text" size="mini" plain icon="el-icon-delete" @click="openDelete2(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </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>
    <el-dialog :visible.sync="dialogFormVisible1" title="新增" center width="500px">
      <el-form ref="form1" :model="form1" :rules="rules" label-position="right" label-width="160px">
        <el-form-item label="点检类型名称" prop="点检类型名称">
          <el-input v-model="form1.点检类型名称" placeholder="点检类型名称" clearable size="small" style="width:180px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="callOff1('form1')">取消</el-button>
        <el-button v-positive="'loading'" :disabled="false" type="primary" @click="submit1('form1')" >确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible2" title="新增" center width="500px">
      <el-form ref="form2" :model="form2" :rules="rules" label-position="right" label-width="160px">
        <el-form-item label="保养项目" prop="保养项目">
          <el-input v-model="form2.保养项目" placeholder="保养项目" clearable size="small" style="width:180px;"/>
        </el-form-item>
        <el-form-item label="保养周期" prop="保养周期">
          <el-select v-model="form2.保养周期" filterable size="small" placeholder="保养周期" style="width: 180px">
            <el-option
              v-for="item in 保养周期"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="callOff2('form2')">取消</el-button>
        <el-button v-positive="'loading'" :disabled="false" type="primary" @click="submit2('form2')" >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTableData1, getTableData2, getTableData3, editType, confirmEdit1, confirmEdit2, selectCount, openDelete1, openDelete2, submit1, submit2, exportOut } from '@/api/ManufacturingCenter/maintainInformation'
import $ from 'jquery'
import { url } from '@/utils/request'
export default {
  data() {
    return {
      opCode: '',
      limit: 1,
      Data: {},
      upload: url,
      点检表类型: [],
      tableData1: [],
      loading1: false,
      tableData2: [],
      loading2: false,
      点检表类型流水号: '',
      保养周期: [{
        value: 1,
        label: '日'
      }, {
        value: 7,
        label: '周'
      }, {
        value: 30,
        label: '月'
      }, {
        value: 90,
        label: '季'
      }, {
        value: 365,
        label: '年'
      }],
      tableData3: [],
      loading3: false,
      form1: {
        点检类型名称: ''
      },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form2: {
        保养项目: '',
        保养周期: ''
      },
      dialogFormVisible2: false,
      rules: { // 表单验证规则
        点检类型名称: [{ required: true, message: '请输入点检类型名称', trigger: 'blur' }],
        保养项目: [{ required: true, message: '请输入保养项目', trigger: 'blur' }],
        保养周期: [{ required: true, message: '请选择保养周期', trigger: 'change' }]
      },
      OPnameValue: '',
      OPname: [],
      monthssss: '',
      tableData: [],
      设备名称: '',
      设备编号: ''
    }
  },
  created() {
    this.getTableData1()
    this.getTableData2()
    this.getStationNumber()
  },
  methods: {
    getStationNumber() {
      this.OPname = []
      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.OPname.push({
            label: response.data[i].工位号,
            value: response.data[i].工位号
          })
        }
      })
    },
    getTableData1() {
      this.tableData1 = []
      this.loading1 = true
      getTableData1().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          if (response.data[i]['点检图片']) {
            response.data[i]['点检图片url'] = 'data:image/png;base64,' + response.data[i]['点检图片']
          }
        }
        this.tableData1 = response.data
        this.loading1 = false
      })
    },
    // 编辑  表1
    editType(row) {
      editType(row.点检表类型流水号, row.ID)
    },
    getTableData2() {
      this.点检表类型 = []
      this.tableData2 = []
      this.loading2 = true
      getTableData2().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.点检表类型.push({
            label: response.data[i].点检表类型名称,
            value: response.data[i].点检表类型流水号
          })
        }
        if (response.data.length !== 0) {
          for (let i = 0; i < response.data.length; i++) {
            this.tableData2.push({
              点检表类型流水号: response.data[i].点检表类型流水号,
              点检表类型名称: response.data[i].点检表类型名称,
              点检表类型流水号_原: response.data[i].点检表类型流水号,
              点检表类型名称_原: response.data[i].点检表类型名称,
              edit: false
            })
          }
        }
        this.loading2 = false
      })
    },
    // 取消编辑
    cancelEdit1(index, row) {
      row.edit = false
      row.点检表类型名称 = this.tableData2[index].点检表类型名称_原
      this.$message('取消修改')
    },
    // 编辑  表2
    confirmEdit1(row) {
      confirmEdit1(row.点检表类型名称, row.点检表类型流水号).then(response => {
        row.edit = false
      })
    },
    // 删除  表2
    openDelete1(row) {
      this.$confirm('此操作将永久删除该行信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        selectCount(row.点检表类型流水号).then(response => {
          if (response.data.length === 0) {
            openDelete1(row.点检表类型流水号).then(() => {
              this.tableData3 = []
              this.getTableData2()
            })
          } else {
            var message
            message = '工位：'
            for (let i = 0; i < response.data.length; i++) {
              if (i === response.data.length - 1) {
                message = message + response.data[i].工位号
              } else {
                message = message + response.data[i].工位号 + '、'
              }
            }
            message = message + '占用，请先将以上工位改为其他点检类型'
            this.$message.error(message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增  表2
    handleAdd1(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.form1.点检类型名称 = ''
      this.dialogFormVisible1 = true
    },
    callOff1() {
      this.dialogFormVisible1 = false
    },
    submit1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          submit1(this.form1.点检类型名称).then(response => {
            this.getTableData2()
            this.dialogFormVisible1 = false
          })
        } else {
          return false
        }
      })
    },
    getTableData3(row) {
      this.点检表类型流水号 = row.点检表类型流水号
      this.tableData3 = []
      this.loading3 = true
      getTableData3(row.点检表类型流水号).then(response => {
        if (response.data.length !== 0) {
          for (let i = 0; i < response.data.length; i++) {
            this.tableData3.push({
              ID: response.data[i].ID,
              保养周期: response.data[i].保养周期,
              保养项目: response.data[i].保养项目,
              保养周期_原: response.data[i].保养周期,
              保养项目_原: response.data[i].保养项目,
              edit: false
            })
          }
        }
        this.loading3 = false
      })
    },
    // 取消编辑
    cancelEdit2(index, row) {
      row.edit = false
      row.保养周期 = this.tableData3[index].保养周期_原
      row.保养项目 = this.tableData3[index].保养项目_原
      this.$message('取消修改')
    },
    // 编辑  表3
    confirmEdit2(row) {
      confirmEdit2(row.保养周期, row.保养项目, row.ID).then(response => {
        row.edit = false
      })
    },
    // 删除  表3
    openDelete2(row) {
      this.$confirm('此操作将永久删除该行信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        openDelete2(row.ID).then(() => {
          this.tableData3 = []
          this.loading3 = true
          getTableData3(this.点检表类型流水号).then(response => {
            if (response.data.length !== 0) {
              for (let i = 0; i < response.data.length; i++) {
                this.tableData3.push({
                  ID: response.data[i].ID,
                  保养周期: response.data[i].保养周期,
                  保养项目: response.data[i].保养项目,
                  保养周期_原: response.data[i].保养周期,
                  保养项目_原: response.data[i].保养项目,
                  edit: false
                })
              }
            }
            this.loading3 = false
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增  表3
    handleAdd2(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.form2.保养项目 = ''
      this.form2.保养周期 = ''
      if (this.点检表类型流水号) {
        this.dialogFormVisible2 = true
      } else {
        this.$message.error('请先选择一个点检类型')
      }
    },
    callOff2() {
      this.dialogFormVisible2 = false
    },
    submit2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.点检表类型流水号) {
            submit2(this.点检表类型流水号, this.form2.保养项目, this.form2.保养周期).then(response => {
              this.tableData3 = []
              this.loading3 = true
              getTableData3(this.点检表类型流水号).then(response => {
                if (response.data.length !== 0) {
                  for (let i = 0; i < response.data.length; i++) {
                    this.tableData3.push({
                      ID: response.data[i].ID,
                      保养周期: response.data[i].保养周期,
                      保养项目: response.data[i].保养项目,
                      保养周期_原: response.data[i].保养周期,
                      保养项目_原: response.data[i].保养项目,
                      edit: false
                    })
                  }
                }
                this.loading3 = false
              })
            })
          }
          this.dialogFormVisible2 = false
        } else {
          return false
        }
      })
    },
    exportOut() {
      this.tableData = []
      if (this.OPnameValue) {
        if (this.monthssss) {
          var year = this.monthssss.split('-')[0]
          var month = this.monthssss.split('-')[1]
          exportOut(this.OPnameValue, year, month).then(response => {
            if (response.data.length !== 0) {
              this.设备名称 = response.data[0].设备名称
              this.设备编号 = response.data[0].设备编号
              this.tableData = response.data
            }
          }).then(() => {
            if (this.tableData.length !== 0) {
              this.Out()
            } else {
              this.$message.error('暂无该月数据')
            }
          })
        } else {
          this.$message.error('请选择月份')
        }
      } else {
        this.$message.error('请选择工位')
      }
    },
    Out() {
      const htmlNode = $('#dianjianbiao').html()
      const body = $('body')
      body.children().hide()
      const printNode = $(htmlNode)
      body.append(printNode)
      window.print()
      body.children().not('script').show()
      body.children().not('#app').hide()
      printNode.remove()
    },
    uploadShow(row) {
      this.opCode = row.工位号
      this.dialogFormVisible = true
    },
    handelLimit() {
      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() {
      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'
        }
      }
      this.getTableData1()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisiblePictureCard = true
    },
    submitPicture() {
      var param = []
      param[0] = ['工位号', this.opCode]
      param[1] = ['文件名称', '']
      param[2] = ['文件后缀', '']
      param[3] = ['文件内容', null]
      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()
    }
  }
}
</script>

<style lang="scss">
  .NewlyAdded{
    background:rgb(253,246,236);
    border-color: #ff9759;
    color: #ff9759;
    &:hover{
      background: #ff9759;
      border-color: #ff9759;
      color: white;
    }
    &:focus{
      background: #ff9759;
      border-color: #ff9759;
      color: white;
    }
  }
  #dianjianbiao {
    /*.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{*/
    /*border-color: black !important;*/
    /*}*/
    /*.el-table--border::after, .el-table--group::after, .el-table::before{*/
    /*background-color: black !important;*/
    /*}*/
    /*th {*/
    /*background: white !important;*/
    /*color: black !important;*/
    /*}*/
  }
</style>
