<template>
  <div class="app-container">
    <el-card>
      <div style="margin-top: 7px; margin-bottom: 7px">
        <el-select
          v-model="customerNameValue"
          :remote-method="getCustomer"
          style="width:200px"
          placeholder="买方名称"
          size="small"
          filterable
          remote
          clearable>
          <el-option
            v-for="item in customerName"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span style="font-size: 13px;color: black">提交日期</span>
        <el-date-picker
          v-model="dateRange"
          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-select
          v-model="contractStateValue"
          style="width:100px;margin-left: 10px"
          placeholder="合同状态"
          size="small"
          filterable
          clearable>
          <el-option
            v-for="item in contractState"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-button
          icon="el-icon-search"
          type="primary"
          plain
          size="small"
          style="margin-left: 10px"
          @click="pageCurrent = 1;pageSize = 100;searchTable()">查询
        </el-button>
        <el-button type="success" plain icon="el-icon-download" size="small" @click="exportExcel()">导出</el-button>
      </div>
    </el-card>
    <el-card>
      <el-table
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        show-summary
        border
        stripe
        size="small"
        style="width: 100%"
        height="750"
        @sort-change="sortChange">
        <el-table-column label="状态" align="center" prop="状态" sortable="custom" width="80px">
          <template slot-scope="scope">
            {{ scope.row.状态 }}
          </template>
        </el-table-column>
        <el-table-column label="合同编号" align="center" width="140px">
          <template slot-scope="scope">
            {{ scope.row.合同编号 }}
          </template>
        </el-table-column>
        <el-table-column label="买方名称" align="center" width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.客户名称 }}
          </template>
        </el-table-column>
        <el-table-column label="合同金额（元）" align="center" prop="合同金额" width="140px">
          <template slot-scope="scope">
            {{ scope.row.合同金额 }}
          </template>
        </el-table-column>
        <el-table-column label="付款方式" align="center" width="130px">
          <template slot-scope="scope">
            {{ scope.row.付款方式 }}
          </template>
        </el-table-column>
        <el-table-column label="交货日期" width="90" align="center">
          <template slot-scope="scope">
            {{ scope.row.交货日期 }}
          </template>
        </el-table-column>
        <el-table-column label="合同备注" align="center" width="120px">
          <template slot-scope="scope">
            {{ scope.row.合同备注 }}
          </template>
        </el-table-column>
        <el-table-column label="经手人" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.经手人 }}
          </template>
        </el-table-column>
        <el-table-column label="签订日期" align="center" width="90">
          <template slot-scope="scope">
            {{ scope.row.签订日期 }}
          </template>
        </el-table-column>
        <el-table-column label="提交日期" align="center" width="90">
          <template slot-scope="scope">
            {{ scope.row.提交日期 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-tooltip :open-delay="700" effect="dark" content="查看合同订单" placement="top">
              <el-button
                type="text"
                icon="el-icon-search"
                size="mini"
                style="margin-right: 10px"
                @click="deleteProduct(scope.row)"/>
            </el-tooltip>
            <el-tooltip :open-delay="700" effect="dark" content="打回合同" placement="top">
              <el-button
                type="text"
                icon="el-icon-right"
                size="mini"
                style="margin-right: 10px"
                @click="deleteProduct(scope.row)"/>
            </el-tooltip>
            <el-tooltip :open-delay="700" effect="dark" content="删除合同" placement="top">
              <el-button type="text" icon="el-icon-delete" size="mini" @click="deleteProduct(scope.row)"/>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[10, 20, 30, 40, 100]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChanges"
          @current-change="handleCurrentChanges"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      customerNameValue: '', // 买方名称
      customerName: [], // 买方名称数组
      dateRange: '', // 提交日期
      contractStateValue: '', // 合同状态
      contractState: [
        {
          value: 2,
          label: '未提交'
        }, {
          value: 1,
          label: '提交'
        }
      ], // 合同状态数组
      loading: false, // 数据加载
      total: 0, // 分页总数
      tableData: [], // 合同信息表
      pageCurrent: 1, // 分页当前页
      pageSize: 100, // 分页每页显示条数
      orderName: '', // 排序列名
      order: '' // 排序方式
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getCustomer('')
    },
    getCustomer(query) {
      this.customerName = []
      var param = []
      param[0] = ['客户名称', query]
      var Data = this.CreateData('11', '合同管理_客户信息_查询数据_bak', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.customerName.push({
            label: response.data[i].客户名称,
            value: response.data[i].客户流水号
          })
        }
      })
    },
    /* exportExcel() {
      if (this.tableData.length !== 0) {
        let check, check1, check2, check3
        this.dateRange ? check3 = 1 : (check3 = 0, this.dateRange = '')
        this.supplierNameValue ? check = 1 : check = 0
        this.partNumber ? check1 = 1 : check1 = 0
        if (this.MaterialsValue !== '' && this.MaterialsValue !== null) {
          check2 = 1
        } else {
          check2 = 0
        }
        var param = []
        param[0] = ['供应商流水号_check', check]
        param[1] = ['供应商流水号', this.supplierNameValue]
        param[2] = ['零件图号_check', check1]
        param[3] = ['零件图号', this.partNumber]
        param[4] = ['备料状态_check', check2]
        param[5] = ['备料状态', this.MaterialsValue]
        param[6] = ['下单时间_check', check3]
        if (check3 === 0) {
          param[7] = ['开始时间', '']
          param[8] = ['结束时间', '']
        } else {
          param[7] = ['开始时间', this.dateRange[0]]
          param[8] = ['结束时间', this.dateRange[1]]
        }
        param[9] = ['排序名称', this.ordername]
        param[10] = ['排序方式', this.order]
        param[11] = ['角色编号', this.token]
        param[12] = ['人员编号', this.id]
        var Data = this.CreateData('2001', '报表_备料管理_外购备料_综合查询数据', param)
        this.exportExcel_NPOI(Data)
      } else {
        this.$message.warning('暂无数据')
      }
    },*/
    searchTable() {
      let customerNameValue_check, dateRange_check, contractStateValue_check
      this.customerNameValue ? customerNameValue_check = 1 : customerNameValue_check = 0
      this.dateRange ? dateRange_check = 1 : (dateRange_check = 0, this.dateRange = '')
      console.log(this.contractStateValue, 123)
      this.contractStateValue ? contractStateValue_check = 1 : contractStateValue_check = 0
      var param = []
      param[0] = ['客户流水号_check', customerNameValue_check]
      param[1] = ['客户流水号', this.customerNameValue]
      param[2] = ['时间_check', dateRange_check]
      param[3] = ['开始时间', this.dateRange[0]]
      param[4] = ['结束时间', this.dateRange[1]]
      param[5] = ['合同状态_check', contractStateValue_check]
      param[6] = ['合同状态', this.contractStateValue]
      param[7] = ['排序名称', this.orderName]
      param[8] = ['排序方式', this.order]
      var Data = this.CreateData('11', 'PDM_项目名称_全部_查询数据', param, this.pageSize, this.pageCurrent)
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data.rows
        this.total = response.data.total
      })
    },
    sortChange(column) {
      if (column.prop === '状态') {
        this.orderName = 1
      }
      if (column.order === 'ascending') {
        this.order = 1
      } else if (column.order === 'descending') {
        this.order = 2
      } else {
        this.order = ''
      }
      this.searchTable()
    },
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

