<template>

  <!-- 主体部分 -->
  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
    <el-page-header :icon="ArrowLeft" @back="goBack">
      <template #content>
        <span class="text-large font-600 line-clamp-1"> 发布文章 </span>
      </template>
      <div class="my-5 sm:my-10">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" size="large">
          <el-form-item label-position="left" label-width="0" prop="title">
            <el-input v-model="form.title" :maxlength="100" placeholder="文章标题"/>
          </el-form-item>
          <el-form-item label-position="left" label-width="0" prop="content">
            <!-- 编辑器 -->
            <MdEditor v-model="form.content" placeholder="请填写文章内容" @onUploadImg="onUploadImg"/>
          </el-form-item>
          <el-form-item label="关联栏目" label-position="left">
            <el-switch v-model="hasCategory"/>
            <div v-if="hasCategory" class="mx-5">
              <el-cascader v-model="category" :options="categoryList" placeholder="选项关联的栏目"
                           @change="handleCategory"/>
            </div>
          </el-form-item>
          <el-form-item label="选择话题" label-position="left">
            <div class="w-lg">
              <el-select
                v-model="topic"
                multiple
                placeholder="选择话题"
              >
                <el-option
                  v-for="item in topicList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="保存操作" label-position="left">
            <el-button size="large" @click="saveDraft">存草稿</el-button>
            <el-button class="sm:w-auto" size="large" type="primary" @click="onRelease(formRef)">立即发布
            </el-button>
          </el-form-item>
        </el-form>
        <div class="h-[20px]"></div>
        <el-divider />
      </div>
    </el-page-header>
  </div>

</template>
<script lang="ts" setup>
import {ArrowLeft, Search, EditPen} from '@element-plus/icons-vue'
import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
import dayjs from "dayjs";
import {MdEditor} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import type {CmsWebsite, CmsWebsiteParam} from "~/api/cms/cmsWebsite/model";
import {addCmsArticle, pageCmsArticle, updateCmsArticle} from "~/api/cms/cmsArticle";
import useFormData from "~/utils/use-form-data";
import {uploadOss} from "~/api/system/file";
import type {FormInstance, FormRules, UploadProps, UploadUserFile} from 'element-plus'
import {updateCmsWebsiteAll} from "~/api/cms/cmsWebsite";
import {addShopMerchantApply, updateShopMerchantApply} from "~/api/shop/shopMerchantApply";
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
import {listDictData} from "~/api/system/dict-data";
import {getLang} from "~/utils/common";
import type {ShopMerchantApply} from "~/api/shop/shopMerchantApply/model";

const route = useRoute();
const router = useRouter();
// 页面信息
const list = ref<CmsArticle[]>([]);
const total = ref(0);
const id = ref<number>();
const hasCategory = ref<boolean>(false);
const files = ref<UploadUserFile[]>([])
const isUpdate = ref<boolean>(false);
const categoryList = ref<CmsNavigation[]>([])
const category = ref<any>()
const topic = ref<string>()
const topicList = ref<any[]>()
const srcList = ref<string[]>([])
const inputWidth = ref<string>('180px');
const showSearch = ref<boolean>(false);
const loading = ref(false)
const formRef = ref<FormInstance>()

// 搜索表单
const where = reactive<CmsWebsiteParam>({
  keywords: '',
  page: 1,
  limit: 12,
  status: undefined,
  recommend: undefined,
  search: true,
  websiteType: undefined,
  categoryId: undefined,
  lang: undefined
});


// 配置信息
const {form, assignFields} = useFormData<CmsArticle>({
  // 文章id
  articleId: undefined,
  // 文章模型
  model: undefined,
  // 文章标题
  title: undefined,
  // 分类类型
  type: undefined,
  // 展现方式
  showType: undefined,
  // 文章类型
  categoryId: 4094,
  // 文章分类
  categoryName: undefined,
  parentId: undefined,
  // 封面图
  image: undefined,
  // 附件
  files: undefined,
  // 附件
  fileList: [],
  // 缩列图
  thumbnail: undefined,
  // 视频地址
  video: undefined,
  // 上传的文件类型
  accept: undefined,
  // 来源
  source: undefined,
  // 标签
  tags: undefined,
  // 文章内容
  content: undefined,
  // 文章编辑器
  editor: 2,
  // 多语言
  lang: getLang(),
  // 虚拟阅读量
  virtualViews: undefined,
  // 实际阅读量
  actualViews: undefined,
  // 访问权限
  permission: 0,
  // 访问密码
  password: undefined,
  password2: undefined,
  // 用户ID
  userId: undefined,
  // 用户昵称
  nickname: undefined,
  // 账号
  username: undefined,
  // 用户头像
  // userAvatar: undefined,
  author: undefined,
  // 所属门店ID
  shopId: undefined,
  //
  likes: undefined,
  // 排序
  sortNumber: undefined,
  // 备注
  comments: undefined,
  // 状态
  status: undefined,
  // 创建时间
  createTime: undefined,
  // 更新时间
  updateTime: undefined,
  // 租户ID
  tenantId: undefined,
  // 租户名称
  tenantName: undefined,
  // 租户logo
  logo: undefined,
  // 详情页路径
  detail: undefined
});

const rules = reactive<FormRules<CmsArticle>>({
  title: [
    {required: true, message: '请输入文章标题', trigger: 'blur'},
    {min: 5, message: '标题长度太短啦', trigger: 'blur'},
  ],
  content: [
    {required: true, message: '请输入手机号码', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'},
  ]
})

const goBack = () => {
  router.back();
}

const handleCategory = () => {

}
const handleFocus = () => {
  inputWidth.value = '400px'; // 聚焦时宽度
}
const handleBlur = () => {
  inputWidth.value = '180px'; // 聚焦时宽度
}

const showDomain = (item: CmsWebsite) => {
  id.value = Number(item.websiteId);
};

const hideDomain = () => {
  id.value = 0;
};

// 加载页面数据
const reload = async () => {
  // 字典Topics
  listDictData({dictCode: 'Topics'}).then(data => {
    topicList.value = data;
  })
  listDictData({dictCode: 'AskColumn'}).then(data => {
    categoryList.value = data;
  })
  await pageCmsArticle({
    ...where,
    model: 'ask'
  }).then(response => {
    if (response?.list) {
      list.value = response?.list;
      total.value = response.count;
    }
  }).catch(() => {
  }).finally(() => showSearch.value = false)
}

/**
 * 搜索
 * @param data
 */
const search = (data: CmsArticleParam) => {
  where.page = data.page;
  reload();
}

// 图片上传
const onUploadImg = async (files: any, callback: any) => {
  const res = await Promise.all(
    files.map((file: any) => {
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append('file', file);
        uploadOss(file).then((res: any) => rev(res))
          .catch((error: any) => rej(error));
      });
    })
  );
  callback(res.map((item) => item.url));
};

const saveDraft = () => {

}

// 发布文章
const onRelease = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  if (loading.value) return // 防止重复提交
  await formEl.validate(async (valid) => {
    if (!valid) return;
    form.files = undefined;
    if (srcList.value.length > 0) {
      form.files = JSON.stringify(srcList.value)
    }
    // if(!form.developer){
    //   form.developer = developer.value;
    // }

    loading.value = true
    const saveOrUpdate = isUpdate.value ? updateCmsArticle : addCmsArticle;
    saveOrUpdate(form).then(() => {
      assignFields({});
      ElMessage.success('发布成功');
      loading.value = false;
    }).catch((err => {
      console.log(err)
      loading.value = false;
    }));
  });
}

watch(
  () => route.query.id,
  (id) => {
    if (id) {
      isUpdate.value = true;
    }
    reload();
  },
  {immediate: true}
);
</script>
<style lang="scss">
.el-input {
  transition: width 0.3s ease;
}
</style>


