<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>
      <div>
        <iframe :src="url" frameborder="0" scrolling="no" style="width: 1495px; height: 785px"/>
      </div>
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :visible.sync="dialogVisible1"
      :center="dialogName"
      title="上传PDF"
      width="20%">
      <div v-for="(file, key) in hadFile" :key="key">
        <div class="wrapper">
          <div class="content">
            <div class="action">
              <!--              <a class="delete" @click="deleteFileData(file.id)">删除</a>-->
            </div>
            <!--            <div v-if="file.suffix==='pdf'" class="icon"><svg-icon icon-class="pdf" /></div>-->
            <!--            <div v-else-if="file.suffix==='docx'||file.suffix === 'doc'" class="icon"><svg-icon icon-class="doc" /></div>-->
            <!--            <div v-else-if="file.suffix==='xlsx' || file.suffix === 'xls'" class="icon"><svg-icon icon-class="excel" /></div>-->
            <!--            <div v-else-if="file.suffix==='pptx' || file.suffix === 'ppt'" class="icon"><svg-icon icon-class="ppt" /></div>-->
            <!--            <div v-else-if="file.suffix==='jpg' || file.suffix === 'jpeg'|| file.suffix === 'png'" class="icon"><svg-icon icon-class="pic" /></div>-->
            <!--            <div v-else class="icon"><svg-icon icon-class="file" /></div>-->
            <!--            <a id="appUrl" :href="file.url" target="view_window"><div class="info">{{ file.name }}</div></a>-->
          </div>
        </div>
      </div>
      <div style="margin-left: 38%">
        <el-upload
          :action="action"
          :on-success="uploadSuccess"
          :on-error="uploadFailure"
          :show-file-list="showFileList"
          :file-list="fileList"
          class="upload-demo"
          multiple>
          <el-button size="small" type="shengcheng" @click="batchImportOfDrawings">点击上传</el-button>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { MESUploadFileProject } from '@/utils/request'
export default {
  data() {
    return {
      url: '',
      loading: true,
      dialogName: true,
      action: '',
      showFileList: false,
      hadFile: [
      ],
      fileList: [],
      fileName: '',
      fileName1: '',
      tableData: [], // 总数据数组
      stationNumber: [],
      stationNumberValue: '',
      stationName: '',
      moduleDescription: [],
      moduleDescriptionValue: '',
      engineTypeValue: '',
      engineTypeValue1: '',
      engineTypeName: '',
      engineType: [],
      isDisableValue: 0,
      labelText: '',
      labelNumber: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogVisible1: 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) {
          console.log(this.stationNumber[i].label, 'this.stationNumber[i].label')
          this.stationName = this.stationNumber[i].labelName
        }
      }
      if (!this.stationNumberValue) {
        this.stationName = ''
      }
    },
    engineTypeValue() {
      console.log(1234)
      for (let i = 0; i < this.engineType.length; i++) {
        if (this.engineType[i].value === this.engineTypeValue) {
          this.engineTypeValue1 = this.engineType[i].labelName
        }
      }
    }
  },
  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.url = ''
      var param = []
      param[0] = ['产品型号代码', this.engineTypeValue1]
      param[1] = ['工位号', this.stationNumberValue]
      var Data = this.CreateData('11', '电子看板_工位名称与产品型号工艺卡_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.suffix = response.data
        if (response.data.length > 0) {
          this.url = response.data[0].工艺卡路径
          // const server = `${MESDownloadFile}`.split('/')
          // response.data.map(item => {
          //   this.hadFile.push({
          //     url: item.工艺卡路径,
          //     name: `${item.工艺卡路径}.${item.suffix}`.split('/'),
          //     suffix: item.suffix,
          //     id: item.ID
          //   })
          // })
        }
      })
    },
    addTo() {
      this.dialogVisible1 = true
    },
    batchImportOfDrawings() {
      this.action = `${MESUploadFileProject}?&num=1&tableName=电子看板_工位名称与产品型号工艺卡&stationNumberValue=${this.stationNumberValue}&engineTypeValue1=${this.engineTypeValue1}&engineTypeValue=${this.engineTypeValue}`
      console.log(this.action)
    },
    uploadSuccess(res, file, fileList) {
      if (res[0].result === '1') {
        const index = fileList.indexOf(file)
        fileList.splice(index, 1)
      } else {
        this.$message.error(`${file.name}文件上传失败，请检查上传文件是否正确！`)
      }
      if (fileList.length === 0) {
        this.$message.success('文件上传成功')
        this.hadFile = []
        var param = []
        param[0] = ['产品型号代码', this.engineTypeValue1]
        param[1] = ['工位号', this.stationNumberValue]
        var Data = this.CreateData('11', '电子看板_工位名称与产品型号工艺卡_查询', param)
        this.ExecDatabase(Data).then(response => {
          this.suffix = response.data
          if (response.data.length > 0) {
            console.log(response.data, 'response.data[0].工艺卡路径')
            // const server = `${MESDownloadFile}`.split('/')
            this.url = response.data[0].工艺卡路径
            this.dialogVisible1 = false
          }
        })
      }
    },
    uploadFailure(res, file, fileList) {
      fileList.map(file => {
        this.$message.error(`${file.name}文件上传失败，请检查上传文件是否正确！`)
      })
    }
  }
}
</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>

