<template>
  <section class="ssuList">
    <ai-list>
      <template slot="title">
        <ai-title title="员工积分" isShowBottomBorder/>
      </template>
      <template slot="content">
        <ai-search-bar bottomBorder>
          <template slot="left">
            <ai-select v-model="searchObj.integralNotEmpty" placeholder="积分是否大于0" :selectList="dict.getDict('yesOrNo')"
                       @change="page.current = 1,getList()"/>
          </template>
          <template slot="right">
            <el-input v-model="searchObj.con" size="small" placeholder="姓名、联系方式" @change="page.current=1,getList()"
                      clearable suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <ai-search-bar class="mt10">
          <template slot="left">
            <ai-download :instance="instance" type="primary" url="/admin/user/exportUserIntegralList" :params="searchObj" fileName="员工积分"></ai-download>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :col-configs="colConfigs" :total="page.total" :current.sync="page.current" :size.sync="page.size" :dict="dict"
                  @getList="getList">
          <el-table-column label="操作" slot="options" fixed="right" align="center" width="180">
            <template v-slot="{row}">
              <div class="table-options">
                <el-button type="text" :disabled="!permissions('app_appvillagerintegralfamily_detail')" title="详情" @click="goDetail(row)">详情</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
  </section>
</template>

<script>
import {mapState} from 'vuex';

export default {
  name: 'ssuList',
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  data() {
    return {
      searchObj: {},
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      tableData: [],
    }
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        {prop: 'name', label: '姓名'},
        {prop: 'phone', label: '联系电话', align: 'center'},
        {prop: 'areaName', align: 'center', label: '所在区域'},
        {prop: 'integral', align: 'center', label: '员工积分'},
        {prop: 'usedIntegral', align: 'center', label: '已用积分'},
      ]
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.instance.post("/admin/user/userIntegralList", null, {
        params: {
          ...this.searchObj,
          ...this.page,
        }
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
    },
    goDetail(row) {
      let {id} = row
      this.$router.push({query: {id}})
    }
  }
}
</script>

<style lang="scss" scoped>
.ssuList {
  height: 100%;
  background: #f3f6f9;
  overflow: auto;

  .iconfont {
    cursor: pointer;
  }

  .family-list {
    ::v-deep .el-table--small {
      font-size: 14px !important;
    }
  }
}
</style>
