<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">订货号：</span>
        <el-input v-model="orderCode" placeholder="订货号" clearable size="small" style="width: 250px; margin-left: 5px" />
        <!--        <span style="margin-left: 10px">时间：</span>-->
        <!--        <el-date-picker-->
        <!--          :clearable="false"‘、’】-->
        <!--          v-model="dateTime"-->
        <!--          size="small"-->
        <!--          type="daterange"-->
        <!--          align="center"-->
        <!--          style="width: 240px;"-->
        <!--          value-format="yyyy-MM-dd"-->
        <!--          format="yyyy-MM-dd"-->
        <!--          range-separator="～"-->
        <!--          start-placeholder="开始日期"-->
        <!--          end-placeholder="结束日期"/>-->
        <el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 5px"
          @click="pageSize = 50; pageCurrent = 1; searchTable()">查询
        </el-button>
        <el-button type="success" plain icon="el-icon-document-copy" size="small" @click="addData()">增加</el-button>
        <el-button type="info" plain size="small" icon="el-icon-upload2" @click="importOrder('form')">小机型导入
        </el-button>
        <el-button type="info" plain size="small" icon="el-icon-download" @click="ExportExcel('form')">导出
        </el-button>
        <div style="display: flex">
          <el-table v-loading="loading" :data="tableData" highlight-current-row border size="mini" height="740" center
            style="width: 70%;flex: 2">

            <el-table-column width="60" label="序号" type="index" align="center" />
            <el-table-column label="订货号" width="240" align="center">
              <template slot-scope="scope">
                {{ scope.row.订货号 }}
              </template>
            </el-table-column>
            <el-table-column label="机型" width="110" align="center">
              <template slot-scope="scope">
                {{ scope.row.机型 }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete" style="color: #ff9a02"
                  @click="update(scope.row)">修改
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" style="color: red"
                  @click="deleteData(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作时间" width="140" align="center">
              <template slot-scope="scope">
                {{ scope.row.操作时间 }}
              </template>
            </el-table-column>
            <el-table-column label="五轴飞轮拧紧" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型1 }}
              </template>
            </el-table-column>
            <el-table-column label="38轴" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型2 }}
              </template>
            </el-table-column>
            <el-table-column label="缸盖搬运机器人" width="115" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型3 }}
              </template>
            </el-table-column>
            <el-table-column label="缸盖负螺栓3轴" width="115" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型4 }}
              </template>
            </el-table-column>
            <el-table-column label="油封压装机" width="95" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型5 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型6" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型6 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型7" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型7 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型8" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型8 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型9" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型9 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型10" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型10 }}
              </template>
            </el-table-column>
          </el-table>
          <el-table :data="tableData2" highlight-current-row border size="mini" height="740" center style="width: 20%">
            <el-table-column width="80" label="工位序号" align="center">
              <template slot-scope="scope">
                {{ scope.row.机型位置 }}
              </template>
            </el-table-column>
            <el-table-column label="工位名称" width="140" align="center">
              <template slot-scope="scope">
                {{ scope.row.工位名称 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型1" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型1 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型2" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型2 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型3" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型3 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型4" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型4 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型5" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型5 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型6" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型6 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型7" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型7 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型8" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型8 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型9" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型9 }}
              </template>
            </el-table-column>
            <el-table-column label="小机型10" width="75" align="center">
              <template slot-scope="scope">
                {{ scope.row.小机型10 }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block" style="margin-top: 10px;">
          <el-pagination v-if="!loading" :current-page="pageCurrent" :page-sizes="[50, 100, 200]" :page-size="pageSize"
            :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-card>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible1" :title="formTitle" center style="min-height: 200px"
      width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="110px">
        <el-form-item label="订货号" prop="订货号" style="display: inline-block">
          <el-input v-model="form.orderCode" clearable size="small" placeholder="订货号" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="机型" prop="机型" style="display: inline-block">
          <el-input v-model="form.engineType" clearable size="small" placeholder="机型" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="五轴飞轮拧紧" prop="小机型1" style="display: inline-block">
          <el-input-number v-model="form.miniEngineType1" clearable size="small" placeholder="小机型1"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item label="38轴" prop="小机型2" style="display: inline-block">
          <el-input-number v-model="form.miniEngineType2" clearable size="small" placeholder="小机型2"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item label="缸盖搬运机器人" prop="小机型3" style="display: inline-block">
          <el-input-number v-model="form.miniEngineType3" clearable size="small" placeholder="小机型3"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item label="缸盖负螺栓3轴" prop="小机型4" style="display: inline-block">
          <el-input-number v-model="form.miniEngineType4" clearable size="small" placeholder="小机型4"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item label="油封压装机" prop="小机型5" style="display: inline-block">
          <el-input-number v-model="form.miniEngineType5" clearable size="small" placeholder="小机型5"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item label="小机型6" prop="小机型6" style="display: inline-block">
          <el-input-number v-model="form.miniEngineType6" clearable size="small" placeholder="小机型6"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item label="小机型7" prop="小机型7" style="display: inline-block">
          <el-input-number v-model="form.miniEngineType7" clearable size="small" placeholder="小机型7"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item label="小机型8" prop="小机型8" style="display: inline-block">
          <el-input-number v-model="form.miniEngineType8" clearable size="small" placeholder="小机型8"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item label="小机型9" prop="小机型9" style="display: inline-block">
          <el-input-number v-model="form.miniEngineType9" clearable size="small" placeholder="小机型9"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item label="小机型10" prop="小机型10" style="display: inline-block">
          <el-input-number v-model="form.miniEngineType10" clearable size="small" placeholder="小机型10"
            style="width: 200px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" size="small" @click="submitAdd1('form')">确定</el-button>
        <!--        <el-button v-if="formTitle == '修改关联'" type="primary" size="small" @click="submitUpdate('form')">确定-->
        <!--        </el-button>-->
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible3" title="物料导入" center style="min-height: 200px" width="900px">
      <div class="app-container">
        <upload-excel-component style="margin-left: 15%" @on-selected-file="selected" />
        <div style="margin-left: 395px">
          <span v-show="worksheet.length > 1" style="cursor: pointer;width: 50px;" @click="removeAll"><i
              class="el-icon-close" /></span>
          <el-upload :on-remove="handleRemove" :file-list="itemFile" style="width: 220px" action="" />
        </div>
        <div v-if="worksheet.length !== 0" style="margin: 3px 0 0 395px">
          <el-button icon="el-icon-upload2" type="primary" size="small" @click="basicPartsToSQL">导入到数据库
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { sleep } from '../../../utils/tool'
import UploadExcelComponent from './UploadExcel.vue'

export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      loading: false,
      worksheet: [],
      itemFile: [],
      tableData: [],
      tableData2: [],
      dataType: [], // 日志类型数组
      dataTypeValue: '', // 日志类型
      valueType: [],
      valueTypeValue: '',
      parentId: '',
      orderCode: '',
      parentList: [],
      alarmType: [],
      alarmTypeValue: '',
      dateTime: '', // 时间
      dialogFormVisible: false,
      dialogFormVisible4: false,
      dialogFormVisible3: false, // 订单导入
      form4: {
        engineTypeValue: ''
      },
      rules4: { // 订单下发验证
        engineTypeValue: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      title: '',
      form: {
        id: '',
        orderCode: '', // 订货号
        engineType: '', // 大机型
        miniEngineType1: '', // 小机型1
        miniEngineType2: '', // 小机型2
        miniEngineType3: '', // 小机型3
        miniEngineType4: '', // 小机型4
        miniEngineType5: '', // 小机型5
        miniEngineType6: '', // 小机型6
        miniEngineType7: '', // 小机型7
        miniEngineType8: '', // 小机型8
        miniEngineType9: '', // 小机型9
        miniEngineType10: '' // 小机型10
      },
      formTitle: '', // 修改框标题
      rules: { // 表单验证规则
      },
      total: 0, // 总条数
      pageList: 50, // 每页显示条数
      pageSize: 50, // 每页显示条数
      pageCurrent: 1, // 后台获取页
      dialogFormVisible1: false
    }
  },
  created() {
    var year, month, day, audiTime
    this.date = new Date() // 修改数据date
    year = new Date().getFullYear()
    month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
    day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
    audiTime = year + '-' + month + '-' + day
    console.log(audiTime, 'audiTime')
    this.dateTime = [audiTime, audiTime]
    this.getDataType()
    this.searchTable()
    this.searchTable2()
  },
  methods: {
    // 初始化获取日志类型
    getDataType() {
      this.dataType = []
      var param = []
      var Data = this.CreateData('11', '潍柴_打印位置_基本表_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (const item of response.data) {
          this.dataType.push({
            label: item.打印位置,
            value: item.传递编号
          })
        }
      })
    },
    addData() {
      this.dialogFormVisible1 = true
      this.form.orderCode = ''
      this.form.engineType = ''
      this.form.miniEngineType1 = ''
      this.form.miniEngineType2 = ''
      this.form.miniEngineType3 = ''
      this.form.miniEngineType4 = ''
      this.form.miniEngineType5 = ''
      this.form.miniEngineType6 = ''
      this.form.miniEngineType7 = ''
      this.form.miniEngineType8 = ''
      this.form.miniEngineType9 = ''
      this.form.miniEngineType10 = ''
      this.formTitle = '增加关联'
    },
    submitAdd1() {
      if (!this.form.orderCode) {
        this.$message.error('请填写订货号后提交！')
        return
      }
      var param = []
      param.push(['订货号', this.form.orderCode])
      param.push(['机型', this.form.engineType])
      param.push(['小机型1', this.form.miniEngineType1])
      param.push(['小机型2', this.form.miniEngineType2])
      param.push(['小机型3', this.form.miniEngineType3])
      param.push(['小机型4', this.form.miniEngineType4])
      param.push(['小机型5', this.form.miniEngineType5])
      param.push(['小机型6', this.form.miniEngineType6])
      param.push(['小机型7', this.form.miniEngineType7])
      param.push(['小机型8', this.form.miniEngineType8])
      param.push(['小机型9', this.form.miniEngineType9])
      param.push(['小机型10', this.form.miniEngineType10])
      var Data = this.CreateData('11', '潍柴_小机型_对应表_页面_增加', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result == 1) {
          this.$message.success(response.data[0].msg)
          this.dialogFormVisible1 = false
          this.searchTable()
        }
      })
    },
    removeAll() {
      this.worksheet = []
      this.itemFile = []
    },
    async selected(data) { // 选择需要导入的文件
      console.log(data, 1111)
      this.worksheet = data.worksheet // 获取每个多选文件的表格坐标及值
      this.itemFile = data.itemFile
    },
    handleRemove(file) { // 移除文件
      for (let i = 0; i < this.itemFile.length; i++) {
        if (this.itemFile[i].name === file.name) {
          this.worksheet.splice(i, 1)
          this.itemFile.splice(i, 1)
        }
      }
    },
    async basicPartsToSQL() {
      const that = this
      try {
        that.$message.info('正在导入数据，请等待导入完成提示后再再操作!')
        this.loading = true
        this.err = 0
        const j = 0
        let order,
          engineType,
          miniEngineType1,
          miniEngineType2,
          miniEngineType3,
          miniEngineType4,
          miniEngineType5,
          miniEngineType6,
          miniEngineType7,
          miniEngineType8,
          miniEngineType9,
          miniEngineType10
        for (let i = 0; i < 9999; i++) {
          const attr = i + 2
          order = this.worksheet[j][`A${attr}`] ? this.worksheet[j][`A${attr}`].v : ''
          engineType = this.worksheet[j][`B${attr}`] ? this.worksheet[j][`B${attr}`].v : ''
          miniEngineType1 = this.worksheet[j][`C${attr}`] ? this.worksheet[j][`C${attr}`].v : ''
          miniEngineType2 = this.worksheet[j][`D${attr}`] ? this.worksheet[j][`D${attr}`].v : ''
          miniEngineType3 = this.worksheet[j][`E${attr}`] ? this.worksheet[j][`E${attr}`].v : ''
          miniEngineType4 = this.worksheet[j][`F${attr}`] ? this.worksheet[j][`F${attr}`].v : ''
          miniEngineType5 = this.worksheet[j][`G${attr}`] ? this.worksheet[j][`G${attr}`].v : ''
          miniEngineType6 = this.worksheet[j][`H${attr}`] ? this.worksheet[j][`H${attr}`].v : ''
          miniEngineType7 = this.worksheet[j][`I${attr}`] ? this.worksheet[j][`I${attr}`].v : ''
          miniEngineType8 = this.worksheet[j][`J${attr}`] ? this.worksheet[j][`J${attr}`].v : ''
          miniEngineType9 = this.worksheet[j][`K${attr}`] ? this.worksheet[j][`K${attr}`].v : ''
          miniEngineType10 = this.worksheet[j][`L${attr}`] ? this.worksheet[j][`L${attr}`].v : ''
          if (!order) {
            break
          } else {
            if (order) {
              await sleep(5)
              await this.insertToSQL(order,
                engineType,
                miniEngineType1,
                miniEngineType2,
                miniEngineType3,
                miniEngineType4,
                miniEngineType5,
                miniEngineType6,
                miniEngineType7,
                miniEngineType8,
                miniEngineType9,
                miniEngineType10)
            } else {
              this.loading = false
              this.disabled = false
              this.$notify.error(`请确认导入文件是否正确`)
              return
            }
          }
        }
        this.itemFile.splice(j, 1)
        this.worksheet.splice(j, 1)
        this.err === 0 ? this.$message.success(`导入完成`) : this.$message.error(`导入失败物料个数为${this.err}，请检查文件是否正确`)
        this.loading = false
        that.searchTable()
      } catch (e) {
        this.err++
        this.loading = false
        this.$notify.error(`导入数据错误,请检查导入文件是否正确`)
        console.log(`导入数据错误${e}`)
      }
    },
    async insertToSQL(order,
      engineType,
      miniEngineType1,
      miniEngineType2,
      miniEngineType3,
      miniEngineType4,
      miniEngineType5,
      miniEngineType6,
      miniEngineType7,
      miniEngineType8,
      miniEngineType9,
      miniEngineType10) {
      try {
        var param = []
        param.push(['订货号', order])
        param.push(['机型', engineType])
        param.push(['小机型1', miniEngineType1])
        param.push(['小机型2', miniEngineType2])
        param.push(['小机型3', miniEngineType3])
        param.push(['小机型4', miniEngineType4])
        param.push(['小机型5', miniEngineType5])
        param.push(['小机型6', miniEngineType6])
        param.push(['小机型7', miniEngineType7])
        param.push(['小机型8', miniEngineType8])
        param.push(['小机型9', miniEngineType9])
        param.push(['小机型10', miniEngineType10])
        var Data = this.CreateData('11', '潍柴_小机型_对应表_页面_增加', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result != 1) {
            this.$message.error(response.data[0].msg)
            this.dialogFormVisible1 = false
          }
        })
      } catch (e) {
        this.err++
        this.$message.error(`导入数据错误`)
        console.log(`导入数据错误${e}`)
      }
    },
    ExportExcel() {
      if (this.tableData.length !== 0) {
        var param = []
        param[0] = ['订货号', this.orderCode]
        param[1] = ['PageCurrent', 1]
        param[2] = ['PageSize', 99999]
        param[3] = ['PageCount', '1111', 'int', '1']
        param[4] = ['ItemCount', '1111', 'int', '1']
        var Data = this.CreateData('2001', '潍柴_小机型_对应表_页面_查询', param)
        this.exportExcel_NPOI(Data)
      } else {
        this.$message.warning('暂无数据')
      }
    },
    submitUpdate() {
      if (!this.form.orderCode) {
        this.$message.error('请填写订货号后提交！')
        return
      }
      var param = []
      param[0] = ['订货号', this.form.orderCode]
      param[1] = ['传递编号', this.form.positionCode]
      param[2] = ['小机型号', this.form.miniPartType]
      param[3] = ['系列', this.form.series]
      param[4] = ['类别', this.form.category]
      param[5] = ['Id', this.form.id]
      var Data = this.CreateData('11', '潍柴_打印位置_对应表_修改', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result == 1) {
          this.$message.success('添加成功！')
          this.dialogFormVisible1 = false
          this.searchTable()
        }
      })
    },
    update(row) {
      this.form.id = row.id
      this.form.orderCode = row.订货号
      this.form.engineType = row.机型
      this.form.miniEngineType1 = row.小机型1
      this.form.miniEngineType2 = row.小机型2
      this.form.miniEngineType3 = row.小机型3
      this.form.miniEngineType4 = row.小机型4
      this.form.miniEngineType5 = row.小机型5
      this.form.miniEngineType6 = row.小机型6
      this.form.miniEngineType7 = row.小机型7
      this.form.miniEngineType8 = row.小机型8
      this.form.miniEngineType9 = row.小机型9
      this.form.miniEngineType10 = row.小机型10

      this.dialogFormVisible1 = true
      this.formTitle = '修改关联'
    },
    deleteData(row) {
      this.$confirm('此操作将永久删除该打印位置，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['id', row.id]
        var Data = this.CreateData('11', '潍柴_小机型_对应表_页面_删除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result == 1) {
            this.$message.success('删除成功！')
            this.searchTable()
          }
        })
      })
    },
    searchTable() {
      this.loading = true
      this.tableData = []
      var param = []
      param[0] = ['订货号', this.orderCode]
      param[1] = ['PageCurrent', this.pageCurrent]
      param[2] = ['PageSize', this.pageSize]
      param[3] = ['PageCount', '1111', 'int', '1']
      param[4] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '潍柴_小机型_对应表_页面_查询', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response, 66)
        if (response.data.result.length !== 0) {
          this.tableData = response.data.result
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },

    searchTable2() {
      this.tableData2 = []
      var param = []
      var Data = this.CreateData('11', '潍柴_小机型_基本表_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableData2 = response.data
        }
      })
    },
    callOff() {
      this.dialogFormVisible = false
    },
    // 分页
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    },
    // 导入订单
    importOrder() {
      this.dialogFormVisible3 = true
    }
  }
}
</script>

<style scoped>
.topDiv {
  margin-bottom: 10px;
}
</style>
