<script setup>
import { addNews, listNews } from "@/api/website/news";
import { reactive, ref, toRefs } from "vue";
import Pagination from "@/components/Pagination/index.vue";
import ImageUpload from "@/components/ImageUpload/index.vue";
import { ElMessage } from "element-plus";

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  form: {
    lang: "zh",
    classification: "0", // 类别 0 新闻 1 政策 2 公告
    title: undefined,
    titleRu: undefined,
    content: undefined,
    contentRu: undefined,
    cover: undefined,
  },
});

const { queryParams, form } = toRefs(data);

const rules = {
  title: [
    {
      required: true,
      message: "请输入标题",
      trigger: "change",
    },
  ],
  cover: [
    {
      required: true,
      message: "请上传封面图片",
      trigger: "change",
    },
  ],
};
const newsList = ref([]);
const total = ref(0);
const formRef = ref(null);
const showEditDialog = ref(false);
const dialogTitle = ref("");

const getList = () => {
  listNews(queryParams.value).then((resp) => {
    newsList.value = resp.rows;
    total.value = resp.total;
  });
};

const reset = () => {
  formRef.value?.resetFields();
  form.value = {
    lang: "zh",
    classification: "0", // 类别 0 新闻 1 政策
    title: undefined,
    titleRu: undefined,
    content: undefined,
    contentRu: undefined,
    cover: undefined,
  };
};

const handleAdd = () => {
  reset();
  dialogTitle.value = "新增新闻或政策";
  showEditDialog.value = true;
};

const handleSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      if (form.value.id) {
        // TODO: edit
      } else {
        // add
        addNews(form.value).then((resp) => {
          ElMessage.success("新增成功");
          showEditDialog.value = false;
        });
      }
    })
    .catch(() => {});
};

getList();
</script>

<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="plus"
          size="default"
          @click="handleAdd"
        >
          新增
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="newsList">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="内容">
        <template #default="{ row }">
          <p
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ row.content }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="classification" label="分类" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" icon="delete" type="text">删除</el-button>
          <el-button size="small" type="text" icon="edit">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog v-model="showEditDialog" :title="dialogTitle" :width="500">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item prop="lang" label="语言">
          <el-select v-model="form.lang">
            <el-option label="中文" value="zh" />
            <el-option label="俄文" value="ru" />
          </el-select>
        </el-form-item>
        <el-form-item prop="classification" label="分类">
          <el-select v-model="form.classification">
            <el-option label="新闻动态" value="0" />
            <el-option label="政策解读" value="1" />
            <el-option label="通知公告" value="2" />
          </el-select>
        </el-form-item>
        <template v-if="form.lang === 'zh'">
          <el-form-item prop="title" label="标题">
            <el-input v-model="form.title" />
          </el-form-item>
          <el-form-item prop="content" label="内容">
            <el-input type="textarea" v-model="form.content" />
          </el-form-item>
        </template>
        <template v-else-if="form.lang === 'ru'">
          <el-form-item prop="title" label="标题">
            <el-input v-model="form.titleRu" />
          </el-form-item>
          <el-form-item prop="content" label="内容">
            <el-input type="textarea" v-model="form.contentRu" />
          </el-form-item>
        </template>
        <el-form-item prop="cover" label="封面图片">
          <image-upload v-model="form.cover" :limit="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row :gutter="6" justify="end">
          <el-col :span="1.5">
            <el-button type="default">取消</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="handleSubmit">提交</el-button>
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss"></style>
