<script>
import { defineComponent } from "vue";

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    if (from.path != "/addSummaryHz" && from.path != "/editSummaryHz") {
      sessionStorage.removeItem("appletsReportPageBack");
    }
    next();
  },
});
</script>

<script setup>
import { ref, watch, computed, onMounted, nextTick } from "vue";
import { raiInterface } from "@/api/api.js";
import GenerationAsk from "../components/generationAsk.vue";
import FocusCollection from "../components/focusCollection.vue";
import mPage from "@/components/mPage.vue";
import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";

const route = useRoute();
const router = useRouter();

const exchange = ref("未归类");
const optionS = ref([]);
const dialogVisible = ref(false);

const createdate = ref("");

const chartPermissionList = ref([]); //产业
const chartPermissionPost = ref({
  IndustrialManagementId: "", //产业ID
  IndustrialSubjectIdStr: "0", //标的ID
  ReportId: null, //报告ID
});
const chartPermissionPostOptins = ref([]);

const IsShowButton = ref(true); //是否展示操作按钮

const tabs_index = ref(1);
const status = ref(""); //状态
const options = ref([
  { id: 1, name: "已发布" },
  { id: 0, name: "未发布" },
]);
const collectionDlgShow = ref(false); //关注 收藏 隐显
const collectionId = ref(""); //关注 收藏 id
const collectionType = ref(""); //关注 收藏 类型区分
const token = ref(localStorage.getItem("auth") || "");
const generaitondialogVisib = ref(false); //留言的弹框
const generaitonId = ref("");
const generaitonType = ref("已归类");


const exportPvUv = computed(() => {
  return import.meta.env.VITE_APP_API_ROOT + "/cygx/summaryManage/articleHistoryExport?ArticleId=";
});

onMounted(() => {
  if (sessionStorage.getItem("appletsReportPageBack")) {
    let { tabsIndex, page, KeyWord, ChartPermissionId, SubCategoryName, MatchTypeName, IndustrialManagementId, relevance, reportLabel, createdateA, IsClass, IsFilter, chartPermissionList } =
      JSON.parse(sessionStorage.getItem("appletsReportPageBack"));
    tabs_index.value = tabsIndex;
    page_no.value = page;
    createdate.value = createdateA;
    chartPermissionList.value = chartPermissionList;
    listFrom.value = {
      PageSize: 8,
      CurrentIndex: 1,
      KeyWord, //搜索关键词
      SubCategoryName, //主题
      MatchTypeName, //匹配类型
      IsClass, //"是否归类 1是、0否"
      IsFilter, //"是否过滤 1是、0否"
      ChartPermissionId, //行业ID
      IndustrialManagementId, //产业ID
      PublishDate: "", //时间
      relevance, //关联
      reportLabel, //报告标签
    };
  }
  reportArticle();
  getshowButton();
  chartPermission();
});

//输入框的input 事件
function listFromInput() {
  page_no.value = 1;
  reportArticle();
}
//是否展示操作按钮接口
function getshowButton() {
  raiInterface.getshowButton().then((res) => {
    if (res.Ret === 200) {
      IsShowButton.value = res.Data.IsShowButton;
    }
  });
}

//头部的tab的点击事件
function tabActive(item) {
  cutClick();
  if (item.index !== tabs_index.value) {
    tabs_index.value = item.index;
  }
  exchange.value = item.query;
  chartPermissionList.value = [];
  listFrom.value.IsClass = exchange.value == "已归类" ? 1 : 0;
  listFrom.value.IsFilter = exchange.value == "过滤" ? 1 : 0;
  page_no.value = 1;
  reportArticle();
  chartPermission();
}
//点击归类
function classifyBtn(item) {
  chartPermissionPost.value.ChartPermissionId = item.ChartPermissionId;
  chartPermissionPost.value.ReportId = item.ReportId;
  dialogVisible.value = true;
  let IndustrialManagementIds = [];
  item.ListIndustrial && item.ListIndustrial.forEach((key) => IndustrialManagementIds.push(key.IndustrialManagementId));
  chartPermissionPostOptins.value = IndustrialManagementIds;
  if (chartPermissionPostOptins.value.length > 0) {
    chartPermissionPost.value.IndustrialManagementId = chartPermissionPostOptins.value.join();
    getIndustrialSubject();
  }
  nextTick(() => {
    let IndustrialSubjectIds = [];
    item.ListSubject && item.ListSubject.forEach((key) => IndustrialSubjectIds.push(key.IndustrialSubjectId));
    optionS.value = IndustrialSubjectIds;
    optionS.value.length > 0 ? (chartPermissionPost.value.IndustrialSubjectIdStr = optionS.value.toString()) : "";
  });
  getIndustrialManagementDalg();
}
//点击过滤
function filtrationBtn(ReportId) {
  ElMessageBox.confirm("过滤报告不在小程序内显示，确定继续吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      raiInterface.reportArticleFilter({ ReportId }).then((res) => {
        if (res.Ret !== 200) return;
        page_no.value = 1;
        reportArticle();
        ElMessage({
          type: "success",
          message: "过滤成功!",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消过滤",
      });
    });
}
//获取主题
function reportMappingist() {
  if (listFrom.value.ChartPermissionId == "") return;
  raiInterface
    .reportMappingist({
      ChartPermissionId: listFrom.value.ChartPermissionId - 0 || chartPermissionPost.value.ChartPermissionId - 0,
    })
    .then((res) => {
      if (res.Ret !== 200) return;
      if (res.Data.List) {
        themeList.value = res.Data.List;
      } else {
        themeList.value = [];
      }
    });
}

const listFrom = ref({
  //获取列表的数据
  PageSize: 8,
  CurrentIndex: 1,
  KeyWord: "", //搜索关键词
  SubCategoryName: "", //主题
  MatchTypeName: "", //匹配类型
  IsClass: 1, //"是否归类 1是、0否"
  IsFilter: 0, //"是否过滤 1是、0否"
  ChartPermissionId: "", //行业ID
  IndustrialManagementId: "", //产业ID
  PublishDate: "", //时间
  relevance: "", //关联
  reportLabel: "", //报告标签
});
const page_no = ref(1);
const total = ref(null);
const getList = ref([]); //获取到列表的数组
const listSubject = ref([]); //标的数组
const themeList = ref([]); //主题的数组
const MatchTypeNameList = ref([]); //报告类型
const idustrialManagement = ref([]); //产业的数组

//获取列表
function reportArticle() {
  raiInterface
    .reportArticle({
      PageSize: listFrom.value.PageSize,
      CurrentIndex: page_no.value,
      IsFilter: listFrom.value.IsFilter,
      IsClass: listFrom.value.IsClass,
      ChartPermissionId: listFrom.value.ChartPermissionId,
      SubCategoryName: listFrom.value.SubCategoryName,
      MatchTypeName: listFrom.value.MatchTypeName,
      IndustrialManagementId: listFrom.value.IndustrialManagementId,
      KeyWord: listFrom.value.KeyWord,
      StartDate: createdate.value[0] ? createdate.value[0] : "",
      EndDate: createdate.value[0] ? createdate.value[1] : "",
      KeyWordStock: listFrom.value.reportLabel,
      ReportLabel: listFrom.value.relevance,
    })
    .then((res) => {
      if (res.Ret !== 200) return;
      getList.value = res.Data.List;
      total.value = res.Data.Paging.Totals;
    });
}
function optionsChange() {
  chartPermissionPost.value.IndustrialSubjectIdStr = optionS.value.toString();
}
//分页
function handleCurrentChange(page) {
  page_no.value = page;
  reportArticle();
}
//获取行业
function chartPermission() {
  listFrom.value.IndustrialManagementId = "";
  themeList.value = [];
  idustrialManagement.value = [];
  if (exchange.value == "已归类" || tabs_index.value == 1) {
    //要策略
    raiInterface
      .chartPermission({
        HideMacro: true,
        IsCeLueReport: true,
      })
      .then((res) => {
        if (res.Ret === 200) {
          chartPermissionList.value = res.Data.List;
        }
      });
  } else {
    //不要策略
    raiInterface.getNoTacticsfirst().then((res) => {
      if (res.Ret === 200) {
        chartPermissionList.value = res.Data.List;
      }
    });
  }
  listFrom.value.ChartPermissionId = "";
  listFrom.value.SubCategoryName = "";
}
//获取产业
function getIndustrialManagement() {
  if (listFrom.value.ChartPermissionId == "") return;
  raiInterface.getIndustrialManagement({ ChartPermissionId: listFrom.value.ChartPermissionId - 0 || chartPermissionPost.value.ChartPermissionId - 0 }).then((res) => {
    if (res.Ret !== 200) return;
    if (res.Data.List) {
      idustrialManagement.value = res.Data.List;
    } else {
      idustrialManagement.value = [];
    }
  });
}
//弹窗获取产业
function getIndustrialManagementDalg() {
  listSubject.value = [];
  optionS.value = [];
  raiInterface.getIndustrialManagement({ ChartPermissionId: listFrom.value.ChartPermissionId - 0 || chartPermissionPost.value.ChartPermissionId - 0 }).then((res) => {
    if (res.Ret !== 200) return;
    if (res.Data.List) {
      idustrialManagement.value = res.Data.List;
    } else {
      idustrialManagement.value = [];
    }
  });
}
//弹窗获取标的
function getIndustrialSubject() {
  if (chartPermissionPost.value.IndustrialManagementId == "") return;
  raiInterface.getindustrialSubjectlistIds({ IndustrialManagementIdStr: chartPermissionPost.value.IndustrialManagementId }).then((res) => {
    if (res.Ret !== 200) return;
    if (res.Data.List) {
      listSubject.value = res.Data.List;
    } else {
      listSubject.value = [];
    }
  });
}
//弹窗产业的change事件
function chartPermissionPostChange() {
  chartPermissionPost.value.IndustrialManagementId = chartPermissionPostOptins.value.join();
}
//报告类型
function reportMappingMatchTypeRep() {
  if (!listFrom.value.ChartPermissionId) returnElMessage.error("请先选择行业");
  raiInterface
    .reportMappingMatchTypeRep({
      ChartPermissionId: listFrom.value.ChartPermissionId,
    })
    .then((res) => {
      if (res.Ret !== 200) return;
      MatchTypeNameList.value = res.Data.List;
    });
}
const ruleForm = ref(null);
const rules = ref({
  IndustrialManagementId: [{ required: true, message: "请先选择行业", trigger: "change" }],
});

//报告归类确定事件
function classifyClick() {
  ruleForm.value.validate((value) => {
    if (value) {
      raiInterface.reportArticleClassification(chartPermissionPost.value).then((res) => {
        if (res.Ret == 200) {
          ElMessage.success("报告归类成功!");
          reportArticle();
        }
        chartPermissionPost.value = {
          IndustrialManagementId: "", //产业ID
          IndustrialSubjectIdStr: "0", //标的ID
          ReportId: null, //报告ID
        };
        chartPermissionPostOptins.value = [];
        optionS.value = [];
        dialogVisible.value = false;
        ruleForm.value.resetFields();
      });
    }
  });
}
//弹窗的取消事件
function classifyDelete() {
  listSubject.value = [];
  optionS.value = [];
  chartPermissionPostOptins.value = [];
  chartPermissionPost.value.IndustrialManagementId = "";
  chartPermissionPost.value = {
    IndustrialManagementId: "", //产业ID
    IndustrialSubjectIdStr: "0", //标的ID
    ReportId: null, //报告ID
  };
  dialogVisible.value = false;
  ruleForm.value.resetFields();
}
//所有筛选条件的change事件
function listChangeBtn() {
  page_no.value = 1;
  reportArticle();
}
//头部不同报告的点击事件
function cutClick() {
  listFrom.value = {
    //获取列表的数据
    PageSize: 8,
    CurrentIndex: 1,
    KeyWord: "", //搜索关键词
    SubCategoryName: "", //主题
    MatchTypeName: "", //匹配类型
    IsClass: 0, //"是否归类 1是、0否"
    IsFilter: 0, //"是否过滤 1是、0否"
    ChartPermissionId: "", //行业ID
    IndustrialManagementId: "", //产业ID
  };
  status.value = "";
}
//文章详情
async function lookDetail(item) {
  if (item.PublishStatus === 1) {
    let href = `${import.meta.env.VITE_CYGX_WEB}/material/info/${item.ArticleId}`;
    window.open(href, "_blank");
  } else {
    const res = await raiInterface.reportArticleDetail({ ArticleId: item.ArticleId });
    if (res.Ret === 200) {
      sessionStorage.setItem("summaryPre", JSON.stringify(res.Data));
      let { href } = router.resolve({ name: "预览研选报告" });
      window.open(href, "_blank");
    }
  }
}
//筛选行业的清除事件
function clearSelect() {
  themeList.value = [];
  idustrialManagement.value = [];
  listFrom.value.IndustrialManagementId = "";
  listFrom.value.ChartPermissionId = "";
  listFrom.value.SubCategoryName = "";
}
//弹窗产业的清除事件
function clearSelectChart() {
  optionS.value = [];
  chartPermissionPost.value.IndustrialManagementId = "";
  listSubject.value = [];
}

const dialogAddindustry = ref(false); //
const modificationValue = ref("");
const modificationId = ref("");
const modificationOptions = ref([]);

//修改匹配类型
function modification(id) {
  modificationId.value = id;
  raiInterface
    .getMatchTypeName({
      ReportId: id,
    })
    .then((res) => {
      if (res.Ret === 200) {
        modificationOptions.value = res.Data.List;
      }
    });
  dialogAddindustry.value = true;
}
// 取消 匹配类型
function btnCancel() {
  modificationId.value = "";
  modificationValue.value = "";
  modificationOptions.value = "";
  dialogAddindustry.value = false;
}
// 修改 匹配类型
function modificationClick() {
  raiInterface
    .updateMatchTypeName({
      MatchID: Number(modificationValue.value),
      ReportId: modificationId.value,
    })
    .then((res) => {
      if (res.Ret === 200) {
        ElMessage.success("修改成功");
        modificationId.value = "";
        modificationValue.value = "";
        modificationOptions.value = "";
        dialogAddindustry.value = false;
        page_no.value = 1;
        reportArticle();
      }
    });
}
//收藏  点击事件
function collectionIsShow(id, type) {
  collectionId.value = id; //关注 收藏 id
  collectionType.value = type; //关注 收藏 类型区分
  collectionDlgShow.value = true;
}
// 点击添加报告
function addSummary(id = "") {
  router.push({
    path: id ? "editSummaryHz" : "/addSummaryHz",
    query: {
      type: "HZ",
      id,
    },
  });
}
//操作按键 发布 取消发布 删除
function operationBtn(id, value) {
  ElMessageBox.confirm(`确定${value}该报告吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      if (value == "删除") {
        const res = await raiInterface.getsummaryManagedelete({ ArticleId: id });
        if (res.Ret !== 200) return;
        ElMessage.success("删除成功！");
        let page_num = Math.ceil((total.value - 1) / PageSize.value);
        if (page_no.value > page_num) {
          page_no.value = page_num;
        }
        reportArticle();
      } else {
        const res = await raiInterface.publishAndCancel({ ArticleId: id });
        if (res.Ret !== 200) return;
        ElMessage.success(`${value}成功！`);
        reportArticle();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: `已取消${value}`,
      });
    });
}
//点击代问的弹框
function inquireBtn(id) {
  generaitondialogVisib.value = true;
  generaitonId.value = id;
}

const tabsList = ref([
  { name: "已归类报告", query: "已归类", index: 1 },
  { name: "未归类报告", query: "未归类", index: 0 },
  { name: "过滤报告", query: "过滤", index: 2 },
]);

onBeforeRouteLeave((to, from, next) => {
  let obj = {
    tabsIndex: tabs_index.value,
    page: page_no.value,
    KeyWord: listFrom.value.KeyWord,
    ChartPermissionId: listFrom.value.ChartPermissionId,
    SubCategoryName: listFrom.value.SubCategoryName,
    MatchTypeName: listFrom.value.MatchTypeName,
    IndustrialManagementId: listFrom.value.IndustrialManagementId,
    relevance: listFrom.value.relevance,
    reportLabel: listFrom.value.reportLabel,
    createdateA: createdate.value,
    IsFilter: listFrom.value.IsFilter,
    IsClass: listFrom.value.IsClass,
    chartPermissionList: chartPermissionList.value,
  };
  sessionStorage.setItem("appletsReportPageBack", JSON.stringify(obj));
  next();
});
</script>

<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 :prefix-icon="Search"> </el-input>
        </div>
      </div>
    </el-card>
    <!-- 内容部分 -->
    <el-card>
      <!-- 筛选条件 -->
      <div class="screen-box">
        <div class="screen-box" 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 style="margin-bottom: 20px" 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 style="margin-bottom: 20px" 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
            style="margin-bottom: 20px"
            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: 0 15px 20px 0" placeholder="请输入报告标签" v-model="listFrom.relevance" @input="listFromInput" clearable :prefix-icon="Search">
          </el-input>
          <el-input
            v-if="tabs_index != 2"
            style="width: 230px; margin: 0 15px 20px 0"
            placeholder="请输入个股标签"
            v-model="listFrom.reportLabel"
            @input="listFromInput"
            clearable
            :prefix-icon="Search"
          >
          </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;position: relative;top:5px">
          <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 #default="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 #default="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 #default="{ row }"> {{ row.Label }} </template>
          </el-table-column>
          <el-table-column width="150" label="" align="center" key="pvUv">
            <template #header>
              <div style="display: flex;align-items: center;justify-content: center;">
                <p style="margin-right:5px">PV / UV</p>
                <el-tooltip placement="top-start" >
                  <template #content>
                    <p>pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）</p>
                    <p>uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）</p>
                  </template>
                  <el-icon><InfoFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <template #default="{ 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 #default="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 #default="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 #default="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 draggable :modal-append-to-body="false" :center="true" :close-on-press-escape="true" :close-on-click-modal="false" v-model="dialogVisible" width="561px" @close="classifyDelete">
      <template #header>
        <div 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>
      </template>
      <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>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="classifyClick">保存</el-button>
          <el-button @click="classifyDelete">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      :modal-append-to-body="false"
      :center="true"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      v-model="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>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="modificationClick">保存</el-button>
          <el-button @click="btnCancel">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <focus-collection :collectionDlgShow="collectionDlgShow" :collectionId="collectionId" :collectionType="collectionType" />
    <generation-ask v-model="generaitondialogVisib" :generaitonId="generaitonId" :generaitonType="generaitonType" />
  </div>
</template>

<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;
    flex-wrap: wrap;
    // justify-content: space-between;
    align-items: center;
    .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>
