<template>
  <div class="goods_detail wrapper_1200">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">全部商品</el-breadcrumb-item>
        <el-breadcrumb-item>其他</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="goods_detail_nav">
      <div class="goods_detail_nav_left">
        <div class="goods_detail_video" v-show="detailTabId == 0">
          <video
            muted
            autoplay
            loop
            controls
            :src="imgUrl + detailData.video_url"
          ></video>
        </div>
        <div class="goods_detail_img" v-show="detailTabId == 1">
          <el-carousel
            trigger="click"
            :autoplay="false"
            @change="imgchange"
            ref="remarkCarusel"
            indicator-position="none"
          >
            <el-carousel-item v-for="(carouselItem, i) in carouselList" :key="i">
              <img :src="imgUrl + carouselItem" alt />
            </el-carousel-item>
          </el-carousel>
          <div class="carousel_bottom">
            <div
              class="carousel_bottom_list"
              v-for="(item, index) in carouselList"
              :key="index"
            >
              <div
                :class="{ carousel_active: index == currentImg }"
                @click="currentImgChange(index)"
              >
                <img :src="imgUrl + item" alt />
              </div>
            </div>
          </div>
        </div>
        <!-- 切换商品视频和图片 -->
        <div
          class="goods_detail_nav_left_btn"
          v-if="detailData.video_url || carouselList.length"
        >
          <span
            class="goods_detail_nav_left_btn_v"
            v-show="detailData.video_url"
            @click="detailTabId = 0"
            :class="{ active: detailTabId === 0 }"
            >视 频</span
          >
          <span
            @click="detailTabId = 1"
            :class="{ active: detailTabId === 1 }"
            v-show="carouselList.length"
            >图 片</span
          >
        </div>
      </div>
      <div class="goods_detail_nav_right">
        <p class="title">{{ detailData.goods_name }}</p>
        <div class="price">
          <div class="packagePrice">
            <span>套餐价</span>
          </div>
          <div class="originalPrice">原价¥</div>
          <!-- <div class="Integral">
            <img style="width: 16px; height: 16px" src="~assets/images/giveIntegral.png" alt />
            <span class="integral_txt">每满一元送1积分</span>
          </div>-->
        </div>
        <!-- <p class="package">规格：20g+12g+40g+56g</p> -->
        <div class="address_Box">
          <div>商品编号：{{ detailData.sku_no }}</div>
          <div>产地：{{ detailData.address }}</div>
        </div>
        <!-- <div class="freight">运费：{{detailData.support_trade_type}}</div> -->
        <div class="order">
          订购数量：
          <div class="jbq" @click.stop.prevent>
            <el-input-number
              v-model="commodityNum"
              size="mini"
              @change="handleChange"
              :min="0"
            ></el-input-number>
          </div>
        </div>
        <div class="goods_detail_nav_right_btn">
          <el-button type="primary" icon="el-icon-shopping-cart-1" size="small"
            >购买</el-button
          >
        </div>
      </div>
    </div>

    <div class="goods_detail_option">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="商品详情" name="detail">
          <div v-html="detailData.goods_content"></div>

          <div class="goods_detail_option_banner">
            <img :src="imgUrl + detailData.goods_image" alt />
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品评价" name="evaluate">
          <div class="goods_detail_evaluate">
            <div
              @click="evaluateChange(0)"
              :class="{ evaluate_active: evaluateTabId === 0 }"
            >
              全部({{ evaluateData.total }})
            </div>
            <div
              @click="evaluateChange(1)"
              :class="{ evaluate_active: evaluateTabId === 1 }"
            >
              好评({{ evaluateData.haoping }})
            </div>
            <div
              @click="evaluateChange(2)"
              :class="{ evaluate_active: evaluateTabId === 2 }"
            >
              中评({{ evaluateData.zhongping }})
            </div>
            <div
              @click="evaluateChange(3)"
              :class="{ evaluate_active: evaluateTabId === 3 }"
            >
              差评({{ evaluateData.chaping }})
            </div>
          </div>
          <template v-if="goods_detail_commentList.length">
            <div
              class="goods_detail_comment_Box"
              v-for="(commentItem, commentIndex) in goods_detail_commentList"
              :key="commentIndex"
            >
              <div class="goods_detail_comment_head">
                <img :src="imgUrl + commentItem.member_headimg" alt />
              </div>
              <div class="goods_detail_comment_content">
                <div class="content_name">{{ commentItem.member_name }}</div>
                <div class="content_time">
                  {{
                    $dayjs(commentItem.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
                  }}
                </div>
                <div class="content_txt">{{ commentItem.content }}</div>
                <div class="content_image" v-if="commentImgs.length > 0">
                  <div v-for="(imgV, imgI) in commentImgs" :key="imgI">
                    <img :src="imgUrl + imgV" alt />
                  </div>
                </div>
              </div>
            </div>
            <Page
              :total="commentPage.total"
              :pageSize="commentPage.pageSize"
              :currentPage="commentPage.currentPage"
              :emptyShow="false"
            />
          </template>
          <div v-if="!goods_detail_commentList.length" class="nothing">
            <img src="@/assets/images/noGoods.png" />
            暂无评价，去看点别的吧
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div v-show="optionName != 'evaluate'">
      <Guess
        v-if="guessList.length"
        :guessList="guessList"
        :Page="guessPage"
        @changePage="changePage"
      />
    </div>
  </div>
</template>
<script>
import Setting from "~/setting";
import countDown from "@/components/countDown";
import Guess from "@/components/guess.vue";
export default {
  auth: false,
  components: { Guess, countDown },
  data() {
    return {
      imgUrl: Setting.uplodBaseURL,
      activeName: "detail",
      commodityNum: "",
      detailTabId: 1,
      carouselList: [],
      guessList: [],
      detailData: {},
      seckillData: {},
      currentImg: "",
      optionName: "",
      evaluateTabId: 0,
      goods_detail_commentList: [],
      evaluateData: {},
      commentImgs: "",
      // 商品评价分页
      commentPage: {
        total: 30,
        pageSize: 10,
        currentPage: 1,
      },
      // 为你推荐分页
      guessPage: {
        total: 0,
        pageSize: 4,
        currentPage: 1,
      },
      // 是否收藏成功
      collectionType: false,
      // 是否已收藏
      isCollect: 0,
    };
  },

  created() {
    this.getData();
    // this.getEvaluateData();
    // this.evaluateChange(0);
    this.getGuessData();
  },
  mounted() {},
  methods: {
    // 获取套餐商品详情
    getData() {},

    // 获取商品评价数
    getEvaluateData() {
      let obj = { goods_id: this.$route.params.id };
      this.$axios
        .post(`/goodsevaluate/getGoodsEvaluate`, obj)
        .then((res) => {
          this.evaluateData = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 获取商品评价列表
    evaluateChange(num) {
      this.evaluateTabId = num;
      let obj = {
        goods_id: this.$route.params.id,
        explain_type: num == 0 ? "" : num,
      };
      this.$axios
        .post(`/goodsevaluate/page`, obj)
        .then((res) => {
          this.goods_detail_commentList = res.data.list;
          this.commentPage.total = res.data.count;
          // 截取评价图地址放进数组
          this.goods_detail_commentList.map((item) => {
            this.commentImgs = item.images.split(",");
          });
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 获取为你推荐数据
    getGuessData() {
      let obj = {
        page: this.guessPage.currentPage,
        page_size: this.guessPage.pageSize,
      };
      this.$axios
        .post(`/goodssku/page`, obj)
        .then((res) => {
          res.data.list.forEach((item) => {
            item["num"] = 0;
          });
          this.guessList = res.data.list;

          this.guessPage.total = res.data.count;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    changePage(e) {
      this.guessPage.currentPage = e;
      this.getGuessData();
    },
    handleClick(tab, event) {
      this.optionName = tab.name;
    },
    handleChange() {},
    imgchange(val) {
      this.currentImg = val;
    },
    currentImgChange(index) {
      this.currentImg = index;
      this.$refs.remarkCarusel.setActiveItem(index);
    },
  },
};
</script>
<style lang="scss" scoped>
.goods_detail {
  .crumbs {
    margin-top: 20px;
  }
  .goods_detail_nav {
    width: 1200px;
    height: 350px;
    background: #ffffff;
    border-radius: 4px;
    margin: 16px auto;
    display: flex;
    position: relative;
    .goods_detail_nav_left {
      width: 510px;
      height: 320px;
      // border: 1px solid #aaa;
      margin: 15px;
      position: relative;
      color: #999999;
      .goods_detail_video,
      .goods_detail_img {
        width: 100%;
        height: 100%;
      }
      .goods_detail_video {
        video {
          width: 100%;
          height: 320px;
        }
      }
      .goods_detail_img {
        position: relative;
        /deep/ .el-carousel {
          .el-carousel__container {
            height: 320px;
            .el-carousel__item {
              img {
                width: 100%;
              }
            }
          }
        }
        .carousel_bottom {
          width: 100%;
          height: 100px;
          position: absolute;
          bottom: 0px;
          left: 0px;
          z-index: 10;
          .carousel_bottom_list {
            float: left;
            margin: 10px;
            img {
              width: 80px;
              height: 80px;
              border-radius: 5px;
              cursor: pointer;
            }
          }
          .carousel_active {
            border: 1px solid var(--themeColor);
            border-radius: 5px;
          }
        }
      }

      .goods_detail_nav_left_btn {
        position: absolute;
        top: 10px;
        right: 20px;
        padding: 5px 10px;
        border-radius: 14px;
        border: 1px solid #dedede;
        z-index: 10;
        cursor: pointer;
        .goods_detail_nav_left_btn_v {
          padding-right: 5px;
          border-right: 1px solid #aaa;
        }
      }
      .active {
        font-weight: 600;
        color: black;
      }
    }
    .goods_detail_nav_right {
      width: 510px;
      height: 320px;
      margin: 15px 0;
      .title {
        width: 350px;
        height: 28px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 28px;
        margin-bottom: 10px;
      }
      .price {
        display: flex;
        .packagePrice {
          width: 100px;
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #ff1d1d;
          line-height: 22px;
          margin-right: 20px;
        }
        .originalPrice {
          width: 100px;
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 20px;
          text-decoration: line-through;
          margin-right: 20px;
        }
        .Integral {
          display: flex;
          justify-content: space-around;
          margin-right: 20px;
          .integral_txt {
            width: 110px;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff7d02;
            line-height: 17px;
          }
        }
      }
      .package {
        width: 300px;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #585858;
        line-height: 22px;
        margin: 25px 0;
      }
      .address_Box {
        display: flex;
        justify-content: space-between;
        width: 400px;
        margin: 25px 0;
      }
      .freight {
        margin: 25px 0;
      }
      .order {
        display: flex;
        margin: 25px 0;
        .jbq {
          /deep/ .el-input-number {
            width: 100px;
            .el-input-number__decrease {
              width: 26px;
              height: 26px;
              border: none;
              border-radius: 16px;
              background: #d8f6ff;
              .el-icon-minus {
                color: var(--themeColor);
                font-weight: 900;
              }
            }
            .el-input-number__increase {
              width: 26px;
              height: 26px;
              border: none;
              border-radius: 16px;
              background: var(--themeColor);
              .el-icon-plus {
                color: #fff;
                font-weight: 900;
              }
            }
            .el-input {
              .el-input__inner {
                border: none;
              }
            }
          }
        }
      }
      .goods_detail_nav_right_btn {
        margin-top: 40px;
        .collectAct1 {
          background: var(--themeColor);
          color: #fff;
        }
        .collectAct2 {
          background: #fff;
          color: #000;
        }
      }
    }
    .time_Limit {
      width: 120px;
      height: 63px;
      position: absolute;
      top: 0px;
      right: 30px;
      background: #ff1449;
      border-radius: 0px 0px 6px 6px;
      .title {
        display: flex;
        margin: 5px;
        img {
          width: 16px;
          height: 16px;
          margin: 3px;
        }
        div {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 22px;
        }
      }
      .time {
        color: #ffffff;
        height: 22px;
        line-height: 22px;
        /deep/ .styleAll {
          min-width: 30px;
          height: 20px;
          background: #ff7997;
          border-radius: 5px;
          text-align: center;
        }
      }
    }
    .pintuan {
      width: 101px;
      height: 63px;
      position: absolute;
      top: 0px;
      right: 30px;
      background: #ff7d02;
      border-radius: 0px 0px 6px 6px;
      .pintuanTitle {
        display: flex;
        margin: 5px;
        img {
          width: 16px;
          height: 16px;
          margin: 3px;
        }
        div {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 22px;
        }
      }
      .pintuan_btn {
        color: #ffffff;
        width: 60px;
        height: 22px;
        line-height: 22px;
        border-radius: 5px;
        font-size: 12px;
        margin: 0 auto;
        background: #ffb268;
        border-radius: 5px;
        padding: 0 5px;
      }
    }
  }
  .goods_detail_option {
    width: 1200px;
    min-height: 610px;
    background: #ffffff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    .goods_detail_option_text {
      margin-bottom: 15px;
      span {
        margin-right: 20px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 22px;
      }
    }
    .goods_detail_option_banner {
      width: 1200px;
      height: 488px;
      // border: 1px solid #aaa;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .goods_detail_evaluate {
      display: flex;
      div {
        width: 60px;
        height: 26px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999999;
        line-height: 26px;
        text-align: center;
        cursor: pointer;
        margin-right: 20px;
      }
      .evaluate_active {
        color: #222222;
        border: 1px solid #999;
        background: #ffffff;
        border-radius: 13px;
        border: 1px solid #e1e1e1;
      }
    }
    .goods_detail_comment_Box {
      display: flex;
      margin-top: 25px;
      padding: 5px;
      .goods_detail_comment_head {
        margin-right: 20px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
      .goods_detail_comment_content {
        .content_name {
          height: 14px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 14px;
          margin-bottom: 15px;
        }
        .content_time {
          height: 14px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 14px;
          margin-bottom: 15px;
        }
        .content_txt {
          width: 1070px;
          min-height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 20px;
        }
        .content_image {
          display: flex;
          flex-wrap: wrap;
          width: 1070px;
          img {
            width: 100px;
            height: 100px;
            margin: 15px;
            margin-left: 0;
          }
        }
      }
    }
  }
  .nothing {
    padding-top: 100px;
    padding-bottom: 150px;
    font-size: 16px;
    text-align: center;
    color: #969696;

    img {
      margin: 0 auto;
    }
  }
}
</style>
