<template>
  <div class="notice_page p0-100">
    <!-- 搜索部分 -->
    <div class="search">
      <div class="search_input" style="display:flex">
        <span>通知公告检索</span>
        <el-input
          v-model="queryParams.title"
          placeholder="请输入搜索关键字"
          @keyup.enter.native="getList"
        ></el-input>
        <el-button type="warning" @click="getList">搜索</el-button>
      </div>
      <div class="tags">
        <span class="txt">热门搜索：</span>
        <el-tag effect="dark" @click="setSearchVal('高新技术企业')"
          >高新技术企业</el-tag
        >
        <el-tag effect="dark" @click="setSearchVal('科技型中小企业')"
          >科技型中小企业</el-tag
        >
        <el-tag effect="dark" @click="setSearchVal('科技孵化器')"
          >科技孵化器</el-tag
        >
        <!-- <el-button type="primary" size="mini" round>高新技术企业</el-button> -->
        <!-- <el-button type="primary" size="mini" round>科技型中小企业</el-button> -->
        <!-- <el-button type="primary" size="mini" round>科技孵化器</el-button> -->
      </div>
    </div>
    <!-- 筛选部分 -->
    <div class="screen">
      <div class="screen_l" v-loading="loading">
        <!-- 检索条件 -->
        <div class="screen_l_t">
          <div class="screen_l_t_item">
            <span class="text_col">级别：</span>
            <el-radio-group v-model="city" size="medium">
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button
                :label="item.label"
                v-for="item in levelList"
                :key="item.label"
              >
                {{ item.name }}
              </el-radio-button>
            </el-radio-group>
          </div>
          <div class="screen_l_t_item" v-if="city == 2 || city == 3">
            <el-radio-group v-model="queryParams.city" size="medium">
              <el-radio-button
                :label="item.value"
                v-for="item in levelList_2"
                :key="item.value"
              >
                {{ item.label }}
              </el-radio-button>
            </el-radio-group>
          </div>
          <div class="screen_l_t_item">
            <span class="text_col">归口：</span>
            <el-radio-group v-model="queryParams.attribute" size="medium">
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button
                :label="item.value"
                v-for="item in attributeOptions"
                :key="item.value"
              >
                {{ item.label }}
              </el-radio-button>
            </el-radio-group>
          </div>
          <div
            class="screen_l_t_item"
            v-for="(item, index) in labelList"
            :key="item.id"
          >
            <span class="text_col">{{ item.name }}：</span>
            <el-radio-group v-model="queryParams.labelIds[index]" size="medium">
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button
                :label="i.id"
                v-for="i in item.mapList"
                :key="i.id"
              >
                {{ i.name }}
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <!-- 检索列表 -->
        <div class="screen_l_b" v-for="item in dataList" :key="item.id">
          <div class="l">
            <!-- <div class="title text_hidden_one pointer" style="width:700px">
              {{ item.title }}
            </div> -->
            <div class="title text_hidden_one pointer" style="width:700px">
              <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>
          <div class="r" style="min-width:120px">
            <el-tag type="warning" effect="dark" v-if="item.cutOffTime"
              >截至到{{ parseTime(item.cutOffTime, '{y}-{m}-{d}') }}</el-tag
            >
            <!-- <span v-if="token">
              <el-button type="primary" size="mini">
                <i class="el-icon-star-on"></i><span>收藏</span>
              </el-button>
              <el-button type="info" size="mini">
                <i class="el-icon-star-on"></i><span>取消收藏</span>
              </el-button>
            </span> -->
          </div>
        </div>

        <div style="text-align: center;margin:30px 0" v-show="!total">
          <div
            style="width:210px;height:210px;display: inline-block;color:#999"
          >
            <img
              style="width:100%;height:100%;"
              src="@/assets/image/empty.png"
              alt=""
            />
            暂无数据
          </div>
        </div>
        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <div class="screen_r" v-if="token">
        <div class="title">政策匹配</div>
        <div class="tabs">
          <div class="tabs_row">
            <span class="span">企业画像：</span>
            <span class="span" v-if="!portraitList.length">无数据</span>
            <el-tabs v-model="activeName" @tab-click="handleClick" v-else>
              <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="tabs_item" v-for="item in portraitData" :key="item.id">
            <!-- <div class="text_hidden_one pointer">{{ item.title }}</div> -->
            <div class="text_hidden_one pointer">
              <router-link
                target="_blank"
                :to="{
                  path: '/result',
                  query: { key: 'policy', id: item.id }
                }"
              >
                {{ item.title }}
              </router-link>
            </div>
            <div>来源：{{ item.source }}</div>
          </div>
          <div class="more">
            <!-- query: { key: 'policy', id: item.id } -->
            <router-link
              target="_blank"
              :to="{
                path: '/portrait',
                query: { key: 'policy', val: '企业画像' }
              }"
            >
              <el-button
                type="primary"
                size="mini"
                v-show="portraitData.length >= 4"
              >
                查看更多
              </el-button>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import {
  getDictListByStatus,
  getCityByLevel,
  getLabel,
  getPolicyList,
  getPolicyMatch
} from '@/api/home/notice';
import { userInfo, getLabelSetting } from '@/api/home/info';
export default {
  data() {
    return {
      loading: true,
      activeName: '',
      activeID: '',
      city: '', // 临时城市
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        city: '',
        attribute: '',
        labelId: [],
        labelIds: [],
        title: ''
      },
      total: 0,
      dataList: [],
      levelList: [
        {
          label: 'AH',
          name: '安徽省'
        },
        {
          label: '2',
          name: '地级市'
        },
        {
          label: '3',
          name: '合肥区县'
        }
      ],
      levelList_2: [],
      levelList_3: [],
      levelList_4: [],
      // 归口选项
      attributeOptions: [
        {
          value: 'KJJ',
          label: '科技'
        },
        {
          value: 'JXJ',
          label: '经信'
        },
        {
          value: 'FGW',
          label: '发改'
        },
        {
          value: 'OTHER',
          label: '其他'
        }
      ],
      labelList: [],
      portraitList: [], // 企业画像
      portraitData: [], // 企业画像绑定的政策列表
      portraitTotal: 0
    };
  },
  computed: {
    ...mapGetters(['token'])
  },
  watch: {
    city(a, b) {
      if (a == '' || a == 'AH') {
        this.queryParams.city = this.city;
      } else if (a == 2) {
        this.levelList_2 = this.levelList_3;
        this.queryParams.city = this.activeID || this.levelList_2[0].value;
      } else if (a == 3) {
        this.levelList_2 = this.levelList_4;
        this.queryParams.city = this.levelList_2[0].value;
      }
    },
    'queryParams.city'() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    'queryParams.attribute'() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    'queryParams.labelIds'() {
      this.queryParams.pageNum = 1;
      this.getList();
    }
  },
  methods: {
    getList() {
      this.loading = true;
      this.queryParams.labelId = this.queryParams.labelIds.filter(item => {
        return item !== '';
      });
      getPolicyList(this.queryParams).then(({ data }) => {
        this.dataList = data.list;
        this.total = data.total;
        this.loading = false;
      });
    },
    setSearchVal(val) {
      this.queryParams.title = val;
    },
    // 获取企业画像数据列表
    getPortraitList() {
      const query = {
        labelId: this.activeName,
        pageNum: 1,
        pageSize: 4
      };
      getPolicyMatch(query).then(({ data }) => {
        this.portraitData = data.list;
        this.portraitTotal = data.total;
      });
    },
    // 获取标签
    getLabelList(flag) {
      getLabel().then(({ data }) => {
        this.labelList = data;
        for (let i = 0; i < this.labelList.length; i++) {
          this.queryParams.labelIds.push('');
        }
        this.getCityList();
        flag ? this.getList() : '';
      });
    },
    handleClick() {
      this.getPortraitList();
    },
    // 获取所有城市列表
    getCityList() {
      // getDictListByStatus({ type: 5 }).then(({ data }) => {
      //   this.levelList_3 = data;
      // });
      // getDictListByStatus({ type: 6 }).then(({ data }) => {
      //   this.levelList_4 = data;
      // });
      getCityByLevel({ level: 2 }).then(({ data }) => {
        this.levelList_3 = data;
      });
      getCityByLevel({ level: 3 }).then(({ data }) => {
        this.levelList_4 = data;
      });
    }
  },
  created() {
    const { key, val } = this.$route.query;
    if (key) {
      getLabel().then(({ data }) => {
        this.labelList = data;
        for (let i = 0; i < this.labelList.length; i++) {
          this.queryParams.labelIds.push('');
        }
        if (key == 2) {
          // getDictListByStatus({ type: 5 }).then(({ data }) => {
          //   this.levelList_3 = data;
          //   this.city = key;
          //   this.activeID =
          //     data.find(item => {
          //       return item.name.indexOf(val) != -1;
          //     }).id || '';
          //   this.getList();
          // });
          // getDictListByStatus({ type: 6 }).then(({ data }) => {
          //   this.levelList_4 = data;
          // });
          getCityByLevel({ level: 2 }).then(({ data }) => {
            this.levelList_3 = data;
            this.city = key;
            this.activeID =
              data.find(item => {
                return item.label.indexOf(val) != -1;
              }).value || '';
            this.getList();
          });
          getCityByLevel({ level: 3 }).then(({ data }) => {
            this.levelList_4 = data;
          });
        } else if (key == 3) {
          // getDictListByStatus({ type: 5 }).then(({ data }) => {
          //   this.levelList_3 = data;
          // });
          // getDictListByStatus({ type: 6 }).then(({ data }) => {
          //   this.levelList_4 = data;
          //   this.city = key;
          //   this.getList();
          // });
          getCityByLevel({ level: 2 }).then(({ data }) => {
            this.levelList_3 = data;
          });
          getCityByLevel({ level: 3 }).then(({ data }) => {
            this.levelList_4 = data;
            this.city = key;
            this.getList();
          });
        } else {
          this.city = key;
          this.getList();
        }
      });
      // this.city = key;
    }
    // 获取标签和城市列表
    else this.getLabelList(true);
    // 企业画像
    if (this.token) {
      userInfo().then(({ data }) => {
        if (data.companyId) {
          getLabelSetting({ companyId: data.companyId }).then(({ data }) => {
            if (data.length) {
              const arrs = data.map(item =>
                item.labelList ? item.labelList.filter(v => v.isHas) : undefined
              );
              arrs.map(item => {
                this.portraitList = [...this.portraitList, ...item];
              });
              this.activeName = this.portraitList[0].id;
              this.getPortraitList();
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.notice_page {
  .search {
    padding-top: 52px;
    padding-bottom: 52px;
    text-align: center;
    .search_input {
      display: flex;
      justify-content: center;
      align-items: center;
      /deep/.el-input--medium .el-input__inner {
        height: 40px;
        line-height: 40px;
        border-radius: 6px 0 0 6px;
        border: 1px solid #ffa32c;
        border-right: 0;
      }
      span:nth-child(1) {
        color: #333;
        font-size: 24px;
        margin-right: 21px;
      }
      .el-input {
        width: 304px;
      }
      .el-button {
        border-radius: 0 6px 6px 0;
        background-color: #ffa32c;
        font-size: 18px;
      }
    }
    .tags {
      margin-top: 26px;
      .txt {
        font-size: 18px;
        color: #999;
      }
      .el-tag {
        cursor: pointer;
        border-radius: 20px;
        margin-right: 18px;
      }
    }
  }
  .screen {
    display: flex;
    .screen_l {
      flex: 2;
      .screen_l_t {
        border-radius: 6px;
        background-color: #f8f8f8;
        .screen_l_t_item {
          // height: 50px;
          // line-height: 50px;
          display: flex;
          align-items: center;
          padding: 0 20px;
          .text_col {
            min-width: 100px;
            color: #333;
            font-size: 18px;
          }
          .el-radio-group {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .el-radio-button {
              margin: 10px 0;
            }
          }
        }
      }
      .screen_l_b {
        // .screen_l_b_item {
        padding: 0 20px;
        height: 110px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e3e3e3;
        // }
        .l {
          .title {
            font-size: 18px;
            color: #333;
            margin-bottom: 16px;
            text-align: left;
          }
          .info {
            font-size: 16px;
            color: #999;
            span {
              margin-right: 30px;
            }
          }
        }
        .r {
          .el-button {
            margin-left: 10px;
          }
        }
      }
    }
    .screen_r {
      flex: 1;
      margin-left: 10px;
      max-width: 310px;
      .title {
        color: #ffffff;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        text-align: center;
        background: #3394ff;
        border-radius: 6px 6px 0px 0px;
      }
      .tabs {
        max-height: 551px;
        background: #f8f8f8;
        padding: 0px 14px 14px;
        .tabs_row {
          height: 60px;
          display: flex;
          align-items: center;
          .span {
            width: 30%;
            min-width: 84px;
          }
          .el-tabs {
            // width: 240px;
            width: 70%;
            /deep/.el-tabs__header {
              margin: 0 0 8px;
            }
            /deep/.el-tabs__nav-wrap::after {
              height: 0;
            }
            /deep/.el-tabs__item.is-active {
              font-weight: bold;
              color: #1890ff;
            }
          }
        }
        .tabs_item {
          height: 110px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-bottom: 1px solid #e3e3e3;
          div:nth-child(1) {
            font-size: 18px;
            color: #333333;
          }
          div:nth-child(2) {
            margin-top: 16px;
            font-size: 16px;
            color: #999999;
          }
        }
        .more {
          height: 40px;
          text-align: center;
          .el-button {
            margin-top: 12px;
          }
        }
      }
    }
  }
}
</style>
