<template>
  <div :class="$style.knowLevel">
    <a-card>
      <h3>个人知识等级设置</h3>
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol">
        <a-form-model-item ref="level" label="等级总等级" prop="level">
          <a-input v-model="form.level" :disabled="disabled" />
        </a-form-model-item>
        <a-form-model-item ref="score" label="最大权重分数" prop="score">
          <a-input-number v-model="form.score" />
        </a-form-model-item>
        <a-form-model-item ref="num" label="分数间隔数" prop="num">
          <a-input v-model="form.num" :disabled="disabled" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button @click="onSubmit">
            生成等级
          </a-button>
          <a-button type="primary" @click="saveData">
            保存
          </a-button>
        </a-form-model-item>
      </a-form-model>
      <sd-table
        :loading="leveTableLoading"
        :class="$style.levelTable"
        :columns="columns"
        :data-source="levelData"
        :pagination="pagination"
        :bordered="!bordered"
      />
    </a-card>
  </div>
</template>

<script>
import { Message } from 'ant-design-vue'
import KmKnowledageService from '../km-knowledage-service'
import components from './_import-components/km-personal-knowledge-level-import'
const columns = [
  {
    title: '等级',
    dataIndex: 'grade',
    align: 'center',
    defaultSortOrder: 'descend',
  },
  {
    title: '分数范围',
    dataIndex: 'sort',
    align: 'center',
  },
  {
    title: '等级名称',
    dataIndex: 'name',
    align: 'center',
  },
]
export default {
  name: 'KmPersonalKnowledgeLevel',
  metaInfo: {
    title: '个人知识等级维护',
  },
  components,
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      form: {
        level: '8',
        score: null,
        num: '',
      },
      rules: {
        score: [{ required: true, message: '最大权重分数不能为空！', trigger: 'blur' }],
      },
      leveTableLoading: true,
      pagination: false,
      bordered: false,
      level: '8',
      number: '',
      disabled: true,
      levelData: [],
      columns,
    }
  },
  created() {
    this.queryPersonalLevelConfig()
  },
  methods: {
    // 获取个人知识等级设置
    queryPersonalLevelConfig() {
      const params = {
        columns: 'id,grade,startScope,endScope,name',
        maxResults: 10,
        startPosition: 0,
        expressions: [],
        formId: 'kmPersonalLevelConfig',
      }
      KmKnowledageService.getPersonalLevelConfig(params).then((res) => {
        if (res.data.data.length > 0) {
          this.leveTableLoading = false
          const levelData = res.data.data.reverse()
          this.form.num = levelData[0].endScope // 分数间隔数
          this.form.score = Number(levelData[levelData.length - 1].endScope) // 最大权重数
          levelData.forEach((element) => {
            const levelObj = {}
            levelObj.key = element.id
            levelObj.grade = element.grade
            levelObj.sort = element.startScope + '~' + element.endScope
            levelObj.name = element.name
            this.levelData.push(levelObj)
          })
        } else {
          this.leveTableLoading = false
          this.levelData = []
        }
      })
    },
    // 生成等级
    onSubmit() {
      this.leveTableLoading = true
      this.levelData = []
      KmKnowledageService.setPersonalLevelConfig({ score: this.form.score }).then((res) => {
        this.form.num = res.data[0].endScope // 分数间隔数
        res.data.forEach((element) => {
          const levelObj = {}
          levelObj.key = element.grade
          levelObj.grade = element.grade
          levelObj.sort = element.startScope + '~' + element.endScope
          levelObj.name = element.name
          this.levelData.push(levelObj)
        })
        this.leveTableLoading = false
      })
    },
    // 保存
    saveData() {
      const params = {
        score: this.form.score,
      }
      KmKnowledageService.savePersonalLevelConfig(params).then((res) => {
        if (res.data === 8) {
          Message.success('保存成功')
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.know-level {
  h3 {
    padding-top: 20px;
    font-weight: bold;
    text-align: center;
  }
  form {
    width: 800px;
    margin: 5% auto 0;
    button {
      margin-left: 30%;
    }
  }
  :global(.ant-form-item-label) {
    float: left;
    width: 25%;
  }
  :global(.ant-form-item-control-wrapper) {
    float: left;
    width: 75%;
  }
  .level-table {
    width: 800px;
    margin: 50px auto 20px;
  }
}
</style>
