<template>
  <a-drawer
    placement="right"
    :destroy-on-close="true"
    :visible="visible"
    width="600"
    :title="$t('维护知识')"
    @close="visible = false"
  >
    <a-form-model
      ref="formList"
      class="knowledge_info_from"
      :model="formList"
      :rules="rules"
      v-bind="{
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      }"
    >
      <a-form-model-item
        class="module_name"
        :label="$t('功能模块')"
        prop="moduleCode"
      >
        <a-select
          v-model="formList.moduleCode"
          :placeholder="$t('请选择功能模块')"
          :options="moduleList"
        ></a-select>
        <a-switch
          :checked-children="$t('启用')"
          :un-checked-children="$t('禁用')"
          v-model="formList.isEnable"
        />
      </a-form-model-item>
      <a-form-model-item
        :label="$t('子功能')"
        prop="childModuleName"
      >
        <a-input
          v-model="formList.childModuleName"
          :placeholder="$t('请输入子功能')"
        />
      </a-form-model-item>
      <a-form-model-item
        :label="$t('问题类型')"
        prop="exceptionType"
      >
        <a-select
          v-model="formList.exceptionType"
          :placeholder="$t('请选择问题类型')"
          :options="exceptionList"
        >
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        :label="$t('问题标签')"
        prop="keywords"
      >
        <a-input
          v-model="formList.keywords"
          :placeholder="$t('请输入问题标签')"
        />
      </a-form-model-item>
      <a-form-model-item
        :label="$t('前端错误描述')"
        prop="frontExceptionInfo"
      >
        <a-textarea
          v-model="formList.frontExceptionInfo"
          :rows="6"
          :placeholder="$t('请输入前端错误描述')"
        />
      </a-form-model-item>
      <a-form-model-item
        :label="$t('后端错误描述')"
        prop="backendExceptionInfo"
      >
        <a-textarea
          v-model="formList.backendExceptionInfo"
          :rows="6"
          :placeholder="$t('请输入后端错误描述')"
        />
      </a-form-model-item>
      <a-form-model-item
        :label="$t('问题描述')"
        prop="exceptionDesc"
      >
        <a-textarea
          v-model="formList.exceptionDesc"
          :rows="6"
          :placeholder="$t('请输入问题描述')"
        />
      </a-form-model-item>
      <a-form-model-item
        :label="$t('解决方案')"
        prop="exceptionSolution"
      >
        <a-textarea
          v-model="formList.exceptionSolution"
          :rows="6"
          :placeholder="$t('请输入解决方案')"
        />
      </a-form-model-item>
    </a-form-model>
    <div class="a_foot_nuttop">
      <a-button @click="visible = false">{{ $t('取消') }}</a-button>
      &nbsp;
      <a-button
        type="primary"
        @click="submit"
        :loading="submitLoading"
        >{{ $t('保存') }}</a-button
      >
    </div>
  </a-drawer>
</template>
<script>
  const $appService = require('w-vue-middle/api/appService');

  export default {
    props: {
      show: [Boolean],
      info: [Object],
    },
    computed: {
      visible: {
        get() {
          return this.show;
        },
        set(val) {
          this.$emit('update:show', val);
        },
      },
    },
    data() {
      return {
        moduleList: [],
        exceptionList: [],
        formList: {},
        rules: {
          moduleCode: [{ required: true, message: $t('请选择功能模块'), trigger: 'change' }],
          childModuleName: [{ required: true, message: $t('请输入子模块'), trigger: 'blur' }],
          exceptionType: [{ required: true, message: $t('请选择问题类型'), trigger: 'change' }],
          keywords: [{ required: true, message: $t('请输入问题标签'), trigger: 'blur' }],
          frontExceptionInfo: [
            { required: true, message: $t('请输入前端错误描述'), trigger: 'blur' },
          ],
          exceptionDesc: [{ required: true, message: $t('请输入问题描述'), trigger: 'blur' }],
          exceptionSolution: [{ required: true, message: $t('请输入解决方案'), trigger: 'blur' }],
        },
        submitLoading: false,
      };
    },
    watch: {
      visible(val) {
        if (val) {
          this.formList = {
            ...this.info,
            isEnable: this.info.isEnable || false,
          };
          this.getModuleList();
          this.getExceptionList();
        }
      },
    },
    created() {},
    methods: {
      submit() {
        this.$refs.formList.validate((valid) => {
          if (valid) {
            let moduleItem = this.moduleList.find((v) => {
              return v.value == this.formList.moduleCode;
            });
            this.submitLoading = true;
            $appService
              .saveProblem({
                ...this.formList,
                moduleName: moduleItem.label,
                isEnable: this.formList.isEnable ? 0 : 1,
                _X_ROW_KEY: undefined,
              })
              .then((req) => {
                this.visible = false;
                this.$message.success($t('保存成功'));
                this.$emit('callback');
              })
              .finally(() => {
                this.submitLoading = false;
              });
          }
        });
      },
      /**
       * @Author: y_zp
       * @description: 功能模块列表
       */
      getModuleList() {
        $appService
          .getSysDictData({
            pageNum: 1,
            pageSize: 1000000,
            queryParams: { F_isEnable_eq: 0, F_isDel_eq: 0, F_dictType_eq: 'micro_service' },
          })
          .then((req) => {
            this.moduleList = req.data.map((item) => {
              return {
                label: item.dictLabel,
                value: item.dictValue,
              };
            });
          });
      },
      /**
       * @Author: y_zp
       * @description: 问题类型列表
       */
      getExceptionList() {
        $appService
          .getSysDictData({
            pageNum: 1,
            pageSize: 1000000,
            queryParams: { F_isEnable_eq: 0, F_isDel_eq: 0, F_dictType_eq: 'sys_exception_type' },
          })
          .then((req) => {
            this.exceptionList = req.data.map((item) => {
              return {
                label: item.dictLabel,
                value: item.dictValue,
              };
            });
          });
      },
    },
  };
</script>
<style lang="less" scoped>
  .knowledge_info_from {
    height: calc(100vh - 130px);
    overflow: hidden;
    overflow-y: scroll;
    .module_name /deep/.ant-form-item-children {
      display: flex;
      align-items: center;
      margin-top: 4px;
      .ant-select {
        margin-right: 12px;
        flex: 1;
      }
    }
  }
</style>
