<template>
  <div style="min-width: 1300px">
    <div class="img_text_bgc">
      <el-row type="flex">
        <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
        <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
          <div class="img_text_content">
            <div class="img_bgc">
              <img :src="mainSrc" alt=""/>
            </div>
            <div class="img_right">
              <div class="title">
                产品名称：{{ detailList.name }}
              </div>
              <div class="space_style">
                <p>产品分类：{{ classifyName }}</p>
                <p>适用空间：{{ detailList.space }}</p>
                <p>所属风格：{{ detailList.style }}</p>
              </div>
              <div class="img_part">
                <ul>
                  <li v-for="(item,index) in imgList" :key="index" @click.stop="changeMainImg(index)">
                    <img :src="item.thumb_image" alt=""/>
                  </li>
                </ul>
              </div>
              <div class="shares">
                分享到：
                <span @click="shareToMicroblog()">
                    <img src="@/assets/weibo.png" alt=""/>
                  </span>
                <span @click="shareToQQRom()">
                    <img src="@/assets/QQKJ.png" alt=""/>
                  </span>
              </div>
              <div>
                <el-button size="small" @click="prevProduct(detailList.id)">上一款产品</el-button>
                <el-button size="small" @click="nextProduct(detailList.id)">下一款产品</el-button>
              </div>
            </div>
          </div>
          <!-- 同类产品推荐 -->
          <div class="sameProducts">
            <div class="same_title">同类产品推荐</div>
            <div>
              <ul>
                <li v-for="(item,index) in goodsList" :key="index" @click="handleClickSameProducts(item)">
                  <div class="sameItem">
                    <img :src="item.image" alt=""/>
                    <div class="info">{{ item.name }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="nullData" v-if="showNull">
            暂时没有数据！
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {getGoodsInfo, getGoodsList} from "@/api";

export default {
  name: "detail",
  metaInfo() {
    return {
      title: this.detailList.name + " | " + localStorage.getItem("corporate_name")
    };
  },
  data() {
    return {
      showNull: false,
      mainSrc: "",
      detailList: [],
      imgList: [],
      classifyName: "",
      goodsList: [],
      allGoodList: []
    };
  },
  mounted() {
    this.getGoodsInfo(this.$route.query.classid);
    this.getGoodsList();
  },
  methods: {
    //点击同类产品推荐
    handleClickSameProducts(item) {
      this.$router.push({
        path: "/products_detail",    //跳转的路由
        query: {    //跳转路由的参数
          classid: item.id
        }
      });
      this.getGoodsInfo(item.id);
    },
    //获取产品列表
    getGoodsList() {
      getGoodsList({
        classid: 1,
        page: 1,
        limit: 50
      }).then(res => {
        this.allGoodList = res.data.list;
      });
    },
    //获取产品详情
    getGoodsInfo(classid) {
      getGoodsInfo(classid).then(res => {
        if (res.data.goods_lists) {
          this.goodsList = res.data.goods_lists;
        }
        if (res.data.goods_lists.length == 0) {
          this.showNull = true;
        } else {
          this.showNull = false;
        }
        if (res.data.info) {
          this.detailList = res.data.info;
          this.classifyName = res.data.info.goods_category.name;
        }
        if (res.data.img_list) {
          this.imgList = res.data.img_list;
          if (this.imgList[0]) {
            this.mainSrc = this.imgList[0].ori_image;
          }
        }
      });
    },
    //上一款产品
    prevProduct(id) {
      const middleId = id - 1;
      this.$router.push({
        path: "/products_detail",    //跳转的路由
        query: {    //跳转路由的参数
          classid: middleId
        }
      });
      for (let i = 0; i < this.allGoodList.length; i++) {
        if (this.allGoodList[i].id === middleId) {
          this.getGoodsInfo(middleId);
        }
      }
    },
    //下一款产品
    nextProduct(id) {
      const middleId = id + 1;
      this.$router.push({
        path: "/products_detail",    //跳转的路由
        query: {    //跳转路由的参数
          classid: middleId
        }
      });
      for (let i = 0; i < this.allGoodList.length; i++) {
        if (this.allGoodList[i].id === middleId) {
          this.getGoodsInfo(middleId);
        }
      }
    },
    //点击小图切换主览图
    changeMainImg(index) {
      this.mainSrc = this.imgList[index].ori_image;
    },
    /**
     * 分享到微博
     */
    shareToMicroblog() {
      //跳转地址
      window.open(
        "https://service.weibo.com/share/share.php?url=" +
        encodeURIComponent(location.href)
        // "&title=" +
        // this.sysInfo
      );
    },
    /**
     * 分享到qq空间
     */
    shareToQQRom() {
      //跳转地址
      window.open(
        "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
        encodeURIComponent(location.href)
        // "&title=" +
        // this.sysInfo +
        // "&summary=" +
        // this.sysInfo
      );
    }
  }
};
</script>

<style scoped lang="scss">
* {
  font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
}

.nullData {
  display: block;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

/deep/ .el-button:focus, .el-button:hover {
  color: #333;
  border-color: #ddd;
  background-color: #fff;
}

/deep/ .el-button:hover {
  span {
    text-decoration: underline;
  }
}

.center_border {
  width: 100%;
  height: 55px;
  border-bottom: 1px solid #ebebeb;
  background-color: #fff;
}

.img_text_bgc {
  padding: 30px 0;
  border-bottom: 1px solid #e9e9e9;
  background-color: #f3f3f3;

  .img_text_content {
    //width: 1360px;
    margin: 0 auto;
    display: flex;

    .img_bgc {
      width: 500px;
      height: 500px;
      padding: 20px;
      border: 1px solid #eee;
      background-color: #fff;
      margin-right: 30px;

      img {
        width: 100%;
      }
    }

    .img_right {
      float: right;
      flex: 1;

      .title {
        width: 100%;
        padding: 25px 0 10px 0;
        font-size: 24px;
        border-bottom: 1px solid #555;
      }

      .space_style {
        padding: 20px 0;

        p {
          color: #000;
          margin: 5px 0 5px 0;
          font-size: 16px !important;
        }
      }

      .img_part {
        padding: 10px 0 5px 0;
        border-top: 1px dotted #ddd;
        border-bottom: 1px dotted #ddd;

        ul {
          width: 100% !important;
          height: auto !important;

          li {
            display: inline-block;
            width: 60px;
            height: 60px;
            margin: 5px;
            padding: 5px;
            border: 1px solid #e5e5e5;
            background-color: #fff;
            cursor: pointer;

            img {
              width: 60px;
              height: 60px;
            }
          }
        }
      }

      .shares {
        display: flex;
        line-height: 35px;

        span {
          img {
            cursor: pointer;
          }
        }
      }
    }
  }
}

.sameProducts {
  padding: 50px 0;
  background-color: #f4f4f4;

  .same_title {
    display: inline;
    width: 100%;
    float: left;
    margin: 0 0 15px 0;
    padding: 0 0 15px 0;
    font-size: 18px;
    border-bottom: 1px solid #e5e5e5;
  }

  ul {
    li {
      display: inline;
      width: 20%;
      float: left;
      cursor: pointer;

      .sameItem {
        display: block;
        margin: 10px;
        padding: 10px;
        border: 1px solid #e9e9e9;
        background-color: #fff;

        img {
          width: 100%;
        }

        .info {
          padding: 5px 0 5px 0;
          text-align: center;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
