web/apps/bigmember_pc/src/components/forecast/ForeCast.vue

<template>
  <div class="listData">
    <div class="listData_title" v-if="type == 'entintel'">
      <strong style="font-weight: bold; font-size: 18px; color: #1d1d1d"
        >企业列表</strong
      >
      <span style="font-size: 14px; color: #686868"
        >（可关注 {{ myDataObj.maxCount }} 个企业，已关注
        <em style="color: #2cb7ca">{{ myDataObj.initTotal }}</em> 个）</span
      >
    </div>
    <div class="tip_title" v-if="type == 'entintel'">
      <Tips tipText="解锁关注更多企业"></Tips>
    </div>
    <template v-else>
      <div class="listData_title">{{ title }}</div>
      <div class="listData_desc">{{ desc }}</div>
    </template>
    <div
      class="filtrate_box"
      :class="{ 'no-border': tabActive === 'fwl' }"
      v-if="showFiltrate"
    >
      <div class="tab_box">
        <tabs :list="tab_list" @onChange="tabChange"></tabs>
      </div>
      <TimeSelector
        ref="timeSelector"
        selectorTime="allAndlately90"
        @onChange="changeTime"
        selectorType="line"
        v-show="tabActive === 'fwl'"
      >
        <div class="filter-label" slot="header">合同到期时间：</div>
      </TimeSelector>
      <!-- 地区 -->
      <div class="filter-region" v-show="tabActive === 'fwl'">
        <AreaCityCountryCascader
          ref="areaCityCountry"
          :showTags="false"
          :isHaveAll="isShowAllCountry"
          :source="sourceAreaMap"
          :initMap="regionMapData"
          @hideSelect="onAreaHideSelect"
          @change="onAreaCityCountryChange"
        >
          <div class="filter-label" slot="header">项目地区：</div>
        </AreaCityCountryCascader>
      </div>
    </div>
    <!-- 中标企业预测-->
    <ul class="listData_ul" v-if="type == 'bidfor'">
      <li
        class="list_li"
        v-for="(item, index) in listState.list.slice(
          (listState.pageNum - 1) * listState.pageSize,
          listState.pageNum * listState.pageSize
        )"
        :key="index"
        @click="goBidForcast(item)"
      >
        <div class="list_name">{{ item.projectname }}</div>
        <div class="list_unit">
          <div class="pur_unit">
            <span class="unit_label">采购单位：</span>
            <span class="unit_name">{{ item.buyer }}</span>
          </div>
          <div class="pur_unit">
            <span class="unit_label">采购时间：</span>
            <span class="unit_name">{{ item.firsttime }}</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- 中标企业预测>预测结果>预测项目列表-->
    <ul class="listData_ul" v-if="type == 'bidforResult'">
      <li
        class="list_li_result list_li"
        v-for="(item, index) in listState.list.slice(0, 5)"
        :key="index"
        @click="goEntPor(item.entId)"
      >
        <div class="list_li_left">
          <div class="result_chart">
            <el-progress
              type="circle"
              :show-text="true"
              :color="activeColor(index)"
              :width="44"
              :stroke-width="4"
              :percentage="item.weight"
            ></el-progress>
            <div class="bidrete_text">中标概率</div>
          </div>
        </div>
        <div class="list_li_right">
          <div class="list_name">{{ item.entname }}</div>
          <div class="list_unit">
            <div class="pur_unit">
              <span class="unit_label">成立日期：</span>
              <span class="unit_name">{{ item.datestr }}</span>
            </div>
            <div class="pur_unit">
              <span class="unit_label">注册资本：</span>
              <span class="unit_name">{{ item.capital }}</span>
            </div>
            <div class="pur_unit">
              <span class="unit_label">员工人数：</span>
              <span class="unit_name">{{ item.employee_no }}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <!-- 投标决策分析  -->
    <ul class="listData_ul" v-if="type == 'bidpolicy'">
      <li
        class="list_li"
        v-for="(item, index) in listState.list.slice(
          (listState.pageNum - 1) * listState.pageSize,
          listState.pageNum * listState.pageSize
        )"
        :key="index"
        @click="goForcast(item)"
      >
        <div class="list_name">{{ item.projectname }}</div>
        <div class="list_unit">
          <div class="pur_unit">
            <span class="unit_label">采购单位：</span>
            <span class="unit_name">{{ item.buyer }}</span>
          </div>
          <div class="pur_unit">
            <span class="unit_label">采购时间：</span>
            <span class="unit_name">{{ item.firsttime }}</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- 企业情报 -->
    <div v-if="type == 'entintel'" style="padding: 0 40px">
      <div class="entintel-thead">
        <span style="width: 810px">企业</span>
        <span style="width: 100px" class="thead-flex">
          <em>更新时间</em>
          <el-tooltip class="item" effect="dark" placement="top">
            <div
              slot="content"
              style="text-align: center; font-size: 13px; line-height: 20px"
            >
              初始值为关注企业的时间，<br />
              关注后，企业下项目动态如有更新， <br />则为项目更新时间
            </div>
            <i class="icon-quesion"></i>
          </el-tooltip>
        </span>
        <span style="width: 100px">分组</span>
        <span style="width: 100px">操作</span>
      </div>
      <ul
        class="listData_ul"
        :style="{ 'padding-bottom': getShowPagination ? '' : '48px' }"
      >
        <li
          class="list_li"
          style="
            padding: 24px 0 26px;
            display: flex;
            align-items: center;
            cursor: default;
          "
          :class="{ visited: item.visited }"
          v-for="(item, index) in getMyData.listState.list"
          :key="index"
        >
          <div
            style="padding: 0 12px; width: 810px; cursor: pointer"
            @click="goViewEnt(item.s_entId, item)"
          >
            <div class="list_name ent_li_name visited-hd">
              {{ item.s_entname
              }}<span class="red_point" v-if="item.i_apppushunread == 1"></span>
            </div>
            <div class="list_unit">
              <div class="pur_unit">
                <span class="unit_label">成立日期：</span>
                <span class="unit_name entname visited-ft">{{
                  item.l_establishdate
                    ? dateFormatter(item.l_establishdate * 1000, 'yyyy-MM-dd')
                    : '--'
                }}</span>
              </div>
              <div class="pur_unit">
                <span class="unit_label">注册资本：</span>
                <span class="unit_name entname visited-ft">{{
                  item.f_capital ? moneyUnit(item.f_capital * 10000) : '--'
                }}</span>
              </div>
              <div class="pur_unit">
                <span class="unit_label">企业地址：</span>
                <span class="unit_name entname visited-ft"
                  >{{ item.s_area ? item.s_area : '--'
                  }}{{ item.s_city ? item.s_city : '' }}</span
                >
              </div>
              <div class="pur_unit">
                <span class="unit_label">企业联系方式：</span>
                <span class="unit_name entname visited-ft">{{
                  item.s_phone ? item.s_phone : '--'
                }}</span>
              </div>
            </div>
          </div>
          <div class="list_li_item">
            {{
              item.l_lastpushtime
                ? dateFormatter(item.l_lastpushtime * 1000, 'yyyy-MM-dd')
                : '--'
            }}
          </div>
          <div class="list_li_item item-flex-column">
            <span
              v-for="(s, j) in formatGroup(item.s_group)"
              :key="'00' + j"
              style="line-height: 20px"
              >{{ s }}</span
            >
          </div>
          <div class="list_li_item entintel-handle">
            <span @click="editGroup(item)">编辑分组</span>
            <span @click="cancelFollow(item)">取消关注</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 企业情报搜索结果组件 -->
    <ul class="listData_ul" v-if="type == 'entintelRes'">
      <li
        class="list_li res_li"
        v-for="(item, index) in listState.list"
        :key="index"
      >
        <div class="list_name">
          <div class="list_name_left" @click="goViewEnt(item.entId)">
            <span class="icon_company"></span>
            <span class="list_pur_name">{{ item.entName }}</span>
          </div>
          <div
            class="list_btn"
            v-if="item.isFollow == ''"
            @click="setFollow(item.entId, item.isFollow)"
          >
            <span class="icon_grey"></span>
            <span class="notice">关注</span>
          </div>
          <div
            class="list_btn_follow"
            v-else-if="item.isFollow == '1'"
            @click="setFollow(item.entId, item.isFollow)"
          >
            <span class="icon_heart_red"></span>
            <span class="notice">已关注</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- 企业查询默认和搜索结果组件 -->
    <ul class="listData_ul" v-if="type == 'entsearchRes'">
      <li
        class="list_li"
        v-for="(item, index) in listState.list.slice(
          (listState.pageNum - 1) * listState.pageSize,
          listState.pageNum * listState.pageSize
        )"
        :key="index"
        @click="goSearchViewEnt(item.entId)"
      >
        <div class="list_name ent_li_name">
          {{ item.entName || item.name
          }}<span
            class="red_point"
            v-if="item.isFollow !== 0 && item.i_apppushunread"
          ></span>
        </div>
        <div class="list_unit">
          <div class="pur_unit">
            <span class="unit_label">成立日期：</span>
            <span class="unit_name entname">{{
              item.establish_date ? item.establish_date : '--'
            }}</span>
          </div>
          <div class="pur_unit">
            <span class="unit_label">注册资本：</span>
            <span class="unit_name entname">{{
              item.capital ? moneyUnit(item.capital * 10000) : '--'
            }}</span>
          </div>
          <div class="pur_unit">
            <span class="unit_label">企业地址：</span>
            <span class="unit_name entname"
              >{{ item.company_area ? item.company_area : '--'
              }}{{ item.company_city ? item.company_city : '' }}</span
            >
          </div>
          <div class="pur_unit">
            <span class="unit_label">企业联系方式：</span>
            <span class="unit_name entname">{{
              item.company_phone ? item.company_phone : '--'
            }}</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- 潜在项目预测 -->
    <div class="potential-container" v-if="type == 'potential'">
      <div
        v-show="tabActive === 'fwl'"
        style="background: #f2f2f4; height: 16px"
      ></div>
      <div v-show="tabActive === 'fwl'" class="list-header">
        <div class="list-header-container">
          <span>
            <el-checkbox v-model="allChecked" @change="onAllCheckedChange"
              >全选</el-checkbox
            >
            <em class="header-result-text" v-html="resultText"></em>
          </span>
          <div
            class="header-export"
            :class="{ disabled: listState.list.length === 0 }"
            @click="onDataExport"
          >
            <img src="@/assets/images/icon/export-gray.png" /><span
              >数据导出</span
            >
          </div>
        </div>
      </div>
      <ul class="listData_ul">
        <li
          class="list_li poten_li"
          v-for="(item, index) in listState.list"
          :key="index"
        >
          <span v-show="tabActive === 'fwl'" style="margin-top: 3px">
            <el-checkbox
              v-model="item.checked"
              @change="(checked) => onCheckboxItem(checked, item)"
            ></el-checkbox>
          </span>
          <div
            style="margin-left: 8px; flex: 1"
            @click.stop="
              goPotenSimiLar(item.id, item.purchasing, item.createtime)
            "
          >
            <div class="list_name">
              <div class="list_name_left">
                <span class="pur_company">采购单位</span>
                <span class="list_pur_name">{{ item.buyer }}</span>
              </div>
              <div class="list_time">
                {{ item.createtime }}
              </div>
            </div>
            <div class="list_unit list_poten">
              <div class="pur_unit poten_unit">
                <span class="unit_label poten_label"
                  ><span class="point"></span>预测线索</span
                >
                <span class="unit_name poten_name">{{ item.title }}</span>
              </div>
              <div class="pur_unit poten_unit poten_margin">
                <span class="unit_label poten_label"
                  ><span class="point"></span>预测采购内容</span
                >
                <span class="unit_name poten_name">
                  <span>{{ item.purchasing }}</span>
                </span>
              </div>
              <div
                class="pur_unit poten_unit poten_margin"
                v-show="tabActive === 'fwl'"
              >
                <span class="unit_label poten_label"
                  ><span class="point"></span>合同到期时间：{{
                    item.yuceendtime
                  }}</span
                >
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 潜在项目预测近似项目列表 -->
    <ul class="listData_ul" v-if="type == 'potensimilar'">
      <li
        class="list_li potensimilar_li"
        v-for="(item, index) in listState.list.slice(
          (listState.pageNum - 1) * listState.pageSize,
          listState.pageNum * listState.pageSize
        )"
        :key="index"
      >
        <div class="list_unit">
          <div class="pur_unit">
            <span class="unit_label">预测采购内容：</span>
            <span class="unit_name">{{ item.p_purchasing }}</span>
          </div>
          <div class="pur_unit">
            <span class="unit_label">同类项目：</span>
            <span
              class="unit_name similar_name"
              @click="goViewDetail(item.p_id)"
              >{{ item.p_orther }}</span
            >
          </div>
          <div class="pur_unit">
            <span class="unit_label">联系人：</span>
            <span class="unit_name">{{ item.p_person }}</span>
          </div>
          <div class="pur_unit">
            <span class="unit_label">联系电话：</span>
            <span class="unit_name">{{ item.p_phone }}</span>
          </div>
        </div>
      </li>
    </ul>
    <Empty
      v-if="showEmpty && potenCode != 1"
      :tip="getTipText"
      :images="tipimages"
    >
      <el-button
        v-if="tips === '暂无企业情报信息，前往企业搜索关注企业'"
        class="add-btn"
        type="primary"
        slot="button"
        @click="goSearchEnt"
      >
        添加关注企业
      </el-button>
      <el-button
        v-if="resetStatus"
        class="add-btn"
        type="primary"
        slot="button"
        @click="goResetFilter"
        >重置筛选</el-button
      >
      <el-button
        v-if="goSetStatus"
        class="add-btn"
        type="primary"
        slot="button"
        @click="setKey"
        >前往订阅设置</el-button
      >
    </Empty>
    <Empty
      v-else-if="showEmpty && potenCode == 1"
      :images="getAssetsFile('empty/jy-cry.png')"
    >
      <div name="default">
        <div class="poten_tip">暂未设置订阅关键词，无法进行预测</div>
        <div class="setKeyWords" v-if="!info.isSubCount">
          <button class="add-btn" @click="setKey()">立即设置关键词</button>
        </div>
      </div>
    </Empty>
    <div class="el-pagination-container" v-if="listState.total > 0">
      <el-pagination
        popper-class="pagination-custom-select"
        background
        layout="prev, pager, next, sizes, jumper"
        :current-page="listState.pageNum"
        :page-size="listState.pageSize"
        :page-sizes="[5, 10, 50, 100]"
        :total="listState.total"
        :show-confirm-btn="true"
        @current-change="onPageChange"
        @size-change="onSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 分组dialog -->
    <el-dialog
      custom-class="sub-dialog"
      :visible.sync="dialog.group"
      :close-on-click-modal="false"
      :show-close="false"
      :destroy-on-close="true"
      :lock-scroll="false"
      center
      width="460px"
    >
      <GroupCard
        :initGroupInfo="this.cur.group"
        @onCancel="dialog.group = false"
        @onConfirm="saveGroupData"
      >
        <div slot="header">编辑分组</div>
      </GroupCard>
    </el-dialog>
  </div>
</template>

<script>
import {
  Pagination,
  Progress,
  Message,
  Tooltip,
  Dialog,
  Button,
  Checkbox
} from 'element-ui'
import { mapState } from 'vuex'
import { mixinVisited } from '@/utils/mixins/visited'
import Tips from '@/components/common/Tips.vue'
import tabs from '@/components/common/tabs.vue'
import Empty from '@/components/common/Empty.vue'
import GroupCard from '@/components/selector/GroupSelector.vue'
import TimeSelector from '@/components/selector/TimeSelector.vue'
import { moneyUnit, dateFormatter } from '@/utils'
import { tryCallHooks } from '@jianyu/easy-inject-qiankun'
import { getPowerUrl } from '@/utils/power/redirect'
import {
  setFollowEnt,
  setCancelEnt,
  changeEntGroup,
  forecastArea
} from '@/api/modules'
import AreaCityCountryCascader from '@/components/selector-cascader/AreaCityCountryCascader.vue'
export default {
  props: [
    'type',
    'title',
    'desc',
    'mydata',
    'myDataObj',
    'resData',
    'myPolicydata',
    'potenObj',
    'potenResult',
    'entSearch',
    'entSearchRes',
    'showFiltrate',
    'tab_list'
  ],
  name: 'listData',
  mixins: [mixinVisited],
  components: {
    [Pagination.name]: Pagination,
    [Progress.name]: Progress,
    [Message.name]: Message,
    [Tooltip.name]: Tooltip,
    [Dialog.name]: Dialog,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    Empty,
    GroupCard,
    Tips,
    TimeSelector,
    tabs,
    AreaCityCountryCascader
  },
  data() {
    return {
      listState: {
        loaded: true, // 是否已经搜索过
        loading: false,
        pageNum: 1, // 当前页
        pageSize: 10, // 每页多少条数据
        total: 0, // 一共多少条数据
        list: [], // 查询请求返回的数据
        match: '', // 筛选条件输入框
        group: '', // 筛选条件企业名称
        distinctCount: 0 // 导出标讯数
      },
      isFollow: '1',
      potenCode: 0,
      tips: '', // 空状态提示
      tipimages: 'jy-cry.png',
      dialog: {
        group: false
      },
      cur: {
        group: '', // 当前点击编辑的分组信息
        fid: ''
      },
      tabActive: 'fwl',
      regionMapData: '',
      sourceAreaMap: {},
      allChecked: false,
      selectedId: []
    }
  },
  created() {
    // 中标企业预测
    if (this.type === 'bidfor') {
      this.initData(this.mydata, this.type)
    }
    // 投标决策分析
    if (this.type === 'bidpolicy') {
      this.initPolicyData(this.myPolicydata, this.type)
    }
    // 潜在项目预测列表
    if (this.type === 'potential') {
      this.potenInitData(this.potenObj)
      this.getForecastArea()
    }
    // 潜在项目近似列表
    if (this.type === 'potensimilar') {
      this.potenSimiData(this.potenResult)
    }
    // 企业搜索
    if (this.type === 'entintelRes') {
      this.entSearchData(this.entSearch)
    }
    // 企业查询
    if (this.type === 'entsearchRes') {
      this.entSearchResData(this.entSearchRes)
    }
  },
  watch: {
    'myDataObj.list'(newVal) {
      this.getMyData.listState.list = newVal.map((item) => {
        const visited = this.pathVisited(
          this.createPathItem('/ent_portrait/*', `id=${item.s_entId}`)
        )
        return {
          ...item,
          visited
        }
      })
      this.getEntListTips()
    },
    mydata(newVal, oldVal) {
      this.initData(newVal)
    },
    myPolicydata(newVal, oldVal) {
      this.initPolicyData(newVal, this.type)
    },
    resData(newVal, oldVal) {
      this.resInitData(newVal)
    },
    potenObj(newVal) {
      this.potenInitData(newVal)
    },
    potenResult(newVal, oldVal) {
      this.potenSimiData(newVal)
    },
    entSearch(newVal, oldVal) {
      this.entSearchData(newVal)
    },
    entSearchRes(newVal, oldVal) {
      this.entSearchResData(this.entSearchRes)
    }
    // inspectType () {
    //   this.initPolicyData(this.myPolicydata, this.type)
    // }
  },
  computed: {
    ...mapState({
      bidnum: (state) => state.forcast.bidForeCastNum,
      info: (state) => state.user.info,
      filter: (state) => state.forcast.entFilter
    }),
    showEmpty() {
      return !this.listState.list.length
    },
    getShowPagination() {
      let show = true
      if (
        this.listState.pageNum === 1 &&
        this.listState.list &&
        this.listState.list.length < this.listState.pageSize
      ) {
        show = false
      }
      return show
    },
    getTipText() {
      return this.tips
    },
    getMyData() {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      return this
    },
    activeColor() {
      return function (item) {
        const val = Number(item)
        if (val === 0) {
          return '#FF9F40'
        } else if (val < 2 && val > 0) {
          return '#0BD991'
        } else if (val < 3 && val > 1) {
          return '#0987FF'
        } else {
          return '#C0C4CC'
        }
      }
    },
    resultText() {
      // const checked = this.listState.list.some(v => v.checked)
      const checkedCount = this.selectedId.length
      if (checkedCount) {
        return `已选<em class="highlight-text">${checkedCount}</em>条信息`
      } else {
        return `搜索到<em class="highlight-text">${this.listState.total}</em>条信息`
      }
    },
    // 是否显示全国
    isShowAllCountry() {
      const len = Object.keys(this.sourceAreaMap).length
      return len === 0
    },
    resetStatus() {
      const type = this.type === 'potential' && this.tabActive === 'fwl'
      const text = this.tips === '当前筛选条件下结果为空'
      return type && text
    },
    goSetStatus() {
      const exactText = this.tips === '您设置的订阅关键词无法进行预测'
      return exactText || this.tips.indexOf('设置订阅关键词') > -1
    }
  },
  mounted() {
    this.getEntListTips()
  },
  methods: {
    dateFormatter,
    moneyUnit,
    initData(list, type) {
      this.listState.pageNum = 1
      if (list.length !== 0) {
        this.listState.list = this.unique(list)
        this.listState.total = this.unique(list).length
      } else {
        this.listState.list = []
        this.listState.total = 0
        this.tips = '暂无搜索历史'
      }
    },
    initPolicyData(list, type) {
      this.listState.pageNum = 1
      if (list && list.length !== 0) {
        this.listState.list = this.unique(list)
        this.listState.total = list.length
      } else {
        this.listState.list = []
        this.listState.total = 0
        this.tips = '暂无搜索历史'
      }
    },
    resInitData(list) {
      if (list && list.length !== 0) {
        list.forEach(function (item) {
          item.weight = Number((item.weight * 100).toFixed(0))
          if (item.employee_no === '') {
            item.employee_no = '--'
          }
          if (item.capital !== 0) {
            item.capital = item.capital + '万元'
          } else {
            item.capital = '--'
          }
        })
        this.listState.list = list
        this.listState.total = list.length
      } else {
        this.listState.list = []
        this.listState.total = 0
      }
    },
    potenInitData(obj) {
      // console.log(obj)
      if (obj.list && obj.list.length !== 0) {
        obj.list.forEach((res) => {
          if (res.purchasing && res.purchasing.length > 1) {
            res.purchasing = res.purchasing.toString()
          } else {
            if (res.purchasing) {
              res.purchasing = res.purchasing[0]
            }
          }
        })
        this.listState.list = obj.list
        this.listState.total = obj.count
        this.listState.distinctCount = obj.distinctCount
        if (this.type === 'potential' && this.tabActive === 'fwl') {
          this.allChecked = this.listState.list.every((v) => v.checked)
        }
      } else {
        this.listState.list = []
        this.listState.total = 0
        if (obj.code === 1) {
          this.potenCode = 1
        } else {
          this.potenCode = 2
          this.tips = obj.msg
        }
        this.allChecked = false
      }
      this.$forceUpdate()
    },
    potenSimiData(list) {
      if (list && list.length !== 0) {
        this.listState.list = list
        this.listState.total = list.length
      } else {
        this.listState.list = []
        this.listState.total = 0
      }
    },
    // 企业搜索
    entSearchData(list) {
      if (list && list.length !== 0) {
        this.listState.list = list
        this.listState.total = list.length
      } else {
        this.listState.list = []
        this.listState.total = 0
        this.tips = '暂无数据'
      }
    },
    entInitData(obj) {
      if (obj && obj.list && obj.list.length !== 0) {
        this.listState.list = obj.list
        this.listState.total = obj.total
      } else {
        this.listState.list = []
        this.listState.total = 0
        if (!obj.match && !obj.group && obj.initTotal === 0) {
          this.tips = '暂无企业情报信息，前往企业搜索关注企业'
        } else {
          this.tips = '暂无匹配数据'
        }
      }
    },
    // 企业查询
    entSearchResData(list) {
      this.listState.pageNum = 1
      if (list && list.length !== 0) {
        this.listState.list = list
        this.listState.total = list.length
      } else {
        this.listState.list = []
        this.listState.total = 0
        this.tips = '暂无数据'
      }
    },
    // 关注
    setFollow(id, num) {
      if (num === '') {
        setFollowEnt({ entId: id }).then((res) => {
          if (res.error_code === 0) {
            if (res.data === 'success') {
              this.entSearch.forEach(function (item, i) {
                if (id === item.entId) {
                  item.isFollow = '1'
                }
              })
            }
          }
        })
      } else {
        setCancelEnt({ entId: id }).then((res) => {
          if (res.error_code === 0) {
            if (res.data === 'success') {
              this.entSearch.forEach(function (item, i) {
                if (id === item.entId) {
                  item.isFollow = ''
                }
              })
            }
          }
        })
      }
    },
    goBidForcast(data) {
      // 有中标预测次数才能点击
      if (this.bidnum !== 0) {
        const result = [data]
        this.$store.commit('forcast/setHistoryList', result)
        this.$router.push({
          path: '/ai_add',
          query: {
            pid: data.s_id,
            sid: data.sourceinfoid
          }
        })
      }
    },
    goForcast(data) {
      const result = [data]
      this.$store.commit('forcast/setHistoryPolicyList', result)
      const routeUrl = this.$router.resolve({
        path: `/analysis_result?ptid=${data.s_id}&sid=${data.sourceinfoid}`
      })
      return window.open(routeUrl.href, '_blank')
    },
    goViewEnt(id, item) {
      if (item.i_apppushunread) {
        item.i_apppushunread = null
      }
      if (this.type === 'entintel') {
        item.visited = true
        this.pathVisiting(this.createPathItem('/ent_portrait/*', `id=${id}`))
      }
      const { url } = getPowerUrl('entDesc', { id })
      window.open(url)
    },
    goSearchViewEnt(id) {
      const routeUrl = this.$router.resolve({
        path: `/svip/ent_ser_portrait/${id}`,
        query: {
          svip: '1'
        }
      })
      return window.open(routeUrl.href, '_blank')
    },
    goEntPor(id) {
      if (id && id !== '' && id !== undefined && id !== 'undefined') {
        const routeUrl = this.$router.resolve({
          path: `/ent_portrait/${id}`
        })
        return window.open(routeUrl.href, '_blank')
      } else {
        this.$message('暂无数据')
      }
    },
    goViewDetail(id) {
      const routeUrl = this.$router.resolve({
        path: '/pro_follow_detail?sid=' + id
      })
      return window.open(routeUrl.href, '_blank')
    },
    goPotenSimiLar(id, keys, time) {
      const routeUrl = this.$router.resolve({
        path: '/analysis_filter',
        query: {
          id: id,
          keys: keys,
          createtime: time
        }
      })
      return window.open(routeUrl.href, '_blank')
    },
    // 设置关键词
    setKey() {
      this.$router.push('/set_subscribe/config')
    },
    // 数组对象去重
    unique(arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr.s_id) && res.set(arr.s_id, 1))
    },
    onPageChange(p) {
      const filter = this.filter
      this.listState.pageNum = p
      this.$emit(
        'onPageChange',
        p,
        filter.entVal ? filter.entVal : '',
        filter.group ? filter.group : '',
        this.listState.pageSize
      )
    },
    onSizeChange(size) {
      this.listState.pageNum = 1
      this.listState.pageSize = size
      this.onPageChange(this.listState.pageNum)
    },
    // 处理显示分组
    formatGroup(data) {
      if (!data) return
      let val
      switch (data) {
        case 'A':
          val = '默认分组'
          break
        case 'B':
          val = '竞争对手'
          break
        case 'C':
          val = '合作伙伴'
          break
        case 'B,C' || 'C,B':
          val = '竞争对手,合作伙伴'
          break
        default:
          val = '默认分组'
          break
      }
      const arr = val.split(',')
      return arr
    },
    // 企业情报监控 编辑分组
    editGroup(item) {
      this.dialog.group = true
      this.cur.group = item.s_group ? item.s_group : 'A'
      this.cur.fid = item.fid
    },
    // 企业情报监控 取消关注
    cancelFollow(item) {
      const filter = this.filter
      const num = this.listState.list.length <= 1 ? 0 : this.listState.pageNum
      setCancelEnt({
        entId: item.s_entId,
        fid: item.fid
      }).then((res) => {
        if (res.data === 'success') {
          this.$toast('取消关注成功', 1000)
          this.$emit(
            'onPageChange',
            num,
            filter.entVal ? filter.entVal : '',
            filter.group ? filter.group : '',
            this.listState.pageSize
          )
        } else {
          this.$toast(res.error_msg)
        }
      })
    },
    saveGroupData(data) {
      const params = {
        fid: this.cur.fid,
        group: data
      }
      const defaultParams = {
        fid: this.cur.fid
      }
      const filter = this.filter
      const num = this.listState.list.length <= 1 ? 0 : this.listState.pageNum
      // console.log(num, this.listState.list, '1111')
      changeEntGroup(data === 'A' ? defaultParams : params).then((res) => {
        if (res.data === 'success') {
          this.dialog.group = false
          this.$emit(
            'onPageChange',
            num,
            filter.entVal ? filter.entVal : '',
            filter.group ? filter.group : '',
            this.listState.pageSize
          )
        } else {
          this.$toast(res.error_msg)
        }
      })
    },
    goSearchEnt() {
      const url = '/jylab/entSearch/index.html'
      tryCallHooks({
        fn: () => {
          this.$BRACE.methods.open({
            route: {
              link: url,
              appType: 'iframe'
            }
          })
        },
        spareFn: () => {
          window.open(url)
        }
      })
    },
    getEntListTips() {
      if (
        this.myDataObj &&
        !this.myDataObj.match &&
        !this.myDataObj.group &&
        this.myDataObj.initTotal === 0
      ) {
        this.tips = '暂无企业情报信息，前往企业搜索关注企业'
        this.tipimages = 'jy-back.png'
        console.info(this.tipimages)
      } else if (
        this.myDataObj &&
        this.myDataObj.list.length === 0 &&
        this.myDataObj.initTotal !== 0
      ) {
        this.tips = '暂无匹配数据'
        this.tipimages = 'jy-back.png'
      }
    },
    changeTime(data) {
      this.$emit('onChange', data)
      if (this.type === 'potential') {
        this.selectedId = []
        this.$emit('changeId', this.selectedId)
      }
    },
    tabChange(data) {
      this.tabActive = data.value
      this.$refs.timeSelector.setState({
        exact: 'all'
      })
      this.$emit('tabChange', data)
    },
    async getForecastArea() {
      const { data } = await forecastArea()
      this.sourceAreaMap = data || {}
      // const obj = {
      //   安徽: {},
      //   广西: {
      //     贺州市: ['富川瑶族自治县']
      //   },
      //   河南: {
      //     郑州市: []
      //   }
      // }
      // this.sourceAreaMap = obj
    },
    onDataExport() {
      if (this.listState.list.length === 0) return
      this.$emit('export')
    },
    onAllCheckedChange(checked) {
      if (this.listState.list.length === 0) return
      this.listState.list.forEach((v) => {
        v.checked = checked
      })
      if (checked) {
        const selectedArr = this.listState.list
          .filter((v) => v.checked)
          .map((s) => s.infoId)
        const uniqueArr = Array.from(new Set(selectedArr))
        this.selectedId = this.selectedId.concat(uniqueArr)
        this.selectedId = Array.from(new Set(this.selectedId))
      } else {
        const noSelectedArr = this.listState.list.map((s) => s.infoId)
        const data = []
        this.selectedId.forEach((el, index) => {
          if (!noSelectedArr.find((item) => item === el)) {
            data.push(this.selectedId[index])
          }
        })
        this.selectedId = data
      }
      this.$emit('changeId', this.selectedId)
      this.$forceUpdate()
    },
    onCheckboxItem(checked, item) {
      if (checked) {
        this.selectedId.push(item.infoId)
        Array.from(new Set(this.selectedId))
      } else {
        this.selectedId = this.selectedId.filter((v) => v !== item.infoId)
      }
      this.$emit('changeId', this.selectedId)
    },
    // 省市区组件回调数据
    onAreaCityCountryChange(data) {
      // const { regionMap } = data
      // this.regionMapData = regionMap
      // this.selectedId = []
      // this.$emit('changeArea', regionMap)
      // this.$emit('changeId', this.selectedId)
    },
    // 每次选择地区时不需要都调用接口，等所有选择完 下拉框隐藏时再调用
    onAreaHideSelect(data) {
      const { regionMap } = data
      if (JSON.stringify(regionMap) === JSON.stringify(this.regionMapData))
        return
      this.regionMapData = regionMap
      this.selectedId = []
      this.$emit('changeArea', regionMap)
      this.$emit('changeId', this.selectedId)
    },
    // 重置筛选（目前需求只有潜在项目预测-服务类项目有）
    goResetFilter() {
      this.regionMapData = ''
      this.$emit('changeArea', {})
      this.$refs.areaCityCountry.setState(this.regionMapData)
      this.$refs.timeSelector.setState({
        exact: 'all'
      })
      this.$emit('onChange', { start: 0, end: 0 })
    }
  }
}
</script>

<style lang="scss" scoped>
.listData {
  padding-top: 36px;
  width: 100%;
  background-color: #fff;
  border-radius: 8px;

  .listData_title {
    padding-left: 40px;
    width: 100%;
    height: 28px;
    font-size: 18px;
    font-weight: 400;
    text-align: LEFT;
    color: #1d1d1d;
    line-height: 28px;
  }

  .listData_desc {
    font-size: 14px;
    line-height: 22px;
    color: #686868;
    padding-left: 40px;
    margin: 20px 0 16px 0;
  }

  .filtrate_box {
    border-bottom: 1px dashed #e0e0e0;

    // min-height: 123px;
    .selector-card.time-selector.s-line {
      // padding: 12px 16px;
    }

    .filter-label {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 14px;
      white-space: nowrap;
      min-width: 98px;
      color: #686868;
    }

    .filter-region {
      border-top: 1px dashed #e0e0e0;
      background: #f2f2f4;
      .area-city-country {
        border-radius: 0 0 8px 8px;
      }
    }

    .tab_box {
      padding: 0 0 4px 40px;
    }

    ::v-deep {
      .date-time-container .date-time-item.left::after {
        height: 1px;
        background-color: #e0e0e0;
      }
      .selector-card.s-line {
        padding: 16px 40px;
      }
    }
  }
  .no-border {
    border: 0;
  }

  .tip_title {
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 24px;
    margin-bottom: -10px;
  }

  .entintel-thead {
    display: flex;
    align-items: center;
    margin-top: 26px;
    height: 48px;
    background: #f7f9fc;
    color: #1d1d1d;
    text-align: center;
    font-size: 14px;

    .thead-flex {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .icon-quesion {
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-left: 2px;
      background: url('~@/assets/images/icon/help.png') no-repeat center center;
      background-size: contain;
      cursor: pointer;

      ::before {
        content: '' !important;
      }
    }
  }

  .list_li_item {
    width: 100px;
    text-align: center;
    font-size: 14px;

    &.item-flex-column {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .add-btn {
    margin: 16px 0;
    background: #2cb7ca;
    border-radius: 4px;
    border: 0;
    height: 30px;
    padding: 0 24px;
    color: #fff;
  }

  .entintel-handle {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #2cb7ca;
    line-height: 22px;

    span {
      cursor: pointer;
    }
  }
  .list-header {
    background: #f2f2f4;
    border-bottom: 1px solid #ececec;
    .list-header-container {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      border-radius: 8px 8px 0 0;
    }
    .header-result-text {
      margin-left: 8px;
      font-size: 14px;
      color: #686868;
    }
    .header-export {
      display: flex;
      align-items: center;
      color: #252627;
      font-size: 14px;
      cursor: pointer;
      &.disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      img {
        width: 24px;
        height: 24px;
      }
    }
  }

  .listData_ul {
    content: '';
    overflow: hidden;
    width: 100%;

    .list_li {
      padding: 24px 40px 26px;
      width: 100%;
      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset;
      cursor: pointer;

      .list_name {
        font-size: 16px;
        font-weight: 400;
        text-align: LEFT;
        color: #1d1d1d;
        line-height: 24px;
      }

      .ent_li_name {
        display: flex;
        align-items: center;

        .red_point {
          display: flex;
          margin-left: 4px;
          width: 8px;
          height: 8px;
          background: #fb483d;
          border-radius: 50%;
        }
      }

      .list_unit {
        display: flex;
        margin-top: 12px;

        .pur_unit {
          margin-right: 28px;
          font-size: 14px;
          color: #2cb7ca;
          font-weight: 400;

          .unit_label {
            color: #999999;
          }

          .entname {
            color: #1d1d1d;
            text-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset;
          }
        }
      }

      &:hover {
        background: #f5f6f7;
        box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset;

        .list_name {
          color: #2cb7ca;
        }

        .unit_name.entname {
          color: #2cb7ca;
        }
      }
    }

    // 中标预测--预测项目
    .list_li_result {
      padding: 14px 40px;
      display: flex;
      align-items: center;
      width: 100%;
      height: 108px;

      .list_li_left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 76px;
        height: 100%;

        .result_chart {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;

          .bidrete_text {
            margin-top: 10px;
            font-size: 14px;
            color: #737278;
          }
        }

        // .result_chart  ::v-deep svg>path:nth-child(2) {
        //   stroke: #120D65;
        // }
      }

      .list_li_right {
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .list_name {
          font-size: 16px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: LEFT;
          color: #1d1d1d;
          line-height: 24px;
          text-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset;
        }

        .list_unit {
          display: flex;
          align-items: center;
          margin-top: 12px;

          .pur_unit {
            margin-right: 40px;
          }
        }
      }
    }

    // 潜在项目预测样式
    .poten_li {
      padding: 24px 40px 24px 16px;
      display: flex;
      .list_name {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .pur_company {
          margin-right: 8px;
          padding: 2px 8px;
          width: 68px;
          height: 24px;
          background: rgba(245, 101, 0, 0.1);
          border-radius: 2px;
          box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset;
          font-size: 13px;
          font-weight: 400;
          text-align: center;
          color: #f56500;
          line-height: 20px;
        }

        .list_time {
          font-size: 12px;
          font-weight: 400;
          color: #9b9ca3;
          text-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset;
        }
      }

      .list_poten {
        display: flex;
        flex-direction: column;

        .poten_unit {
          display: flex;
          flex-direction: column;

          .poten_label {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            line-height: 20px;
            text-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset;

            .point {
              display: flex;
              margin-right: 8px;
              width: 4px;
              height: 4px;
              background: #ececec;
              border-radius: 50%;
              box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset;
            }
          }

          .poten_name {
            margin-left: 12px;
            font-size: 14px;
            font-weight: 400;
            color: #686868;
            line-height: 24px;
            text-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset;
          }
        }

        .poten_margin {
          margin-top: 10px;
        }
      }
    }

    // 潜在项目近似项目预测样式
    .potensimilar_li {
      .list_unit {
        display: flex;
        flex-direction: column;
        margin-top: 0;

        .pur_unit {
          display: flex;
          align-items: center;
          margin-top: 12px;

          .unit_label {
            display: flex;
            justify-content: flex-end;
            width: 98px;
            text-align: right;
            font-size: 14px;
            color: #999999;
            line-height: 22px;
          }

          .unit_name {
            flex: 1;
            font-size: 14px;
            color: #1d1d1d;
            line-height: 22px;
          }

          .similar_name {
            color: #2cb7ca;
            text-decoration: underline;
          }
        }
      }
    }

    // 企业情报搜索结果组件样式
    .res_li {
      .list_name {
        display: flex;
        justify-content: space-between;

        .list_name_left {
          display: flex;
          align-items: center;

          .icon_company {
            display: flex;
            margin-right: 8px;
            width: 24px;
            height: 24px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKsSURBVHgB7ZldbtNAEMdn1oHQIqiPYB6Q2iKV+AaxAkg8QU+Q9gRtTlA4AeEElBOkfeIBheQGNpEokfriG5C3ilB7GKdp5abeje2s4lb176Hb/fBmJzv7n/UEoKSkpKRIMM2g9e9uHYWxh0g1yM6ICH2E4PikYR+CZpQGWB3XXFkzOghUBw0QYP8Mg23fsUegCaHqXF0TPV2Lj4jmWiGjAxqRGrDZdXe4yOMySiIjpnNroSLrQMQmxer8v0dB2IJz8CEDwgATKuILxL4MQqPJxSFoQGoA+2v9Wh3D7eFr24cc1HquMybx57LOu6BtZ0XagUMn3+IjvJuH1gRNpDbgtnLnDahAQWz8GPSkncSCMQ4+D9/Od9tcBkwC3BOjjpjsy0Qcff8FnmoByviCUMeq2H/RHbR/NbZaoCCXARzgXF6mJevHKL5XjT7/dWABCGl/szswTxpbu7Ixec9AChWRG5gJpJ3oLibrzrUDFIa7HOjeqcYERMeq/jAIE3dn4pZCfOJNtK7aDOOAi37S+FwG/H5lH3FxBAvAQbEv63vec/0HFLnpBarAdytl9NSxvZkmqcsWpkLxuVafGu+zPBOnUBVa/+ZaRlW4BGRGz7B0jqye+yzL+0KhKhTwTZWuz2U+Os92hS9MhSJO39jeRtdtIeDLybxAP1WHO4nCVOhqrobdhgW4n5e5UoWmlCoEpQotzr1XodKAokltAMubtlzOPGoZPktlgB+vPA4nb0VLYQxib6bJk42Vptc5AfsBUBzMDB6xbudNjVszdR+SFzQbGziyhy2ZWkll9KGA9l+CZvzddDqxLleykhrpZt0nIZdsqQtF+UxO6DoE2bLROpksntegyssqD3H04IUR4dclGzLicP/xDEN7XlI51W9kl0SXL1gCWW+kJSUld5j/wlY18F5JPmoAAAAASUVORK5CYII=)
              no-repeat;
            background-size: contain;
          }
        }

        .list_btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 82px;
          height: 36px;
          border: 1px solid #e0e0e0;
          border-radius: 5px;
          box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset;
          color: #686868;
          font-size: 14px;

          .icon_grey {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 4px;
            width: 16px;
            height: 16px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAkCAYAAAD7PHgWAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAOCSURBVHgBzZhNbtpAFMffeMyqG25Q9wSlNwgnCCyrJiFWACmrJCcAbkBXSIbIpDTKMrkB9ASlJ6iPgNS0ioTt1zdj/AHYxDYk5L/xjGf85jdvvt4Y4I2LpalkmvfF+fyfBuCUgg8ZsxqN4wmklLBh248lRNSy2NgI2O+PDkBhh4B4StlivAE25Jx3dP2zlWSDMawhsEqCjRnZeEiyEQsoe+v+aQGyS0grxrqNs6Or6CvD+HbKFGamtwHtxtlxZ/lVHJzzdwyApeUSnAEoFpNPyslytuIRNlX5u7KuV2WdwWDURYCLGBsWZYppbKirgKtw5P4JzZtOo3EyWa0rhg8ZmlRHWwCUxPfUSdmA69pDUPihQlBJNoSXQYHWso3He0qUvfajDV7f0rC67bDDLhmtteEZEWibLLUgwQtptGZjMWUCwF7vTlML9u+scPCCkCpXPyh+plBwggJy9zQLnBBtF22amJEJHgxVNhsAEz/vOPZlAIjgVoI04hXk0DokHEBWRb6nBVaTgHK/W6wmscKybMCbIGn+fIWMEm3TnmktskW5ihEVjTFXvnERfsGWWgxVG3KKnPSDHppISw8SnBYWsinsWwiWn1TgjUsC0hBb/gs6wN/DnoUMPvpp34PBsNLxU4G9iwUnmQRsNr9MYXHGkoreqt6PZPQDQUg2C+YgLY4bCDMt2JOQhdGPCMMCwPnc7kbqHfSvR68OKWKBiPeA83knADw/162lUwCh/ZqQcYGKruvWWjzYH4wo3IocUTFB5EvDiRCvXj+S4dbaPqhyuwqRVf3SnlzzHLVNQ1uFADZGpmlSVK0KT0YD11Pq1Q3sUMZgdEEA3bANtDh3PtHQBiFa7EkiKthzu4peaC5F6eFg8L0GO5KwFQNXjsJ57zeo1zM1XuDjMBzfjScFnOhwDJy1WvfZe3E8JFTr9eMHyCG6SFUozrtPA+eVp1AM5AxdpeydQOllGLclprhibhfTwHl1UmpbyDxwXr0MyguZF86rm1ECUi3wn5EL94xuX5+Sfn2I2yIvOGP/CMsCJ5Q5YBVHIrpOORr9OI5Dl/U7DZ6BE9+4rlNNCyeU2YO+DMOkYePj8LLFyDO87HsyDk50rNnUMy2s3ICbIJ+eKBLZAZxnc0ut7msJjeTeN7e+NImG6QeSnlSOLup54YR2cqtrnp0MhZeiZ7f8xYZAw3oyhC30H/vo/dbmeuwmAAAAAElFTkSuQmCC)
              no-repeat;
            background-size: contain;
          }

          &:hover {
            border: 1px solid #fe737a;

            .icon_grey {
              display: flex;
              width: 18px;
              height: 18px;
              background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHlSURBVHgB7ZntTcJAHMafNg7gBjJC3QAmME6gJvoZRtAN4LMxsgEbaDewTiBs0AEE/D+1JoT2yr1RzuR+yYXQl7vn12u56wFEIpFIxIEEhmyfh0OkYLmQr+dSSmywkpInD3l+8PzX4Tm+keEMV/X5xnUYC1SNAmMpk7pBFUspcymz5C4vXeqQ85+gwUEBaTiTj4WUAfRZSrmWEIVjHSOpY9l1UKdA3fA7uq+YihLb6mqzlal1Hb8SheoApYCEH8jHh2XDPqHEpaon0o4Tba+8b5hhodrZKiBX/xZm9+uxybYvVaYGqh4YIzRS3LRtbjwD9b3/hRBZp4Pk/m21u6nZA2tkCJVkM9rf1BRIAhZo+VFJ8b/QEigRLo1sTYEUylHv5LRka+sBHhRqLxwWqGeROcJjvj/DJaqHeIbwaJ1etwqIaS4zyZAkZuaTuQSPQBAPdCHhJ6qdSoH6fuPId0qJos6gROeNjIMHp9Z9j9BV+LYHdxeTd+I+JbTCE+1ViR4ltMMTo2WVHiSMwhPzdaHjSRiHJ8YC5AgSVuGJlQDxKGEdnlgLEA8STuGJkwBxkHAOT5wFiIWEl/DEiwAxkPAWnngTIBoSXsMTrwKkQ8J7eOJd4I96eZJ/YjDwpwSfIhKJRCKh8QM2/7mt6fWCsAAAAABJRU5ErkJggg==)
                no-repeat;
              background-size: contain;
            }

            .notice {
              color: #fe737a;
            }
          }
        }

        .list_btn_follow {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 82px;
          height: 36px;
          color: #686868;
          font-size: 14px;

          .icon_heart_red {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 4px;
            width: 16px;
            height: 16px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAACBElEQVRYR+3Xv0scQRTA8e+TC0TwTwiYkBQ2IvYBx1QJJIVgkUAE90QI2KQR0qmEkBSBpAlpEvcKwRSCTUC7G8E/QEFQKy/gnxA0kGMn7HLIJW7mx7q3WNw0V9zMm8+9fftmTrhmQ66Zhz7I9UT6Gbpyhszq5ARiZgGF4VYn4BHCdxJpyFzzuHsT03hwlyR5gfAYuI2hhnAKaBL5KHPNfRvqv4/MfFJDDPIZ4bklwC/gHS3eZHOGWQJeIdQsa75xxrws6J95c3JBHcwWwn1XirPvDRvZpzDtOX+Xcx7lofJBsVoHnnoFLzrJsCZ1PfPv8ksg83VyjAGzV3SfoHVGlNSbO91rLoNiFQNpEVcxGhLpyAU6yd6OakZLIn3HDlpVvx1vSXlUQ1vq+oYrQ+fAzfJ2tUTyBB0CIxWBDqSuR10Z+gC8rAQkvJdZvWgHfVH3GOCwgjpKu/y4RPrICsoab6zeZkdAb8eyRHrF2Rgz0JKqMcy691EQCk+Pmh88kxXd9gL1FGXBpPtaL2ilZ8qBcYJKzZQHxgtUCsoT4w3qQm12boIhZbxNiyd5BZwXJOiSb2KVHimbwENP0TYwJZFOe47XCAJ1epQvKhgT9Mi6f55HpgphCoMcmSqMuRLoAiW8JiH929NGWMOwGFIz3p3aqwJ7MCm4qHtg+CtkH+TKcD9Drgz9AS0gsyVs0KiWAAAAAElFTkSuQmCC)
              no-repeat;
            background-size: contain;
          }
        }
      }

      &:hover {
        background: none;

        .list_pur_name {
          color: #1d1d1d;
        }
      }
    }
  }

  .poten_tip {
    text-align: center;
  }

  .setKeyWords {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    width: 100%;
    height: 46px;

    .setBtn {
      width: 352px;
      height: 46px;
      background: #2cb7ca;
      border-radius: 6px;
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: CENTER;
      color: #ffffff;
    }
  }

  .el-pagination-container {
    margin-right: 40px;
  }
  ::v-deep {
    .list-header,
    .poten_li {
      .el-checkbox__label {
        font-size: 16px;
      }
      .el-checkbox__inner {
        width: 18px;
        height: 18px;
      }
      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #1d1d1d;
      }
      .el-checkbox__inner::after {
        width: 5px;
        height: 8px;
      }
    }
  }
  .empty-container {
    padding-bottom: 60px;
  }
}
</style>