<template>
  <div class="AppLevelList">
    <ai-list>
      <template slot="title">
        <ai-title title="等级配置" :isShowBottomBorder="false" :isShowArea="false"></ai-title>
      </template>
      <template slot="content">
        <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
          :size.sync="page.size" @getList="getList" class="ai-table">
          <el-table-column slot="beginIntegral" label="积分范围" align="center">
            <template slot-scope="{ row}">
              <span>{{row.beginIntegral}}-{{row.endIntegral}}</span>
            </template>
          </el-table-column>
          <el-table-column slot="option" label="操作" align="center" width="250">
            <template slot-scope="{ row}">
              <el-button type="text" @click="add(row)">编辑</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog title="等级修改" :visible.sync="visible" @onCancel="visible = false; dialogInfo = {}" @onConfirm="addConfirm" width="800px">
      <el-form ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="120px">
        <el-form-item label="等级名称" prop="levelTitle">
          <el-input placeholder="请输入等级名称" :maxlength="20" show-word-limit v-model="dialogInfo.levelTitle"></el-input>
        </el-form-item>
        <el-form-item label="积分范围" prop="beginIntegral" style="display:inline-block;">
          <el-input placeholder="积分" :maxlength="4" v-model="dialogInfo.beginIntegral" style="width:100px;"></el-input>
          <el-form-item prop="endIntegral" style="display:inline-block;" class="endIntegral">
            <span style="margin: 0 16px;">-</span>
            <el-input placeholder="积分" :maxlength="4" v-model="dialogInfo.endIntegral" style="width:100px;"></el-input>
          </el-form-item>
        </el-form-item>
        
      </el-form>
    </ai-dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  label: '等级配置',
  name: 'AppLevelList',
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      tableData: [],
      page: {
        size: 10,
        current: 1,
        total: 0,
      },
      visible: false,
      dialogInfo: {},
      formRules: {
        levelTitle: [{required: true, message: '请输入等级名称', trigger: 'blur'}],
        beginIntegral: [{required: true, message: '请输入积分范围', trigger: 'blur' },
          {pattern: /^([1-9]\d*|0)(\.\d{1,2})?$/, message: '请输入正数且最多只能保留两位小数'}],
        endIntegral: [{required: true, message: '请输入积分范围', trigger: 'blur' },
          {pattern: /^([1-9]\d*|0)(\.\d{1,2})?$/, message: '请输入正数且最多只能保留两位小数'}],
      },
      colConfigs: [
        {prop: 'level', label: '等级', width: 120, align: 'center'},
        {prop: 'levelTitle', label: '等级名称', align: 'center'},
        {slot: 'beginIntegral'},
        {slot: 'option'},
      ],
    }
  },
  computed: {
    ...mapState(['user']),
  },
  created() {
    this.getList()
  },
  mounted() {
  },
  methods: {
    add(row) {
      this.visible = true
      this.dialogInfo = {...row}
    },
    addConfirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if(Number(this.dialogInfo.beginIntegral) >= Number(this.dialogInfo.endIntegral)) {
            return this.$message.error('请输入正确的积分范围')
          }
          this.instance.post(`/appintegrallevel/addOrUpdate`, {...this.dialogInfo}).then(res => {
            if (res?.code == 0) {
              this.$message.success('等级修改成功')
              this.visible = false
              this.getList()
            }
          })
        }
      })
    },
    getList() {
      this.instance.post(`/appintegrallevel/list`, null, {
        params: {
          ...this.page,
        },
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
      .catch(() => {
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.AppLevelList {
  height: 100%;
  ::v-deep .endIntegral .el-form-item__content {
    margin-left: 0!important;
  }
  ::v-deep .endIntegral .el-form-item__error{
    left: 40px !important;
    top: 50px !important;
  }
}
</style>
