<template>
  <view class="container">
    <view class="D1">
      <!-- 轮播图 -->
      <swiper
        class="swiperImage"
        :indicator-dots="true"
        :autoplay="true"
        :interval="4000"
        :duration="500"
      >
        <swiper-item
          v-for="(item, index) in goodInfo.pics"
          :key="index"
        >
          <image
            :src="item"
            mode="scaleToFill"
          ></image>
        </swiper-item>
      </swiper>
      <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
      <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
      <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
    </view>
    <view
      class="D2"
      v-if="updateGoodType == 2 || updateGoodType == 4"
    >
      <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
      <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
      <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
    </view>
    <!-- <view
      class="D2"
      v-if="updateGoodType == 1"
    >
      <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
      <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
      <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
    </view>
    <view
      class="D2"
      v-if="updateGoodType == 3"
    >
      <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
      <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
      <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
    </view> -->
    <view class="D3">
      <view class="screenBar">
        <view
          v-for="item in screenItems"
          :key="item.current"
          @click="tabChange(item.current)"
        >
          <view
            class="screenItem"
            v-bind:class="{ active: current === item.current }"
          >{{ item.text || '暂无' }}</view>
        </view>
      </view>
      <view
        class="screen-item"
        v-if="current === 1"
      >
        <view class="D3_list">
          <view
            v-for="(item) in parameter"
            :key="item.key"
          >
            <image
              class="D3_image"
              v-bind:src="item.img"
            ></image>
            <span>{{item.standard || '暂无'}}</span>
            <span>{{item.slength || '暂无'}}</span>
          </view>
        </view>
      </view>
      <view
        class="screen-item"
        v-if="current === 0"
      >
        <view class="D3_list">
          <!-- <block>
            <view>主体</view>
            <view>商品产地：韩国</view>
            <view>包装清单：彩色隐形 * 1</view>
          </block> -->
          <!-- 迭代时建议配合接口修改 为数组 -->
          <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
            <view class="">
              年龄：<view
                v-for="(item,index) in tag.prod_tag_age"
                :key="index"
              >
                {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
              </view>
            </view>
          </view>
          <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
            <view class="">
              颜色：<view
                v-for="(item,index) in tag.prod_tag_color"
                :key="index"
              >
                {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
              </view>
            </view>
          </view>
          <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
            <view class="">
              脸型：<view
                v-for="(item,index) in tag.prod_tag_face"
                :key="index"
              >
                {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
              </view>
            </view>
          </view>
          <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
            <view class="">
              赠品：<view
                v-for="(item,index) in tag.prod_tag_freesend"
                :key="index"
              >
                {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
              </view>
            </view>
          </view>
          <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
            <view class="">
              保险：<view
                v-for="(item,index) in tag.prod_tag_insurance"
                :key="index"
              >
                {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
              </view>
            </view>
          </view>
          <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
            <view class="">
              材质：<view
                v-for="(item,index) in tag.prod_tag_metal"
                :key="index"
              >
                {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
              </view>
            </view>
          </view>
          <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
            <view class="">
              个性：<view
                v-for="(item,index) in tag.prod_tag_personal"
                :key="index"
              >
                {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
              </view>
            </view>
          </view>
          <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
            <view class="">
              场景：<view
                v-for="(item,index) in tag.prod_tag_sense"
                :key="index"
              >
                {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
              </view>
            </view>
          </view>
          <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
            <view class="">
              性别：<view
                v-for="(item,index) in tag.prod_tag_sex"
                :key="index"
              >
                {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
              </view>
            </view>
          </view>
          <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
            <view class="">
              风格：<view
                v-for="(item,index) in tag.prod_tag_style"
                :key="index"
              >
                {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
              </view>
            </view>
          </view>
          <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
            <view class="">
              重量：<view
                v-for="(item,index) in tag.prod_tag_weight"
                :key="index"
              >
                {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        class="screen-item "
        v-if="current ===2"
      >
        <view class="customerService">
          <view class="serviceItem">
            <view class="title">
              <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
              <text class="titleText">卖家服务</text>
            </view>
            <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
          </view>
          <view class="serviceItem">
            <view class="title">
              <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
              <text class="titleText">平台承诺</text>
            </view>
            <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
          </view>
          <view class="serviceItem">
            <view class="title">
              <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
              <text class="titleText">正品保证</text>
            </view>
            <view class="itemContent">向您保证所售商品均为正品行货</view>
          </view>
          <view class="serviceItem2">
            <view class="title">
              <text class="titleText">权利申明</text>
            </view>
            <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
          </view>
          <view class="serviceItem2">
            <view class="title">
              <text class="titleText">价格保证</text>
            </view>
            <view class="itemContent">
              <view class="itemContent-child">
                <text class="contentTitle">平台价:</text>
                <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
              </view>
              <view class="itemContent-child">
                <text class="contentTitle">划线价:</text>
                <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
              </view>
              <view class="itemContent-child">
                <text class="contentTitle">平折扣:</text>
                <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
              </view>
              <view class="itemContent-child">
                <text class="contentTitle">异常问题:</text>
                <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
              </view>

            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="D4"
      v-if="current !==2"
    >
      <view class="D4_esvalue">
        <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
        <view class="D4_2">
          <view
            class="star"
            v-for="o in starCount"
            :key="o"
          >
            <image
              src="../../static/img/detail/d_star.png"
              mode="aspectFill"
              style="height: 26rpx; width: 28rpx;"
            ></image>
          </view>
        </view>
      </view>
      <view class="D4_list">
        <view
          v-for="(assess) in goodInfo.judge_tag"
          :key="assess.key"
        >{{assess.name}}</view>
      </view>
    </view>
    <view
      class="D5"
      v-if="current !==2"
    >
      <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
        <image src="/static/img/detail/hr.png"></image>
        <view>商品详细</view>
        <image src="/static/img/detail/hr.png"></image>
      </view>
      <view class="D5_all" v-html="test">
        <!-- <block>
          <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
        </block> -->
      </view>
    </view>

    <!-- 底部菜单 -->
    <view class="botton">
      <view
        @tap="toCart()"
        class="botton_1"
      >
        <image v-bind:src="imgShop.img"></image>
        <view class="botton_image">购物车</view>
      </view>
      <view class="botton_2">
        <view
          class="botton_input"
          @tap="addCart()"
        >加入购物车</view>
        <view
          class="botton_now"
          @tap="goPerchase()"
        >立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import store from '@/store'
export default {
  data () {
    return {
      test: '',
      goodType: 2,
      pid: 0,
      // 购物车数据
      addCartList: {
        mp_id: 335,
        sk_id: 0,
        num: 1,
        price: '',
      },
      screenItems: [
        { current: 0, text: '商品介绍' },
        { current: 1, text: '规格参数' },
        { current: 2, text: '售后保障' },
      ],
      current: 0,
      starCount: 5,
      parameter: [
        { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
        { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
        { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
        { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
        { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
        { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
      ],
      esvalue: '宝贝好评率',
      introduction: {
        material: '钛合金',
        func: '抗疲劳/防辐射',
        rate: '男/女',
      },
      imgAll: '/static/img/detail/d8.png',
      photoes: [
        { value: '日常办公', img: '/static/img/detail/d9.png' },
        { value: '上网', img: '/static/img/detail/d10.png' },
        { value: '追剧', img: '/static/img/detail/d11.png' },
        { value: '玩游戏', img: '/static/img/detail/d12.png' },
      ],
      imgDetail: '/static/img/detail/d13.png',
      imgShop: {
        img: '/static/tab-cart.png',
        IsShown: false,
      },
      tag: {
        prod_tag_freesend: [{
          label: '眼镜盒',
          value: '262',
        }],
      },
    }
  },
  onLoad: function ({ pid }) {
    this.pid = pid
    store.dispatch('read/fetch', {
      pid,
    }).then(() => {
      this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
      this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
      this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
      this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
      this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
      this.parameter[5].slength = `${this.goodInfo.weight}mm`
      this.tag = this.goodInfo.tag
      this.addCartList.price = this.goodInfo.p_sale_price
      this.test = this.goodInfo.prodIntro1
      this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
    })
  },
  computed: {
    updateGoodType () {
      return this.goodType
    },
    goodInfo () {
      console.log(this.$store.state.read.goodInfo)
      return this.$store.state.read.goodInfo
    },
  },
  methods: {
    // 前往购物车
    toCart() {
      uni.switchTab({
        url: '/pages/cart/cart',
        success: res => {},
        fail: (error) => { console.log('跳转购物车失败======>', error) },
        complete: () => { console.log('toCart') },
      })
    },
    // 加入购物车
    addCart () {
      store.dispatch('cart/addCart', {
        uid: this.$store.state.user.userInfo.uid,
        openid: this.$store.state.user.userInfo.openid,
        mp_id: this.addCartList.mp_id,
        sk_id: this.addCartList.sk_id,
        num: this.addCartList.num,
        pid: this.pid,
        price: this.addCartList.price,
        checkedSKU: {},
      })
      store.dispatch('cart/getCartList', {
        uid: this.$store.state.user.userInfo.uid, // 用户id
      })
    },
    goPerchase () {
      // switch (this.updateGoodType) {
      //   case '1':
      console.log('goPerchase')
      uni.navigateTo({
        url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
        success: res => {},
        fail: (error) => { console.log('跳转参数选择失败======>', error) },
        complete: () => { console.log('goPerchase') },
      })
      // break
      // case '2':
      //   uni.navigateTo({
      //     url: '../detailStandard/detailStandard_k',
      //     success: res => {},
      //     fail: () => {},
      //     complete: () => {}
      //   })
      //   break
      // case '3':
      //   uni.navigateTo({
      //     url: '../purchaseLenses/purchaseLenses',
      //     success: res => {},
      //     fail: () => {},
      //     complete: () => {}
      //   })
      //   break
      // case '4':
      //   uni.navigateTo({
      //     url: '../detailStandard/detailStandard_sun',
      //     success: res => {},
      //     fail: () => {},
      //     complete: () => {}
      //   })
      //   break
      // default :
      //   break
      // }
    },
    // 加入购物车
    addCart () {
      store.dispatch('cart/addCart', {
        uid: this.$store.state.user.userInfo.uid,
        openid: this.$store.state.user.userInfo.openid,
        pid: this.pid,
        checkedSKU: {},
      })
      store.dispatch('cart/getCartList', {
        uid: this.$store.state.user.userInfo.uid, // 用户id
      })
    },
    tabChange (e) {
      if (this.current !== e) {
        this.current = e
      }
    },
  },
}
</script>
<style lang='scss'>
.container {
  background-color: #f8f8f8;
}
.D1,
.D2,
.D3,
.D4,
.D6 {
  background: #ffffff;
  margin-bottom: 10px;
  padding: 8px 20px 8px 20px;
  box-sizing: border-box;
  .swiperImage {
    width: 684rpx;
    height: 480rpx;
    image {
      max-width: 100%;
      max-height: 100%;
      border-radius: 16rpx;
    }
  }
}
.D5 {
  background: #ffffff;
  padding: 8px 20px 8px 20px;
  box-sizing: border-box;
}
.swiperImage {
  width: 100%;
  height: 560rpx;
  .swiper-item {
    width: 100%;
    image {
      width: 100%;
    }
  }
}
.D1 {
  .D1_price {
    color: #eb5d3b;
    font-size: 18px;
    margin-top: 5px;
    font-family: "PingFangSC-Semibold";
    display: flex;
    justify-content: space-between;
    .D1_number {
      color: #999999;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
    }
  }
  .D1_name {
    font-size: 16px;
    font-family: "PingFangSC-Semibold";
    margin-top: 5px;
    .D1_name1 {
      font-weight: bold;
      font-size: 16px;
      color: #333333;
    }
  }
  .D1_spans {
    font-size: 10px;
    color: #999999;
    margin-top: 5px;
    span {
      height: 14px;
      margin-right: 10px;
    }
  }
}
.D2 {
  font-size: 14px;
  font-family: "PingFangSC-Regular";
  view {
    height: 24px;
  }
  .D2_span1 {
    color: #999999;
  }
  .D2_span2 {
    color: #333333;
  }
}
.D3 {
  .screenBar {
    width: 670rpx;
    margin-top: 20rpx;
    margin-bottom: 24rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #333333;
    transition: all 0.2s;
  }
  .screen-item {
    font-size: 32rpx;
    color: #333333;
    display: flex;
    transition: all 0.2s;
    .D3_list {
      margin-bottom: 4px;
    }
    .D3_list view {
      display: flex;
      align-content: center;
      font-size: 14px;
      color: #333333;
    }
    .D3_list image {
      width: 50px;
      height: 25px;
      margin-right: 6px;
    }
    .D3_list span {
      margin-left: 6px;
      margin-right: 5px;
      font-family: "PingFangSC-Regular";
    }
  }
  .active {
    border-bottom: 4rpx solid #ff6b4a;
  }
  .customerService {
    margin-bottom: 90rpx;
    .serviceItem {
      margin-bottom: 32rpx;
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        .titleText {
          font-size: 14px;
          color: #333333;
          margin-bottom: 12rpx;
        }
      }
      .itemContent {
        font-size: 14px;
        color: #999999;
        margin-left: 18rpx;
      }
    }
    .serviceItem2 {
      margin-left: 18rpx;
      margin-bottom: 32rpx;
      .titleText {
        font-size: 14px;
        color: #ff6b4a;
      }
      .itemContent {
        font-size: 14px;
        color: #999999;
        .itemContent-child {
          margin-bottom: 40rpx;
          .contentTitle {
            border-bottom: 1px solid #ff6b4a;
          }
        }
      }
    }
  }
}
.D4 {
  .D4_esvalue {
    font-size: 14px;
    color: #333333;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .D4_2 {
      width: 90px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .D4_esvalue view {
    font-size: 14px;
    color: #333333;
    font-weight: bold;
  }
  .D4_list{
    display: grid;
    grid-row-gap: 10px;
    grid-column-gap: 4px;
  }
  .D4_list view {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    width: 118px;
    height: 24px;
    border-radius: 2px;
    background: #f2f2f2;
    color: #666666;
    // letter-spacing: 1px;
  }
}
.D5 {
  .D5_fixed1 {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 12px;
    view {
      font-size: 14px;
      color: #333333;
      font-weight: bold;
      font-family: "PingFangSC-Medium";
      line-height: 24px;
    }
    image {
      width: 240rpx;
      height: 3px;
      margin-top: 10px;
    }
  }
  .D5_all {
    width: 100%;
    margin-top: 30rpx;
    margin-right: 30rpx;
    margin-bottom: 180rpx;
    font-family: "PingFangSC-Regular";
    // border: #999999 solid 1.5px;
  }
}
.D6 {
  width: 100%;
  height: 430px;
  background: #f9f6ed;
  margin-bottom: 74px;
  view {
    text-align: center;
  }
  .D6_v1 {
    font-weight: bold;
  }
  .D6_v2 {
    font-size: 14px;
    margin-bottom: 30px;
  }
  .D6_v5 {
    .D6_v5_s1 {
      font-weight: bold;
    }
    .D6_v5_s2 {
      font-size: 14px;
    }
  }
}
.botton {
  position: fixed;
  bottom: 0;
  height: 74px;
  width: 100%;
  background: #ffffff;
  padding: 20px 20px 8px 20px;
  font-family: "PingFangSC-Regular";
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-content: center;
  .botton_1 {
    width: 20%;
    height: 100%;
    text-align: center;
    color: #989898;
  }
  image {
    width: 60%;
    height: 30px;
  }
  .botton_image {
    font-size: 12px;
    text-align: center;
  }
  .botton_2 {
    width: 74%;
    height: 86%;
    display: grid;
    grid-template-columns: 50% 50%;
  }
  .botton_input {
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    background: #fff0ec;
    font-size: 16px;
    color: #ff6b4a;
    border-radius: 20px 0 0 20px;
  }
  .botton_now {
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    background: #ff6b4a;
    font-size: 16px;
    color: #ffffff;
    border-radius: 0 20px 20px 0;
  }
}
</style>