<template>
  <span>
    <sd-detail-form
      ref="docform"
      page-id="audit/work/frame/iamAuditFrame"
      :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">
            <!-- projectId -->
            <sd-form-item-td name="projectId" :colspan="3" />
          </tr>
          <tr>
            <!-- 审计框架名称 -->
            <sd-form-item-td name="frameName" :colspan="3">
              <template v-slot:read-and-edit="{ editable }">
                <a-input
                  v-if="!formReadOnly"
                  v-model="model.frameName"
                  @keyup="setProjectId"
                ></a-input>
                <span v-else>{{ model.frameName }}</span>
              </template>
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 审计框架说明 -->
            <sd-form-item-td name="frameDesc" :colspan="3">
              <template v-slot:read-and-edit="{ editable }">
                <a-textarea
                  v-if="!formReadOnly"
                  v-model="model.frameDesc"
                  :auto-size="{ minRows: 3, maxRows: 3 }"
                ></a-textarea>
                <span v-else>{{ model.frameDesc }}</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 auditAdvancedGroup from '../../../../components/audit-advanced-group.vue'
import auditAdvancedGroupMixins from '../../../../components/audit-advanced-group-mixins'
import components from './_import-components/iam-audit-frame-create-import'

export default {
  name: 'IamAuditFrameCreate',
  metaInfo: {
    title: 'IamAuditFrameCreate',
  },
  components: {
    ...components,
    auditAdvancedGroup,
  },
  mixins: [auditAdvancedGroupMixins],
  props: {
    recordId: {
      type: String,
      default: null,
    },
    readOnly: {
      type: Boolean,
      default: true,
    },
    showbtns: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      projectId: this.$root.$route.query.projectId,
      expandinfo: true,
      formReadOnly: true,
    }
  },
  created() {
    if (this.readOnly != null) {
      this.formReadOnly = this.readOnly
    }
  },
  methods: {
    saveform() {
      const frameList = this.$parent.$parent.$refs.frametree.frameOptions
      const frameItem = frameList.find((item) => {
        return item.label === this.$refs.docform.getFieldValue('frameName')
      })
      // 如果重复则直接提示重复
      if (frameItem && this.recordId === null) {
        Message.error('审计框架名称重复', 1)
      } else {
        this.$refs.docform.saveBtnClick()
      }
    },
    // 取消编辑内容
    cancelform() {
      // 如果是新建取消，则进入默认审计框架信息否则直接改readonly
      if (this.recordId) {
        this.formReadOnly = true
      } else {
        this.$emit('cancelform')
      }
    },
    // 保存之后监听事件
    saved() {
      Message.success({ content: '保存成功！' }, 1)
      this.$emit('formsaved', { frameName: this.$refs.docform.getFieldValue('frameName') })
    },
    // 设置表单默认值
    setProjectId() {
      this.$refs.docform.setFieldValue('projectId', parseFloat(this.projectId))
    },
    // 编辑表单
    editform() {
      this.formReadOnly = false
    },
  },
}
</script>

<style module lang="scss">
@import '@/webflow/sd-flow-form.scss';
.first-tr {
  td {
    background: #fff !important;
    border: none !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 {
    margin-top: 25px;
    text-align: center;
    .cancelbtn {
      margin-left: 50px;
    }
  }
}
.grouptd {
  position: relative;
  padding-left: 5px;
  border: none !important;
}
.editbtn {
  position: absolute;
  top: -5px;
  right: 0;
}
</style>
