<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="name"/>
            </template>
          </ai-card>
          <ai-card hideTitle class="staCard fill">
            <template slot="content">
              <div class="color-999" v-text="`党员积分`"/>
              <b class="color-26f" v-text="nowIntegral || 0"/>
            </template>
          </ai-card>
        </el-row>
        <ai-card title="余额变动明细">
          <template #right>
            <ai-download :instance="instance" :url="`/app/apppartyintegralinfo/listExport?partyId=${id}`" fileName="党员积分" :disabled="detailTable.length == 0">
              <el-button icon="iconfont iconExported" :disabled="detailTable.length == 0">导出</el-button>
            </ai-download>
          </template>
          <template #content>
            <ai-table :tableData="detailTable" isShowPagination :total="total" :current.sync="page.current"
                :size.sync="page.size"  @getList="getDetail()" :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"},
        {label: "类型", prop: "integralType", align: 'center', dict: "partyIntegralType"},
        {label: "变动积分", prop: "integral", align: 'center', render: (h, {row}) => {
          return h('span', null, (row.integralType==0? '-'+ row.integral : '+'+ row.integral))
          }
        },
        {label: "剩余积分", prop: "residualIntegral", align: 'center'},
        {label: "调整说明", prop: "remark"},
      ],
      form: {},
      rules: {
        learningIntegral: [
          {required: true, message: "请输入学习强国积分"},
          {pattern: /^\d+$/g, message: "请输入正整数"}
        ]
      },
      id: '',
      name: '',
      nowIntegral: '',
      page: {current: 1, size: 10},
      total: 0,
      detailTable: []
    }
  },
  methods: {
    getDetail() {
      let { id, name, nowIntegral } = this.$route.query
      this.instance.post("/app/apppartyintegralinfo/list", null, {
        params: {
          partyId: id,
          ...this.page,
          total: this.total
        }
      }).then(res => {
        if (res?.data) {
          this.detailTable = res.data.records
          this.total = res.data.total
          this.name = name
          this.nowIntegral = nowIntegral
          this.id = id
        }
      })
    },
    back() {
      this.$router.push({})
    },
    handleEditLearningIntergral(partyMemberId) {
      this.dialog = true
      this.form = {partyMemberId}
    }
  },
  created() {
    this.getDetail()
  }
}
</script>

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

  .color-999 {
    color: #999;
  }

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

  ::v-deep .staCard {
    font-size: 14px;
    width: 25%;

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

    & + .staCard {
      margin-left: 16px;
      width: 25%;
    }

    .ai-card__body {
      position: relative;

      .el-button {
        position: absolute;
        right: 32px;
        top: 6px;
      }
    }

  }
}
</style>
