<template>
  <div class="app-container">
    <el-card style="width: 1050px;">
      <div slot="header">
        <el-row>
          <el-input v-model="supplierName" placeholder="供应商/合同编号" size="small" clearable style="width:180px;margin: 0px 10px"/>
          <el-date-picker
            v-model="dateRange"
            :picker-options="pickerOptions"
            size="small"
            type="daterange"
            align="center"
            style="width: 240px;margin: 3px 0"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            range-separator="～"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
          <el-button type="primary" size="small" icon="el-icon-search" plain style="margin-left:10px" @click="total1=0;pageCurrent1=1;pageSize1=10;searchTable1()">查询</el-button>
          <el-tooltip :open-delay="200" effect="dark" content="打回重新编制" placement="top">
            <div style="display: inline-block">
              <el-button type="danger" size="small" icon="el-icon-back" plain style="margin-left:10px" @click="back">打回</el-button>
            </div>
          </el-tooltip>
          <el-button type="success" size="small" icon="el-icon-download" plain style="float: right;margin-right: 20px;text-align: right;" @click="exportExcel">导出</el-button>
        </el-row>
      </div>
    </el-card>
    <el-row>
      <el-card style="width: 1050px; float: left">
        <el-table
          v-loading="loading1"
          id="expandTable"
          :data="tableData1"
          size="mini"
          border
          stripe
          style="width: 100%"
          height="350px"
          highlight-current-row
          @sort-change="sortChange"
          @row-click="searchTable2">
          <el-table-column label="供应商" align="center" prop="供应商名称" min-width="200" sortable="custom" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.供应商名称 }}
            </template>
          </el-table-column>
          <el-table-column label="离线合同编号" align="center" prop="离线合同编号" min-width="130" sortable="custom" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.离线合同编号 }}
            </template>
          </el-table-column>
          <el-table-column label="合同金额(元)" align="center" min-width="110">
            <template slot-scope="scope">
              {{ Number(scope.row.合同总额).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="到货金额(元)" align="center" min-width="110">
            <template slot-scope="scope">
              {{ Number(scope.row.到货金额).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="已付金额(元)" align="center" min-width="110">
            <template slot-scope="scope">
              {{ Number(scope.row.已付金额).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="未付金额(元)" align="center" min-width="110">
            <template slot-scope="scope">
              {{ (Number(scope.row.合同总额) - Number(scope.row.已付金额)).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="采购员" align="center" min-width="110">
            <template slot-scope="scope">
              {{ scope.row.采购员 }}
            </template>
          </el-table-column>
          <el-table-column label="采购日期" align="center" prop="采购日期" min-width="110" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.提交日期 ? scope.row.提交日期.split(' ')[0] : '-' }}
            </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-row>
    <el-row>
      <el-card style="width: 1050px;padding-bottom: 50px;">
        <table v-show="contractDetail.length > 0" class="offlineContract" cellspacing="0px" align="center" border="1 solid black" width="500px">
          <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 style="text-align: center;" width="80px">合同名称</td>
            <td id="contractName" colspan="2" style="text-align: center;"/>
            <td style="text-align: center;" width="80px">供应商</td>
            <td id="supplier" colspan="5" style="text-align: center;"/>
            <td id="qrCode" style="text-align: center;" colspan="2" rowspan="2"/>
          </tr>
          <tr>
            <td style="text-align: center;" width="80px">合同编号</td>
            <td id="contractNum" colspan="2" style="text-align: center;"/>
            <td style="text-align: center;" width="80px">采购员</td>
            <td id="buyer" colspan="5" style="text-align: center;"/>
          </tr>
          <tr id="tablehead">
            <td style="text-align: center;" width="50px">序号</td>
            <td style="text-align: center;" colspan="2">名称</td>
            <td style="text-align: center;">规格</td>
            <td style="text-align: center;" colspan="2">型号</td>
            <td style="text-align: center;">数量</td>
            <td style="text-align: center;" colspan="2">单价</td>
            <td style="text-align: center;" colspan="2">合计</td>
            <td style="text-align: center;">交货期</td>
            <td style="text-align: center;" colspan="2">备注</td>
          </tr>
          <tr>
            <td style="text-align: center;">总计</td>
            <td id="remark" colspan="13" style="text-align: center;"/>
            <!--<td id="total" colspan="2" style="text-align: center;"/>-->
            <!--<td/>-->
          </tr>
        </table>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { searchOfflineContract, searchOfflineContractContent, back } from '@/api/PurchasingCenter/OfflineContractSearch'
import QRCode from 'qrcode'
import $ from 'jquery'
export default {
  name: 'OfflineContractSearch',
  data() {
    return {
      row1: '',
      dateRange: '',
      contractNumber: '',
      supplierName: '',
      total1: 0,
      number: '',
      pageCurrent1: 1,
      pageSize1: 10,
      tableData1: [],
      loading1: false,
      contractDetail: [],
      pickerOptions: {
        shortcuts: [{
          text: '上季度',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 30 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去半年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 366 / 2)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去一年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 365)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    // this.searchTable1()
  },
  methods: {
    sortChange(column, prop, order) {
      console.log(column + '-' + column.prop + '-' + column.order, 11111)
      if (column.prop === '供应商名称') {
        this.partName = 1
      } else if (column.prop === '离线合同编号') {
        this.partName = 2
      } else if (column.prop === '创建日期') {
        this.partName = 3
      } else {
        this.partName = ''
      }
      console.log(this.ordername, 9990999)
      if (column.order === 'ascending') {
        this.order = 1
      } else if (column.order === 'descending') { this.order = 2 } else {
        this.order = ''
      }
      this.searchTable1()
    },
    // 查合同列表
    searchTable1() {
      let check1, check2, check3
      this.contractNumber ? check1 = 1 : check1 = 0
      this.supplierName ? check2 = 1 : check2 = 0
      this.dateRange ? check3 = 1 : (check3 = 0, this.dateRange = '')
      this.loading1 = true
      console.log(this.dateRange, 'dateRange')
      searchOfflineContract(this.pageCurrent1, this.pageSize1, check1, this.contractNumber, check2, this.supplierName, this.order, this.partName, check3, this.dateRange[0], this.dateRange[1]).then(response => {
        this.tableData1 = response.data.rows
        this.total1 = response.data.total
        this.loading1 = false
      })
    },
    exportExcel() { // 离线合同导出
      let check1, check2, check3
      this.contractNumber ? check1 = 1 : check1 = 0
      this.supplierName ? check2 = 1 : check2 = 0
      this.dateRange ? check3 = 1 : (check3 = 0, this.dateRange = '')
      var param = []
      param[0] = ['离线合同编号_check', check1]
      param[1] = ['离线合同编号', this.contractNumber]
      param[2] = ['供应商名称_check', check2]
      param[3] = ['供应商名称', this.supplierName]
      param[4] = ['时间_check', check3]
      param[5] = ['开始时间', this.dateRange[0]]
      param[6] = ['结束时间', this.dateRange[1]]
      param[7] = ['是否不包含编辑中', 1]
      var Data = this.CreateData('2001', '报表_离线采购合同信息', param)
      this.exportExcel_NPOI(Data)
    },
    // 离线合同列表分页
    handleSizeChange1(val) {
      this.pageSize1 = val
      this.searchTable1()
    },
    // 离线合同列表分页
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchTable1()
    },
    back() {
      if (this.row1.到货金额 !== '0') {
        this.$message.error('已有到货信息，无法打回！！！')
      } else {
        this.$confirm('确定打回合同?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.number) {
            back(this.number).then(response => {
              if (response.data[0].result !== '0') {
                this.$message.success('打回成功')
                this.searchTable1()
              } else {
                this.$message.success('打回失败')
              }
            })
          } else {
            this.$message.warning('请选择要打回的合同')
          }
        })
      }
    },
    searchTable2(row) {
      this.row1 = row
      this.number = 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="text-align:center;height: 40px"/><td colspan="2" style="text-align:center;height: 40px"/><td style="text-align:center;height: 40px"/><td colspan="2" style="text-align:center;height: 40px"/><td style="text-align:center;height: 40px"/><td colspan="2" style="text-align:center;height: 40px"/><td colspan="2" style="text-align:center;height: 40px"/><td style="text-align:center;height: 40px"/><td colspan="2" style="text-align:center;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].物料名称 ? this.contractDetail[j].物料名称 : this.contractDetail[j].零件名称
        document.getElementsByClassName('tableData')[j].children[2].innerHTML = this.contractDetail[j].物料规格 ? this.contractDetail[j].物料规格 : this.contractDetail[j].规格
        document.getElementsByClassName('tableData')[j].children[3].innerHTML = this.contractDetail[j].物料型号 ? this.contractDetail[j].物料型号 : this.contractDetail[j].零件图号
        document.getElementsByClassName('tableData')[j].children[4].innerHTML = this.contractDetail[j].数量
        document.getElementsByClassName('tableData')[j].children[5].innerHTML = Number(this.contractDetail[j].单价).toFixed(2)
        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 = ''
      document.getElementById('remark').innerHTML = total + '  元'
      $('#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>
