<template>
  <section class="spList">
    <ai-list>
      <ai-title slot="title" title="个人积分" isShowBottomBorder/>
      <template slot="content">
        <ai-search-bar bottomBorder>
          <template slot="left">
            <el-select size="small" v-model="searchObj.isPositive" placeholder="积分是否大于0" clearable
                       @change="page.current = 1,getList()">
              <el-option
                  v-for="(item,i) in isPositiveList"
                  :key="i"
                  :label="item.dictName"
                  :value="item.dictValue">
              </el-option>
            </el-select>
          </template>
          <template slot="right">
            <el-input v-model="searchObj.phone" size="small" placeholder="用户账号"
                      @change="page.current = 1, searchObj.con = '', getList()" clearable
                      suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <ai-table
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="page.total"
            style="margin-top: 12px;"
            :current.sync="page.current"
            :size.sync="page.size"
            @getList="getList">
          <el-table-column label="操作" slot="options" fixed="right" align="center" width="180">
            <template v-slot="{row}">
              <div class="table-options">
                <!-- :disabled="!$permissions('app_appvillagerintegralfamily_detail')" -->
                <el-button type="text"  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: "spList",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  data() {
    return {
      searchObj: {
        householdName: '',
        con: '',
        isPositive: ''
      },
      isPositiveList: [{
        dictName: '是',
        dictValue: '1'
      }, {
        dictName: '否',
        dictValue: '0'
      }],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      tableData: [],
    }
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        {
          prop: 'phone',
          align: 'center',
          label: '用户账号',
        },
        {
          prop: 'personalIntegral',
          align: 'center',
          label: '获取积分',
        },
        {
          prop: 'personalUsedIntegral',
          align: 'center',
          label: '已用积分',
        },
        {
          align: 'center',
          label: '剩余积分',
          render: (h, {row}) => h('span', null, row.personalIntegral - row.personalUsedIntegral)
        }
      ]
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.instance.post("/app/appportaluser/list", null, {
        params: {
          ...this.searchObj,
          ...this.page,
        }
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.records.map(v => {
            return v
          })
          this.page.total = res.data.total
        }
      })
    },
    goDetail(row) {
      let {id} = row
      this.$router.push({query: {id}})
    }
  }
}
</script>

<style lang="scss" scoped>
.spList {
  height: 100%;

  .form_div {
    width: 380px;
  }

  .add_btn {
    color: #5088FF;
    font-size: 14px;
    line-height: 36px;
    text-align: right;

    span {
      cursor: pointer;
    }

    span:nth-child(2) {
      margin-left: 4px;
    }

  }

  .iconfont {
    cursor: pointer;
  }

  .iconAll_Profile {
    padding: 0 8px;
  }

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