<template>
  <div>
    <base-page
      ref="basePage"
      :searchParams="searchParams"
      :tableParams="tableParams"
      :tableUrl="tableUrl"
      :addUrl="addUrl"
      :editUrl="editUrl"
      :delUrl="delUrl"
      :editAuth="editAuth"
      :delAuth="delAuth"
      :infoUrl="infoUrl"
      :exportUrl="exportUrl"
      :importUrl="importUrl"
      :mubanUrl="mubanUrl"
      :editParams="editParams"
      :editFixedParams="editFixedParams"
      :editElseRules="editElseRules"
      :editConfig="editConfig"
      :editParamsDiv="5"
      :infoAuth="() => false"
      :formBtnFixed="true"
      idName="draftId"
    >
      <template v-slot:editOperateSup="{ id, formType, info }">
        <el-button
          v-if="formType != 'watch'"
          type="warning"
          size="small"
          :disabled="draftBtnDisable"
          @click="handleClickDraft(info)"
          >存草稿</el-button
        >
      </template>
    </base-page>
  </div>
</template>

<script>
import basePage from "@/views/modules/cpts/base/index";
import { getItemByIdInCascader, collapse } from "@/utils/cascader";
import { requestPost } from "@/js/dai/request";
import dateFormat from "dai-js/tools/dateFormat.js";

export default {
  props: {},

  data() {
    return {
      draftBtnDisable: false,

      searchParams: [
        { field: "文章标题", keyName: "title", type: "input" },
        {
          field: "创建时间",
          keyName: "createdTime",
          type: "date-range",
          supKeys: ["startTime", "endTime"],
          supValues: ["", ""],
        },
      ],

      tableParams: [
        { field: "序号", keyName: "", type: "no" },
        { field: "文章标题", keyName: "title", type: "text" },
        { field: "创建时间", keyName: "createdTime", type: "text" },
      ],
      tableUrl: "/gov/voice/draft/draftListV2",
      mubanUrl: "",
      importUrl: "",
      exportUrl: "",

      addUrl: "",
      editUrl: "/gov/voice/article/addOrSaveDraft",
      infoUrl: "/gov/voice/draft/detailV2",
      delUrl: "/gov/voice/draft/deletedraft",
      editAuth(item) {
        return true;
      },
      delAuth(item) {
        return true;
      },

      editParams: [
        {
          field: "文章标题",
          keyName: "title",
          type: "input",
          maxlength: 50,
          editDisabled: true,
          rules: [
            {
              required: true,
              message: "文章标题不能为空",
              trigger: "blur",
            },
          ],
        },
        {
          field: "封面图片",
          keyName: "imgArr",
          type: "upload",
          limit: 1,
          editDisabled: true,
          rules: [],
          value: [],
          supKeys: ["imgUrlArr", "imgUrl"],
          supValues: [[], ""],
          beforeImgUpload(file, item, that) {
            console.log(file);
            const isLt1M = file.size / 1024 / 1024 < 10;
            const srcType = file.type;

            if (!isLt1M) {
              that.$message.error("上传文件大小不能超过 10MB!");
              return false;
            }
            if (srcType.indexOf("image") == -1) {
              that.$message.error("仅限图片格式");
              return false;
            }
            return true;
          },
        },
        {
          field: "发布范围",
          keyName: "gridIdList",
          type: "cascader",
          value: [],
          supKeys: ["publishRangeDesc"],
          supValues: [[]],
          optionUrl: "/gov/org/customeragency/agencygridtree",
          optionUrlParams: {
            agencyId: this.$store.state.user.agencyId,
          },
          optionList: [],
          optionProps: {
            multiple: true,
            value: "agencyId",
            label: "agencyName",
            children: "subAgencyList",
            checkStrictly: false,
            emitPath: false,
          },
          optionCook(obj) {
            return [obj];
          },
          handleChangeFn(vals, item, that) {
            console.log("handleChangeFn", vals);
            const { optionList } = item;
            const optionPlaneList = collapse(optionList, "subAgencyList");
            if (vals.length > 0) {
              let selectedList = vals.map(
                (v) =>
                  getItemByIdInCascader(
                    optionPlaneList,
                    [v],
                    "agencyId",
                    "subAgencyList"
                  )[0]
              );
              console.log("handleChangeFn", selectedList);
              let selectedFilterList = selectedList.filter(
                (a) => a.level == "grid"
              );
              that.fmData[item["keyName"]] = selectedFilterList.map(
                (a) => a.agencyId
              );
              that.fmData[item["supKeys"][0]] = selectedFilterList
                .map((a) => a.agencyName)
                .join("、");
            } else {
            }
          },
          rules: [
            {
              required: true,
              message: "发布范围不能为空",
              trigger: "blur",
            },
          ],
        },
        {
          field: "发布时间",
          keyName: "publishDate",
          type: "date",
          value: dateFormat(new Date(), "yyyy-MM-dd"),
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
          rules: [
            {
              required: true,
              message: "发布时间不能为空",
              trigger: "blur",
            },
          ],
        },
        {
          field: "发布单位",
          keyName: "publisher",
          type: "select",
          optionUrl: "/gov/voice/article/publishagencylist",
          optionList: [],
          optionType: "group",
          supKeys: ["publisherName", "publisherType"],
          supValues: ["", ""],
          optionCook(data) {
            let ret = [];
            const { agencyDeptList, agencyGridList, agencyId, agencyName } =
              data;
            if (agencyId) {
              ret.push({
                label: "以组织名义",
                optionList: [
                  {
                    label: agencyId,
                    value: agencyName,
                    type: "agency",
                  },
                ],
              });
            }
            if (Array.isArray(agencyDeptList) && agencyDeptList.length > 0) {
              ret.push({
                label: "以部门名义",
                optionList: [
                  ...agencyDeptList.map((d) => ({
                    label: d.agencyDeptName,
                    value: d.departmentId,
                    type: "department",
                  })),
                ],
              });
            }
            if (Array.isArray(agencyGridList) && agencyGridList.length > 0) {
              ret.push({
                label: "以网格名义",
                optionList: [
                  ...agencyGridList.map((d) => ({
                    label: d.agencyGridName,
                    value: d.gridId,
                    type: "grid",
                  })),
                ],
              });
            }
            return ret;
          },
          handleChangeFn(vals, item, that) {
            const { optionList } = item;
            let opts = [];
            optionList.forEach((g) => {
              opts = [...opts, ...g.optionList];
            });
            let publisher = opts.find((p) => vals == p.value);
            that.fmData[item["supKeys"][0]] = publisher.label;
            that.fmData[item["supKeys"][1]] = publisher.type;
          },
          rules: [
            {
              required: true,
              message: "发布单位不能为空",
              trigger: "blur",
            },
          ],
        },
        {
          field: "文章标签",
          keyName: "tagNameList",
          type: "select",
          multiple: true,
          filterable: true,
          allowCreate: true,
          optionUrl: "/gov/voice/tag/taglist",
          optionUrlParams: {},
          optionList: [],
          optionCook(list) {
            return list.map((item) => ({
              label: item.tagName,
              value: item.tagName,
            }));
          },
        },
        {
          field: "内容",
          keyName: "content",
          type: "rich-text",
          rules: [
            {
              required: true,
              message: "内容不能为空",
              trigger: "blur",
            },
          ],
        },
        {
          field: "置顶",
          keyName: "isTop",
          type: "switch",
          activeValue: "1",
          inactiveValue: "0",
        },
      ],
      editFixedParams: {
        type: "article",
      },
      editElseRules: {},
      editConfig: {
        cookInfoFn(data) {
          if (data.richTextFlag == "0") {
            data.content = data.contentList
              .map((item) => {
                if (item.contentType == "text") {
                  return `<p>${item.content}</p>`;
                } else if (item.contentType == "img") {
                  return `<img src="${item.content}" style="max-width:100%"></img>`;
                } else if (item.contentType == "video") {
                  return `<video src="${item.content}" style="max-width:100%" controls></video>`;
                } else if (item.contentType == "file") {
                  return `<a src="${item.content}" target="_blank">附件：${item.fileName}</a>`;
                }
              })
              .join(" ");
          } else {
            data.content = data.contentList[0].content;
          }
          if (data.imgUrl) {
            data.imgArr = [
              {
                name: "封面",
                url: data.imgUrl,
              },
            ];
            data.imgUrlArr = [data.imgUrl];
          }

          return data;
        },

        beforeSubmit(formType, fmData, that) {
          if (fmData.isTop == "1" && !fmData.imgUrl) {
            that.$message.error("请上传封面图片");
            return false;
          }
          return true;
        },
      },
    };
  },
  components: { basePage },
  computed: {},
  watch: {},

  async mounted() {},

  methods: {
    async handleClickDraft(fmData) {
      let url = this.addUrl;
      let params = {
        ...fmData,
        type: "draft",
      };
      params = this.$refs.basePage.$refs.editForm.cookBeforeSubmit(params);
      if (!params.title && !params.content) {
        return this.$message.error("标题或内容不能为空");
      }

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message({
          type: "success",
          message: "保存成功",
        });
        this.$refs.basePage.handleClose();
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

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