<!--  -->
<template>
  <div class="survey-type">
    <div class="wrapper">
      <div class="top">
        <img
          class="bg"
          :src="require('@/assets/images/information-type-top-bg.png')"
          alt=""
        />
      </div>
      <div class="bottom">
        <img
          class="bg"
          :src="require('@/assets/images/survey-type-bottom-bg.png')"
          alt=""
        />

        <div class="content">
          <div class="nav">
            <img
              class="bg"
              :src="require('@/assets/images/survey-type-nav-bg.png')"
              alt=""
            />
            <div class="nav-con">
              <div class="nav-con-title">资讯</div>
              <div class="nav-con-type">
                <ul>
                  <li
                    :class="{ cur: informationType === 'recentNews' }"
                    @click="switchType('recentNews')"
                  >
                    <a>近期新闻</a>
                    <div class="arrow" v-if="informationType === 'recentNews'">
                      <img :src="require('@/assets/images/arrow.png')" alt="" />
                    </div>
                  </li>
                  <li
                    :class="{ cur: informationType === 'activity' }"
                    @click="switchType('activity')"
                  >
                    <a>专项活动</a>
                    <div class="arrow" v-if="informationType === 'activity'">
                      <img :src="require('@/assets/images/arrow.png')" alt="" />
                    </div>
                  </li>
                  <li
                    :class="{ cur: informationType === 'infor' }"
                    @click="switchType('infor')"
                  >
                    <a>信息公开</a>
                    <div class="arrow" v-if="informationType === 'infor'">
                      <img :src="require('@/assets/images/arrow.png')" alt="" />
                    </div>
                  </li>
                  <li
                    :class="{ cur: informationType === 'book' }"
                    @click="switchType('book')"
                  >
                    <a>出版书籍</a>
                    <div class="arrow" v-if="informationType === 'book'">
                      <img :src="require('@/assets/images/arrow.png')" alt="" />
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="con">
            <img
              class="bg"
              :src="require('@/assets/images/survey-type-con-bg.png')"
              alt=""
            />
            <ul class="list" v-if="informationType === 'book'">
              <li v-for="(item, index) in dataList" :key="index">
                <div class="pic">
                  <img
                    :src="$cdnUrl+item.thumb"
                    alt=""
                  />
                </div>
                <div class="desc">
                  <div class="desc-title">{{ item.name || "--" }}</div>
                  <div class="desc-content" v-html="item.description"></div>
                  <div class="desc-time">出版时间 {{ item.pubDate.slice(0,7)}}</div>
                </div>
              </li>
            </ul>
            <ul class="article" v-if="informationType != 'book'">
              <li
                v-for="(item, index) in dataList"
                :key="index"
                @click="toDetail(item)"
              >
                <div class="desc">
                  <div class="desc-title">{{ item.name || "--" }}</div>
                  <div class="desc-time">{{ item.createTime || "--" }}</div>
                </div>
              <a :href="item.wxUrl" class="skip" target="_blank" v-if="item.wxUrl"></a>
              </li>
            </ul>
            <div v-if="informationType != 'book'">
              <el-empty
                :image-size="200"
                v-if="dataList.length === 0"
              ></el-empty>
            </div>
            <div class="my-paging" v-if="dataList.length">
              <Paging
                v-if="paging.total"
                :paging="paging"
                @changeCurrent="pageChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import Paging from '@/components/pagination'
export default {
  name: 'survey',
  // import引入的组件需要注入到对象中才能使用
  components: {
    Paging
  },
  data () {
    // 这里存放数据
    return {
      informationType: 'recentNews',
      dataList: [],
      paging: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        showSize: 10,
        current: 1
      },
      params: {
        pageNum: 1,
        pageSize: 10,
        type: ''
      },
      typeChange: {
        recentNews: 'news',
        infor: 'info',
        activity: 'activity',
        book: 'book'
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    paging: {
      deep: true,
      handler: function () {
        // this.getCollection()
      }
    }
  },
  // 方法集合
  methods: {
    async getList () {
      let result = await this.$http({
        method: 'post',
        url: '/api/web/news/list',
        data: this.params
      })
      this.dataList = result.data.list
      this.paging.total = result.data.total
    },
    async getBookList () {
      let result = await this.$http({
        method: 'post',
        url: '/api/web/book/list',
        data: this.params
      })
      this.dataList = result.data.list
      this.paging.total = result.data.total
    },
    switchType (type) {
      this.informationType = type
      this.params['type'] = this.typeChange[this.informationType]
      this.params['pageNum'] = 1
      this.paging.current = 1
      if (type === 'book') {
        this.getBookList()
        return
      }
      this.getList()
    },
    back () {
      this.$router.push({ path: '/information' })
    },
    pageChange (val) {
      console.log(val)
      this.paging.current = val
      this.params.pageNum = val
      this.getList()
    },
    toDetail (item) {
      // console.log('item',item)
      if (item.wxUrl) return
      this.$router.push({
        path: '/information-detail',
        query: { ...item, navType: this.informationType }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.informationType =
      (this.$route.query && this.$route.query['type']) || 'recentNews'
    this.params['type'] = this.typeChange[this.informationType]
    if (this.params['type'] === 'book') {
      this.getBookList()
      return
    }
    this.getList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.survey-type {
  width: 100%;
  margin-bottom: 98px;
  .wrapper {
    width: 100%;
    .top {
      width: 100%;
      height: 278px;
      position: relative;
    }
    .bottom {
      width: 100%;
      position: relative;
      .content {
        min-width: 1090px;
        margin: 0 auto;
        width: 57%;
        display: flex;
        justify-content: center;
        .nav {
          flex: 1;
          margin-right: 1%;
          margin-top: -68px;
          position: relative;
          .nav-con {
            width: 85%;
            margin: 94px auto 0;
            .nav-con-title {
              background: #945335;
              padding: 14.5px 0 14.5px 46px;
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #ffffff;
              opacity: 1;
            }
            .nav-con-type {
              margin-top: 3px;
              background: rgba(148, 83, 53, .6);
              overflow: hidden;
              > ul {
                width: 100%;
                margin-top: 21px;
                margin-bottom: 105px;
                > li {
                  width: 100%;
                  padding: 8px 0 8px 51px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #000000;
                  position: relative;
                  cursor: pointer;
                  .arrow {
                    position: absolute;
                    top: 10px;
                    right: 11.5px;
                    width: 10.5px;
                    height: 18px;
                    > img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
                .cur {
                  background: linear-gradient(180deg, #585a5a 0%, #949198 100%);
                  color: #ffffff;
                }
              }
            }
          }
        }
        .con {
          flex: 3;
          margin-top: -68px;
          position: relative;
          .back {
            width: 19px;
            position: absolute;
            left: 26px;
            top: 97px;
            cursor: pointer;
            > img {
              width: 100%;
            }
          }
          .list {
            margin: 94px 19px 38px;
            > li {
              background: linear-gradient(
                180deg,
                rgba(88, 90, 90, 0.25) 0%,
                rgba(148, 145, 152, 0.25) 100%
              );
              box-shadow: 0px 0px 6px #000000;
              border-radius: 4px;
              padding: 9px 25px 13px 9px;
              display: flex;
              justify-content: flex-start;
              margin-bottom: 30px;
              &:nth-last-child(1) {
                margin-bottom: 0;
              }
              .pic {
                flex: 4;
                width: 313px;
                overflow: hidden;
                position: relative;
                > img {
                  width: 100%;
                  // max-width: 100%;
                  // max-height: 100%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                }
              }

              .desc {
                flex: 5;
                margin-left: 34px;
                margin-top: 30px;
                .desc-title {
                  font-size: 18px;
                  font-family: Arial;
                  font-weight: bold;
                  line-height: 24px;
                  color: #a01c26;
                }
                .desc-content {
                  margin: 22px 0;
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  line-height: 24px;
                  width: 400px;
                  height: 189px;
                  overflow-y: auto;
                  overflow-x: hidden;
                  color: #202020;
                }
                .desc-time {
                  font-size: 12px;
                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  line-height: 24px;
                  color: #202020;
                  opacity: 0.6;
                  position: relative;
                }
              }
            }
            > li:hover {
              box-shadow: 0px 0px 12px #000000;
            }
          }
          .article {
              .skip{
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              }

            margin: 94px 19px 38px;
            > li {
              position: relative;
              background: linear-gradient(
                180deg,
                rgba(222, 222, 222, 0.6) 0%,
                rgba(255, 255, 255, 0.6) 100%
              );
              cursor: pointer;
              border-radius: 4px;
              display: flex;
              justify-content: flex-start;
              margin-bottom: 8px;
              padding: 17px 27px;
              &:nth-last-child(1) {
                margin-bottom: 0;
              }
              .desc {
                width: 100%;
                display: flex;
                justify-content: space-between;
                .desc-title {
                  font-size: 20px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  line-height: 26px;
                  color: #202020;
                  opacity: 1;
                  &::before {
                    content: "";
                    display: inline-block;
                    width: 6px;
                    height: 6px;
                    background: linear-gradient(
                      180deg,
                      #585a5a 0%,
                      #949198 100%
                    );
                    margin-bottom: 3px;
                    margin-right: 14px;
                    border-radius: 50%;
                  }
                }
                .desc-time {
                  font-size: 18px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  line-height: 24px;
                  color: #202020;
                  opacity: 0.6;
                }
              }
            }
            > li:hover {
              box-shadow: 0px 3px 6px rgba(0, 0, 0, 1);
            }
          }
          .my-paging {
            margin: 25px auto;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>
