<template>
  <div class="app-container">
    <Form :formList="formList" :config="this.paramsData && this.paramsData.readonly ? {buttonGroup: []} : {}" :ruleFormData="ruleForm" @fnClick="callback">
<!--      <template #tempSolution="{ model }">-->
<!--        <editor v-model="model" :min-height="192"/>-->
<!--      </template>-->
    </Form>
    <el-button v-if="this.paramsData && this.paramsData.readonly" style="float: right;margin-top: 12px;margin-left: 10px;" @click="callback({fnCode: 'cancel'})">返回</el-button>
  </div>
</template>

<script setup>
  import Form from '@/components/form/index.vue';
  import {listProblem, addProblem, getProblem, updateProblem} from "@/api/sync/tacitly"
  export default {
    name: 'ProblemRecordDetails',
    components: {Form},
    dicts: ['knowledge_base_type'],
    data() {
      return {
        ruleForm: {
          issueType: []
        },
        formList: [],
        paramsData: {}
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      if (this.paramsData && this.paramsData.id) {
        this.getFormDataList(this.paramsData.id);
      }
      this.fnFormList(this.paramsData.readonly);
    },
    methods: {
      // formList集合
      fnFormList(objVal) {
        this.formList = [{
          config: {title: '基本信息'},
          controls: {
            id: {label: 'ID',hidden: true},
            title: {label: '标题', span: 14, type: 'input', disabled: objVal ? true : false, rules: [{required: true, message: '请输入标题', trigger: 'blur'}]},
            issueType: {label: '标签', span: 14, type: 'checkbox', disabled: objVal ? true : false, style: 'display: block', options: this.dict.type.knowledge_base_type},
            solution: {label: '解决方案', span: 14, type: 'textarea', disabled: objVal ? true : false, rows: 15},
          }
        }];
      },
      // 获取详情
      getFormDataList(id) {
        getProblem(id).then(val => {
          if (val && val.data) {
            val.data['issueType'] = val.data['issueType'].split(',');
            this.ruleForm = val.data;
          }
        }).catch(() => {
          this.$modal.msgError("操作失败")
        });
      },
      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'submit':
              dataVal['issueType'] = dataVal['issueType'].join();
              let fnType = addProblem;
              if (dataVal && dataVal.id) {
                fnType = updateProblem;
              }
              fnType(dataVal).then(response => {
                this.$modal.msgSuccess(response.msg);
                this.$router.push("/problemRecord")
              }).catch(() => {
                this.$modal.msgError("操作失败")
              });
              break;
            case 'cancel':
              this.$router.push("/problemRecord");
              break;
            default:
          }
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  /* 隐藏复选框的小方块图标 */
  ::v-deep .el-checkbox__input {
    display: none; /* 关键：隐藏默认复选框 */
  }
  /* 可选：调整文字点击区域和选中样式 */
  ::v-deep .el-checkbox__label {
    /* 扩大点击区域（可选） */
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
  }

  /* 选中时的文字样式（可选） */
  ::v-deep .el-checkbox.is-checked .el-checkbox__label {
    color: #409eff; /* 选中时文字变蓝（Element 主题色） */
    background-color: #ecf5ff; /* 可选：添加背景色 */
  }
</style>
