<template>
  <div class="footer">
    <div class="footer-content">
      <el-row :gutter="30">
        <el-col v-for="(item,index) in dataList" :key="index" :span="4">
          <div class="title-s">{{ item.name }}</div>
          <div v-for="(t,i) in item.list" :key="'lb_'+i" class="label" :title="t.name">
            <a v-if="t.url" :href="t.url||'http://www.minestar.cn'" target="_blank">
              {{ t.name }}
            </a>
            <div v-else class="touch" @click="linkClick(t)">{{ t.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="$store.state.settings.showFooter" class="footer-bottom">
      <span v-html="$store.state.settings.footerTxt" />
      <span v-if="$store.state.settings.caseNumber"> ⋅ </span>
      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
    </div>
  </div>
</template>
<script>
import { HttpReq } from '@/api/common'
export default {
  data() {
    return {
      dataList: [
        {
          name: '用户指南',
          list: [
            { name: '注册登录流程', url: '' },
            { name: '采购商指南', url: '' }
          ]
        },
        {
          name: '关于我们',
          list: [
            { name: '平台介绍 ', url: '' }
          ]
        },
        {
          name: '联系我们',
          list: [
            { name: '提供建议', leaveWordUrl: '/footer/opinion' },
            { name: '我要合作', leaveWordUrl: '/footer/cooperate' },
            { name: '联系方式' }
          ]
        },
        {
          name: '常见问题',
          list: [
            { name: '采购商常见问题', url: '' },
            { name: '供应商常见问题', url: '' }
          ]
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      HttpReq.webClientApi.homePageGetBottomNavigation({
        preview: false
      }).then((res) => {
        this.dataList = [
          {
            name: '用户指南',
            list: res.data.userGuide
          },
          {
            name: '关于我们',
            list: res.data.aboutUs
          },
          {
            name: '联系我们',
            list: [
              { name: '提供建议', leaveWordUrl: '/footer/opinion' },
              { name: '我要合作', leaveWordUrl: '/footer/cooperate' },
              ...res.data.commonQuestions

            ]
          },
          {
            name: '常见问题',
            list: res.data.contactUs
          },
          {
            name: '友情链接',
            list: res.data.friendshipUrl
          }
        ]
      })
    })
  },
  methods: {
    linkClick(item) {
      if (item.leaveWordUrl) {
        this.$router.push({ path: item.leaveWordUrl })
      } else {
        this.$router.push({ path: `/footer/about/${item.id}` })
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
  cursor:pointer;
}
.footer-content {
  width: 100%;
  height: 267px;
  bottom: 33px;
  padding-top: 20px;
  padding-left: 210px;
  background: none repeat scroll 0 0 #1C1E25;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #E8E6E6;
  user-select: none;
  z-index: 99;
  .title-s {
    margin: 30px 0;
    font-size: 26px;
  }
  .label {
    width: 300px;
    margin: 15px 0;
    cursor:pointer;
    font-size: 18px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
  .label:hover {
    font-weight: 600;
  }
}
.footer-bottom {
  width: 100%;
  height: 33px;
  bottom: 0;
  padding: 10px 6px 0 6px;
  text-align: center;
  background: none repeat scroll 0 0 black;
  overflow: hidden;
  font-size: 0.7rem !important;
  letter-spacing: 0.8px;
  font-family: Arial, sans-serif !important;
  color: #E8E6E6;
  z-index: 99;
}
</style>
