<!--  -->
<template>
  <div class="service-detail">
    <div class="wrapper">
      <div class="top">
        <img
          class="bg"
          :src="require('@/assets/images/service-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: serviceType === 'guide' }"
                    @click="switchType('guide')"
                  >
                    <a>参观指南</a>
                    <div class="arrow" v-if="serviceType === 'guide'">
                      <img :src="require('@/assets/images/arrow.png')" alt="" />
                    </div>
                  </li>
                  <li
                    :class="{ cur: serviceType === 'message' }"
                    @click="switchType('message')"
                  >
                    <a>旅客留言</a>
                    <div class="arrow" v-if="serviceType === 'message'">
                      <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" v-if="this.serviceType === 'guide'">
                <div class="detail-title">参观指南</div>
                <div class="detail-content" v-html="visitGuideDetail.content"></div>
              </div>
              <div
                class="message-wrapper"
                v-if="this.serviceType === 'message'"
              >
                <div class="message-title">留言版</div>
                <div class="leave-message">
                  <div class="leave-message-content">
                    <textarea
                      placeholder="请输入留言(200字内)"
                      v-model="message"
                      maxlength="200"
                    ></textarea>
                    <div class="content-bottom">
                      <div class="content-bottom-ipt">
                        <span>昵称</span
                        ><input
                          type="text"
                          placeholder="游客昵称"
                          v-model="nickname"
                        />
                      </div>
                      <div class="content-bottom-btn" @click="sendMessage()">
                        发送
                      </div>
                    </div>
                  </div>
                </div>
                <ul>
                  <li v-for="(item,index) in dataList" :key="index">
                    <div class="icon">
                      <img
                        :src="require('@/assets/images/message-icon.png')"
                        alt=""
                      />
                    </div>
                    <div class="information">
                      <div class="information-des">
                        <div class="nickname">{{item.nickName}}</div>
                        <div class="leaveMsg-time">{{item.createTime}}</div>
                      </div>
                      <div class="information-msg">
                        {{item.content}}
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="my-paging" v-if="dataList.length">
                  <Paging
                    v-if="paging.total"
                    :paging="paging"
                    @changeCurrent="pageChange"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import Paging from '@/components/pagination'
export default {
  name: 'service-detail',
  // import引入的组件需要注入到对象中才能使用
  components: {
    Paging
  },
  data () {
    // 这里存放数据
    return {
      serviceType: 'guide',
      detail: {},
      message: '',
      nickname: '',
      dataList: [],
      paging: {
        pageSize: 8,
        pageNum: 1,
        total: 0,
        showSize: 8,
        current: 1
      },
      params: {
        pageNum: 1,
        pageSize: 8,
        type: ''
      },
      visitGuideDetail: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    paging: {
      deep: true,
      handler: function () {}
    }
  },
  // 方法集合
  methods: {
    switchType (type) {
      this.serviceType = type
    },
    back () {
      this.$router.push({
        path: '/service'
      })
    },
    async sendMessage () {
      // 调用留言接口
      if (!this.message) {
        this.$message.warning('请输入留言')
        return
      }
      if (!this.nickname) {
        this.$message.warning('请输入你的昵称')
        return
      }
      let result = await this.$http({
        method: 'post',
        url: '/api/web/comment/save',
        data: {content: this.message, nickname: this.nickname}
      })
      if (result['code'] === 0) {
        this.$message.success('留言成功')
        this.getList()
      } else {
        this.$message.error('留言失败')
      }
    },
    async getList () {
      let result = await this.$http({
        method: 'post',
        url: '/api/web/comment/list',
        data: this.params
      })
      this.dataList = result.data.list
      this.paging.total = result.data.total
    },
    pageChange (val) {
      console.log(val)
      this.paging.current = val
      this.params.pageNum = val
      this.getList()
    },
    async getVisitGuide () {
      let result = await this.$http({
        method: 'get',
        url: '/api/web/detail/1',
        data: {id: 1}
      })
      this.visitGuideDetail = result['data']
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.serviceType =
      (this.$route.query && this.$route.query.navType) || 'guide'
    this.getList()
    this.getVisitGuide()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.detail-content{
  /deep/img {
    display: block;
    margin: 10px auto;
    max-height: 400px;
  }
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.service-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 {
              width: 84%;
              margin: 94px auto 167px;
              overflow: hidden;
              .detail-title {
                width: 100%;
                text-align: center;
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 58px;
                color: #202020;
                opacity: 1;
              }
              // detail-content {
              // }
            }
            .message-wrapper {
              width: 95%;
              margin: 94px auto 0;
              overflow: hidden;
              .message-title {
                width: 100%;
                text-align: center;
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 58px;
                color: #202020;
                opacity: 1;
              }
              .leave-message {
                width: 98%;
                margin: 0 auto;
                height: 183px;
                background: rgba(255, 255, 255, 1);
                box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
                padding: 19px;
                margin-bottom: 21px;
                .leave-message-content {
                  width: 100%;
                  height: 100%;
                  background: rgba(201, 143, 105, 0.15);
                  border-radius: 6px;
                  border-color: none;
                  overflow: hidden;
                  > textarea {
                    display: block;
                    width: 95%;
                    height: 43px;
                    margin: 15px auto 42px;
                    border: none;
                    background: transparent;
                    &::placeholder {
                      font-size: 14px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      line-height: 24px;
                      color: #202020;
                      opacity: 0.6;
                    }
                  }
                  .content-bottom {
                    width: 95%;
                    margin: 0 auto;
                    display: flex;
                    justify-content: space-between;
                    .content-bottom-ipt {
                      > span {
                        display: inline-block;
                        width: 78px;
                        height: 31px;
                        background: linear-gradient(
                          90deg,
                          rgba(88, 90, 90, 1),
                          rgba(148, 145, 152, 1)
                        );
                        line-height: 31px;
                        text-align: center;
                        font-size: 14px;
                        font-family: Arial;
                        font-weight: bold;
                        color: #ffffff;
                        letter-spacing: 1px;
                      }
                      > input {
                        width: 235px;
                        height: 31px;
                        line-height: 31;
                        background: #ffffff;
                        border: none;
                        padding-left: 27px;
                        font-size: 14px;
                        font-family: Arial;
                        font-weight: bold;
                        color: #202020;
                        &::placeholder {
                          color: #202020;
                          font-size: 14px;
                          opacity: 0.6;
                        }
                      }
                    }
                    .content-bottom-btn {
                      width: 108px;
                      height: 31px;
                      background: #945335;
                      line-height: 31px;
                      text-align: center;
                      font-size: 14px;
                      font-family: Arial;
                      font-weight: bold;
                      letter-spacing: 1px;
                      color: #ffffff;
                      opacity: 1;
                      cursor: pointer;
                    }
                  }
                }
              }
              > ul {
                width: 98%;
                margin: 0 auto;
                > li {
                  width: 100%;
                  margin-bottom: 5px;
                  &:last-child {
                    margin-top: none;
                  }
                  background: rgba(255, 255, 255, 1);
                  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
                  padding: 39px 34px 43px 36px;
                  display: flex;
                  .icon {
                    min-width: 30px;
                    width: 30px;
                    height: 30px;
                    margin-right: 20px;
                    > img {
                      width: 100%;
                    }
                  }
                  .information {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .information-des {
                      margin-bottom: 26px;
                      display: flex;
                      color: #202020;
                      font-family: Arial;
                      line-height: 24px;
                      .nickname {
                        margin-right: 66px;
                        font-size: 14px;
                        font-weight: bold;
                      }
                      .leaveMsg-time {
                        font-size: 12px;
                        font-weight: normal;
                        font-style: italic;
                        opacity: 0.7;
                      }
                    }
                    .information-msg {
                      font-size: 14px;
                      font-family: Microsoft YaHei;
                      font-weight: 500;
                      line-height: 24px;
                      color: #202020;
                      overflow-y: auto;
                      height: 80px;
                    }
                  }
                }
              }
              .my-paging {
                margin: 25px auto;
                text-align: right;
              }
            }
          }
        }
      }
    }
  }
}
</style>
