<template>
  <div class="scoreChange">
    <ai-list isTabs>
      <template slot="content">
        <ai-search-bar bottomBorder>
          <template slot="left">
            <el-button type="primary" icon="iconfont iconAdd" @click="dialog=true"
                       :disabled="!permissions('app_appvillagerintegraldetail_change')">添加
            </el-button>
            <ai-import :instance="instance" :dict="dict" name="积分调整" type="appvillagerintegraldetail"
                       v-if="permissions('app_appvillagerintegraldetail_change')" @success="getList"/>
          </template>
        </ai-search-bar>
        <ai-table
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="page.total"
            :current.sync="page.current"
            :size.sync="page.size"
            @getList="getList">
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog
        title="添加积分调整"
        :visible.sync="dialog"
        :destroyOnClose="true"
        width="720px"
        @onConfirm="onConfirm"
        @closed="form={}">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="选择人员" prop="residentId">
          <ai-person-select :instance="instance" :customClicker="true"
                            :url="'/app/appresident/list?areaId=' + user.info.areaId"
                            :isMultiple="false" dialogTitle="选择" @selectPerson="selectPerson">
            <template name="option" v-slot:option="{ item }">
              <span class="iconfont iconProlife">{{ item.name }}</span>
              <ai-id mode="show" :show-eyes="false" :value="item.idNumber"/>
            </template>
          </ai-person-select>
        </el-form-item>
        <el-form-item label="调整说明" prop="description">
          <el-input v-model.trim="form.description" placeholder="请输入..." type="textarea" :rows="4" show-word-limit
                    maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="doType">
          <el-radio-group v-model="form.doType">
            <el-radio label="0">加分</el-radio>
            <el-radio label="1">减分</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="积分" prop="changeIntegral">
          <el-input v-model.trim.num="form.changeIntegral" placeholder="请输入正整数" size="small"></el-input>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </div>
</template>

<script>
import {mapState} from "vuex"

export default {
  name: "scoreChange",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    areaId: String
  },
  data() {
    return {
      tableData: [],
      page: {
        current: 1,
        size: 10,
        total: 10
      },
      form: {},
      dialog: false,
      personList: [],
    }
  },
  computed: {
    ...mapState(["user"]),
    rules() {
      return {
        residentId: [{required: true, message: '请选择人员', trigger: 'blur'},],
        description: [{required: true, message: '请输入调整说明', trigger: 'blur'},],
        doType: [{required: true, message: '请输入调整说明', trigger: 'change'},],
        changeIntegral: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!/^[1-9]\d*$/.test(value)) {
                callback(new Error('请输入正整数'))
              } else {
                callback();
              }
            }, trigger: 'blur'
          },],
      }
    },
    colConfigs() {
      return [
        {prop: "residentName", label: "姓名"},
        {prop: "description", label: "调整说明"},
        {
          prop: "changeIntegral", label: "类型", align: "center",
          render: (h, {row}) => [< span> {+row.changeIntegral > 0 ? "加分" : '减分'
          } < /span>]
        },
        {
          prop: "changeIntegral",
          label: "积分",
          align: "center",
          render: (h, {row}) => [
            <span>{row.changeIntegral > 0 ? `+${row.changeIntegral}` : `${row.changeIntegral}`}</span>]
        },
        {prop: "doTime", label: "操作时间"},
        {prop: "declareObjName", label: "操作人", align: "center"},
      ]
    }
  },
  methods: {
    selectPerson(val) {
      if (val) {
        this.form.residentId = val.id
        this.personList = [{...val}]
      } else {
        this.form.residentId = ""
        this.personList = []
      }
    },
    onConfirm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.instance.post(`/app/appvillagerintegraldetail/changeIntegral`, {
            ...this.form,
            changeIntegral: this.form.doType == 0 ? `+${this.form.changeIntegral}` : `-${this.form.changeIntegral}`
          }).then(res => {
            if (res.code == 0) {
              this.$message.success("添加成功")
              this.dialog = false
              this.getList()
            }
          })
        }
      })
    },
    getList() {
      this.instance.post(`/app/appvillagerintegraldetail/list`, null, {
        params: {
          ...this.page,
          areaId: this.areaId,
          doType: 2
        }
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.scoreChange {
  height: 100%;
  overflow: auto;
}
</style>
