<template>
  <!-- 本周研究汇总添加/编辑 -->
  <div class="add-summarizing">
    <el-card>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="title">
              <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="author">
              <el-input v-model="ruleForm.author" placeholder="请输入作者"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="time">
              <el-date-picker type="date" placeholder="选择发布时间" value-format="yyyy-MM-dd" v-model="ruleForm.time"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="explain">
          <el-input v-model="ruleForm.explain" placeholder="请输入摘要"></el-input>
        </el-form-item>
      </el-form>
      <!-- //深度报告篇 -->
      <div class="content-list">
        <div class="list-top">
          <span>深度报告篇</span>
          <input maxlength="1" :class="isSortSdbgShow ? '' : 'red'" v-model="SortSdbg" placeholder="序号" onkeyup="value=value.replace(/[^A-Z]/g,'')" />
          <el-tooltip class="item" placement="top-start">
            <div slot="content">
              一级分类的序号请以大写字母A\B\C\D...排序 <br />
              二级分类请以1\2\3\4...排序
            </div>
            <i class="el-icon-info"></i>
          </el-tooltip>
        </div>
        <div class="list-ul" v-for="(item, index) in ListSdbg" :key="item.ChartPermissionId">
          <div class="list-title">
            <img :src="item.IcoLink" alt="" />
            <span>{{ item.ChartPermissionName }}</span>
            <input maxlength="1" :class="item.isShow ? 'red' : ''" placeholder="序号" v-model="item.ChartPermissionSort" onkeyup="value=value.replace(/[^\d]/g,'')" />
          </div>
          <div class="list-li">
            <div v-for="(val, num) in item.List" :key="num" class="list-children">
              <div class="box">
                <!-- <el-input type="textarea" :rows="4" placeholder="请输入文字描述" v-model="val.Body"></el-input> -->
                <froala :id="num + 'froala'" :ref="num + 'froala'" :tag="'textarea'" :config="froalaConfig" v-model="val.Body"></froala>
                <el-input v-model="val.ReportLink" placeholder="请输入报告链接"></el-input>
              </div>
              <img @click="deleteListSdbg(item, num, index, '深度报告篇')" src="~@/assets/img/icons/delete-Item.png" />
            </div>
            <p @click="addListSdbg(item, index, '深度报告篇')" :class="item.List && item.List.length > 0 ? 'active' : ''">+添加栏目</p>
          </div>
        </div>
      </div>
      <!-- //产业调研纪要篇 -->
      <div class="content-list">
        <div class="list-top">
          <span>产业调研纪要篇</span>
          <input maxlength="1" :class="isSortCydyjyShow ? '' : 'red'" v-model="SortCydyjy" placeholder="序号" onkeyup="value=value.replace(/[^A-Z]/g,'')" />
        </div>
        <div class="list-ul" v-for="(item, index) in ListCydyjy" :key="item.ChartPermissionId">
          <div class="list-title">
            <img :src="item.IcoLink" alt="" />
            <span>{{ item.ChartPermissionName }}</span>
            <input maxlength="1" placeholder="序号" :class="item.isShow ? 'red' : ''" v-model="item.ChartPermissionSort" onkeyup="value=value.replace(/[^\d]/g,'')" />
          </div>
          <div class="list-li">
            <div v-for="(val, num) in item.List" :key="num" class="list-children">
              <div class="box">
                <!-- <el-input type="textarea" :rows="4" placeholder="请输入文字描述" v-model="val.Body"></el-input> -->
                <froala :id="num + 'froalaCy'" :ref="num + 'froalaCy'" :tag="'textarea'" :config="froalaConfig" v-model="val.Body"></froala>
                <el-input v-model="val.ReportLink" placeholder="请输入报告链接"></el-input>
              </div>
              <img @click="deleteListSdbg(item, num, index, '产业调研纪要篇')" src="~@/assets/img/icons/delete-Item.png" />
            </div>
            <p @click="addListSdbg(item, index, '产业调研纪要篇')" :class="item.List && item.List.length > 0 ? 'active' : ''">+添加栏目</p>
          </div>
        </div>
      </div>
      <!-- //上市公司调研纪要篇 -->
      <div class="content-list">
        <div class="list-top">
          <span>上市公司调研纪要篇</span>
          <input maxlength="1" :class="isSortSsgsShow ? '' : 'red'" v-model="SortSsgs" placeholder="序号" onkeyup="value=value.replace(/[^A-Z]/g,'')" />
        </div>
        <div class="list-ul" v-for="(item, index) in ListSsgs" :key="item.ChartPermissionId">
          <div class="list-title">
            <img :src="item.IcoLink" alt="" />
            <span>{{ item.ChartPermissionName }}</span>
            <input maxlength="1" placeholder="序号" :class="item.isShow ? 'red' : ''" v-model="item.ChartPermissionSort" onkeyup="value=value.replace(/[^\d]/g,'')" />
          </div>
          <div class="list-li">
            <div v-for="(val, num) in item.List" :key="num" class="list-children">
              <div class="box">
                <!-- <el-input type="textarea" :rows="4" placeholder="请输入文字描述" v-model="val.Body"></el-input> -->
                <froala :id="num + 'froalaCy'" :ref="num + 'froalaCy'" :tag="'textarea'" :config="froalaConfig" v-model="val.Body"></froala>
                <el-input v-model="val.ReportLink" placeholder="请输入报告链接"></el-input>
              </div>
              <img @click="deleteListSdbg(item, num, index, '上市公司调研纪要篇')" src="~@/assets/img/icons/delete-Item.png" />
            </div>
            <p @click="addListSdbg(item, index, '上市公司调研纪要篇')" :class="item.List && item.List.length > 0 ? 'active' : ''">+添加栏目</p>
          </div>
        </div>
      </div>
      <!-- //事件点评 -->
      <div class="content-list">
        <div class="list-top">
          <span>市场QA汇总</span>
          <input maxlength="1" :class="isSortSjdpShow ? '' : 'red'" v-model="SortSjdp" placeholder="序号" onkeyup="value=value.replace(/[^A-Z]/g,'')" />
        </div>
        <div class="list-ul">
          <div class="list-li">
            <div v-for="(item, index) in ListSjdp" :key="index" class="list-children">
              <div class="box">
                <froala :id="item + 'froalaDp'" :ref="item + 'froalaDp'" :tag="'textarea'" :config="froalaConfig" v-model="item.Body"></froala>
                <el-input v-model="item.ReportLink" :class="item.isShow ? 'red' : ''" placeholder="请输入报告链接"></el-input>
              </div>
              <img @click="deleteListSjdp(item, index)" src="~@/assets/img/icons/delete-Item.png" />
            </div>
            <p @click="addListSjdp(item, index)" :class="ListSjdp && ListSjdp.length > 0 ? 'active' : ''">+添加栏目</p>
          </div>
        </div>
      </div>
      <!-- //本周晨会精华 -->
      <div class="content-list">
        <div class="list-top">
          <span>本周晨会精华</span>
          <input maxlength="1" :class="isSortBzchjhShow ? '' : 'red'" v-model="SortBzchjh" placeholder="序号" onkeyup="value=value.replace(/[^A-Z]/g,'')" />
        </div>
        <div class="list-ul" v-for="(item, index) in ListBzchjh" :key="item.ChartPermissionId">
          <div class="list-title">
            <img :src="item.IcoLink" alt="" />
            <span>{{ item.ChartPermissionName }}</span>
            <input maxlength="1" placeholder="序号" :class="item.isShow ? 'red' : ''" v-model="item.ChartPermissionSort" onkeyup="value=value.replace(/[^\d]/g,'')" />
          </div>
          <div class="list-li">
            <div v-for="(val, num) in item.List" :key="num" class="list-children">
              <div class="box">
                <froala :id="num + 'froalaJh'" :ref="num + 'froalaJh'" :tag="'textarea'" :config="froalaConfig" v-model="val.Body"></froala>
                <el-input v-model="val.ReportLink" placeholder="请输入报告链接"></el-input>
              </div>
              <img @click="deleteListSdbg(item, num, index, '本周晨会精华')" src="~@/assets/img/icons/delete-Item.png" />
            </div>
            <p @click="addListSdbg(item, index, '本周晨会精华')" :class="item.List && item.List.length > 0 ? 'active' : ''">+添加栏目</p>
          </div>
        </div>
      </div>
      <!-- //严选 -->
      <!-- <div class="content-list">
        <div class="list-top">
          <span>买方研选</span>
          <input maxlength="1" :class="isSortYanxShow ? '' : 'red'" v-model="SortYanx" placeholder="序号" onkeyup="value=value.replace(/[^A-Z]/g,'')" />
        </div>
        <div class="list-ul" v-for="(item, index) in ListYanx" :key="item.ChartPermissionId">
          <div class="list-title">
            <img :src="item.IcoLink" alt="" />
            <span>{{ item.ChartPermissionName }}</span>
            <input maxlength="1" placeholder="序号" :class="item.isShow ? 'red' : ''" v-model="item.ChartPermissionSort" onkeyup="value=value.replace(/[^\d]/g,'')" />
          </div>
          <div class="list-li">
            <div v-for="(val, num) in item.List" :key="num" class="list-children">
              <div class="box">
                <froala :id="num + 'froalaJh'" :ref="num + 'froalaJh'" :tag="'textarea'" :config="froalaConfig" v-model="val.Body"></froala>
                <el-input v-model="val.ReportLink" placeholder="请输入报告链接"></el-input>
              </div>
              <img @click="deleteListSdbg(item, num, index, '研选')" src="~@/assets/img/icons/delete-Item.png" />
            </div>
            <p @click="addListSdbg(item, index, '研选')" :class="item.List && item.List.length > 0 ? 'active' : ''">+添加栏目</p>
          </div>
        </div>
      </div> -->
      <div class="more-button">
        <el-button type="primary" @click="confirm('预览')">预览</el-button>
        <el-button type="primary" @click="confirm('保存')">保存</el-button>
        <el-button v-if="isShowStatus" type="primary" @click="confirm('发布')">发布</el-button>
        <el-button type="" @click="cancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
import mixinsRichText from "./selection/mixins";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    var that = this;
    return {
      //深度报告篇
      ListSdbg: [],
      SortSdbg: "",
      //本周晨会精华
      ListBzchjh: [],
      SortBzchjh: "",
      //事件点评
      ListSjdp: [],
      SortSjdp: "",
      // //研选
      // ListYanx: [],
      // SortYanx: "",
      isShowStatus: true,
      isSortSdbgShow: true,
      isSortBzchjhShow: true,
      isSortSjdpShow: true,
      // isSortYanxShow: true,
    };
  },
  mixins: [mixinsRichText],
  computed: {},
  watch: {},
  created() {},
  mounted() {
    window.addEventListener("beforeunload", this.beforeunloadFn);
    if (this.$route.query.id) {
      this.getDetail();
    } else {
      this.getList();
    }
  },
  destroyed() {
    window.removeEventListener("beforeunload", this.beforeunloadFn);
  },
  methods: {
    beforeunloadFn(e) {
      e = e || window.event;
      if (e) {
        e.returnValue = "关闭提示";
      }
      return "关闭提示";
    },
    //获取模板
    async getList() {
      const res = await raiInterface.chartPermissiondetailTemplate();
      if (res.Ret === 200) {
        this.ListSdbg = res.Data.ListSdbg;
        this.ListCydyjy = res.Data.ListCydyjy;
        this.ListBzchjh = res.Data.ListBzchjh;
        this.ListSsgs = res.Data.ListSsgs;
        this.SortBzchjh = res.Data.SortBzchjh;
        this.SortCydyjy = res.Data.SortCydyjy;
        this.SortSdbg = res.Data.SortSdbg;
        this.SortSsgs = res.Data.SortSsgs;
        //研选
        // this.ListYanx = res.Data.ListYanx;
        // this.SortYanx = res.Data.SortYanx;
      }
    },

    //事件点评 添加
    addListSjdp(item, indx) {
      this.ListSjdp.push({ Body: "", ReportLink: "" });
    },
    //事件点评 删除
    deleteListSjdp(item, index) {
      this.ListSjdp.splice(index, 1);
    },
    //获取详情
    async getDetail() {
      const res = await raiInterface.researchSummaryDetail({
        ArticleId: this.$route.query.id,
      });
      if (res.Ret === 200) {
        this.isShowStatus = res.Data.PublishStatus == 0;
        this.initGetList(res.Data.ListSdbg);
        this.initGetList(res.Data.ListCydyjy);
        this.initGetList(res.Data.ListBzchjh);
        this.initGetList(res.Data.ListSsgs);
        // this.initGetList(res.Data.ListYanx);
        //研选
        // this.ListYanx = res.Data.ListYanx;
        this.ListSdbg = res.Data.ListSdbg;
        this.ListCydyjy = res.Data.ListCydyjy;
        this.ListBzchjh = res.Data.ListBzchjh;
        this.ListSsgs = res.Data.ListSsgs;
        this.ListSjdp = res.Data.ListSjdp || [];
        this.SortBzchjh = res.Data.SortBzchjh;
        this.SortCydyjy = res.Data.SortCydyjy;
        this.SortSdbg = res.Data.SortSdbg;
        this.SortSjdp = res.Data.SortSjdp;
        this.SortSsgs = res.Data.SortSsgs;
        // this.SortYanx = res.Data.SortYanx;
        this.ruleForm = {
          title: res.Data.Title, //标题
          author: res.Data.Department, //作者
          time: res.Data.PublishDate, //时间
          explain: res.Data.Abstract, //说明
        };
      }
    },
    //保存 发布
    confirm: _.debounce(function (type) {
      this.$refs.ruleForm.validate(async (val) => {
        if (!val) return;
        const isFlag = await this.fnConFirm();
        if (isFlag) return;
        let params = {
          Abstract: this.ruleForm.explain,
          ArticleId: this.$route.query.id ? Number(this.$route.query.id) : 0,
          Department: this.ruleForm.author,
          DoType: type == "发布" ? 1 : 0,
          PublishDate: this.ruleForm.time.replace(/\./g, "-"),
          Title: this.ruleForm.title,
          Content: {
            ListBzchjh: this.ListBzchjh,
            ListCydyjy: this.ListCydyjy,
            ListSdbg: this.ListSdbg,
            ListSjdp: this.ListSjdp,
            ListSsgs: this.ListSsgs,
            SortBzchjh: this.SortBzchjh,
            SortCydyjy: this.SortCydyjy,
            SortSdbg: this.SortSdbg,
            SortSjdp: this.SortSjdp,
            SortSsgs: this.SortSsgs,
            // ListYanx: this.ListYanx,
            // SortYanx: this.SortYanx,
          },
        };
        if (type == "预览") {
          sessionStorage.setItem("thisWeekPre", JSON.stringify(params));
          let { href } = this.$router.resolve({ name: "预览本周汇总" });
          window.open(href, "_blank");
        } else {
          const res = await raiInterface.researchSummaryPreserveAndPublish(params);
          if (res.Ret === 200) {
            this.$message.success(`${type}成功!`);
            this.$refs["ruleForm"].resetFields();
            this.$router.back();
          }
        }
      });
    }, 500),
    fnConFirm() {
      let flag = false;
      let isSdbg = this.ListSdbg.some((item) => item.List.length > 0); //深度报告篇
      let isCydyjy = this.ListCydyjy.some((item) => item.List.length > 0); //产业调研
      let Bzchjh = this.ListBzchjh.some((item) => item.List.length > 0); //本周晨选
      let Ssgs = this.ListSsgs.some((item) => item.List.length > 0); //上司公司
      // let Yanx = this.ListYanx.some((item) => item.List.length > 0); //严选
      this.isSortSdbgShow = !(isSdbg && !this.SortSdbg);
      this.isSortCydyjyShow = !(isCydyjy && !this.SortCydyjy);
      this.isSortBzchjhShow = !(Bzchjh && !this.SortBzchjh);
      this.isSortSsgsShow = !(Ssgs && !this.SortSsgs); //上司公司
      // this.isSortYanxShow = !(Yanx && !this.SortYanx); //严选 输入框
      this.isSortSjdpShow = !(this.ListSjdp.length !== 0 && !this.SortSjdp);
      if ((isSdbg && !this.SortSdbg) || (isCydyjy && !this.SortCydyjy) || (Bzchjh && !this.SortBzchjh) || (this.ListSjdp.length !== 0 && !this.SortSjdp)) {
        this.$message.warning("有内容的报告分类和行业分类，序号不能为空");
        return (flag = true);
      }
      let str = new Array(this.SortSdbg, this.SortCydyjy, this.SortBzchjh, this.SortSjdp, this.SortSsgs);
      let isStr = str.sort();
      for (var i = 0; i < isStr.length - 1; i++) {
        if (isStr[i] == isStr[i + 1] && (isStr[i] || isStr[i + 1])) {
          this.$message.warning("请勿填写重复的序号!");
          return (flag = true);
        }
      }
      let chidrenSdbg = this.chidrenList(this.ListSdbg);
      let chidrenCydyjy = this.chidrenList(this.ListCydyjy);
      let chidrenBzchjh = this.chidrenList(this.ListBzchjh);
      let chidrenSsgs = this.chidrenList(this.ListSsgs);
      if (chidrenSdbg || chidrenCydyjy || chidrenBzchjh || chidrenSsgs) {
        this.$message.warning("有内容行业分类，序号不能为空");
        return (flag = true);
      }
    },

    //取消
    cancel() {
      this.$refs["ruleForm"].resetFields();
      this.$router.back();
    },
  },
};
</script>
<style scoped lang="scss">
.add-summarizing {
  @import "./selection/strictSelection.scss";
}
</style>
