<template>
  <xn-form-container :title="'基本设置'" :width="800" :visible="visible" :destroy-on-close="true" @close="onClose">
    <a-form :model="formState" ref="formStateRef" :rules="formStateRules" name="basic" autocomplete="off">
      <div class="form">
        <a-row>
          <a-col :span="12">
            <a-form-item class="form-item" label="公文名称" name="documentName" :label-col="{ span: 10 }"
              :rules="[{ required: true, message: '请输入公文名称!', trigger: 'blur' }]">
              <a-input placeholder="请输入" style="width: 620px" :disabled="disabled"
                v-model:value="formState.documentName" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item class="form-item" label="索引号" name="indexNumber" :label-col="{ span: 10 }">
              <a-input placeholder="自动生成" style="width: 250px" :disabled="true" v-model:value="formState.indexNumber" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item class="form-item" label="信息来源" name="informationSource" :label-col="{ span: 10 }">
              <a-input style="width: 250px" :disabled="disabled" v-model:value="formState.informationSource" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item class="form-item" label="发布日期" name="publishDate" :label-col="{ span: 10 }">
              <a-date-picker :disabled="disabled" v-model:value="formState.publishDate" valueFormat="YYYY-MM-DD HH:mm:ss"
                style="width: 250px" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item class="form-item" label="文号" name="documentNumber" :label-col="{ span: 10 }">
              <a-input style="width: 250px" :disabled="disabled" v-model:value="formState.documentNumber" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item class="form-item" label="主题词" name="subjectWord" :label-col="{ span: 10 }">
              <a-input style="width: 250px" :disabled="disabled" v-model:value="formState.subjectWord" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item class="form-item" label="效力状态" name="validityStatus" :label-col="{ span: 10 }">
              <a-select :disabled="disabled" style="width: 250px" v-model:value="formState.validityStatus">
                <a-select-option :value="1">有效</a-select-option>
                <a-select-option :value="0">无效</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <!--  -->
      </div>

      <div class="attachments"></div>
      <!-- 头条内容 -->
      <div class="bulletin-board"><span style="color: red">* </span>公告内容</div>
      <a-form-item class="form-item" label="''" ref="EditorRef" name="announcementContent" :label-col="{ span: 0 }"
        :rules="[{ required: true, message: '请输入公告内容!', trigger: 'blur' }]">
        <Editor @getTXTLE="getTXTLEDEL" :fileUploadFunction="global.uploadFile" :placeholder="'请输入公告内容'"
          :disabled="disabled" v-model:modelValue="formState.announcementContent" />
      </a-form-item>
      <div class="attachments">
        <a-form-item ref="uploadDataList" class="form-item" label="附件上传" name="attachments">
          <DIYUPLoad :beforeUpload="beforeUpload" multiple :disabled="disabled" :change="changeUpload"
            listType="picture-card" v-model:urls="formState.attachments"></DIYUPLoad>
        </a-form-item>
      </div>
      <a-form-item>
        <div class="item-submit">
          <a-button class="btn1" :disabled="disabled" @click="onFinish(2)">提交</a-button>
          <a-button class="btn1" :disabled="disabled" type="primary" @click="onFinish(1)">保存</a-button>
        </div>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
    </template>
  </xn-form-container>
</template>
<script lang="js">
import business from '@/api/policy.info/policyFileControlApi.js'
import { ref } from 'vue'
import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules'
import global from '@/api/home/global.js'
export default {
  name: 'FromName',
  components: {},
  emits: ['change'],
  setup(props, { emit }) {
    const disabled = ref(false)
    const visible = ref(false)
    const records = ref('')
    const onOpen = (record, flag, view, row) => {
      records.value = record
      visible.value = flag
      disabled.value = view
      if (row) {
        detail(row.id)
      }
    }
    // 查看数据
    const detail = async (v) => {
      const res = await business.policyView({ id: v })
      formState.value = res
      if (res.attachments) {
        formState.value.attachments = res.attachments.split(',')
      }
    }
    // 清除数据
    const rest = () => {
      for (let key in formState.value) {
        formState.value[key] = ''
      }
    }
    const onClose = () => {
      visible.value = false
      rest()
    }

    watch(
      () => visible.value,
      (newVal) => {
        if (!newVal) {
          setTimeout(() => {
            rest()
          }, 0)
        }
      },
      { immediate: true, deep: true }
    )

    const formState = ref({
      documentName: '',
      indexNumber: '',
      informationSource: '',
      publishDate: '',
      documentNumber: '',
      subjectWord: '',
      attachments: '',
      validityStatus: '',
      announcementContent: '',
      status: 0
    })
    const uploadDataList = ref(null)
    const formStateRules = ref({
      // documentName: [{ required: true, message: '请填写!', trigger: 'blur' }],
      // publishTime: [{ required: true, message: '请填写!', trigger: 'change' }],
      // attachments: [{ required: true, message: '请填写!', trigger: 'change' }]
    })
    const formStateRef = ref(null)

    const onFinish = async (status) => {
      formStateRef.value.validate().then(async () => {
        formState.value.status = status
        await handleAdd(formState.value)
        emit('change')
        rest()
        onClose()
        try {
          console.log(2)
        } catch (err) {
          console.log(err)
        }
      })
    }

    const handleAdd = async (val, status) => {
      if (Array.isArray(val.attachments)) {
        val.attachments = val.attachments.join(',')
      }
      if (records.value == 'edit') {
        const res = await business.policyEdit(val)
      } else {
        const res = await business.policyAdd(val)
      }
    }
    const delADD = () => {
      formStateRef.value.validate().then(() => { })
    }
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo)
    }
    function changeUpload(fd) {
      return global.uploadFile(fd).then((reg) => {
        uploadDataList.value.clearValidate()
        return reg
      })
    }
    function beforeUpload() {
      uploadDataList.value.clearValidate()
    }
    const EditorRef = ref(null)
    const getTXTLEDEL = (v) => {
      if (v !== undefined || v !== null || v !== '') {
        EditorRef.value.clearValidate()
      }
    }

    return {
      getTXTLEDEL,
      EditorRef,
      beforeUpload,
      uploadDataList,
      global,
      changeUpload,
      delADD,
      formStateRef,
      formStateRules,
      formState,
      onFinish,
      onFinishFailed,
      disabled,
      onOpen,
      visible,
      onClose
    }
  }
}
</script>
<style lang="less" scoped>
.box1 {
  display: flex;
  justify-content: space-between;

  .box-left {
    width: 350px;
    align-items: center;
  }

  .box-right {
    width: 350px;
    margin-right: 10px;
    align-items: center;
  }
}

.common {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;

  .title {
    width: 130px;
    text-align: right;
    margin-right: 5px;
  }
}

.input {
  margin-right: 10px;
  margin-left: 40px;
  margin-top: 20px;

  .ant-input-affix-wrapper {
    height: 100px;
  }
}

.btnBox {
  text-align: center;
  margin-top: 100px;

  .snowy-buttom-left {
    margin-left: 100px;
  }

  .acc {
    width: 80px;
    height: 40px;
  }
}

.bulletin-board {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 14px;
}

.form {
  display: flex;
  flex-wrap: wrap;

  // justify-content: center;
  .form-item {
    width: 250px;
    margin-right: 120px;
  }
}

.item-submit {
  display: flex;
  justify-content: center;
  margin-top: 100px;

  .btn1 {
    width: 100px;
    margin-right: 20px;
  }
}

.ant-select {
  width: 250px;
}

.ant-input {
  width: 250px;
}

.ant-form-item-label {
  width: 150px;
}

.attachments {
  margin-top: 30px;
  font-size: 16px;
  font-weight: bold;
}
</style>
