<template>
  <div class="customer-css" >
    <!--  查询时间和产品  -->
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;" >
      <el-row>
        <el-col :span="24" style="">
          <el-form-item :label="'Request Date'" >
            <el-date-picker
              style="width: 130px"
              v-model="searchData.startDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="'To'" >
            <el-date-picker
              style="width: 130px"
              v-model="searchData.endDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="'Status:'">
            <el-select v-model="searchData.status" readonly  style="width: 130px">
              <el-option label="All" value=""></el-option>
              <el-option label="待审批" value="待审批"></el-option>
              <el-option label="审批通过" value="审批通过"></el-option>
              <el-option label="已拒绝" value="已拒绝"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <span style="cursor: pointer" slot="label" @click="getBaseList(1100)"><a herf="#">Supplier No</a></span>
            <el-input v-model="searchData.supplierNo" style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'Supplier Name:'">
            <el-input v-model="searchData.supplierName" style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'Request By:'">
            <el-input v-model="searchData.requestBy" style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'Request No:'">
            <el-input v-model="searchData.requestNo" style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="' '" >
            <el-button class="customer-bun-min" type="primary" @click="getMainData" style="">Query</el-button>
            <el-button @click="exportExcel()" type="primary" style="margin-left: 2px">{{'导出'}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table
      :height="height"
      :data="mainDataList"
      border
      ref="mainTable"
      highlight-current-row
      v-loading="dataListLoading"
      style="margin-top: 0px; width: 100%;">
      <!--        <el-table-column-->
      <!--          fixed="left"-->
      <!--          header-align="center"-->
      <!--          align="center"-->
      <!--          width="220"-->
      <!--          :label="'操作'">-->
      <!--          <template slot-scope="scope">-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <el-table-column
        v-for="(item,index) in columnList1" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <el-pagination style="margin-top: 0px"
                   @size-change="sizeChangeHandle"
                   @current-change="currentChangeHandle"
                   :current-page="pageIndex"
                   :page-sizes="[20, 50, 100, 200, 500]"
                   :page-size="pageSize"
                   :total="totalPage"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>






    <Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
  </div>
</template>

<script>
/*组件*/
import excel from "@/utils/excel-util.js";
import {
  searchSrmSupplierList,getSupplierGroupRequestList
} from '@/api/srm/srmSupplier.js'

import Chooselist from '@/views/modules/common/Chooselist_eam'
export default {
  data() {
    return {
      functionId: this.$route.meta.menuId,
      height: 200,
      currentRow: {},
      searchData:{
        startDate:'',
        endDate:'',
        status:'待审批',
        supplierNo:'',
        supplierName:'',
        requestBy:'',
        requestNo:'',
        site:this.$store.state.user.site,
        page: 1,
        limit: 10,
      },
      exportName: '供应商等级变更申请'+this.dayjs().format('YYYYMMDDHHmmss'),
      tagNo:'',
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      mainDataList:[],
      dataListLoading: false,
      columnList1: [
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '811010Table1RequestNo',
          tableId: "811010Table1",
          tableName: "供应商等级变更申请",
          columnProp: "requestNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "Request No",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '811010Table1RequestDate',
          tableId: "811010Table1",
          tableName: "供应商等级变更申请",
          columnProp: "requestDate",
          headerAlign: "center",
          align: "left",
          columnLabel: "Request Date",
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '811010Table1SupplierNo',
          tableId: "811010Table1",
          tableName: "供应商等级变更申请",
          columnProp: "supplierNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "Supplier No",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '811010Table1SupplierName',
          tableId: "811010Table1",
          tableName: "供应商等级变更申请",
          columnProp: "supplierName",
          headerAlign: "center",
          align: "left",
          columnLabel: "Supplier Name",
          columnWidth: '240',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '811010Table1OldSupplierGroup',
          tableId: "811010Table1",
          tableName: "供应商等级变更申请",
          columnProp: "oldSupplierGroup",
          headerAlign: "center",
          align: "left",
          columnLabel: "Old Supplier Group",
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '811010Table1NewSupplierGroup',
          tableId: "811010Table1",
          tableName: "供应商等级变更申请",
          columnProp: "newSupplierGroup",
          headerAlign: "center",
          align: "left",
          columnLabel: "New Supplier Group",
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '811010Table1Reason',
          tableId: "811010Table1",
          tableName: "供应商等级变更申请",
          columnProp: "reason",
          headerAlign: "center",
          align: "left",
          columnLabel: "Reason",
          columnWidth: '200',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '811010Table1Status',
          tableId: "811010Table1",
          tableName: "供应商等级变更申请",
          columnProp: "status",
          headerAlign: "center",
          align: "center",
          columnLabel: "Status",
          columnWidth: '80',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '811010Table1RequestBy',
          tableId: "811010Table1",
          tableName: "供应商等级变更申请",
          columnProp: "requestBy",
          headerAlign: "center",
          align: "left",
          columnLabel: "Request By",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
      ],
    }
  },
  /*组件*/
  components: {
    Chooselist,

  },

  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 220;
    })
  },
  methods: {
    // 获取基础数据列表S
    getBaseList(val, type) {
      this.tagNo = val
      this.$nextTick(() => {
        let strVal = ''
        if (val === 1100) {
          strVal = this.searchData.supplierNo
        }
        this.$refs.baseList.init(val, strVal)
      })
    },

    /* 列表方法的回调 */
    getBaseData(val) {
      if (this.tagNo === 1100) {
        this.searchData.supplierNo = val.supplier_no
      }
    },
    getMainData(){
      this.searchData.limit = this.pageSize
      this.searchData.page = this.pageIndex
      getSupplierGroupRequestList(this.searchData).then(({data}) => {
        if (data.code === 0) {
          this.mainDataList = data.page.list
          this.pageIndex = data.page.currPage
          this.pageSize = data.page.pageSize
          this.totalPage = data.page.totalCount
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getMainData()
    },

    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getMainData()
    },
    async exportExcel() {
      this.searchData.limit = -1
      this.searchData.page = 1
      excel.exportTable({
        url: "/srmSupplier/getSupplierGroupRequestList",
        columnMapping:  this.columnList1,//可以直接用table，不需要的列就剔除
        mergeSetting: [],//需要合并的列
        params: this.searchData,
        fileName: this.exportName+".xlsx",
        rowFetcher: res => res.data,
        columnFormatter: [],
        dropColumns: [],//需要剔除的列，例如dropColumns: ["netWeight"]，即剔除净重列
      });
    },


  },
  created() {
    //查询报表的类型
    this.getMainData();
  },


}
</script>

<!--当前页面的标签样式-->
<style scoped lang="scss">




</style>
