<template>
  <ai-detail class="family_detail">
    <template slot="title">
      <ai-title title="个人积分明细" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="$emit('goBack')"></ai-title>
    </template>
    <template slot="content">
      <div class="detail-info">
        <div class="detail-info__item">
          <h2>姓名</h2>
          <span>{{ info.name }}</span>
        </div>
        <div class="detail-info__item">
          <h2>个人积分</h2>
          <span style="color: #2266FF;">{{ info.personalIntegral || 0 }}</span>
        </div>
        <div class="detail-info__item">
          <h2>已用积分</h2>
          <span style="color: #2266FF;">{{ info.personalUsedIntegral || 0 }}</span>
        </div>
      </div>
      <ai-card title="余额变动明细">
        <template #content>
          <ai-search-bar>
            <template #left>
              <ai-select v-model="type" placeholder="请选择类型" @change="page.current=1,getList()" :selectList="dict.getDict('integralDetailType')"/>
            </template>
            <template #right>
              <ai-download
                :instance="instance"
                url="/app/appvillagerintegraldetail/export"
                :disabled="!Boolean(tableData.length)"
                :params="{residentId:detailInfo.id,type}"
                fileName="余额变动明细">
                <el-button type="text" icon="iconfont iconExported">导出</el-button>
              </ai-download>
            </template>
          </ai-search-bar>
          <ai-table :tableData="tableData" :col-configs="colConfigs"
                    :total="page.total" border :dict="dict" :current.sync="page.current" :size.sync="page.size" @getList="getList"/>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: 'balance',

  props: {
    detailInfo: {
      type: Object,
      require: true
    },
    instance: Function,
    dict: Object
  },

  data() {
    return {
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      info: {},
      type: '',
      tableData: []
    }
  },

  created() {
    this.dict.load('integralDetailType')
    this.getList()
  },
  computed: {
    colConfigs() {
      return [
        {prop: 'doTime', label: '时间', width: 200},
        {prop: "type", label: "类型", dict: "integralDetailType", align: 'center'},
        {prop: 'changeIntegral', align: 'center', label: '变动积分', render: (h, {row}) => h('p', `${row.integralCalcType == 1 ? '+' : '-'}${row.changeIntegral}`)},
        {prop: 'nowIntegral', align: 'center', label: '剩余积分'},
        {prop: 'eventDesc', label: '事件', width: 500}
      ]
    }
  },
  methods: {
    getList() {
      this.instance.post(`/app/appresident/detail?id=${this.detailInfo.id}`).then(res => {
        if (res?.data) {
          this.info = res.data.resident
          let {type, info: {id: residentId}} = this
          this.instance.post(`/app/appvillagerintegraldetail/IntegralList`, null, {
            params: {...this.page, queryType: 1, type, residentId}
          }).then(res => {
            if (res?.data) {
              this.tableData = res.data.records
              this.page.total = res.data.total
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.family_detail {
  height: 100%;
  background-color: #fff;

  .detail-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .detail-info__item {
      flex: 1;
      height: 96px;
      margin-right: 20px;
      padding: 16px 24px;
      background: #FFFFFF;
      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
      border-radius: 4px;

      &:last-child {
        margin-right: 0;
      }

      h2 {
        margin-bottom: 8px;
        color: #888888;
        font-size: 16px;
        font-weight: bold;
      }

      span {
        display: block;
        line-height: 32px;
        font-size: 24px;
        font-weight: bold;
        color: #222;
      }
    }
  }

  .iconExported {
    color: #5088FF;
    font-size: 12px;
    cursor: pointer;
  }

  .info {
    padding: 16px 0 16px 0;
  }

  .do_type {
    height: 56px;
  }

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