<template>
  <div class="footer">
    <div class="con">
      <div class="visit">
        <span class="txt">网站访问量</span>
        <span class="visits">
          <span class="num">{{visits}}</span>
        </span>
      </div>
      <ul>
        <li><a @click="routeTo('survey-type', 'introduction')">本馆介绍</a></li>
        <li>
          <a @click="routeTo('information-type', 'recentNews')">近期新闻</a>
        </li>
        <li><a @click="routeTo('exhibition-type', 'hot')">正在热展</a></li>
        <li>
          <a @click="routeTo('activity-type', 'satisfaction')">问卷调查</a>
        </li>
        <li><a @click="routeTo('service-detail', 'message')">网站留言</a></li>
      </ul>
      <div class="address">
        <p>
          地址：大理古城复兴路111号 邮编：671000 传真：0872-2670196
          电话：0872-2670196
        </p>
        <p>Copyright 2018-2028 大理市博物馆 版权所有 滇lCP备20001302号-1</p>
      </div>
    </div>
  </div>
</template>

<script>
const DIGIT = 4
export default {
  name: 'mfooter',
  data () {
    return {
      visits: 0
    }
  },
  created () {
    this.getVisit()
  },
  methods: {
    routeTo (path, type) {
      if (type === 'message') {
        this.$router.push({ path, query: { navType: type } })
        return
      }
      this.$router.push({ path, query: { type } })
    },
    async getVisit () {
      let result = await this.$http({
        method: 'get',
        url: '/api/web/addVisitWeb/web'
      })
      this.visits = this.addPreZero(DIGIT, result.data)
    },
    addPreZero (digit, num) {
      var t = (num + '').length, s = ''
      for (var i = 0; i < digit - t; i++) {
        s += '0'
      }
      return s + num
    }
  }
}
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  background: #48372f;
  overflow: hidden;

  .con {
    margin-top: 59px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 17px;
    color: #949198;
    opacity: 1;
    .visit {
      text-align: center;
      font-size: 14px;
      line-height: 21px;
      .visits {
        display: inline-block;
        width: 113px;
        height: 27px;
        border: 1px solid #949198;
        margin-left: 9px;
        .num {
          line-height: 27px;
          letter-spacing: 5px;
        }
      }
    }
    ul {
      margin: 32px auto 0;
      min-width: 1100px;
      display: flex;
      justify-content: center;
      > li {
        height: 100%;
        line-height: 42px;
        padding: 0 60px;
        text-align: center;
        border-right: 1px solid;
        border-image: -webkit-linear-gradient(
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.12) 19%,
            rgba(255, 255, 255, 0.52) 51%,
            rgba(255, 255, 255, 0) 100%
          )
          1 10 1 10; /* 控制边框颜色渐变 */
        > a {
          font-size: 16px;
          height: 100%;
        }
        &:last-child {
          border-right: none;
        }
      }
    }
    .address {
      text-align: center;
      margin: 18px 0 65px 0;
      p {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #949198;
        opacity: 1;
        line-height: 20px;
      }
    }
  }
}
</style>
