<template>
  <el-dialog v-model="dialogVisible" title="添加新闻" width="900px" @closed="closeDialog" @open="openDialog">
    <el-form ref="formRef" :model="formData" :rules="rules">
      <el-row>


        <el-col :span="12">
          <el-form-item :label-width="labelWidth" label="新闻类型" prop="news_type">
            <el-select v-model="formData.news_type" clearable placeholder="请选择">
              <el-option v-for="item in news_type" :key="item.dictionary_guid" :label="item.dictionary_name"
                :value="item.dictionary_value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label-width="labelWidth" label="新闻标题" prop="news_title">
            <el-input v-model='formData.news_title' type="text" placeholder='请输入新闻标题'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='24'>
          <el-form-item :label-width='labelWidth' label='新闻封面' prop='news_cover'>
            <UploadImage ref='uploadRef' v-model='formData.news_cover' :data=uoloadData :limit='1' :fileSize='5'
              :drag='true' :isShowTip='false' />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label-width="labelWidth" label="新闻简介" prop="news_intro">
            <el-input v-model='formData.news_intro' type="textarea" :rows="5" placeholder='请输入新闻简介'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label-width="labelWidth" label="文章来源" prop="news_source">
            <el-input v-model='formData.news_source' type="text" placeholder='请输入文章来源'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label-width="labelWidth" label="跳转链接" prop="news_link">
            <el-input v-model='formData.news_link' type="text" placeholder='请输入跳转链接'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label-width="labelWidth" label="发布日期" prop="news_issue_date">
            <el-date-picker v-model="formData.news_issue_date" type="date" value-format="YYYY-MM-DD" placeholder="发布日期" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label-width="labelWidth" label="浏览次数" prop="news_views_num">
            <el-input-number v-model='formData.news_views_num' controls-position='right' :min='0'></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label-width="labelWidth" label="新闻排序" prop="news_sort">
            <el-input-number v-model='formData.news_sort' controls-position='right' :min='1'></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label-width="labelWidth" label="新闻内容" prop="news_content">
            <div class="copy-btn-box">
              <el-button @click="handleCopyRichText" class="copy-btn">获取富文本内容</el-button>
            </div>
            <RichText v-model='formData.news_content' :min-height='196'></RichText>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleAddClick(formRef)">添加</el-button>
        <el-button @click="handleResetClick(formRef)">重置</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { addNews, getDictionary } from "~/service/news";
import { useLoginStore } from "~/store";
import { ElMessage } from "element-plus";

// --业务参数



// --业务方法

// 字典获取
const news_type = ref([]);
async function get_news_type() {
  await getDictionary({ dictionary_value: 'news_type' }).then((res) => {
    news_type.value = res
  })
}

// 复制富文本内容
async function handleCopyRichText() {
  let text = await navigator.clipboard.writeText(formData.news_content);
  ElMessage.success("富文本内容复制成功")
}



// --基础参数
const store = useLoginStore();
const headers = {
  Accept: "application/json",
  ...store.headers,
};

const isBtnLod = ref(false);
const formRef = ref();
const labelWidth = 90;
const props = defineProps({
  modelValue: Boolean,
  done: Function,
});
const emits = defineEmits(["update:modelValue"]);
const dialogVisible = ref(props.modelValue);
const formData = reactive({});

const uoloadData = ref({
  dirName: "News"
})

watch(props, (v) => {
  dialogVisible.value = v.modelValue;
});

const rules = reactive({
  news_type: [
    {
      required: true,
      message: '新闻类型不能为空'
    }
  ],
  news_title: [
    {
      required: true,
      message: '新闻标题不能为空'
    }
  ],
  news_cover: [
    {
      required: true,
      message: '新闻封面不能为空'
    }
  ],
  news_sort: [
    {
      required: true,
      message: '新闻排序不能为空'
    }
  ],

});


// --基础方法

// 打开弹窗时执行
const openDialog = () => {
  get_news_type()

};

const closeDialog = () => {
  handleResetClick(formRef.value);
  dialogVisible.value = false;
  emits("update:modelValue", false);
};

const handleAddClick = async (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (!valid) {
      return;
    }
    isBtnLod.value = true;


    const { code } = await addNews(formData);
    if (code == 0) {
      closeDialog();
      props.done();
    }
    isBtnLod.value = flase;
  });
};

const handleResetClick = async (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="less" scoped>
.copy-btn-box {
  width: 100%;
  display: flex;
  justify-content: right;
  margin-bottom: 15px;
}
</style>
