<template>
  <ai-detail class="spDetail">
    <template slot="title">
      <ai-title title="积分明细" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="$router.push({})"></ai-title>
    </template>
    <template slot="content">
      <div class="detail-info">
        <div class="detail-info__item">
          <h2>账号</h2>
          <span>{{ info.phone || "-" }}</span>
        </div>
        <div class="detail-info__item">
          <h2>获取积分</h2>
          <span style="color: #2266FF;">{{ (info.personalIntegral + info.personalUsedIntegral) || 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 placeholder="请选择类型" v-model="doType" :selectList="dict.getDict('integralDoType')"
                         @change="page.current=1,getList()"/>
            </template>
          </ai-search-bar>
          <ai-table class="fs-14"
                    :tableData="tableData"
                    :col-configs="colConfigs"
                    :total="page.total"
                    :current.sync="page.current"
                    :size.sync="page.size"
                    tableSize="small"
                    :border="true"
                    :dict="dict"
                    @getList="getList">
          </ai-table>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: 'spDetail',
  props: {
    instance: Function,
    dict: Object
  },
  data() {
    return {
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      info: {},
      doType: '',
      tableData: []
    }
  },
  mounted() {
    this.dict.load('atWillReportType', 'integralDetailType', 'integralDoType').then(() => {
      this.getInfo()
      this.getList()
    });
  },
  computed: {
    colConfigs() {
      return [
        {prop: 'doTime', label: '时间', align: 'left'},
        {prop: "bizType", label: "积分来源", width: 160, align: 'center', dict: "integralDetailType"},
        {prop: 'changeIntegral', align: 'center', label: '变动积分'},
        {prop: 'nowIntegral', align: 'center', label: '剩余积分'},
        {prop: 'doType', label: '类型', align: 'left', dict: "integralDoType"}
      ]
    },
  },
  methods: {
    getInfo() {
      let {id} = this.$route.query
      this.instance.post(`/app/appportaluser/list?id=${id}`).then(res => {
        if (res?.data) {
          this.info = res.data.records?.[0]
        }
      })
    },
    getList() {
      let {id: portalUserId} = this.$route.query
      this.instance.post(`/appvillagerintegraldetail/list`, null, {
        params: {...this.page, portalUserId, doType: this.doType}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
    }
  }
}
</script>

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

  ::v-deep .ai-card__body {
    padding: 12px 16px 20px !important;
  }

  .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: 0 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>
