<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <el-row>
          <el-input v-model="supplierName" placeholder="供应商" size="small" clearable style="width:180px;margin: 0px 10px"/>
          <el-input v-model="contractNumber" placeholder="合同编号" size="small" clearable style="width:180px;margin: 0px 10px"/>
          <el-button
            type="success"
            size="small"
            icon="el-icon-search"
            style="margin-left:10px"
            @click="total1=0;pageCurrent1=1;pageSize1=10;searchTable1()">查询</el-button>
        </el-row>
      </div>
    </el-card>
    <el-row>
      <el-card style="width: 40%; float: left">
        <el-table
          v-loading="loading1"
          id="expandTable"
          :data="tableData1"
          size="mini"
          border
          style="width: 100%"
          height="700px"
          highlight-current-row
          @row-click="searchTable2">
          <el-table-column label="供应商" align="center" min-width="200">
            <template slot-scope="scope">
              {{ scope.row.供应商名称 }}
            </template>
          </el-table-column>
          <!--        <el-table-column label="离线合同名称" align="center" min-width="150">-->
          <!--          <template slot-scope="scope">-->
          <!--            {{ scope.row.离线合同名称 }}-->
          <!--          </template>-->
          <!--        </el-table-column>-->
          <el-table-column label="离线合同编号" align="center" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.离线合同编号 }}
            </template>
          </el-table-column>
          <!--        <el-table-column label="采购员" align="center" min-width="60">-->
          <!--          <template slot-scope="scope">-->
          <!--            {{ scope.row.采购员 }}-->
          <!--          </template>-->
          <!--        </el-table-column>-->
          <el-table-column label="总金额" align="center" min-width="75">
            <template slot-scope="scope">
              {{ Number(scope.row.合同总额).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 10px;">
          <el-pagination
            :current-page="pageCurrent1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize1"
            :total="total1"
            style="display:inline-block;width:50%"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"/>
        </div>
      </el-card>
      <el-card style="width: 58%">
        <!--          <div id="offlineContract" style="background-color:white;min-height:500px;margin: 0 auto;width: 800px;border:1px solid black">-->
        <table v-show="contractDetail.length > 0" class="offlineContract" cellspacing="0px" align="center" border="1 solid black" width="700px">
          <tr>
            <th colspan="14"><h1>离线合同</h1></th>
          </tr>
          <tr>
            <td colspan="3" rowspan="2" style="text-align:center;font-size: 30px;font-weight: bold">GAOJING</td>
            <td width="80px">合同名称</td>
            <td id="contractName" colspan="2" style="text-align: left;"/>
            <td width="80px">供应商</td>
            <td id="supplier" colspan="5" style="text-align: left;"/>
            <td id="qrCode" colspan="2" rowspan="2"/>
          </tr>
          <tr>
            <td width="80px">合同编号</td>
            <td id="contractNum" colspan="2" style="text-align: left;"/>
            <td width="80px">采购员</td>
            <td id="buyer" colspan="5" style="text-align: left;"/>
          </tr>
          <tr id="tablehead">
            <td width="50px">序号</td>
            <td colspan="2">名称</td>
            <td>规格</td>
            <td colspan="2">型号</td>
            <td>数量</td>
            <td colspan="2">单价</td>
            <td colspan="2">合计</td>
            <td>交货期</td>
            <td colspan="2">备注</td>
          </tr>
          <tr>
            <td>总计</td>
            <td id="remark" colspan="10"/>
            <td id="total" colspan="2" style="text-align: left;"/>
            <td/>
          </tr>
        </table>
        <!--          </div>-->
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { searchOfflineContract, searchOfflineContractContent } from '@/api/PurchasingCenter/OfflineContractSearch'
import QRCode from 'qrcode'
import $ from 'jquery'
export default {
  name: 'OfflineContractSearch',
  data() {
    return {
      contractNumber: '',
      supplierName: '',
      total1: 0,
      pageCurrent1: 1,
      pageSize1: 20,
      tableData1: [],
      loading1: false,
      contractDetail: []
    }
  },
  created() {
    this.searchTable1()
  },
  methods: {
    // 查合同列表
    searchTable1() {
      let check1, check2
      this.contractNumber ? check1 = 1 : check1 = 0
      this.supplierName ? check2 = 1 : check2 = 0
      this.loading1 = true
      searchOfflineContract(this.pageCurrent1, this.pageSize1, check1, this.contractNumber, check2, this.supplierName).then(response => {
        this.tableData1 = response.data.rows
        this.total1 = response.data.total
        this.loading1 = false
      })
    },
    // 离线合同列表分页
    handleSizeChange1(val) {
      this.pageSize1 = val
      this.searchTable1()
    },
    // 离线合同列表分页
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchTable1()
    },
    searchTable2(row) {
      searchOfflineContractContent(row.离线合同流水号).then(response => {
        this.contractDetail = response.data
        this.showOffline(row)
      })
    },
    showOffline(row) {
      const children = document.getElementsByClassName('tableData')
      const parent = document.getElementsByClassName('offlineContract')[0]
      if (children.length !== 0) {
        for (let i = children.length - 1; i >= 0; i--) {
          parent.removeChild(children[i])
        }
      }
      const tr = []
      let length = 0
      length = this.contractDetail.length
      for (let i = 0; i < length; i++) {
        tr[i] = document.createElement('tr')
        tr[i].setAttribute('class', 'tableData')
        tr[i].innerHTML = `<td style="height: 40px"/><td colspan="2" style="height: 40px"/><td style="height: 40px"/><td colspan="2" style="height: 40px"/><td style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td style="height: 40px"/><td colspan="2" style="height: 40px"/>`
        $('#tablehead').after(tr[i])
      }
      let total = 0
      for (let j = 0; j < this.contractDetail.length; j++) {
        document.getElementsByClassName('tableData')[j].children[0].innerHTML = j + 1
        document.getElementsByClassName('tableData')[j].children[1].innerHTML = this.contractDetail[j].物料名称
        document.getElementsByClassName('tableData')[j].children[2].innerHTML = this.contractDetail[j].物料规格
        document.getElementsByClassName('tableData')[j].children[3].innerHTML = this.contractDetail[j].物料型号
        document.getElementsByClassName('tableData')[j].children[4].innerHTML = this.contractDetail[j].数量
        document.getElementsByClassName('tableData')[j].children[5].innerHTML = this.contractDetail[j].单价
        document.getElementsByClassName('tableData')[j].children[6].innerHTML = (this.contractDetail[j].数量 * this.contractDetail[j].单价).toFixed(2)
        document.getElementsByClassName('tableData')[j].children[7].innerHTML = this.contractDetail[j].交货期要求
        document.getElementsByClassName('tableData')[j].children[8].innerHTML = this.contractDetail[j].备注
        total += Number(this.contractDetail[j].数量 * this.contractDetail[j].单价)
      }
      total = total.toFixed(2)
      document.getElementById('contractNum').innerHTML = row.离线合同编号
      document.getElementById('contractName').innerHTML = row.离线合同名称
      document.getElementById('supplier').innerHTML = row.供应商名称
      document.getElementById('buyer').innerHTML = row.采购员
      document.getElementById('total').innerHTML = total
      document.getElementById('remark').innerHTML = row.离线合同备注
      $('#qrCode').html(`<img id="img">`)
      this.useqrcode(row.离线合同流水号) // 显示二维码
    },
    useqrcode(contractNum) { // 二维码
      const opts = {
        errorCorrectionLevel: 'H',
        type: 'image/jpeg',
        rendererOpts: {
          quality: 0.3
        }
      }
      const str = contractNum
      QRCode.toDataURL(str, opts, function(err, url) {
        if (err) throw err
        const img = document.getElementById('img')
        img.src = url
      })
    }
  }
}
</script>

<style scoped>
  .el-card{
    margin-bottom: 0px;
  }
  .el-date-editor{
    width:200px
  }
  .el-select{
    width:200px
  }
  .el-input{
    width:200px
  }
  span{
    margin: 10px 0 10px 10px;
  }
  .searchForm .el-form-item{
    margin-bottom: 5px;
  }
  .el-tag{
    margin: 0
  }
</style>
