<template>
  <div class="app-container">
    <el-row style="width: 97%;margin-left: 20px;">
      <el-col :span="24">
        <el-card style="margin: 10px 0;width: 100%;">
          <!--          <span style="margin-left: 10px">配料工位号：</span>-->
          <!--          <el-select-->
          <!--              v-model="stationNumberValue"-->
          <!--              placeholder="请选择工位号"-->
          <!--              clearable-->
          <!--              filterable-->
          <!--              style="width: 200px;height: 50px; margin-left: 13px">-->
          <!--            <el-option-->
          <!--                v-for="item in stationNumber"-->
          <!--                :key="item.value"-->
          <!--                :label="item.label"-->
          <!--                :value="item.value"-->
          <!--                size="mini"/>-->
          <!--          </el-select>-->
          <el-select v-model="EngineName1" placeholder="请选择比对零件号" filterable style="margin-left: 350px">
            <el-option
                v-for="item in smallEngineList"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
          <el-button size="small" type="distribution" style="margin: 0 .5vw;" @click="searchBomList();">
            比对零件号差异
          </el-button>
          <el-select v-model="EngineName2" placeholder="请选择比对零件号" filterable>
            <el-option
                v-for="item in smallEngineList"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
          <el-button size="small" type="distribution" @click="printBom()" style="margin: 0 2vw;float: right">
            打印配料换型清单
          </el-button>
          <el-button id="printButton" v-print="printObj" style="display: none"></el-button>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card style="height: 700px;overflow-y: auto">
          <div ref="printTest" id="printTest" style="width: 100%;height: 100%" :class="isPrint ? 'smallText' : ''">
            <div class="title">
              配料工位换型差异清单
            </div>
            <div>
              <!--写原生Table来试试-->
              <table class="tableBox">
                <tr class="tableTh">
                  <td colspan="3">福田号源:{{ tableHeaderData.FotonCode }}</td>
                  <td colspan="3">福田号目标:{{ tableHeaderData.FotonCode2 }}</td>
                  <td>{{ tableHeaderData.EngineType }}</td>
                  <td>{{ tableHeaderData.EngineType2 }}</td>
                  <td></td>
                </tr>
                <tr class="tableTh">
                  <td colspan="3">源:{{ tableHeaderData.FotonK }}</td>
                  <td colspan="3">目标:{{ tableHeaderData.FotonK2 }}</td>
                  <td>{{ tableHeaderData.PKB }}</td>
                  <td>{{ tableHeaderData.PKB2 }}</td>
                  <td></td>
                </tr>
                <tr class="tableTh">
                  <td>工位号</td>
                  <td width="300">工位名称</td>
                  <td>配料工位号</td>
                  <td>零件编号</td>
                  <td width="300">零件名称(中文)</td>
                  <td>数量/WTB</td>
                  <td>&nbsp;{{ tableHeaderData.Engine }}&nbsp;</td>
                  <td>&nbsp;{{ tableHeaderData.Engine2 }}&nbsp;</td>
                  <td>是否差异</td>
                </tr>
                <tr v-for="(item,index) in tableData">
                  <td>&nbsp;&nbsp;{{ item.工位号 }}&nbsp;&nbsp;</td>
                  <td style="text-align: left">{{ item.工位名称 }}</td>
                  <td>&nbsp;&nbsp;{{ item.配料工位 }}&nbsp;&nbsp;</td>
                  <td>&nbsp;&nbsp;{{ item.零件编号 }}&nbsp;&nbsp;</td>
                  <td style="text-align: left">{{ item.零件名称 }}</td>
                  <td>&nbsp;{{ item.基本数量 }}&nbsp;</td>

                  <td v-if="item.数量 == 0">{{ item.数量 }}</td>
                  <td v-else style="background-color:#737373;color: #fff;">{{ item.数量 }}</td>
                  <td v-if="item.数量2 == 0">{{ item.数量2 }}</td>
                  <td v-else style="background-color:#737373;color: #fff;">{{ item.数量2 }}</td>
                  <td>&nbsp;&nbsp;{{ item.是否差异 == 1 ? '是' : '' }}&nbsp;&nbsp;</td>
                </tr>
              </table>
            </div>
            <div
                style="display: flex;width: 100%;flex-wrap: wrap;justify-content: space-around;align-items: center;margin-top: 50px">
              <div
                  v-for="(url, key) in urls"
                  :key="key"
              >
                <el-image
                    :key="url.url"
                    :src="url.url"
                    :preview-src-list="urls1"
                    lazy
                />
                <div>{{ url.name + url.describe }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {html2CanvasPrint} from '@/utils/print'
import print from 'vue-print-nb'

export default {
  name: 'MenuManagement',
  data() {
    return {
      tableData: [],
      EngineName1: '',
      EngineName2: '',
      selectType: '0',
      rules1: {
        moduleName: [{required: true, message: '请输入', trigger: ['blur', 'change']}]
      },
      rules2: {
        moduleName: [{required: true, message: '请输入', trigger: ['blur', 'change']}]
      },
      smallEngineList: [],
      dom1: null,
      dom2: null,
      stationNumber: [], // 工位号
      stationNumberValue: '',
      bigEngine: '',
      bigEngineList: [],
      that: this,
      isPrint: false,
      tableWidth: 1550,
      tableScaleX: 0.6,
      tableScaleY: 0.6,
      urls: [], // 图片数组
      urls1: [], // 图片数组
      printObj: {
        id: 'printTest',
        popTitle: '&nbsp', // 打印配置页上方的标题
        extraHead: '&nbsp', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        // preview: true, // 是否启动预览模式，默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback() {
          console.log('正在加载预览窗口！')
        }, // 预览窗口打开之前的callback
        previewOpenCallback() {
          console.log('已经加载完预览窗口，预览打开了！')
        }, // 预览窗口打开时的callback
        beforeOpenCallback(vue) {
          console.log('开始打印之前！', this)
        }, // 开始打印之前的callback
        openCallback() {
          console.log('执行打印了！')
        }, // 调用打印时的callback
        closeCallback(vue) {
          vue.isPrint = false
          vue.tableWidth = 1550
          // vue.tableScaleX = 1
          // vue.tableScaleY = 1
          console.log('关闭了打印工具！', this.tableWidth)
        }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted(vue) {
          console.log('点击v-print绑定的按钮了！')
        },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''

      },
      tableHeaderData: {
        FotonCode: '',
        FotonCode2: '',
        FotonK: '',
        FotonK2: '',
        EngineType: '',
        EngineType2: '',
        PKB: '',
        PKB2: '',
        Engine: '',
        Engine2: ''
      }
    }
  },
  directives: {
    print
  },

  created() {
    this.getStationNumber()
    this.getSmallEngine()
    setTimeout(() => {
      // this.overTable()
    }, 3000)
  },
  methods: {
    // 查询配料工位号
    getStationNumber() {
      this.stationNumber = []
      var param = []
      var Data = this.CreateData('11', '北汽福田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].配料工位
          })
        }
      })
    },
    // 查询零件号数据
    searchBomList() {
      if (!this.EngineName1 || !this.EngineName2) {
        this.$message({
          type: 'error',
          message: '请先选择比对零件号后再进行查询！'
        })
        return false
      }
      this.tableData = []
      this.tableHeaderData = {
        FotonCode: '',
        FotonCode2: '',
        FotonK: '',
        FotonK2: '',
        EngineType: '',
        EngineType2: '',
        PKB: '',
        PKB2: '',
        Engine: '',
        Engine2: ''
      }
      var param = []
      param[0] = ['零件号1', this.EngineName1]
      param[1] = ['零件号2', this.EngineName2]
      var Data = this.CreateData('11', '北汽福田_BOM_配料工位_零件差异查询', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response, 66)
        if (response.data.length !== 0) {
          if (response.data.length == 1) {
            this.$message.warning(response.data[0].msg)
            return
          }

          this.tableData = response.data
          const headRowData = response.data[0]
          this.tableHeaderData.FotonCode = headRowData.福田零件号
          this.tableHeaderData.FotonCode2 = headRowData.福田零件号2
          this.tableHeaderData.FotonK = headRowData.FotonK
          this.tableHeaderData.FotonK2 = headRowData.FotonK2
          this.tableHeaderData.EngineType = headRowData.基本型号
          this.tableHeaderData.EngineType2 = headRowData.基本型号2
          this.tableHeaderData.PKB = headRowData.PKB
          this.tableHeaderData.PKB2 = headRowData.PKB2
          this.tableHeaderData.Engine = headRowData.零件号
          this.tableHeaderData.Engine2 = headRowData.零件号2
        }

        // 请求图片数据
        this.urls = []
        this.urls1 = []
        var param2 = []
        param2[0] = ['零件号', this.EngineName2]
        var Data2 = this.CreateData('11', '北汽福田工位BOM换型比对_BOM图片_查询', param2)
        this.ExecDatabase(Data2).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,
                name: response.data[i].图片名称,
                type: response.data[i].图片类型,
                describe: response.data[i].描述
              })
              this.urls1.push('data:image/png;base64,' + response.data[i].图片)
            }
          }
        })

        // this.loading = false
      })

    },
    // 获取小机型
    getSmallEngine() {
      this.smallEngineList = []
      var param = []
      this.bigEngine ? param[0] = ['基本型号', this.bigEngine] : ''
      var Data = this.CreateData('11', '北汽福田_BOM_零件号查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.smallEngineList.push({
            label: response.data[i].零件号,
            value: response.data[i].零件号
          })
        }
      })
    },
    // 根据差异来决定该行颜色
    cellClassName({row, column}) {
      let isNoEqual = false
      row.工位号 !== row.工位号2 ? isNoEqual = true : ''
      // row.零件号 !== row.零件号2 ? isNoEqual = true : ''
      // row.零件编号 !== row.零件编号2 ? isNoEqual = true : ''
      row.零件名称 !== row.零件名称2 ? isNoEqual = true : ''
      row.数量 !== row.数量2 ? isNoEqual = true : ''

      if (isNoEqual) {
        return 'NoEqual-row'
      }
      return ''
    },
    // 将BOM打印出来
    printBom() {
      // html2CanvasPrint(this.$refs.printTest,()=>{console.log("打印成功")})
      const btn = document.getElementById('printButton')
      const event = document.createEvent('MouseEvents')
      event.initMouseEvent('click', true, true, window)
      // this.tableScaleX = 0.5
      // this.tableScaleY = 0.5
      // this.tableWidth = 700
      this.isPrint = true
      setTimeout(() => {
        btn.dispatchEvent(event)
      }, 50)
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

/deep/ .el-table .el-table__body .NoEqual-row {
  background: rgba(255, 255, 0, 0.5) !important;
  /* color: #fff !important; */
}

::v-deep.smallText thead {
  font-size: 10px !important;
  color: #000000 !important;
}

::v-deep.smallText td.el-table__cell div {
  font-size: 8px !important;
  color: #000000 !important;
}

/deep/ .el-table thead {
  font-size: 20px;
  color: #000000;
}

::v-deep#printTest .el-table {
  margin-top: 10px;
}

::v-deep#printTest table {
  width: 100% !important;
}

::v-deep#printTest .el-table__body,
.el-table__header {
  width: 100% !important;
}

::v-deep#printTest .el-table__body {
  width: 100% !important;
}

.tableBox {
  border: 1px solid #000;
  border-spacing: 0px;
  border-collapse: collapse;
}

.tableBox tr {
  height: 20px;
}

.tableBox tr td {
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
  text-align: center;
  border: 1px solid #000;
  border-spacing: 0px;
  font-size: 20px;
  border-collapse: collapse;
  height: 20px;
}

.tableBox .tableTh {
  font-size: 30px;
  font-weight: 700;
  height: 20px;
}

.smallText .tableBox .tableTh {
  font-size: 15px;
}

.smallText .tableBox tr td {
  font-size: 10px;
}

.title {
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

.smallText .title {
  font-size: 20px;
}

@media print {
  #printWrap {
    width: 210mm; /* A4 纸张宽度 */
    height: 297mm; /* A4 纸张高度 */
    margin: 0 auto;
  }
}
</style>
