<!--
 * @Description: 政策咨询
 * @Author: 空白格
 * @Date: 2022-08-11 09:15:53
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-12 08:58:41
 * @FilePath: \veterans_client_web\src\views\PolicyAdvice\PolicyAdviceIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main policy-advice">
    <BannerBreadcrumb title="政策咨询"/>
    <!-- 内容 -->
    <div class="app-main-box policy-advice-box">
      <div class="policy-advice-box-logo">
        <el-image
          class="image"
          :src="require('@/assets/images/policy-advice-logo.png')"
          fit="cover"
        ></el-image>
      </div>
      <div class="app-main-box-content policy-advice-box-policy">
        <el-tabs v-model="queryParams.artCategoryId" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in policyTypeList"
            :key="index"
            :label="item.label"
            :name="item.text"
          >
            <ul class="policy-list" v-loading="loading">
              <li class="policy-list-item" v-for="(item, index) in policyList" :key="index">
                <div class="policy-list-title">{{ item.artTitle }}</div>
                <div class="policy-list-icon">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import BannerBreadcrumb from '@/components/BannerBreadcrumb'
import { getDictData } from "@/api/Dict";
import { getPolicyData } from "@/api/PolicyAdvice";
export default {
  name: "PolicyAdviceIndex",
  components: {
    BannerBreadcrumb
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        artCategoryId: "",
      },
      policyTypeList: [],
      policyList: [],
      loading: false
    };
  },
  created() {
    this.getDictList();
  },
  methods: {
    /**
     * 获取字典数据
     * @date 2022-08-11
     * @returns {any}
     */
    getDictList() {
      getDictData({ key: "policy_type" }).then((res) => {
        this.policyTypeList = res.data;
        if (this.policyTypeList.length) {
          this.queryParams.artCategoryId = this.policyTypeList[0].text;
          this.getPolicyList();
        }
      });
    },
    /**
     * 获取政策咨询列表数据
     */
    getPolicyList() {
      this.loading = true
      getPolicyData(this.queryParams).then((res) => {
        this.policyList = res.rows;
        this.loading = false
      });
    },
    /**
     * tab点击
     * @date 2022-08-11
     * @param {any} tab
     * @returns {any}
     */
    handleClick(tab) {
      this.queryParams.pageNum = 1;
      this.queryParams.artCategoryId = tab.name;
      this.getPolicyList();
    },
  },
};
</script>

<style lang="scss" scoped>
.policy-advice {
  &-box {
    &-logo {
      width: 100%;
      height: 157px;
      .image {
        width: 100%;
        height: 100%;
      }
    }
    &-policy {
      min-height: 400px;
      :deep(.el-tabs__item) {
        font-size: 20px;
        font-weight: 500;
        color: #000000;
      }
      :deep(.el-tabs__item:hover) {
        color: #163da5;
      }
      :deep(.el-tabs__item.is-active) {
        color: #163da5;
      }
      :deep(.el-tabs__active-bar) {
        background-color: #163da5;
      }
      .policy-list {
        &-item {
          display: flex;
          justify-content: space-between;
          border-bottom: dashed 1px #d7d7d7;
          color: #2B2B2B;
          font-size: 16px;
          height: 50px;
          line-height: 50px;
          margin-bottom: 10px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
