<!--  -->
<template>
  <div class="template">
    <div class="top">
      <div class="location">数据管理 / 项目资料 / <span>查看</span></div>
    </div>
    <div class="conten">
      <div class="search">
        <div class="txt">{{tab0Data.name}}</div>
        <ul>
          <li v-for="(item,index) in topTab" :key="index" :class="{active:topTabInd===index}" @click="tabCut(index)">
            <a :href="item.id">{{item.name}}</a>
            </li>
        </ul>
      </div>
      <div class="tabAll">
      <!-- 项目详情 -->
      <div id="tab0" class="conten_box">
        <div class="title">项目详情</div>
        <div class="row"><div>项目名称：</div>{{tab0Data.name}}</div>
        <div class="row"><div>项目时间：</div>{{tab0Data.age?tab0Data.age:'-'}}</div>
        <div class="row"><div>项目分类：</div>{{tab0Data.projectTypeName}}</div>
        <div class="row"><div>展示形式：</div>{{tab0Data.application}}</div>
        <div class="row"><div>应用技术：</div>{{tab0Data.technology}}</div>
        <div class="row"><div>保密级别：</div>{{tab0Data.level}}</div>
        <div class="row"><div>项目合作方：</div>{{tab0Data.cooperation?tab0Data.cooperation:'-'}}</div>
      </div>
      <div id="tab1" class="conten_box">
        <div class="title">项目网址</div>
        <div class="row" v-for="item in tab1Data" :key="item.id"><div>{{item.name?item.name:'暂无'}}：</div><a :href="item.url" target="_blank">{{item.url?item.url:'暂无'}}</a></div>
      </div>
      <div id="tab2" class="conten_box">
        <div class="title">三维场景</div>
        <div class="row" v-for="item in tab2Data" :key="item.id"><div>{{item.name?item.name:'暂无'}}：</div><a :href="item.url" target="_blank">{{item.url?item.url:'暂无'}}</a></div>
      </div>
      <div id="tab3" class="conten_box">
        <div class="title">资料文档</div>
        <div class="imgBox" v-if="tab3Data.length">
          <div class="wendang" v-for="item in tab3Data" :key="item.id">
            <a :href="baseURL+item.filePath" target="_blank" download>{{item.name}}</a>
            </div>
        </div>
        <div v-else class="noData">暂无数据</div>
      </div>
      <div id="tab4" class="conten_box">
        <div class="title">文物</div>
        <div class="imgBox" v-if="tab4Data.length">
          <a :href="item.url" target="_blank" v-for="item in tab4Data" :key="item.id">
          <img :src="baseURL+item.thumb" :onerror="defaultImg" alt="">{{item.name}}
          </a>
        </div>
         <div v-else class="noData">暂无数据</div>
      </div>
      </div>
      <!-- 底部按钮 -->
      <div class="button_btn">
        <div @click="$router.go(-1)">返 回</div>
        <div class="edit" @click="projecEdit" v-if="userLogo">编 辑</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
import { getDetail } from '@/apis/tab1'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'tab1Look',
  components: {},
  data () {
    // 这里存放数据
    return {
      userLogo: true, // 用户标识
      baseURL: '',
      tab0Data: {},
      tab1Data: [],
      tab2Data: [],
      tab3Data: [],
      tab4Data: [],
      myId: null, // 项目总id
      topTabInd: 0,
      topTab: [
        { name: '项目详情', id: '#tab0' },
        { name: '项目网址', id: '#tab1' },
        { name: '三维场景', id: '#tab2' },
        { name: '资料文档', id: '#tab3' },
        { name: '文物', id: '#tab4' }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 点击编辑调整编辑页面
    projecEdit () {
      this.$router.push({
        path: '/layout/tab1_edit',
        query: { id: this.myId }
      })
    },
    tabCut (index) {
      this.topTabInd = index
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created () {
    // 获取服务器前缀地址
    this.baseURL = axios.defaults.baseURL
    // 拿到路由跳转传过来的数据
    this.myId = this.$route.query.id
    const res = await getDetail(this.myId)
    // console.log(999, res)
    this.tab0Data = res.data.entity
    this.tab0Data.technology = this.myTechnology(this.tab0Data.technology)
    this.tab0Data.application = this.myApplication(this.tab0Data.application)
    this.tab0Data.level = this.myLevel(this.tab0Data.level)
    this.tab1Data = res.data.website
    this.tab2Data = res.data.scene
    this.tab3Data = res.data.doc
    this.tab4Data = res.data.goods
    // 获取用户信息
    const aaa = localStorage.getItem('SWKK_userInfo')
    // console.log(999, JSON.parse(res))
    const userData = JSON.parse(aaa)
    // 如果是普通用户---删掉场景案例
    if (userData.roleId === 2) {
      this.userLogo = false
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.template {
  .noData{
    font-weight: 700;
    margin-top: 10px;
  }
  position: relative;
  padding: 0px 30px;
  .top {
    display: flex;
    align-items: center;
    height: 58px;
    width: 100%;

    .location {
      font-size: 22px;
      color: #999;
      & > span {
        color: black;
      }
    }
  }
  .conten {
    width: 100%;
    height: 720px;
    .txt {
      font-weight: 700;
      height: 40px;
      border-bottom: 1px solid #A3A2A9;
    }
    .search {
      position: relative;
      padding: 15px 20px 0;
      border-radius: 5px;
      box-shadow: 0px 0px 5px 0px;
      height: 110px;
      background-color: #d8dadc;
      ul {
        margin-top: 15px;
        display: flex;
        li {
          padding-bottom: 5px;
          cursor: pointer;
          margin-right: 100px;
          a{
            color:#666;
          }
        }
        li:hover {
          border-bottom: 2px solid #DC3545;
          a {
            color: black;
          }
        }
        .active {
          border-bottom: 2px solid #DC3545;
          a {
            color: black;
          }
        }
      }
    }
    .conten_box{
      padding: 15px 30px;
      background-color: #fff;
      margin-top: 10px;
      .title{
        font-weight: 700;
        padding-bottom: 8px;
        font-size: 20px;
        color: #C82333;
        border-bottom: 1px solid #ccc;
      }
      .row{
        display: flex;
        align-items: center;
        margin: 15px 0 0;
        &>div{
          font-weight: 700;
        }
        a {
          background-color: #E7E9EB;
          padding: 5px 10px;
        }
      }
      .imgBox{
        display: flex;
        flex-wrap: wrap;
        &>div {
        word-wrap: break-word;
        text-align: center;
        width: 85px;
        margin-right: 20px;
        }
        img {
          width: 68px;
          height: 75px;
          object-fit: contain;
        }
        .wendang{
          text-align: left;
          margin-top: 10px;
          width: 100%;
          a:hover{
            color:#DC3545;
          }
        }
      }
    }
    #tab4{
      .imgBox{
        &>a {
        word-wrap: break-word;
        text-align: center;
        display: block;
        cursor: pointer;
        width: 120px;
        margin-top: 10px;
        margin-right: 20px;
        padding: 15px 0;
        transition: all .3s;
            &:hover {
            transform: translate(2px,-2px);
        }
        }
      img {
        border: 1px solid #ccc;
        box-shadow: 1px 1px 3px 0px;
        padding: 5px;
        width: 120px;
        height: 120px;
        margin-bottom:10px;
        object-fit: contain;
      }
      }

    }
    .tabAll{
      max-height: 600px;
      overflow-y: auto;
    }
  }
    .button_btn{
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      left: 100px;
      bottom: 30px;
      width: 300px;
      height: 40px;
      div {
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 40px;
        background-color: #fff;
        cursor: pointer;
      }
      .edit {
        color: #fff;
        background-color: #DC3545;
      }
    }
}
</style>
