<template>
  <audit-form-top-banner
    :handel-publish="publishFlag"
    :handel-save-form="true"
    :hiden-or-show="hidenOR0Show"
    :form-data="mode"
    @handelSaveForm="saveForm"
    @handelPublish="handelPublish"
  >
    <div class="ant-card ant-card-small">
      <div :class="$style.antCardBody">
        <sd-detail-form
          ref="docform"
          page-id="audit/km/knowledge/contribution/kmKnowledge"
          form-id="kmKnowledge"
          :record-id="this.$route.query.record ? parseInt(this.$route.query.record) : null"
          :class="$style.form"
          :read-only="!canEdit"
          @close="close(true)"
          @sdFormReady="sdFormReady"
          @saved="saved"
        >
          <template v-slot="{ model, fields }">
            <table :class="$style.table">
              <colgroup>
                <col :class="$style.label" />
                <col :class="$style.input" />
                <col :class="$style.label" />
                <col :class="$style.input" />
              </colgroup>
              <tr>
                <sd-form-item-td name="title" />
                <sd-form-item-td name="label">
                  <a-select
                    v-model="labelArray"
                    mode="tags"
                    placeholder="请输入"
                    @change="(evt) => handleChange(model, evt)"
                  >
                    <a-select-option v-for="i in labelArray" :key="i">
                      {{ i }}
                    </a-select-option>
                  </a-select>
                </sd-form-item-td>
              </tr>
              <!-- <tr> -->
              <!-- 所属分类 -->
              <!-- <sd-form-item-td
                name="category"
                :colspan="3"
                :input-props="{ defaultValue: defaultCategory }"
              >
                <template v-slot:read-and-edit>
                  <km-tree-select
                    v-model="model.category"
                    :editable="false"
                    tree-data-url="api/xcoa-mobile/v1/km-knowledge-category/knowledge-category-tree?pageId=kmKnowledge"
                  ></km-tree-select>
                </template>
              </sd-form-item-td>
            </tr> -->

              <!-- <tr>
              <sd-form-item-td name="businessArea" :colspan="3">
                <template v-slot:read-and-edit="{ editable }">
                  <km-business-area-picker v-model="model.businessArea" :read-only="!editable" />
                </template>
              </sd-form-item-td>
            </tr> -->
              <tr>
                <!-- 摘要 -->
                <sd-form-item-td name="abstractMessage" :colspan="3">
                  <template v-slot:read-and-edit="{ editable }">
                    <sd-quill-editor
                      v-if="editable"
                      v-model="model.abstractMessage"
                      placeholder="请输入"
                    />
                    <span
                      v-else
                      :class="$style.abstractMessage"
                      v-html="model.abstractMessage"
                    ></span>
                  </template>
                </sd-form-item-td>
              </tr>

              <tr>
                <!-- 文档附件 -->
                <sd-form-item-td name="applyAttachment" :colspan="3" />
              </tr>

              <tr>
                <!-- 作者 -->
                <sd-form-item-td name="creatorName" />
                <!-- 所属部门 -->
                <sd-form-item-td v-if="initParam('categoryId')" :hidden="true" name="categoryId" />
                <sd-form-item-td name="creationTime" />
              </tr>

              <tr>
                <!-- 所属单位 -->
                <sd-form-item-td name="belongUnit" :colspan="3" />
              </tr>
            </table>
          </template>
        </sd-detail-form>
      </div>
    </div>
  </audit-form-top-banner>
</template>

<script>
import { Message, Modal } from 'ant-design-vue'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import auditFormTopBanner from '../../../../components/audit-form-top-banner'

import components from './_import-components/km-knowledage-form-import'
export default {
  name: 'KmKnowledageForm',
  metaInfo() {
    return {
      title: this.title,
    }
  },
  components: { auditFormTopBanner, ...components },
  data() {
    return {
      defaultCategory: '',
      labelArray: [],
      mode: null,
      hidenOR0Show: true,
      publishFlag: false,
      message: '保存成功',
      canEdit: false,
    }
  },
  created() {},
  mounted() {
    // 本人 系统管理员 知识分类管理员 可编辑
    // KM_KNOWLEDGECATEGORY_ADMIN
    this.canEdit = this.$root.$route.query.editNode === 'true'
  },
  methods: {
    // 页面加载完成后
    sdFormReady() {
      this.mode = this.$refs.docform.formData.mode
      // const docStatus = this.$refs.docform.getFieldValue('releaseType')
      const docStatus = this.$root.$route.query.releaseType
      const canEdit = this.$root.$route.query.editNode === 'true'
      if (docStatus === 1 || !canEdit) {
        this.hidenOR0Show = false
        this.mode = 'VIEW'
      }
    },
    handleChange(model, event) {
      model.label = event.join('、')
      this.labelArray = [...event]
    },
    handelPublish() {
      this.$refs.docform.setFieldValue('releaseType', 1)
      this.message = '发布成功！'
      this.saveForm()
    },
    saveForm() {
      this.$refs.docform.saveBtnClick()
    },
    saved() {
      Message.success({ content: this.message }).then(() => {
        this.close(true)
      })
    },
    initParam(val) {
      setTimeout(() => {
        var flow = this.$refs.docform
        if (
          flow.getFieldValue('categoryId') === null ||
          flow.getFieldValue('categoryId') === undefined ||
          flow.getFieldValue('categoryId') === ''
        ) {
          if (this.$route.query?.typeId) {
            this.$refs.docform.setFieldValue('categoryId', this.$route.query.typeId)
            this.$refs.docform.setFieldValue('categoryName', this.$route.query.typeName)
          }
        }

        if (
          !(
            flow.getFieldValue('label') === null ||
            flow.getFieldValue('label') === undefined ||
            flow.getFieldValue('label') === ''
          )
        ) {
          this.labelArray = flow.getFieldValue('label')?.split('、')
        }
        if (!(flow.getFieldValue('releaseType') === 1)) {
          this.publishFlag = true
        }
      }, 0)
      return true
    },
    close(flag) {
      crossWindowWatcher.notifyChange(this.$route.path, flag)
      window.close()
    },
    validForm() {
      return new Promise((resolve, reject) => {
        let validate = true
        const params = this.$refs.flow.getFieldsValue()
        if (params.authFollowParent === '0') {
          if (params.applyDept === undefined && params.applyPerson === undefined) {
            validate = false
            Message.warn('部门和人员不能同时为空')
          }
        }
        if (!validate) {
          resolve(validate)
        } else {
          const attachment = this.$refs.flow.getFieldValue('applyAttachment')
          if (attachment.length === 0) {
            Modal.confirm({
              title: '未上传附件，是否确认提交？',
              onOk() {
                resolve(true)
              },
              onCancel() {
                resolve(false)
              },
            })
          } else {
            resolve(true)
          }
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@import '@/webflow/sd-flow-form.scss';

.ant-card-body {
  padding: 12px;

  :global(.buttons_sd-detail-form_common) {
    :global(.ant-form-item-control-wrapper) {
      padding-top: 4%;
      padding-left: 24%;
    }
  }

  .tr_border {
    box-sizing: border-box;
    border-right: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
  }

  :global(.title_sd-detail-form_common) {
    font-size: 1.5em;
    text-align: center;
  }
}
.abstractMessage {
  p {
    margin-top: 10px;
  }
}
</style>
