<template>
  <span>
    <sd-detail-form
      ref="docform"
      page-id="audit/work/frame/iamAuditFrameCategory"
      :record-id="recordId ? parseInt(recordId) : null"
      :class="[$style.form, { readonlyform: formReadOnly }]"
      @saved="saved"
    >
      <template v-slot="{ model, fields }">
        <table>
          <tr>
            <td :class="$style.grouptd">
              <audit-advanced-group
                :expand="expandinfo"
                :expand-str="'expandinfo'"
                group-label="事项分类"
                tablestyle=""
                @changedClick="changedClick"
              ></audit-advanced-group>
              <a-button v-show="formReadOnly && showbtns" :class="$style.editbtn" @click="editform"
                >编辑</a-button
              >
            </td>
          </tr>
        </table>

        <table v-show="expandinfo">
          <tr :class="$style.firstTr">
            <td class="ant-form-item-label ant-form-item-label"></td>
            <td></td>
            <td class="ant-form-item-label ant-form-item-label"></td>
            <td></td>
          </tr>
          <tr style="display:none">
            <!-- frameId -->
            <sd-form-item-td name="frameId" />
            <!-- parentId -->
            <sd-form-item-td name="parentId" />
            <!-- id -->
            <sd-form-item-td name="id" />
          </tr>

          <tr>
            <!-- 事项分类编号 -->
            <sd-form-item-td name="categoryCode" :colspan="3">
              <template v-slot:read-and-edit="{ editable }">
                <a-form-model-item
                  v-if="!formReadOnly"
                  :rules="[
                    {
                      required: true,
                      trigger: ['change', 'blur'],
                    },
                    {
                      validator: validator,
                      trigger: ['change', 'blur'],
                    },
                  ]"
                  prop="categoryCode"
                  name="categoryCode"
                >
                  <a-input v-model="model.categoryCode"></a-input>
                </a-form-model-item>
                <span v-else>{{ model.categoryCode }}</span>
              </template>
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 事项分类名称 -->
            <sd-form-item-td name="categoryName" :colspan="3">
              <template v-slot:read-and-edit="{ editable }">
                <a-input
                  v-if="!formReadOnly"
                  v-model="model.categoryName"
                  @keyup="setProjectId"
                ></a-input>
                <span v-else>{{ model.categoryName }}</span>
              </template>
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 排序号 -->
            <sd-form-item-td name="sortNumber" :colspan="3">
              <template v-slot:read-and-edit="{ editable }">
                <a-input-number v-if="!formReadOnly" v-model="model.sortNumber"></a-input-number>
                <span v-else>{{ model.sortNumber }}</span>
              </template>
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 编制人员 -->
            <sd-form-item-td name="creatorName" />
            <!-- 编制时间 -->
            <sd-form-item-td name="creationTime" />
          </tr>
        </table>
      </template>
    </sd-detail-form>
    <div v-if="!formReadOnly" :class="$style.btnMainDiv">
      <div :class="$style.btnDiv">
        <!-- 新建审计框架按钮 -->
        <a-button type="primary" @click="saveform">
          保存
        </a-button>
        <!-- 取消信息见审计框架按钮 -->
        <a-button :class="$style.cancelbtn" @click="cancelform">
          取消
        </a-button>
      </div>
    </div>
  </span>
</template>

<script>
import { Message } from 'ant-design-vue'
import debounce from 'lodash.debounce'
import axios from '@/common/services/axios-instance'
import auditAdvancedGroup from '../../../../../components/audit-advanced-group.vue'
import auditAdvancedGroupMixins from '../../../../../components/audit-advanced-group-mixins'
import components from './_import-components/iam-audit-frame-category-create-import'

export default {
  name: 'IamAuditFrameCategoryCreate',
  metaInfo: {
    title: '审计分类',
  },
  components: {
    ...components,
    auditAdvancedGroup,
  },
  mixins: [auditAdvancedGroupMixins],
  props: {
    parentId: {
      type: String,
      default: null,
    },
    frameId: {
      type: String,
      default: null,
    },
    recordId: {
      type: Number,
      default: null,
    },
    readOnly: {
      type: Boolean,
      default: true,
    },
    showbtns: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      expandinfo: true,
      formReadOnly: true,
    }
  },
  created() {
    if (this.readOnly != null) {
      this.formReadOnly = this.readOnly
    }
  },
  methods: {
    saveform() {
      if (this.$parent.$parent.selectCategory.length > 1) {
        Message.info('请选择单个分类或者根节点', 1)
        return
      }
      // 保存时重新赋值ID
      if (!this.$refs.docform.getFieldValue('frameId')) {
        this.$refs.docform.setFieldValue('frameId', parseFloat(this.frameId))
        this.$refs.docform.setFieldValue('parentId', parseFloat(this.parentId))
      }
      this.$refs.docform.saveBtnClick()
    },
    cancelform() {
      // 如果是新建取消，则进入默认审计框架信息否则直接改readonly
      if (this.recordId) {
        this.formReadOnly = true
      } else {
        this.$emit('cancelform')
      }
    },
    saved() {
      Message.success({ content: '保存成功！' }, 1)
      this.$emit('formsaved')
    },
    setProjectId() {
      if (!this.$refs.docform.getFieldValue('frameId')) {
        this.$refs.docform.setFieldValue('frameId', parseFloat(this.frameId))
        this.$refs.docform.setFieldValue('parentId', parseFloat(this.parentId))
      }
    },
    // 编辑表单
    editform() {
      this.formReadOnly = false
    },
    // 校验编码重复
    validator(rule, value, callback) {
      let url = `api/xcoa-mobile/v1/iam-audit-frame-category/check-category-code?categoryCode=${value}&parentId=${
        this.parentId ? this.parentId : this.$refs.docform.getFieldValue('parentId')
      }&id=${
        this.$refs.docform.getFieldValue('id')
          ? parseFloat(this.$refs.docform.getFieldValue('id'))
          : '-1'
      }`
      if (this.orgId === null) {
        url = `api/xcoa-mobile/v1/iam-audit-frame-category/check-category-code?categoryCode=${value}&parentId=&id=${
          this.$refs.docform.getFieldValue('id')
            ? parseFloat(this.$refs.docform.getFieldValue('id'))
            : '-1'
        }`
      }
      debounce(() => {
        axios.get(url).then((res) => {
          if (res.data) {
            callback()
          } else {
            callback('已存在分类编号，不可以重复')
          }
        })
      }, 500)()
    },
  },
}
</script>

<style module lang="scss">
@import '@/webflow/sd-flow-form.scss';
.first-tr {
  td {
    border: none !important;
    background: #ffffff !important;
  }
}
.form {
  margin-top: 5px;
  display: inline-block;
  :global(.title_sd-detail-form_common) {
    display: none;
  }
  :global(.buttons_sd-detail-form_common) {
    display: none;
  }
}
.btn-main-div {
  width: 100%;
  .btn-div {
    text-align: center;
    margin-top: 25px;
    .cancelbtn {
      margin-left: 50px;
    }
  }
}
.grouptd {
  position: relative;
  border: none !important;
  padding-left: 5px;
}
.editbtn {
  position: absolute;
  right: 0px;
  top: -5px;
}
</style>
