<template>
  <my-drawer
    :visible="visible"
    :header="title"
    size="80%"
    attach="body"
    :closeOnOverlayClick="false"
    :close-btn="true"
    @close="emit('update:visible', false)"
  >
    <t-form
      class="notice-form"
      ref="formRef"
      :data="formData"
      :rules="rules"
      labelAlign="top"
    >
      <t-row class="notice-info" :gutter="[20, 20]">
        <t-col :span="4">
          <t-form-item label="类型" name="type">
            <t-select v-model="formData.type">
              <t-option
                v-for="(val, key) in NOTICE_TYPE"
                :key="key"
                :label="val"
                :value="key"
              />
            </t-select>
          </t-form-item>
        </t-col>
        <t-col :span="4" v-if="formData.type === 'SERVICE'">
          <t-form-item label="服务单元" name="serviceId">
            <select-service-unit v-model="formData.serviceId">
            </select-service-unit>
          </t-form-item>
        </t-col>
        <t-col :span="4" v-if="formData.type === 'SUPPLIER'">
          <t-form-item label="人力供应商" name="supplierId">
            <select-supplier v-model="formData.supplierId" type="HUMAN">
            </select-supplier>
          </t-form-item>
        </t-col>
      </t-row>
      <t-row>
        <t-col :span="8">
          <t-form-item label="通知名称" name="title">
            <t-input v-model="formData.title" clearable />
          </t-form-item>
        </t-col>
        <t-col :span="12">
          <t-form-item
            class="content-label"
            label="通知正文"
            required-mark
          ></t-form-item>
        </t-col>
      </t-row>
      <div class="notice-content">
        <t-form-item name="content" :required-mark="false">
          <!--          <t-textarea-->
          <!--            v-model="formData.content"-->
          <!--            placeholder="请输入通知正文"-->
          <!--            :maxlength="9999"-->
          <!--            :autosize="{ minRows: 10, maxRows: 15 }"-->
          <!--          />-->

          <TEditor
            placeholder="请输入通知正文"
            ref="editor"
            v-model="formData.content"
            @getContent="getContent"
            :maxlength="9999"
            :autosize="{ minRows: 10, maxRows: 15 }"
          />
        </t-form-item>
      </div>
    </t-form>
    <template #foot>
      <div class="box-justify">
        <t-button
          theme="default"
          variant="outline"
          @click="emit('update:visible', false)"
          >返回</t-button
        >
        <div>
          <t-button theme="default" @click="save(false)">保存草稿</t-button>
          <!--          <t-button theme="primary" ghost @click="onPreview">预览</t-button>-->
          <t-button theme="primary" @click="save(true)">保存并发布</t-button>
        </div>
      </div>
    </template>
  </my-drawer>
</template>

<script setup name="EditNoticeDialog">
import { ref, computed } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import useClearDialog from '@/hooks/useClearDialog';
import { NOTICE_TYPE } from '@/config/constants';
import { noticeEditApi } from '@/api/system';
const emit = defineEmits(['update:visible', 'success']);
const formRef = ref(null);

const props = defineProps({
  visible: Boolean,
  curRow: Object,
});

const title = computed(() => {
  return (isEdit.value ? '编辑' : '新增') + '通知公告';
});

const { formData, isEdit } = useClearDialog(
  {
    id: null,
    type: '',
    serviceId: '',
    supplierId: '',
    title: '',
    content: '',
    status: 'UN_PUBLISH',
  },
  props,
  formRef,
  () => {
    for (let key in formData) {
      formData[key] = props.curRow[key];
    }
  }
);
const rules = {
  title: [
    { required: true, message: '名称必填', type: 'error', trigger: 'change' },
    {
      max: 100,
      message: '至多需要100个字',
      type: 'error',
      trigger: 'change',
    },
  ],
  type: [
    { required: true, message: '类型必选', type: 'error', trigger: 'change' },
  ],
  serviceId: [
    {
      required: true,
      message: '服务单元必选',
      type: 'error',
      trigger: 'change',
    },
  ],
  supplierId: [
    {
      required: true,
      message: '人力供应商必选',
      type: 'error',
      trigger: 'change',
    },
  ],
  content: [
    { required: true, message: '正文必填', type: 'error', trigger: 'change' },
    {
      max: 9999,
      message: '至多需要9999个字',
      type: 'error',
      trigger: 'change',
    },
  ],
};
const onPreview = () => {
  console.log('onPreview');
};
const getContent = (v) => {
  formData.content = v;
};
const save = async (isPublish) => {
  const valid = await formRef.value.validate();
  if (valid !== true) return;

  let data = { ...formData };
  data.status = isPublish ? 'PUBLISH' : 'UN_PUBLISH';

  let result = true;
  await noticeEditApi(data).catch(() => {
    result = false;
  });
  if (!result) return;

  MessagePlugin.success('保存成功');
  emit('update:visible', false);
  emit('success');
};
</script>

<style lang="less" scoped>
.notice-form {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;

  .notice-info {
    flex-grow: 0;
    flex-shrink: 0;
  }
  .notice-content {
    flex-grow: 2;
    margin-bottom: 20px;
    :deep(.t-form__item) {
      height: 100%;
    }
    :deep(.t-form__controls) {
      height: 100%;
    }
    :deep(.t-form__controls-content) {
      height: 100%;
      align-items: flex-start;
    }
    :deep(.t-textarea) {
      height: 100%;
    }
    :deep(.t-textarea__inner) {
      height: 100% !important;
    }
  }
  .content-label :deep(.t-form__controls) {
    display: none;
  }
}
</style>
