<template>
  <div style="width: 100%;">
    <div id="topContainer"
      style="min-width: 1400px; width: 100%;display: flex;flex-direction: column;justify-content: flex-start;align-items: center">
      <div class="banner">
        <img src="./img/detailBg.jpg" alt="">
        <div class="content">
          <span class="title">{{ detailData.title }}</span>
          <p style="line-height: 1.6" class="description">{{ detailData.description }}</p>
          <span @click="openTalk" class="btnStyle">立即咨询</span>
        </div>
      </div>
      <!--   产品优势 -->
      <div class="proAd">
        <div v-show="detailData.title === '裸金属产品'" class="title">产品规格</div>

        <div v-show="detailData.title === '裸金属产品'" class="cardBox">
          <div class="card">
            <ul class="cardUl">
              <!-- ::{{ JSON.stringify(detailData) }} -->
              <li class="cardLi" v-for="(i, index) in detailData.products" :key="index">
                <span class="title"> {{ i.title }}</span>
                <ul class="tagUl">
                  <li v-for="(item,index) in i.list" :key="index">
                    {{ item.name }}：{{ item.content }}
                  </li>
                </ul>

                <div class="towBtn">
                  <span class="basePrice"><span style="font-weight: bold;">￥</span><span
                    style="font-weight: bold;font-size: 48px">{{ i.price }}</span> <span
                    style="color: #7A82A0">/{{ i.price_unit }}</span><span style="color: #222F60">（可短租）</span></span>
                  <span @click="openTalk" class="zixun">立即咨询</span>
                </div>
              </li>

            </ul>

          </div>
        </div>


        <div style="padding-top: 50px" v-if="detailData.title !== '裸金属产品'" class="title">产品优势</div>
        <ul v-if="detailData.title !== '裸金属产品'" class="adUl">
          <li v-for="(item, index) in detailData.adList" :key="index">
            <div class="leftBox">
              <img :src="item.img" alt="">
            </div>
            <div class="rightBox">
              <span class="subTitle">{{ item.title }}</span>
              <span class="subDescription">{{ item.description }}</span>
            </div>
          </li>
        </ul>
      </div>
      <!--      产品功能-->
      <div v-if="detailData.title !== '裸金属产品'" style="justify-content: flex-start!important;" class="proUse">
        <div style="padding-top: 50px" class="title">产品功能</div>
        <ul class="useUl">
          <li v-for="(item, index) in detailData.useList" :key="index" class="useLi">
            <span v-if="item.title" class="useTitle">{{ item.title }}</span>
            <span v-if="item.description" class="useDescription">{{ item.description }}</span>
            <ul class="inUl">
              <li :style="{ justifyContent: i.description ? 'space-around' : 'center' }" v-for="(i, d) in item.content"
                :key="d" class="inLi">
                <span class="inTitle" style="margin-bottom: 10px;font-size: 16px;">{{ i.title }}</span>
                <span style="color: #666;line-height: 1.8;font-size: 14px" class="inDescription">{{
                  i.description
                }}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!--      Application-->
      <div v-if="detailData.title !== '裸金属产品'" class="application">
        <div class="title">应用场景</div>
        <ul class="menu">
          <li v-for="(item, index) in detailData.applicationList" :key="index" @click="clickMenu(item)"
            :class="activeMenu === item.id ? 'activeLi' : ''">
            {{ item.memuName }}
          </li>
        </ul>
        <div class="realApp">
          <div style="display: none" class="leftBox">
            <img :src="menuObj.img" alt="">
          </div>
          <div class="rightBox">
            <div v-if="menuObj.title_r" class="topBox">
              <span class="topTitle">{{ menuObj.title_r }}</span>
              <span style="line-height: 2" class="topDEscription">{{ menuObj.description_r }}</span>
            </div>
            <div class="boxBox">

              <div v-for="(item, index) in menuObj.provide" class="bottomBox">
                <span style="margin: 15px 0">{{ item.title }}</span>
                <span class="content">{{ item.content }}</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <Talk></Talk>
  </div>
</template>
<script>
import Vue from 'vue'
// import {detailData} from "@/views/homePage/detail/data";
import { reqHotProduct, reqNewHomeDetail } from "@/api/newHome";
import Talk from "@/views/homePage/dialog/talk/index.vue";


export default Vue.extend({
  name: "detail",
  // computed: {
  //   luojinshuData() {
  //     return luojinshuData
  //   }
  // },
  components: { Talk },
  // computed: {
  //   detailData() {
  //     return detailData
  //   }
  // },
  data() {
    return {
      loading: null,
      activeMenu: 0,
      detailData: {},
      menuObj: {
        id: "13",
        memuName: "个人建站应用、专属空间 ",
        img: "https://vstecscloud-file-manage.eos-beijing-4.cmecloud.cn/blade-oss/e7d1d90e439246d7879b1c1f8974f376@:,_y3.png",
        title_r: "知识效率管理，工具垂手可得",
        description_r: "选择精品镜像创建个人网站，企业官网",
        provide: {
          title: "支持的系统镜像",
          content: "WordPress、Lamp、Joomla、Drupal"
        }
      },
      suan: {}
    }
  },
  mounted() {
    this.getDetail()
    this.initData()

  },
  watch: {
    '$route'(to, from) {
      // 当路由变化时，检查id是否变化
      console.log("asdsad", to.query.id === '2113')
      if (to.query.id === '2113') {
        this.initData()
      }
      if (to.query.id !== from.query.id) {
        this.getDetail();
      }
    }
  },
  methods: {
    initData() {
      reqHotProduct().then(res => {
        if (res.status) {

          this.suan = res.data.suan
          this.suanItem = this.suan.hot
        }
      })
    },
    openTalk() {
      this.$store.commit('setShowTalk', true)
    },
    openFullScreen2() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    clickMenu(item) {
      this.activeMenu = item.id
      this.menuObj = item
    },
    getDetail() {
      this.openFullScreen2()
      reqNewHomeDetail({ id: this.$route.query.id }).then(res => {
        this.loading.close()
        this.detailData = res.data
        this.activeMenu = res.data.applicationList[0].id

        this.menuObj = res.data.applicationList[0]
      })
    }
  }
})
</script>


<style scoped lang="scss">
.banner {
  width: 100%;
  height: 375px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .content {

    margin: 0 110px;
    margin-top: 80px;
    width: 1000px;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    .title {
      font-size: 30px;
    }

    .description {
      color: #3d3d3d;
      line-height: 2 !important;
    }

    .btnStyle {
      background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
      color: white;
      padding: 8px 15px;
      border-radius: 8px;
      margin-top: 15px;

      &:hover {
        cursor: pointer;
        background: linear-gradient(90deg, #275AFF 0%, #1089c1 100%);
      }
    }
  }

}

.title {
  margin: 15px 0;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.proAd {
  max-width: 1250px;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;


  .adUl {
    margin-bottom: 80px;
    background: url("./img/liBg.png");
    background-position: center;
    background-size: cover;
    width: 100%;
    min-width: 800px;
    display: flex !important;
    flex-wrap: wrap !important;

    justify-content: space-between !important;
    align-items: center !important;

    li {
      margin: 15px 0;

      width: 49%;
      display: flex !important;
      justify-content: flex-start;
      align-items: center;

      .leftBox {
        width: 50px;
        height: 50px;
        padding: 10px;
        min-width: 50px;
        min-height: 50px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .rightBox {

        padding-left: 25px;
        display: flex !important;
        flex-direction: column !important;

        .subTitle {
          font-size: 16px;
          color: #333;
        }

        .subDescription {
          margin-top: 10px;
          font-size: 14px;
          color: #999;
        }
      }
    }


  }
}

.proUse {
  width: 100%;
  min-width: 1400px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  background: #f4f4f4;

  .useUl {
    height: fit-content;
    margin-bottom: 25px;
    width: 1400px;
    //padding-bottom: 35px;
    border-bottom: 1px solid rgba(228, 231, 237, 1);


    &:last-child {
      border-bottom: none;
    }

    .useLi {
      padding-top: 0;
      margin-top: 0;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
      //padding-bottom: 45px;


      .useTitle {
        font-size: 18px;
        margin-bottom: 14px;
      }

      .useDescription {
        font-size: 12px;
        margin-bottom: 14px;
        line-height: 2 !important;

      }
    }

    .inUl {
      width: 100%;
      display: flex !important;
      flex-wrap: wrap;
      justify-content: flex-start !important;

      li {
        padding-right: 10px;
        margin: 35px 0px;
        width: 33% !important;
        font-size: 12px;
        padding-left: 15px;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around;
        align-items: flex-start;
        min-height: 70px;
        border-left: 2px solid #417ce6;
      }
    }
  }
}

.application {
  background: white;

  .menu {
    width: 1250px;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    border: 1px solid #dcdfe6;

    .activeLi {

      color: #1b5bff;
      border-top: 3px solid #1b5bff;
    }

    li {
      &:hover {
        cursor: pointer;
      }

      flex: 1;
      height: 50px;
      border-right: 1px solid rgba(228, 231, 237, 1);
      border-left: 1px solid #dcdfe6;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
  }

  .realApp {
    width: 1250px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;

    .leftBox {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;

      img {
        width: 100%;
        height: 100%;

      }

      width: 0;
      //width: 620px;
      height: 100%;
      background: #e5e5e5;

    }

    .rightBox {
      padding: 40px;
      //width: calc(100% - 630px);
      width: 100%;
      height: 100%;
      border: 1px solid #d8d8d8;

      .topBox {
        padding-bottom: 30px;
        border-bottom: 1px solid rgba(216, 216, 216, 1);
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;

        .topTitle {
          margin-top: 25px;
          font-size: 16px;
        }

        .topDEscription {
          font-size: 14px;
          color: #666;
          margin-top: 15px;
        }
      }

      .bottomBox {
        //padding-top: 30px;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;

        .content {
          //padding-left: 15px;
          color: #666;
          font-size: 14px;
          padding-right: 25px;
          line-height: 2;
        }
      }
    }
  }
}

.cardBox {
  padding-bottom: 50px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .card {
    border-radius: 12px !important;
    width: 1400px;
    background: url("./img/bg.png");
    background-size: cover;
    background-position: center;
  }
}

.cardUl {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;

  .cardLi {
    height: 350px;
    position: relative;
    margin: 45px 0;
    padding: 0 35px;
    padding-bottom: 100px;
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: white;
    border-radius: 16px;

    .title {
      font-size: 20px;
      font-weight: bold;
    }

    .tagUl {
      width: 100%;

      li {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }

}

.zixun {
  background: linear-gradient(90deg, #275aff, #2ebdfa);
  padding: 10px 20px;
  border-radius: 12px;
  color: white;
  font-weight: bold;

  &:hover {
    cursor: pointer;
  }
}

.basePrice {
  display: inline-block;
  margin-top: 15px;
  font-size: 16px;
  color: #F62424;

  * {
    color: #F62424;
  }
}

.towBtn {
  position: absolute;
  bottom: 15px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 35px;
}

.boxBox {

  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  .bottomBox {
    width: 50%;
  }
}
</style>
