<template>
  <div class="container container-industry">
    <el-card>
      <div class="top-card-box">
        <div class="tabs-box">
          <span v-for="item in listOne" :key="item.ChartPermissionId" @click="tabsBoxBtn(item)" :class="tabActiveFrom.PermissionName == item.PermissionName ? 'pitch' : ''">{{
            item.PermissionName
          }}</span>
        </div>
        <div class="card-box">
          <div class="editsty" @click="dialogVisibleSubject = true">查询标的</div>
          <a :href="exportUser" download>
            <el-button type="primary">全局预览</el-button>
          </a>
        </div>
      </div>
    </el-card>
    <!-- 产业分类 -->
    <el-card>
      <div style="padding-bottom: 30px" class="tabs-box-top" @click="detailShowHandel">
        <p style="color: #333333; font-size: 16px">产业分类</p>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="按添加时间排序" name="AddTime"></el-tab-pane>
          <el-tab-pane label="按推荐指数排序" name="Recommended"></el-tab-pane>
          <el-tab-pane label="按报告更新排序" name="ReportTime"></el-tab-pane>
        </el-tabs>
        <div style="width: 60%"></div>
      </div>
      <div class="classification" style="padding-bottom: 130px" @click="detailShowHandel">
        <div
          v-for="item in industryList"
          :key="item.IndustrialManagementId"
          class="industrial"
          @click="ificationIndustrialBtn(item)"
          :class="[industryActiveFrom.IndustrialManagementId == item.IndustrialManagementId ? 'pitch' : '']"
        >
          <span style="margin-right: 19px">{{ item.IndustryName }}（{{ item.RecommendedIndex }}）</span>
          <span style="justify-content: flex-end" v-if="industryActiveFrom.IndustrialManagementId == item.IndustrialManagementId">
            <img v-if="tabActiveFrom.ChartPermissionId == 31" src="~@/assets/img/rai_m/rai_move_icon.png" style="width: 12px; height: 12px; margin-right: 10px" @click.stop="moveHzcoverHandler(item)" />
            <img src="~@/assets/img/icons/edit1.png" alt="" style="width: 12px; height: 12px; margin-right: 10px" @click.stop="industryAddOfEdit(item)" />
            <i class="el-icon-close" @click.stop="deleteClassify(item)"></i>
          </span>
          <div class="label-tag-item">
            <span v-if="item.HzCover" style="background: #ffab31">弘则覆盖</span>
            <span v-if="!item.IsRelevance" style="background: #d74f4f">无关联报告/活动</span>
          </div>
          <div class="content-industrial" v-if="industryActiveFrom.IndustrialManagementId == item.IndustrialManagementId && isShowDetail" @click.stop>
            <p v-if="detailData.LayoutTime">布局时间：{{ detailData.LayoutTime }}</p>
            <p v-if="detailData.ArtTotalNum">报告总数：{{ detailData.ArtTotalNum }}</p>
            <p v-for="(item, index) in detailData.List" :key="index">{{ item.MatchTypeName }}：{{ item.ArtNum }}</p>
            <div class="content-sjx"></div>
          </div>
        </div>
        <!-- 单独的添加 -->
        <div class="addIndustrial" @click="industryAddOfEdit('', '添加产业')">
          <i class="el-icon-plus"></i>
          <span>添加产业</span>
        </div>
      </div>
    </el-card>
    <div v-if="isConcealHide" @click="detailShowHandel">
      <!-- 分析师 -->
      <el-card>
        <p style="margin-bottom: 30px; color: #333333; font-size: 16px">分析师</p>
        <div class="classification">
          <div v-for="(item, index) in analystList" :key="item.IndustrialAnalystId" class="industrial" @click="analyseBtn(index)" :class="index == analyseDomain ? 'pitch' : ''">
            <span style="margin-right: 19px">{{ item.AnalystName }}</span>
            <span v-if="index == analyseDomain">
              <img src="~@/assets/img/icons/edit1.png" alt="" style="width: 12px; height: 12px; marginright: 10px" @click="multiAddOfEdit(item, '', '分析师')" />
              <i class="el-icon-close" @click="deleteIfication(item.IndustrialAnalystId)"></i>
            </span>
          </div>
          <!-- 单独的添加 -->
          <div class="addIndustrial" @click="multiAddOfEdit('', '添加分析师', '分析师')">
            <i class="el-icon-plus"></i>
            <span>添加分析师</span>
          </div>
        </div>
      </el-card>
      <!-- 覆盖标的 -->
      <div class="subject-content">
        <p style="margin-bottom: 30px; color: #333333; font-size: 16px">覆盖标的</p>
        <div class="classification">
          <div v-for="(item, index) in targetList" :key="item.IndustrialSubjectId" class="industrial" @click="icoverageBtn(index, item)" :class="index == icoverageDomain ? 'pitch' : ''">
            <span style="margin-right: 19px">{{ item.SubjectName }}</span>
            <span v-if="index == icoverageDomain">
              <img src="~@/assets/img/icons/edit1.png" alt="" style="width: 12px; height: 12px; margin-right: 10px" @click.stop="multiAddOfEdit(item, '', '标的')" />
              <i class="el-icon-close" @click.stop="deleteCover(item)"></i>
            </span>
            <div class="content-industrial" v-if="index == icoverageDomain && isShowDetailObject" @click.stop>
              <p v-if="industrialDetail.LayoutTime">布局时间：{{ industrialDetail.LayoutTime }}</p>
              <p v-if="industrialDetail.ArtTotalNum">报告总数：{{ industrialDetail.ArtTotalNum }}</p>
              <p v-for="(item, index) in industrialDetail.List" :key="index">{{ item.MatchTypeName }}：{{ item.ArtNum }}</p>
              <div class="content-sjx"></div>
            </div>
          </div>
          <!-- 单独的添加 -->
          <div class="addIndustrial" @click="multiAddOfEdit('', '添加标的', '标的')">
            <i class="el-icon-plus"></i>
            <span>添加标的</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加/编辑 的弹框 产业、分析师、标的-->
    <el-dialog :modal-append-to-body="false" :center="true" :close-on-press-escape="false" :close-on-click-modal="false" :visible.sync="dialogAddindustry" width="561px" @close="btnCancel">
      <div slot="title" style="display: flex; align-items: center">
        <img :src="dialogVisibleText ? $icons.addicon : $icons.editicon" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
        <span style="font-size: 16px">{{ dialogVisibleText ? dialogVisibleText : "编辑" }}</span>
      </div>

      <div>
        <div v-if="dialogVisibleText">
          <p class="dialogpicker" style="margin-bottom: 30px" v-if="dialogVisibleText == '添加产业'">所属行业:{{ tabActiveFrom.PermissionName }}</p>
          <p class="dialogpicker" style="margin-bottom: 30px" v-else>所属产业:{{ industryActiveFrom.IndustryName }}</p>
        </div>
        <el-form :model="addOfEdit" :rules="addOfEditRules" ref="addOfEditForm" class="demo-ruleForm">
          <template v-if="isTypeDialog == '产业'">
            <el-form-item prop="IndustryName">
              <el-input style="width: 100%" placeholder="请输入产业名称（最多输入10个字）" v-model="addOfEdit.IndustryName" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item prop="RecommendedIndex">
              <el-input style="width: 100%; margin-top: 20px" placeholder="请设置推荐指数（0-100）" v-model="addOfEdit.RecommendedIndex"></el-input>
            </el-form-item>
          </template>
          <el-form-item prop="analystAnalystName" v-if="isTypeDialog == '分析师'">
            <el-input v-model="addOfEdit.analystAnalystName" style="width: 100%" placeholder="请输入分析师名称" maxlength="6"></el-input>
          </el-form-item>
          <el-form-item prop="analystAnalystNameBd" v-if="isTypeDialog == '标的'">
            <el-input v-model="addOfEdit.analystAnalystNameBd" style="width: 100%" placeholder="请输入标的名称（最多输入6个字）" maxlength="6"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOfEditConfirm">确定</el-button>
        <el-button @click="btnCancel">取消</el-button>
      </span>
    </el-dialog>
    <!-- //查询标的 -->
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="查询标的" :visible.sync="dialogVisibleSubject" width="500px" :before-close="handleCloseSubject">
      <div>
        <el-select style="width: 100%" v-model="addSubjectName" remote :remote-method="remoteMethod" clearable filterable @change="searchInfo" placeholder="请输入标的名称">
          <el-option v-for="item in addSubjectOptions" :key="item.IndustrialSubjectId" :label="item.SubjectName" :value="item.SubjectName"> </el-option>
        </el-select>
      </div>
      <p class="subject-text" v-if="isShowSubject">暂无数据</p>
      <template v-else>
        <p class="subject-text" v-for="(item, index) in nameSubjectOptions" :key="index">{{ item.Name }} : {{ item.value }}</p>
      </template>
      <p style="padding-bottom: 50px"></p>
    </el-dialog>
    <!-- //移动至弘则覆盖 -->
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="移至弘则覆盖" :visible.sync="dialogCoverHz" width="500px" :before-close="handleCloseCoverHz">
      <el-select placeholder="请选择行业" clearable v-model="industryCover" style="width: 100%; margin-bottom: 20px">
        <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="coverHzConfirm">确定</el-button>
        <el-button @click="handleCloseCoverHz">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      listOne: [], //top tabs
      tabActiveFrom: {}, //
      activeName: "AddTime", //产业分类的 tabs
      industryList: [], //产业的数据
      analystList: [], //分析师
      targetList: [], //标的
      industryActiveFrom: {},
      addOfEdit: {
        IndustryName: "", //产业名称
        RecommendedIndex: "", //推荐指数
        analystAnalystName: "", //分析师名称
        analystAnalystNameBd: "", //标的名称
      },
      addOfEditRules: {
        IndustryName: [{ required: true, message: "请输入产业名称", trigger: "blur" }],
        RecommendedIndex: [{ required: true, message: "请输入推荐指数", trigger: "blur" }],
        analystAnalystName: [{ required: true, message: "请输入分析师名称", trigger: "blur" }],
        analystAnalystNameBd: [{ required: true, message: "请输入标的名称", trigger: "blur" }],
      },
      dialogAddindustry: false, //
      dialogVisibleText: "",
      isTypeDialog: "产业",
      industryAddOfEditForm: {}, //编辑的时候的产业
      isConcealHide: false, //是否显示 标的 分析师
      analyseDomain: null, //分析师
      icoverageDomain: null, //覆盖标的
      dialogVisibleSubject: false, //查询标的
      addSubjectName: "", //
      addSubjectOptions: "",
      nameSubjectOptions: "",
      dialogCoverHz: false, //移至弘则覆盖
      chartPermissionList: [], //移至弘则覆盖的行业
      industryCover: "",
      detailData: {
        //点击每一项后的显示
      },
      isShowDetail: false,
      industrialDetail: {}, //标的的详情
      isShowDetailObject: false, //标的的隐藏显示
    };
  },
  computed: {
    // 导出地址
    exportUser() {
      return import.meta.env.VITE_APP_API_ROOT + "/cygx/industrialManagement/export?" + localStorage.getItem("auth") || "";
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.chartPermission();
  },
  methods: {
    //获取一级分类
    async chartPermission() {
      const res = await raiInterface.getNoTacticsfirst();
      if (res.Ret === 200) {
        this.listOne = res.Data.List || [];
        this.tabActiveFrom = this.listOne.length && this.listOne[0];
        this.getIndustrialManagement();
      }
    },
    //获取产业分类
    async getIndustrialManagement() {
      const res = await raiInterface.getIndustrialManagement({
        ChartPermissionId: this.tabActiveFrom.ChartPermissionId,
        OrderColumn: this.activeName,
      });
      if (res.Ret === 200) {
        this.industryList = res.Data.List;
      }
    },
    //获取分析师
    async getIndustrialAnalyst() {
      const res = await raiInterface.getIndustrialAnalyst({ IndustrialManagementId: this.industryActiveFrom.IndustrialManagementId });
      if (res.Ret === 200) {
        this.analystList = res.Data.List;
      }
    },
    //获取标的
    async getIndustrialSubject() {
      const res = await raiInterface.getIndustrialSubject({ IndustrialManagementId: this.industryActiveFrom.IndustrialManagementId });
      if (res.Ret === 200) {
        this.targetList = res.Data.List;
      }
    },
    //产业分类的tabs
    handleClick() {
      this.isConcealHide = false;
      this.industryList = [];
      this.getIndustrialManagement();
      this.industryActiveFrom = {};
    },
    //头部tabs
    tabsBoxBtn(item) {
      this.tabActiveFrom = item;
      this.isConcealHide = false;
      this.industryList = [];
      this.getIndustrialManagement();
      this.industryActiveFrom = {};
      this.activeName = "AddTime";
    },
    //产业的点击事件
    async ificationIndustrialBtn(item) {
      if (item.IndustrialManagementId) {
        const res = await raiInterface.industrialManagementDetail({
          IndustrialManagementId: item.IndustrialManagementId,
        });
        if (res.Ret !== 200) return;
        this.detailData = res.Data;
        this.isShowDetail = true;
      }
      this.analyseDomain = null;
      this.icoverageDomain = null;
      this.industryActiveFrom = item;
      await this.getIndustrialAnalyst();
      this.getIndustrialSubject();
      this.isConcealHide = true;
    },
    //分析师
    analyseBtn(index) {
      this.analyseDomain = index;
    },
    //覆盖标的
    async icoverageBtn(index, item) {
      const res = await raiInterface.industrialSubjectCountDetail({
        SubjectId: item.IndustrialSubjectId,
      });
      if (res.Ret === 200) {
        this.industrialDetail = res.Data;
        this.isShowDetailObject = true;
      }
      this.icoverageDomain = index;
    },
    //产业的添加或者编辑
    industryAddOfEdit(item, text) {
      this.isShowDetail = false;
      if (item) {
        this.addOfEdit.IndustryName = item.IndustryName;
        this.addOfEdit.RecommendedIndex = item.RecommendedIndex;
      } else {
        this.addOfEditInit();
      }
      this.isTypeDialog = "产业";
      this.industryAddOfEditForm = item;
      this.dialogVisibleText = text;
      this.dialogAddindustry = true;
    },
    //分析师 、标的
    multiAddOfEdit(item, text, type) {
      this.isShowDetailObject = false;
      if (item) {
        this.addOfEdit.analystAnalystName = item.AnalystName || "";
        this.addOfEdit.analystAnalystNameBd = item.SubjectName || "";
      } else {
        this.addOfEditInit();
      }
      this.isTypeDialog = type;
      this.industryAddOfEditForm = item;
      this.dialogVisibleText = text;
      this.dialogAddindustry = true;
    },

    //数据的格式化
    addOfEditInit() {
      this.addOfEdit = {
        IndustryName: "", //产业名称
        RecommendedIndex: "", //推荐指数
        analystAnalystName: "", //分析师名称
        analystAnalystNameBd: "", //标的名称
      };
    },
    //添加或者编辑的确定事件
    async addOfEditConfirm() {
      let isValidate = this.isTypeDialog == "产业" ? ["IndustryName", "RecommendedIndex"] : this.isTypeDialog == "分析师" ? ["analystAnalystName"] : ["analystAnalystNameBd"];
      let validateFieldList = [];
      this.$refs.addOfEditForm.validateField(isValidate, (valid) => {
        validateFieldList.push(valid);
      });
      let isPost = validateFieldList.every((item) => item === "");
      if (this.isTypeDialog == "产业" && isPost) {
        if (this.industryAddOfEditForm.IndustrialManagementId) {
          //编辑产业的
          const res = await raiInterface.industrialManagementEdit({
            ChartPermissionId: this.tabActiveFrom.ChartPermissionId,
            IndustryName: this.addOfEdit.IndustryName,
            IndustrialManagementId: this.industryAddOfEditForm.IndustrialManagementId,
            RecommendedIndex: this.addOfEdit.RecommendedIndex - 0,
          });
          if (res.Ret === 200) {
            this.$message.success("添加成功");
            this.getIndustrialManagement();
          }
        } else {
          //添加
          const res = await raiInterface.industrialManagement({
            ChartPermissionId: this.tabActiveFrom.ChartPermissionId,
            IndustryName: this.addOfEdit.IndustryName,
            RecommendedIndex: this.addOfEdit.RecommendedIndex - 0,
          });
          if (res.Ret === 200) {
            this.$message.success("添加成功");
            this.getIndustrialManagement();
          }
        }
        this.dialogAddindustry = false;
      } else if (this.isTypeDialog == "分析师" && isPost) {
        if (this.industryAddOfEditForm.IndustrialAnalystId) {
          const res = await raiInterface.industrialAnalystEdit({
            IndustrialManagementId: this.industryAddOfEditForm.IndustrialManagementId,
            AnalystName: this.addOfEdit.analystAnalystName,
            IndustrialAnalystId: this.industryAddOfEditForm.IndustrialAnalystId,
          });

          if (res.Ret === 200) {
            this.getIndustrialAnalyst(this.industryActiveFrom.IndustrialManagementId);
          }
        } else {
          const res = await raiInterface.industrialAnalyst({
            AnalystName: this.addOfEdit.analystAnalystName,
            IndustrialManagementId: this.industryActiveFrom.IndustrialManagementId,
          });
          if (res.Ret === 200) {
            this.getIndustrialAnalyst(this.industryActiveFrom.IndustrialManagementId);
          }
        }
        this.dialogAddindustry = false;
      } else if (isPost && this.isTypeDialog == "标的") {
        if (this.industryAddOfEditForm.IndustrialSubjectId) {
          const res = await raiInterface.industrialSubjectEdit({
            IndustrialManagementId: this.industryAddOfEditForm.IndustrialManagementId,
            SubjectName: this.addOfEdit.analystAnalystNameBd,
            IndustrialSubjectId: this.industryAddOfEditForm.IndustrialSubjectId,
          });
          if (res.Ret === 200) {
            this.getIndustrialSubject(this.industryActiveFrom.IndustrialManagementId);
          }
        } else {
          const res = await raiInterface.industrialSubjectAdd({
            SubjectName: this.addOfEdit.analystAnalystNameBd,
            IndustrialManagementId: this.industryActiveFrom.IndustrialManagementId,
          });
          if (res.Ret === 200) {
            this.getIndustrialSubject(this.industryActiveFrom.IndustrialManagementId);
          }
        }
        this.dialogAddindustry = false;
      }
    },
    //弹框的取消事件
    btnCancel() {
      this.addOfEditInit();
      this.dialogAddindustry = false;
      this.$refs.addOfEditForm.clearValidate();
    },
    //分析师删除事件
    deleteIfication(id) {
      this.$confirm("确定要删除该分析师吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await raiInterface.industrialAnalystDelete({
            IndustrialAnalystId: id,
          });
          if (res.Ret !== 200) return;
          this.getIndustrialAnalyst();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //产业删除事件
    deleteClassify(item) {
      this.isShowDetail = false;
      if (item.IsRelevance) {
        this.$alert("当前产业下有关联报告或活动，请将相关报告或活动重新归类后再删除。", "提示", {
          confirmButtonText: "知道了",
        });
      } else {
        this.$confirm("确定删除该产业吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res = await raiInterface.getIndustrialManagementDelete({
              IndustrialManagementId: item.IndustrialManagementId,
            });
            if (res.Ret !== 200) return;
            this.isConcealHide = false;
            this.getIndustrialManagement();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    //标删除事件
    deleteCover(item) {
      this.isShowDetailObject = false;
      if (item.IsRelevance) {
        this.$alert("当前标的下有关联报告或活动，请将相关报告或活动重新归类后再删除。", "提示", {
          confirmButtonText: "知道了",
        });
      } else {
        this.$confirm("确定删除该标的吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res = await raiInterface.industrialSubjectDelete({
              IndustrialSubjectId: item.IndustrialSubjectId,
            });
            if (res.Ret !== 200) return;
            this.getIndustrialSubject();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    //添加标的的查询事件
    async remoteMethod(query) {
      if (query !== "") {
        const res = await raiInterface.industrialSubjectSearch({
          KeyWord: query,
        });
        if (res.Ret === 200) {
          this.addSubjectOptions = res.Data.List || [];
        }
      }
    },
    //处理查询来的标的
    async searchInfo(val) {
      if (val !== "") {
        const res = await raiInterface.industrialSubjectSearchInfo({
          KeyWord: val,
        });
        console.log(res);
        if (res.Ret === 200) {
          this.isShowSubject = res.Data.List ? false : true;
          let arrList = [];
          arrList = res.Data.List
            ? res.Data.List.map((item) => {
                let arr = [];
                item.List.forEach((key) => {
                  arr.push(key.Name);
                });
                return {
                  ...item,
                  value: arr.join(","),
                };
              })
            : [];
          this.nameSubjectOptions = arrList;
        }
      } else {
        this.nameSubjectOptions = [];
      }
    },
    //查询标的的关闭事件
    handleCloseSubject() {
      this.nameSubjectOptions = [];
      this.addSubjectName = "";
      this.addSubjectOptions = [];
      this.dialogVisibleSubject = false;
    },
    //点击取消详情的展示
    detailShowHandel() {
      this.isShowDetail = false;
      this.isShowDetailObject = false;
    },
    //移至弘则覆盖
    moveHzcoverHandler(item) {
      this.isShowDetail = false;
      this.dialogCoverHz = true;
      this.getIndustryList();
    },
    //获取行业  移至弘则覆盖
    async getIndustryList() {
      const res = await raiInterface.chartPermissionFirstHaveIco();
      if (res.Ret === 200) {
        this.chartPermissionList = res.Data.List;
      }
    },
    //关闭 移至弘则覆盖 的弹框
    handleCloseCoverHz() {
      this.industryCover = "";
      this.dialogCoverHz = false;
    },
    //确定 移至弘则覆盖 的弹框
    async coverHzConfirm() {
      if (!this.industryCover) return this.$message.error("请选择行业");
      const res = await raiInterface.industrialManagementMove({
        ChartPermissionId: this.industryCover,
        IndustrialManagementId: this.industryActiveFrom.IndustrialManagementId,
      });
      if (res.Ret === 200) {
        this.$message.success("移动成功");
        this.industryList = [];
        this.getIndustrialManagement();
        this.industryCover = "";
        this.dialogCoverHz = false;
      }
    },
  },
};
</script>
<style lang="scss">
.container-industry {
  .el-card {
    margin-bottom: 20px;
  }
  .tabs-box-top {
    display: flex;
    p {
      line-height: 40px;
      width: 130px;
    }
    .el-tabs__item {
      font-weight: 400;
      color: #666666;
    }
    .is-active {
      color: #409eff !important;
    }
  }
  .top-card-box {
    display: flex;
    justify-content: space-between;
    .tabs-box {
      span {
        display: inline-block;
        padding: 9px 24px;
        background-color: #e9f4ff;
        border: 1px solid #b3d8ff;
        border-radius: 4px;
        margin-right: 30px;
        color: #409eff;
        cursor: pointer;
      }
      .pitch {
        background-color: #409eff;
        border: none;
        color: #fff;
      }
    }
  }
  .classification {
    display: flex;
    flex-wrap: wrap;
    .industrial {
      position: relative;
      box-sizing: border-box;
      margin-bottom: 30px;
      width: 290px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: #ecf5ff;
      font-size: 14px;
      margin-right: 30px;
      color: #409eff;
      border-radius: 4px;
      border: 1px solid #b3d8ff;
      cursor: pointer;
      .label-tag-item {
        position: absolute;
        right: -1px;
        top: -1px;
        color: #fff;
        font-size: 12px;
        height: 17px;
        line-height: 17px;
        border-radius: 0 4px 0 0;
        overflow: hidden;
        span {
          padding: 0 12px;
        }
      }
      .content-industrial {
        position: absolute;
        box-sizing: border-box;
        left: 0px;
        bottom: -10px;
        z-index: 999;
        width: 180px;
        transform: translateY(100%);
        background: #646566;
        text-align: left;
        padding-left: 25px;
        padding-top: 10px;
        line-height: 16px;
        color: #fff;
        p {
          height: 16px;
          font-size: 12px;
          margin-bottom: 6px;
        }
        .content-sjx {
          position: absolute;
          left: 50%;
          top: -6px;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #646566;
        }
      }
    }
    .pitch {
      display: flex;
      padding: 0 20px;
      justify-content: space-between;
      background-color: #409eff;
      border: none;
      color: #fff !important;
    }
    .addIndustrial {
      box-sizing: border-box;
      width: 96px;
      height: 60px;
      padding-top: 10px;
      text-align: center;
      background: #ecf5ff;
      border: 1px solid #b3d8ff;
      opacity: 1;
      border-radius: 4px;
      color: #409eff;
      cursor: pointer;
      i {
        color: #409eff;
        font-weight: 700;
        padding-bottom: 5px;
      }
      span {
        display: inline-block;
        width: 100%;
      }
    }
  }
  .dialog-h {
    height: 30px;
  }
  .dialogp {
    margin-bottom: 30px;
  }
  /deep/.el-tabs__nav-wrap::after {
    content: none;
  }
  .card-box {
    display: flex;
    align-items: center;
    div {
      margin-right: 20px;
    }
  }
  .subject-text {
    padding-top: 20px;
  }
  .subject-content {
    background: #ffffff;
    padding: 20px;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }
}

.el-tabs__nav-wrap::after {
  display: none;
  content: none;
}
.el-popover__reference {
  width: 258px;
}
.popover-industry {
  background: #646566;
  color: #fff;
  font-size: 12px;
  .popper__arrow {
    &::after {
      border-bottom-color: #646566 !important;
      border-top-color: #646566 !important;
    }
  }
}
</style>
