<template>
  <div class="supplier-list-selector">
    <div class="filter-container">
      <div class="filter-control">
        <span>商品编号:</span>
        <el-input v-model="listQuery.name" size="mini" placeholder="商品编号" @keyup.enter.native="filterList" />
      </div>
      <div class="filter-control">
        <span>商品名称:</span>
        <el-input v-model="listQuery.name" size="mini" placeholder="商品名称" @keyup.enter.native="filterList" />
      </div>
      <div class="filter-control">
        <span>供应商名称:</span>
        <el-input v-model="listQuery.name" size="mini" placeholder="供应商名称" @keyup.enter.native="filterList" />
      </div>
      <div class="filter-control">
        <el-button type="primary" size="mini" @click="filterList">查询</el-button>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="list"
      border
      fit
      highlight-current-row
      header-row-class-name="tableHeader"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="id" label="商品ID" width="55" align="center" />
      <el-table-column prop="name" label="商品图片" align="center" />
      <el-table-column prop="serviceLevel" label="商品名称" align="center" />
      <el-table-column prop="contractStartDate" label="供应商名称" align="center" />
    </el-table>
    <!-- 页码 -->
    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
    <div class="control-footer">
      <el-button type="primary" @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>
<script>
import { getProviderList } from '@/api/serviceSettlement/service'

export default {
  name: 'ClubListSelector',
  data() {
    return {
      listQuery: {
        authUserId: '',
        authParty: '',
        auditStatus: '',
        status: '',
        name: '',
        pageNum: 1, // 页码
        pageSize: 10 // 分页
      },
      list: [],
      total: 0,
      multipleSelection: []
    }
  },
  computed: {
  },
  created() {
    this.getList()
  },
  methods: {
    // 取消
    onCancel() {
      this.multipleSelection = []
      this.$emit('cancel', [])
    },

    // 确认
    onConfirm() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('选择列表不能为空')
        return
      }
      this.$emit('confirm', this.multipleSelection)
    },

    // 获取机构列表
    async getList() {
      const { data } = await getProviderList(this.listQuery)
      this.list = data.results
      this.total = data.totalRecord
    },

    // 筛选机构列表
    filterList() {
      this.listQuery.pageNum = 1
      this.getList()
    },

    // 设置选中的行
    setSelection() {
      this.list.forEach((row) => {})
    },

    // 表格列选择
    handleSelectionChange(rows) {
      this.multipleSelection = rows
    },

    // 表格索引
    indexMethod(index) {
      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .pagination-container {
    padding: 0 !important;
  }
}
.control-footer {
  text-align: right;
  margin-top: 15px;
}
</style>
