<template>
  <div class="portrait_page content">
    <div class="header">
      <span class="span">企业画像：</span>
      <el-tabs v-model="queryParams.labelId" @tab-click="handleClick">
        <el-tab-pane
          :label="item.name"
          :name="item.id"
          v-for="item in portraitList"
          :key="item.id"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="screen_l_b" v-for="item in portraitData" :key="item.id">
      <div class="title text_hidden_one pointer">
        <router-link
          target="_blank"
          :to="{
            path: '/result',
            query: { key: 'policy', id: item.id }
          }"
        >
          {{ item.title }}
        </router-link>
      </div>
      <div class="info">
        <span>来源：{{ item.source }}</span>
        <span>发布：{{ item.listDate }}</span>
      </div>
    </div>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getPortraitList"
    />
  </div>
</template>

<script>
import { getPolicyMatch } from '@/api/home/notice';
import { mapGetters } from 'vuex';
import { userInfo, getLabelSetting } from '@/api/home/info';
export default {
  data() {
    return {
      activeName: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        labelId: ''
      },
      total: 0,
      portraitList: [], // 企业画像
      portraitData: [], // 企业画像绑定的政策列表
      portraitTotal: 0
    };
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    // 获取企业画像数据列表
    getPortraitList() {
      getPolicyMatch(this.queryParams).then(({ data }) => {
        this.portraitData = data.list;
        this.total = data.total;
      });
    },
    handleClick() {
      this.getPortraitList();
    }
  },
  created() {
    if (this.token) {
      userInfo().then(({ data }) => {
        if (data.companyId) {
          getLabelSetting({ companyId: data.companyId }).then(({ data }) => {
            if (data.length) {
              this.portraitList = data.map(item =>
                item.labelList
                  ? item.labelList.filter(v => v.isHas)[0]
                    ? item.labelList.filter(v => v.isHas)[0]
                    : ''
                  : undefined
              );
              this.queryParams.labelId = this.portraitList[0].id;
              this.getPortraitList();
            }
          });
        }
      });
    } else {
      this.msgSuccess('请先登录');
    }
  }
};
</script>

<style lang="scss" scoped>
.portrait_page {
  margin-top: 30px;
  .header {
    display: flex;
    align-items: center;
    height: 90px;
    padding: 30px;
    background-color: #f5f5f5;
    .el-tabs {
      margin-left: 20px;
      /deep/.el-tabs__nav-wrap::after {
        height: 0;
      }
    }
  }
  .screen_l_b {
    height: 110px;
    line-height: 45px;
    margin-top: 20px;
    padding: 0 20px;
    border-bottom: 1px solid #e3e3e3;
    .title {
      font-size: 18px;
      color: #333;
      // text-align: left;
    }
    .info {
      font-size: 16px;
      color: #999;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
