<template>
  <section class="ssuDetail">
    <ai-detail>
      <template slot="title">
        <ai-title title="积分明细" isShowBack isShowBottomBorder @onBackClick="$router.push({})"/>
      </template>
      <template slot="content">
        <div class="detail-info">
          <div class="detail-info__item">
            <h2>姓名</h2>
            <span v-text=" detail.sysUserName"/>
          </div>
          <div class="detail-info__item">
            <h2>员工积分</h2>
            <el-row type="flex" align="middle">
              <span class="color-26f fill" v-text="detail.sysUserIntegral || 0"/>
              <el-button type="text" @click="dialog=true,flag=false" v-if="user.info.id==detail.sysUserId">积分赠送</el-button>
            </el-row>
          </div>
          <div class="detail-info__item">
            <h2>已用积分</h2>
            <span>{{ detail.sysUserUsedIntegral || 0 }}</span>
          </div>
        </div>
        <ai-card title="积分变动明细">
          <template slot="right">
            <ai-download
                :instance="instance"
                url="/app/appvillagerintegraldetail/sysUserExport"
                :disabled="!Boolean(tableData.length)"
                :params="{residentId:detail.sysUserId,type}"
                fileName="积分变动明细">
              <el-button type="text" icon="iconfont iconExported">导出</el-button>
            </ai-download>
          </template>
          <template #content>
            <ai-search-bar>
              <template #left>
                <ai-select v-model="type" placeholder="请选择类型" @change="page.current=1,getDetail()"
                           :selectList="dict.getDict('integralDetailType')"/>
              </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="getDetail"/>
          </template>
        </ai-card>
      </template>
    </ai-detail>
    <ai-dialog title="积分赠送" width="600px" :visible.sync="dialog" @onConfirm="handleGiveScore" @closed="form={}">
      <el-alert type="warning" show-icon title="请注意,确认赠送对象和分值,积分赠送后,不可撤回。" :closable="false"/>
      <el-form class="mt10" size="small" ref="DialogForm" label-width="100px" label-suffix="：" :rules="rules" :model="form">
        <el-form-item label="选择对象" prop="objectType">
          <ai-select v-model="form.objectType" :selectList="dict.getDict('integralGiveObjType')" @change="form.userId=null"/>
        </el-form-item>
        <el-form-item label="选择人员" prop="userId" v-if="form.objectType">
          <ai-person-select v-show="form.objectType==1" :instance="instance" url="/admin/user/userIntegralList" customClicker
                            @selectPerson="handleResidentSelect" headerTitle="员工列表"/>
          <ai-person-select v-show="form.objectType==0" :instance="instance" :url="`/app/appresident/list?areaId=${user.info.areaId}`"
                            @selectPerson="handleResidentSelect" customClicker/>
        </el-form-item>
        <el-form-item label="赠送分值" prop="integral">
          <el-input v-model="form.integral" clearable placeholder="请输入">
            <span slot="append">积分总额:{{ detail.sysUserIntegral || 0 }}</span>
          </el-input>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'ssuDetail',
  props: {
    instance: Function,
    dict: Object
  },
  data() {
    return {
      page: {current: 1, size: 10, total: 0},
      type: "",
      detail: {},
      tableData: [],
      form: {},
      dialog: false,
      rules: {
        integral: {required: true, message: "请输入赠送分值,最多保留一位小数", pattern: /^\d*[.\d]\d?$/},
        objectType: {required: true, message: "请选择对象"},
        userId: {required: true, message: "请选择人员"},
      },
      flag: false
    }
  },
  created() {
    this.dict.load('integralDetailType')
    this.getDetail()
  },
  computed: {
    ...mapState(['user']),
    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: {
    getDetail() {
      let {id: userId} = this.$route.query, {type} = this
      this.instance.post('/app/appvillagerintegraldetail/sysUserIntegralList', null, {
        params: {userId, ...this.page, type}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
          this.tableData = res.data.details?.records || []
          this.page.total = res.data.details?.total || 0
        }
      })
    },
    handleGiveScore() {
      if(this.flag) return
      this.$refs.DialogForm.validate(v => {
        if (v) {
          this.flag = true
          this.instance.post("/admin/user/giveIntegral", null, {
            params: {...this.form}
          }).then(res => {
            if (res?.code == 0) {
              this.$message.success("提交成功!")
              this.dialog = false
              this.getDetail()
            }else{
              this.flag = false
            }
          }).catch(() => {
            this.flag = false
          })
        }
      })
    },
    handleResidentSelect(v) {
      this.form.userId = v?.id || ""
      this.form.userName = v?.name || ""
      this.$refs.DialogForm.clearValidate("userId")
    }
  }
}
</script>

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

  .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;
      }
    }
  }

  ::v-deep.color-26f {
    color: #26f !important;
  }
}
</style>
