<template>
  <div class="container-applets">
    <!-- 头部根据条件查找 -->
    <el-card class="top-card-box">
      <div class="top-card">
        <div>
          <span v-for="item in tabsList" :key="item.index" :class="tabs_index == item.index ? 'tab_active' : ''" @click="tabActive(item)">{{ item.name }}</span>
        </div>
        <div class="input-box">
          <el-input placeholder="请输入报告标题" v-model="listFrom.KeyWord" @input="listFromInput" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
    </el-card>
    <!-- 内容部分 -->
    <el-card>
      <!-- 筛选条件 -->
      <div class="screen-box">
        <div style="flex: 1">
          <el-select style="margin-bottom: 20px" placeholder="行业" v-model="listFrom.ChartPermissionId" @clear="clearSelect" clearable @change="listChangeBtn">
            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
          </el-select>
          <el-select placeholder="系列" v-model="listFrom.SubCategoryName" @focus="reportMappingist" clearable @change="listChangeBtn">
            <el-option v-for="(item, index) in themeList" :label="item.SubCategoryName" :key="index" :value="item.SubCategoryName"></el-option>
          </el-select>
          <el-select placeholder="报告类型" v-model="listFrom.MatchTypeName" v-show="tabs_index == 1" @focus="reportMappingMatchTypeRep" clearable @change="listChangeBtn">
            <el-option v-for="(item, index) in MatchTypeNameList" :label="item.MatchTypeName" :key="index" :value="item.MatchTypeName"></el-option>
          </el-select>
          <el-select placeholder="产业" v-model="listFrom.IndustrialManagementId" v-show="tabs_index == 1" @focus="getIndustrialManagement" clearable @change="listChangeBtn">
            <template>
              <el-option v-for="item in idustrialManagement" :label="item.IndustryName" :key="item.IndustrialManagementId" :value="item.IndustrialManagementId"></el-option>
            </template>
          </el-select>
          <el-input v-if="tabs_index == 1" style="width: 230px; margin-right: 15px" placeholder="请输入报告标签" v-model="listFrom.relevance" @input="listFromInput" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-input v-if="tabs_index != 2" style="width: 230px; margin-right: 15px" placeholder="请输入个股标签" v-model="listFrom.reportLabel" @input="listFromInput" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <date-picker style="margin-bottom: 30px" type="date" range v-model="createdate" placeholder="发布时间" value-type="format" @change="listChangeBtn"> </date-picker>
        </div>
        <div style="width: 220px">
          <el-button type="primary" style="margin-bottom: 30px" v-if="IsShowButton" @click="$router.push('/appIndustry')">产业管理</el-button>
          <el-button style="float: right" type="primary" @click="addSummary('')">添加报告</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div>
        <el-table style="width: 100%" border :data="getList">
          <el-table-column align="center" label="报告标题" min-width="300">
            <template slot-scope="scope">
              <span style="cursor: pointer" class="title-table" @click="lookDetail(scope.row)">{{ scope.row.Title }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="80" align="center" label="行业" prop="PermissionName" key="permissionName"></el-table-column>
          <el-table-column min-width="180" align="center" label="发布时间" prop="PublishDate" key="publishDate"></el-table-column>
          <el-table-column min-width="180" v-if="tabs_index !== 2" align="center" label="产业标签" prop="FieldName" key="FieldName"></el-table-column>
          <el-table-column min-width="180" v-if="tabs_index !== 2" align="center" label="个股标签" prop="Stock" key="Stock"></el-table-column>
          <el-table-column min-width="100" align="center" label="系列" key="subCategoryName" prop="SubCategoryName"></el-table-column>
          <el-table-column min-width="130" align="center" key="MatchTypeName" label="匹配类型">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.MatchTypeName }}</span>
                <img @click="modification(scope.row.ReportId)" :src="$icons.amend" style="color: #fff; width: 12px; height: 12px; margin-left: 5px; vertical-align: middle" />
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="tabs_index == 1" min-width="200" align="center" label="报告标签">
            <template slot-scope="{ row }"> {{ row.Label }} </template>
          </el-table-column>
          <el-table-column width="150" label="PV / UV" align="center" key="pvUv" :render-header="renderHeader">
            <template slot-scope="{ row }">
              <div class="pv-uv-download">
                <span>{{ row.Pv }}/{{ row.Uv }}</span>
                <span>&nbsp;&nbsp;+&nbsp;&nbsp;{{ row.ClPv }}/{{ row.ClUv }}</span>
                <a :href="`${exportPvUv}${row.ArticleId}&${token}`" download>
                  <img src="~@/assets/img/rai_m/pvuv_download.png" alt="" />
                </a>
              </div>
            </template>
          </el-table-column>
          <el-table-column key="collection" align="center" label="收藏数" min-width="80">
            <template slot-scope="scope">
              <span class="editsty" @click="collectionIsShow(scope.row.ArticleId, '收藏')">{{ scope.row.CollectionNum }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="tabs_index == 1" key="ask" width="60" label="留言" align="center">
            <template slot-scope="scope">
              <span @click="inquireBtn(scope.row.ArticleId)" class="editsty">{{ scope.row.CommentNum }}</span>
            </template>
          </el-table-column>
          <!-- 其他的操作 -->
          <el-table-column align="center" label="操作" min-width="120">
            <template slot-scope="scope">
              <div v-if="scope.row.SubCategoryName == '专项调研'">
                <span class="editsty" @click="operationBtn(scope.row.ArticleId, '发布')">{{ scope.row.PublishStatus == 0 ? "发布" : "取消发布" }} &nbsp;&nbsp;</span>
                <span class="editsty" @click="addSummary(scope.row.ArticleId)">编辑 &nbsp;&nbsp;</span>
                <span class="deletesty" v-if="scope.row.PublishStatus == 0" @click="operationBtn(scope.row.ArticleId, '删除')">删除 &nbsp;&nbsp;</span>
              </div>
              <div v-else>
                <el-button type="text" v-if="(tabs_index == 0 || tabs_index == 2) && IsShowButton" @click="classifyBtn(scope.row)">归类</el-button>
                <el-button type="text" v-if="scope.row.ShowButton && tabs_index == 1 && IsShowButton" @click="classifyBtn(scope.row)">修改归类</el-button>
                <el-button type="text" v-if="scope.row.ShowButton && (tabs_index == 0 || tabs_index == 1) && IsShowButton" @click="filtrationBtn(scope.row.ReportId)">过滤</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar">
          <m-page :total="total" :page_no="page_no" :pageSize="8" @handleCurrentChange="handleCurrentChange" />
        </el-col>
      </div>
    </el-card>
    <!-- 弹框部分 -->
    <el-dialog
      v-dialogDrag
      :modal-append-to-body="false"
      :center="true"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="561px"
      @close="classifyDelete"
    >
      <div slot="title" style="display: flex; align-items: center">
        <img :src="$icons.report" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
        <span style="font-size: 16px">报告归类</span>
      </div>
      <el-form :model="chartPermissionPost" :rules="rules" ref="ruleForm">
        <el-form-item prop="IndustrialManagementId">
          <el-select clearable placeholder="请选择所属产业" style="width: 100%" filterable @clear="clearSelectChart" @change="chartPermissionPostChange" multiple v-model="chartPermissionPostOptins">
            <el-option v-for="item in idustrialManagement" :label="item.IndustryName" :key="item.IndustrialManagementId" :value="item.IndustrialManagementId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-select placeholder="请选择关联标的" v-model="optionS" style="width: 100%; margin-bottom: 40px; margin-top: 30px" @change="optionsChange" @focus="getIndustrialSubject" multiple clearable>
        <el-option v-for="item in listSubject" :label="item.SubjectName" :key="item.IndustrialSubjectId" :value="item.IndustrialSubjectId"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="classifyClick">保存</el-button>
        <el-button @click="classifyDelete">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :modal-append-to-body="false"
      :center="true"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :visible.sync="dialogAddindustry"
      width="460px"
      title="修改匹配类型"
      @close="btnCancel"
    >
      <div style="margin-bottom: 40px">
        <el-select v-model="modificationValue" placeholder="请选择" style="width: 380px">
          <el-option v-for="item in modificationOptions" :key="item.MatchID" :label="item.MatchTypeName" :value="item.MatchID"> </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="modificationClick">保存</el-button>
        <el-button @click="btnCancel">取消</el-button>
      </span>
    </el-dialog>
    <focus-collection :collectionDlgShow="collectionDlgShow" :collectionId="collectionId" :collectionType="collectionType" />
    <generation-ask :generaitondialogVisib.sync="generaitondialogVisib" :generaitonId="generaitonId" :generaitonType="generaitonType" />
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
import GenerationAsk from "../components/generationAsk.vue";
import FocusCollection from "../components/focusCollection.vue";
import mPage from "@/components/mPage.vue";
export default {
  name: "",
  components: { mPage, FocusCollection, GenerationAsk },
  props: {},
  data() {
    return {
      page_no: 1,
      exchange: "未归类",
      optionS: [],
      dialogVisible: false,
      themeList: [], //主题的数组
      MatchTypeNameList: [], //报告类型
      idustrialManagement: [], //产业的数组
      listFrom: {
        //获取列表的数据
        PageSize: 8,
        CurrentIndex: 1,
        KeyWord: "", //搜索关键词
        SubCategoryName: "", //主题
        MatchTypeName: "", //匹配类型
        IsClass: 1, //"是否归类 1是、0否"
        IsFilter: 0, //"是否过滤 1是、0否"
        ChartPermissionId: "", //行业ID
        IndustrialManagementId: "", //产业ID
        PublishDate: "", //时间
        relevance: "", //关联
        reportLabel: "", //报告标签
      },
      createdate: "",
      getList: [], //获取到列表的数组
      total: null,
      listSubject: [], //标的数组
      chartPermissionList: [], //产业
      chartPermissionPost: {
        IndustrialManagementId: "", //产业ID
        IndustrialSubjectIdStr: "0", //标的ID
        ReportId: null, //报告ID
      },
      chartPermissionPostOptins: [],
      rules: {
        IndustrialManagementId: [{ required: true, message: "请先选择行业", trigger: "change" }],
      },
      IsShowButton: true, //是否展示操作按钮
      dialogAddindustry: false, //
      modificationValue: "",
      modificationId: "",
      modificationOptions: [],
      exportUser: process.env.API_ROOT + "/cygx/reportArticle/export?ReportId=",
      auto: localStorage.getItem("auth") || "",
      tabsList: [
        { name: "已归类报告", query: "已归类", index: 1 },
        { name: "未归类报告", query: "未归类", index: 0 },
        { name: "过滤报告", query: "过滤", index: 2 },
      ],
      tabs_index: 1,
      status: "", //状态
      options: [
        { id: 1, name: "已发布" },
        { id: 0, name: "未发布" },
      ],
      collectionDlgShow: false, //关注 收藏 隐显
      collectionId: "", //关注 收藏 id
      collectionType: "", //关注 收藏 类型区分
      token: localStorage.getItem("auth") || "",
      generaitondialogVisib: false, //留言的弹框
      generaitonId: "",
      generaitonType: "已归类",
    };
  },
  computed: {
    sta() {
      return this.status === 0 ? this.status : this.status === 1 ? this.status : 2;
    },
    exportPvUv() {
      return process.env.API_ROOT + "/cygx/summaryManage/articleHistoryExport?ArticleId=";
    },
  },
  created() {},
  mounted() {
    if (sessionStorage.getItem("appletsReportPageBack")) {
      let { tabsIndex, page, KeyWord, ChartPermissionId, SubCategoryName, MatchTypeName, IndustrialManagementId, relevance, reportLabel, createdate, IsClass, IsFilter, chartPermissionList } =
        JSON.parse(sessionStorage.getItem("appletsReportPageBack"));
      this.tabs_index = tabsIndex;
      this.page_no = page;
      this.createdate = createdate;
      this.chartPermissionList = chartPermissionList;
      this.listFrom = {
        PageSize: 8,
        CurrentIndex: 1,
        KeyWord, //搜索关键词
        SubCategoryName, //主题
        MatchTypeName, //匹配类型
        IsClass, //"是否归类 1是、0否"
        IsFilter, //"是否过滤 1是、0否"
        ChartPermissionId, //行业ID
        IndustrialManagementId, //产业ID
        PublishDate: "", //时间
        relevance, //关联
        reportLabel, //报告标签
      };
    }
    this.reportArticle();
    this.getshowButton();
    this.chartPermission();
  },
  methods: {
    //输入框的input 事件
    listFromInput() {
      this.page_no = 1;
      this.reportArticle();
    },
    //是否展示操作按钮接口
    getshowButton() {
      raiInterface.getshowButton().then((res) => {
        if (res.Ret === 200) {
          this.IsShowButton = res.Data.IsShowButton;
        }
      });
    },
    //table表头自定义
    renderHeader(h, { column, $index }) {
      return h("div", { attrs: { style: "padding:0;" } }, [
        h("span", column.label),
        h("el-tooltip", { props: { placement: "top" } }, [
          h("p", { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } }, "pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）"),
          h("p", { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } }, "uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）"),
          h("el-button", { props: { icon: "el-icon-info" }, attrs: { style: "border:none;background:none;pading:2px" } }, ""),
        ]),
      ]);
    },
    //头部的tab的点击事件
    tabActive(item) {
      this.cutClick();
      if (item.index !== this.tabs_index) {
        this.tabs_index = item.index;
      }
      this.exchange = item.query;
      this.chartPermissionList = [];
      this.listFrom.IsClass = this.exchange == "已归类" ? 1 : 0;
      this.listFrom.IsFilter = this.exchange == "过滤" ? 1 : 0;
      this.page_no = 1;
      this.reportArticle();
      this.chartPermission();
    },
    //点击归类
    classifyBtn(item) {
      this.chartPermissionPost.ChartPermissionId = item.ChartPermissionId;
      this.chartPermissionPost.ReportId = item.ReportId;
      this.dialogVisible = true;
      let IndustrialManagementIds = [];
      item.ListIndustrial && item.ListIndustrial.forEach((key) => IndustrialManagementIds.push(key.IndustrialManagementId));
      this.chartPermissionPostOptins = IndustrialManagementIds;
      if (this.chartPermissionPostOptins.length > 0) {
        this.chartPermissionPost.IndustrialManagementId = this.chartPermissionPostOptins.join();
        this.getIndustrialSubject();
      }
      this.$nextTick(() => {
        let IndustrialSubjectIds = [];
        item.ListSubject && item.ListSubject.forEach((key) => IndustrialSubjectIds.push(key.IndustrialSubjectId));
        this.optionS = IndustrialSubjectIds;
        this.optionS.length > 0 ? (this.chartPermissionPost.IndustrialSubjectIdStr = this.optionS.toString()) : "";
      });
      this.getIndustrialManagementDalg();
    },
    //点击过滤
    filtrationBtn(ReportId) {
      this.$confirm("过滤报告不在小程序内显示，确定继续吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          raiInterface.reportArticleFilter({ ReportId }).then((res) => {
            if (res.Ret !== 200) return;
            this.page_no = 1;
            this.reportArticle();
            this.$message({
              type: "success",
              message: "过滤成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消过滤",
          });
        });
    },
    //获取主题
    reportMappingist() {
      if (this.listFrom.ChartPermissionId == "") return;
      raiInterface
        .reportMappingist({
          ChartPermissionId: this.listFrom.ChartPermissionId - 0 || this.chartPermissionPost.ChartPermissionId - 0,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          if (res.Data.List) {
            this.themeList = res.Data.List;
          } else {
            this.themeList = [];
          }
        });
    },
    //获取列表
    reportArticle() {
      raiInterface
        .reportArticle({
          PageSize: this.listFrom.PageSize,
          CurrentIndex: this.page_no,
          IsFilter: this.listFrom.IsFilter,
          IsClass: this.listFrom.IsClass,
          ChartPermissionId: this.listFrom.ChartPermissionId,
          SubCategoryName: this.listFrom.SubCategoryName,
          MatchTypeName: this.listFrom.MatchTypeName,
          IndustrialManagementId: this.listFrom.IndustrialManagementId,
          KeyWord: this.listFrom.KeyWord,
          StartDate: this.createdate[0] ? this.createdate[0] : "",
          EndDate: this.createdate[0] ? this.createdate[1] : "",
          KeyWordStock: this.listFrom.reportLabel,
          ReportLabel: this.listFrom.relevance,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.getList = res.Data.List;
          this.total = res.Data.Paging.Totals;
        });
    },
    optionsChange() {
      this.chartPermissionPost.IndustrialSubjectIdStr = this.optionS.toString();
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.reportArticle();
    },
    //获取行业
    chartPermission() {
      this.listFrom.IndustrialManagementId = "";
      this.themeList = [];
      this.idustrialManagement = [];
      if (this.exchange == "已归类" || this.tabs_index == 1) {
        //要策略
        raiInterface
          .chartPermission({
            HideMacro: true,
            IsCeLueReport: true,
          })
          .then((res) => {
            if (res.Ret === 200) {
              this.chartPermissionList = res.Data.List;
            }
          });
      } else {
        //不要策略
        raiInterface.getNoTacticsfirst().then((res) => {
          if (res.Ret === 200) {
            this.chartPermissionList = res.Data.List;
          }
        });
      }
      this.listFrom.ChartPermissionId = "";
      this.listFrom.SubCategoryName = "";
    },
    //获取产业
    getIndustrialManagement() {
      if (this.listFrom.ChartPermissionId == "") return;
      raiInterface.getIndustrialManagement({ ChartPermissionId: this.listFrom.ChartPermissionId - 0 || this.chartPermissionPost.ChartPermissionId - 0 }).then((res) => {
        if (res.Ret !== 200) return;
        if (res.Data.List) {
          this.idustrialManagement = res.Data.List;
        } else {
          this.idustrialManagement = [];
        }
      });
    },
    //弹窗获取产业
    getIndustrialManagementDalg() {
      this.listSubject = [];
      this.optionS = [];
      raiInterface.getIndustrialManagement({ ChartPermissionId: this.listFrom.ChartPermissionId - 0 || this.chartPermissionPost.ChartPermissionId - 0 }).then((res) => {
        if (res.Ret !== 200) return;
        if (res.Data.List) {
          this.idustrialManagement = res.Data.List;
        } else {
          this.idustrialManagement = [];
        }
      });
    },
    //弹窗获取标的
    getIndustrialSubject() {
      if (this.chartPermissionPost.IndustrialManagementId == "") return;
      raiInterface.getindustrialSubjectlistIds({ IndustrialManagementIdStr: this.chartPermissionPost.IndustrialManagementId }).then((res) => {
        if (res.Ret !== 200) return;
        if (res.Data.List) {
          this.listSubject = res.Data.List;
        } else {
          this.listSubject = [];
        }
      });
    },
    //弹窗产业的change事件
    chartPermissionPostChange() {
      this.chartPermissionPost.IndustrialManagementId = this.chartPermissionPostOptins.join();
    },
    //报告类型
    reportMappingMatchTypeRep() {
      if (!this.listFrom.ChartPermissionId) return this.$message.error("请先选择行业");
      raiInterface
        .reportMappingMatchTypeRep({
          ChartPermissionId: this.listFrom.ChartPermissionId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.MatchTypeNameList = res.Data.List;
        });
    },
    //报告归类确定事件
    classifyClick() {
      this.$refs.ruleForm.validate((value) => {
        if (value) {
          raiInterface.reportArticleClassification(this.chartPermissionPost).then((res) => {
            if (res.Ret == 200) {
              this.$message.success("报告归类成功!");
              this.reportArticle();
            }
            this.chartPermissionPost = {
              IndustrialManagementId: "", //产业ID
              IndustrialSubjectIdStr: "0", //标的ID
              ReportId: null, //报告ID
            };
            this.chartPermissionPostOptins = [];
            this.optionS = [];
            this.dialogVisible = false;
            this.$refs.ruleForm.resetFields();
          });
        }
      });
    },
    //弹窗的取消事件
    classifyDelete() {
      this.listSubject = [];
      this.optionS = [];
      this.chartPermissionPostOptins = [];
      this.chartPermissionPost.IndustrialManagementId = "";
      this.chartPermissionPost = {
        IndustrialManagementId: "", //产业ID
        IndustrialSubjectIdStr: "0", //标的ID
        ReportId: null, //报告ID
      };
      this.dialogVisible = false;
      this.$refs.ruleForm.resetFields();
    },
    //所有筛选条件的change事件
    listChangeBtn() {
      this.page_no = 1;
      this.reportArticle();
    },
    //头部不同报告的点击事件
    cutClick() {
      this.listFrom = {
        //获取列表的数据
        PageSize: 8,
        CurrentIndex: 1,
        KeyWord: "", //搜索关键词
        SubCategoryName: "", //主题
        MatchTypeName: "", //匹配类型
        IsClass: 0, //"是否归类 1是、0否"
        IsFilter: 0, //"是否过滤 1是、0否"
        ChartPermissionId: "", //行业ID
        IndustrialManagementId: "", //产业ID
      };
      this.status = "";
    },
    //文章详情
    async lookDetail(item) {
      if (item.PublishStatus === 1) {
        window.open(item.HttpUrl, "_blank");
      } else {
        const res = await raiInterface.reportArticleDetail({ ArticleId: item.ArticleId });
        if (res.Ret === 200) {
          sessionStorage.setItem("summaryPre", JSON.stringify(res.Data));
          let { href } = this.$router.resolve({ name: "预览研选报告" });
          window.open(href, "_blank");
        }
      }
    },
    //筛选行业的清除事件
    clearSelect() {
      this.themeList = [];
      this.idustrialManagement = [];
      this.listFrom.IndustrialManagementId = "";
      this.listFrom.ChartPermissionId = "";
      this.listFrom.SubCategoryName = "";
    },
    //弹窗产业的清除事件
    clearSelectChart() {
      this.optionS = [];
      this.chartPermissionPost.IndustrialManagementId = "";
      this.listSubject = [];
    },
    //修改匹配类型
    modification(id) {
      this.modificationId = id;
      raiInterface
        .getMatchTypeName({
          ReportId: id,
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.modificationOptions = res.Data.List;
          }
        });
      this.dialogAddindustry = true;
    },
    // 取消 匹配类型
    btnCancel() {
      this.modificationId = "";
      this.modificationValue = "";
      this.modificationOptions = "";
      this.dialogAddindustry = false;
    },
    // 修改 匹配类型
    modificationClick() {
      raiInterface
        .updateMatchTypeName({
          MatchID: Number(this.modificationValue),
          ReportId: this.modificationId,
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.$message.success("修改成功");
            this.modificationId = "";
            this.modificationValue = "";
            this.modificationOptions = "";
            this.dialogAddindustry = false;
            this.page_no = 1;
            this.reportArticle();
          }
        });
    },
    //收藏  点击事件
    collectionIsShow(id, type) {
      this.collectionId = id; //关注 收藏 id
      this.collectionType = type; //关注 收藏 类型区分
      this.collectionDlgShow = true;
    },
    // 点击添加报告
    addSummary(id = "") {
      this.$router.push({
        path: id ? "editSummaryHz" : "/addSummaryHz",
        query: {
          type: "HZ",
          id,
        },
      });
    },
    //操作按键 发布 取消发布 删除
    operationBtn(id, value) {
      this.$confirm(`确定${value}该报告吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          if (value == "删除") {
            const res = await raiInterface.getsummaryManagedelete({ ArticleId: id });
            if (res.Ret !== 200) return;
            this.$message.success("删除成功！");
            let page_num = Math.ceil((this.total - 1) / this.PageSize);
            if (this.page_no > page_num) {
              this.page_no = page_num;
            }
            this.reportArticle();
          } else {
            const res = await raiInterface.publishAndCancel({ ArticleId: id });
            if (res.Ret !== 200) return;
            this.$message.success(`${value}成功！`);
            this.reportArticle();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${value}`,
          });
        });
    },
    //点击代问的弹框
    inquireBtn(id) {
      this.generaitondialogVisib = true;
      this.generaitonId = id;
    },
  },
  beforeRouteLeave(to, from, next) {
    let obj = {
      tabsIndex: this.tabs_index,
      page: this.page_no,
      KeyWord: this.listFrom.KeyWord,
      ChartPermissionId: this.listFrom.ChartPermissionId,
      SubCategoryName: this.listFrom.SubCategoryName,
      MatchTypeName: this.listFrom.MatchTypeName,
      IndustrialManagementId: this.listFrom.IndustrialManagementId,
      relevance: this.listFrom.relevance,
      reportLabel: this.listFrom.reportLabel,
      createdate: this.createdate,
      IsFilter: this.listFrom.IsFilter,
      IsClass: this.listFrom.IsClass,
      chartPermissionList: this.chartPermissionList,
    };
    sessionStorage.setItem("appletsReportPageBack", JSON.stringify(obj));
    next();
  },
  beforeRouteEnter(to, from, next) {
    if (from.path != "/addSummaryHz" && from.path != "/editSummaryHz") {
      sessionStorage.removeItem("appletsReportPageBack");
    }
    next();
  },
};
</script>
<style scoped lang="scss">
.container-applets {
  .top-card-box {
    margin-bottom: 20px;
  }
  .top-card {
    display: flex;
    justify-content: space-between;
    .tab_active {
      background-color: #409eff;
      color: #fff;
    }
    span {
      display: inline-block;
      box-sizing: border-box;
      padding: 0 24px;
      line-height: 38px;
      height: 40px;
      background: #ecf5ff;
      border: 1px solid #b3d8ff;
      opacity: 1;
      font-weight: 500;
      font-size: 16px;
      color: #409eff;
      border-radius: 4px;
      margin-right: 30px;
      cursor: pointer;
    }
  }
  .screen-box {
    display: flex;
    justify-content: space-between;
    .el-select {
      margin-right: 25px;
    }
  }
  .title-table {
    color: #409eff !important;
  }
  .mx-datepicker {
    width: 220px !important;
  }
  .pv-uv-download {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 14px;
      height: 14px;
      margin-left: 10px;
    }
  }
}
</style>
