<!--  -->
<template>
  <div class="activity-detail">
    <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: activityType === 'onLine' }"
                    @click="switchType('onLine')"
                  >
                    <a>线上活动</a>
                    <div class="arrow" v-if="activityType === 'onLine'">
                      <img :src="require('@/assets/images/arrow.png')" alt="" />
                    </div>
                  </li>
                  <li
                    :class="{ cur: activityType === 'volunteer' }"
                    @click="switchType('volunteer')"
                  >
                    <a>志愿者服务</a>
                    <div class="arrow" v-if="activityType === 'volunteer'">
                      <img :src="require('@/assets/images/arrow.png')" alt="" />
                    </div>
                  </li>
                  <li
                    :class="{ cur: activityType === 'satisfaction' }"
                    @click="switchType('satisfaction')"
                  >
                    <a>满意度调查</a>
                    <div class="arrow" v-if="activityType === 'satisfaction'">
                      <img :src="require('@/assets/images/arrow.png')" alt="" />
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="con">
            <div class="back" @click="back">
              <img :src="require('@/assets/images/back.png')" alt="" />
            </div>
            <img
              class="bg"
              :src="require('@/assets/images/survey-type-con-bg.png')"
              alt=""
            />
            <div class="detail">
              <div class="detail-wrapper">
                <div class="detail-title">{{ detail.name }}</div>
                <div class="detail-desc">
                  <span
                    >发布时间:&nbsp;{{ detail.createTime }}&nbsp;&nbsp;</span
                  >
                  <span>分类:&nbsp;{{ detail.type === 'online'? '线上活动': detail.type === 'volunteer'? '志愿者服务':'' }}</span>
                </div>
                <div class="detail-con" v-html="detail.content"></div>
              </div>
              <!-- <div class="bottom-nav">
                <div class="bottom-nav-left">
                  <img
                    :src="require('@/assets/images/paging-prev.png')"
                    alt=""
                  />
                  <a class="prev-title">上一篇&nbsp;&nbsp;标题标题</a>
                </div>
                <div class="bottom-nav-right">
                  <a class="next-title">下一篇&nbsp;&nbsp;标题标题</a>
                  <img
                    :src="require('@/assets/images/paging-next.png')"
                    alt=""
                  />
                </div>
              </div> -->
            </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 {
      activityType: 'onLine',
      detail: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    switchType (type) {
      this.$router.push({ path: '/activity-type', query: { type } })
    },
    back () {
      this.$router.push({
        path: '/activity-type',
        query: { type: this.detail.navType || '' }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // console.log("this.$route.query", this.$route.query);
    this.detail = this.$route.query
    this.activityType = this.detail.navType
    console.log('this.detail', this.detail)
    // console.log("this.detail", this.detail);
  },
  // 生命周期 - 挂载完成（可以访问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;
}
.activity-detail {
  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%;
            }
          }
          .detail {
            width: 100%;
            .detail-wrapper {
              font-family: Microsoft YaHei;
              color: #202020;
              line-height: 24px;
              width: 86%;
              margin: 152px auto 80px;
              max-width: 708px;
              overflow-x: scroll;
              .detail-title {
                text-align: center;
                font-size: 18px;
                font-weight: bold;
              }
              .detail-desc {
                text-align: center;
                margin-top: 8px;
                font-size: 12px;
                font-weight: 400;
              }
              .detail-con {
                margin-top: 32px;
              }
            }
            .bottom-nav {
              width: 100%;
              display: flex;
              justify-content: space-between;
              height: 61px;
              line-height: 61px;
              .bottom-nav-left,
              .bottom-nav-right {
                cursor: pointer;
                overflow: hidden;
                > img {
                  width: 16px;
                  vertical-align: middle;
                }
                > a {
                  vertical-align: middle;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  line-height: 21px;
                  color: #000000;
                  opacity: 0.8;
                }
              }
              .bottom-nav-left {
                  margin-left: 64px;
                  > img {
                      margin-right: 10px;
                  }
                  &:hover {
                      >a {
                          color:rgba(160, 28, 38, 1);
                      }
                  }
              }
              .bottom-nav-right {
                  margin-right: 64px;
                  > img {
                      margin-left: 10px;
                  }
                  &:hover {
                      >a {
                          color:rgba(160, 28, 38, 1);
                      }
                  }
              }
            }
          }
        }
      }
    }
  }
}
</style>
