<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="`学习强国`"/>
              <el-button type="text" @click="handleEditLearningIntergral(detail.id)">编辑</el-button>
              <b class="color-26f" v-text="detail.learningIntegral||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.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>
    <ai-dialog :visible.sync="dialog" title="学习强国设置" width="500px" @close="form={}" @onConfirm="submit">
      <el-form :model="form" size="small" ref="DialogForm" :rules="rules" label-width="110px">
        <el-form-item label="学习强国积分" prop="learningIntegral">
          <el-input v-model.number="form.learningIntegral" placeholder="请输入正整数" clearable/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </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'},
        {label: "剩余积分", prop: "residualIntegral", align: 'center'},
        {label: "调整说明", prop: "remark"},
      ],
      dialog: false,
      form: {},
      rules: {
        learningIntegral: [
          {required: true, message: "请输入学习强国积分"},
          {pattern: /^\d+$/g, message: "请输入正整数"}
        ]
      }
    }
  },
  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({})
    },
    submit() {
      this.$refs.DialogForm.validate(v => {
        if (v) {
          this.instance.post("/app/appparty/editLearningIntegral", this.form).then(res => {
            if (res?.code == 0) {
              this.$message.success("提交成功!")
              this.dialog = false
              this.getDetail()
            }
          })
        }
      })
    },
    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;

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

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

    .ai-card__body {
      position: relative;

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

  }
}
</style>
