<template>
  <section class="psDetail">
    <ai-detail>
      <ai-title slot="title" title="积分详情" isShowBottomBorder isShowBack @onBackClick="back"/>
      <template #content>
        <el-row type="flex">
          <ai-card hideTitle class="staCard fill">
            <template #content>
              <div class="color-999" v-text="`姓名`"/>
              <b v-text="detail.name"/>
            </template>
          </ai-card>
          <ai-card hideTitle class="staCard fill">
            <template #content>
              <div class="color-999" v-text="`个人积分`"/>
              <b class="color-26f" v-text="detail.integral||0"/>
            </template>
          </ai-card>
          <ai-card hideTitle class="staCard fill">
            <template #content>
              <div class="color-999" v-text="`家庭积分`"/>
              <b class="color-26f" v-text="detail.familySurplusIntegral||0"/>
            </template>
          </ai-card>
        </el-row>
        <ai-card title="余额变动明细">
          <template #content>
            <ai-table :tableData="detail.integralInfoList" :isShowPagination="false" :col-configs="colConfigs"
                      :dict="dict"/>
          </template>
        </ai-card>
      </template>
    </ai-detail>
  </section>
</template>

<script>
export default {
  name: "psDetail",
  props: {
    instance: Function,
    dict: Object,
  },
  data() {
    return {
      detail: {},
      colConfigs: [
        {label: "时间", prop: "createTime", width: 120},
        {label: "类型", prop: "integralType", align: 'center', dict: "partyIntegralType"},
        {label: "变动积分", prop: "integral", align: 'center'},
        {label: "剩余积分", prop: "residualIntegral", align: 'center'},
        {label: "调整说明", prop: "remark"},
      ]
    }
  },
  methods: {
    getDetail() {
      let {id} = this.$route.query
      this.instance.post("/app/appparty/getPartyIntegralDetail", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
        }
      })
    },
    back() {
      this.$router.push({})
    }
  },
  created() {
    this.getDetail()
  }
}
</script>

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

  .color-999 {
    color: #999;
  }

  .color-26f {
    color: #26f;
  }

  .staCard {
    font-size: 14px;
    line-height: 28px;

    b {
      font-size: 24px;
      line-height: 40px;
    }

    & + .staCard {
      margin-left: 16px;
    }
  }
}
</style>
