<template>
  <view class="service">
    <view class="service-content">
      <!-- 顶部 -->
      <!-- <view class="flex" style="margin-top: 10rpx">
        <view class="flex">
          <u-icon name="share-square" size="24" />
          <text style="font-size: 24rpx; color: #666">七仔美容</text>
        </view>
        <u-icon name="share-square" size="24" @click="handlerShare" />
      </view> -->

      <!-- 标题和轮播图 -->
      <view>
        <view class="service-title">{{ goods.name }}</view>
        <u-swiper :list="banners" previousMargin="30" nextMargin="30" circular bgColor="#ffffff" height="190" />
      </view>

      <!-- 价格 -->
      <view class="flex price-content">
        <view>
          <view>
            <text class="price">￥</text>
            <text class="price-text">{{ goods.specialPrice }}</text>
          </view>
          <text class="price">券后￥{{ goods.originalPrice }}</text>
        </view>
        <!-- <view class="text_title">半售200+</view> -->
      </view>

      <!-- 评价 -->
      <view>
        <!-- <view class="flex evaluate">
          <view class="flex">
            <text style="margin-right: 30rpx">评价</text>
            <u-rate :value="5" readonly activeColor="#f3b935" />
            <text style="font-size: 24rpx; color: #f4b931">100%</text>
          </view>
          <view class="flex">
            <text class="text_title" style="margin-right: 20rpx">共40个消费评价</text>
            <u-icon name="arrow-right" size="16" color="#999" />
          </view>
        </view> -->
        <!-- <view class="evaluate-context">
          <view class="flex evaluate">
            <view class="flex">
              <text style="margin-right: 30rpx">优惠</text>
              <view class="text_title"> 您有2张8元无门槛券待额 </view>
            </view>
            <view class="flex" @click="openPopup">
              <text class="text_title" style="margin-right: 20rpx">去领取</text>
              <u-icon name="arrow-right" size="16" color="#999" />
            </view>
          </view>
        </view> -->
      </view>
    </view>

    <!-- 弹窗 -->
    <!-- <u-popup :show="show" mode="bottom" :safeAreaInsetBottom="true">
      <view>
        <GainCoupon @close="closeCoupon" :coupons="coupons"></GainCoupon>
      </view>
    </u-popup> -->

    <!-- 占位 -->
    <view class="placeholder"></view>

    <!-- 服务详情 -->
    <view class="detail">
      <view>
        <u-tabs :list="detailList" lineWidth="50" lineColor="#fdbf05" :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }" :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)',
          }" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;" @change='handlerChange' />
      </view>

      <view v-show="current == 0">
        {{ goods.description }}
      </view>
    </view>

    <!-- 评价内容 -->
    <!-- <view class="Evaluate-content">
      <EvaluateContent :comments="comments"></EvaluateContent>
    </view> -->

    <!-- 底部 -->
    <view class="service-footer">
      <view class="user-operate" v-for="(item, index) in userOperate" :key="index" @tap="collect(item, index)">
        <u-icon class="user-operate-icon" :name="item.icon" size="24" />
        <text class="user-operate-text">{{ item.name }}</text>
      </view>
      <view class="user-operate" @tap="handlerFavorite">
        <u-icon class="user-operate-icon" :name="goods.favorites ? favorite_list.fill : favorite_list.icon" size="24" />
        <text class="user-operate-text">{{ favorite_list.name }}</text>
      </view>
      <view class="buyNow">
        <view class="cart" @click="handlerAddCart">加入购物车</view>
        <!-- <view class="buy" @click="handlerImmediateBy">立即购买</view> -->
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getGoodsDetailApi,
    addFavorite,
    addShoppingCart,
    addGoodsFavorite,
    cancelFavorite,
    // getGoodsConcentList,
    accountToOrderGetComment,
  } from '@/api/client/business.js';
  import {  accountTotIdGetConponList } from '@/api/client/mine.js';
  import couponComponent from './components/couponComponent.vue';
  import evaluateComponent from './components/evaluateComponent.vue';
  export default {
    components: {
      couponComponent,
      evaluateComponent,
    },
    data() {
      return {
        userOperate: [{
            name: '店铺',
            icon: 'file-text',
          },
          // ,
          //       {
          //         name: '立即咨询',
          //         icon: 'chat',
          //       },
        ],
        favorite_list: {
          name: '收藏',
          icon: 'heart',
          fill: 'heart-fill',
        },
        goods: [], //商品详情
        banners: [],
        coupons: [], //优惠券
        comments: [], // 评论
        id: '', //商品id
        shoopId: null, //店铺id
        show: false,
        detailList: [{
            id: '1',
            name: '服务详情',
          },
          {
            id: '2',
            name: '购买须知',
          },
          {
            id: '3',
            name: '网友评价',
          },
        ],
        current: 0
      };
    },
    onLoad(option) {
      // 获取商品详情接口
      this.shoopId = option.shopId;
      this.id = option.id;
      this.handlerInitList(this.id)
    },
    methods: {
      handlerChange(e) {
        this.current = e.index
      },
      openPopup() {
        this.show = true;
      },
      // closeCoupon(data) {
      //   this.show = data;
      //   this.handlerGetGoodsConcentList()
      // },
      handlerInitList(id) {
        getGoodsDetailApi(id).then(res => {
          this.goods = res.data.goods;
          this.comments = res.data.comments;
          res.data.goods.banners.map(rs => {
            this.banners.push(rs.url);
          });
          this.handlerGetGoodsConcentList();
        });
      },
      handlerGetGoodsConcentList() {
        // 获取商品评价列表
        let params = {
          // merchantId:this.shoopId,
          goodsId: this.goods.id,
        };
        accountToOrderGetComment(params).then(res => {
          console.log('@@@@res', res);
        });

        // 根据id获取优惠券列表
        // accountTotIdGetConponList(this.shoopId,{ paging:'1,10' }).then(res=>{
        //   this.coupons = res.data.records
        // })
      },

      // 点击分享
      handlerShare() {
        uni.share({
          provider: 'weixin',
          scene: 'WXSceneSession',
          type: 1,
          summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
          success: function(res) {},
          fail: function(err) {},
        });
      },

      // 选择底部tab店铺收藏咨询
      collect(item, index) {
        switch (index) {
          case 0:
            uni.navigateBack(-1)
            break;
          case 1:
            uni.showToast({
              title: '暂无',
              icon: 'none',
            });
            break;
        }
      },
      // 点击收藏1
      handlerFavorite() {
        if (this.goods.favorites) {
          cancelFavorite(this.id).then(res => {
            if (res.code === 'OK') {
              this.handlerInitList(this.id);
              uni.showToast({
                title: '取消收藏',
                icon: 'none',
              });
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
              });
              return;
            }
          });
        } else {
          addGoodsFavorite(this.id).then(res => {
            if (res.code === 'OK') {
              this.handlerInitList(this.id);
              uni.showToast({
                title: '收藏成功',
                icon: 'none',
              });
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
              });
              return;
            }
          });
        }
      },

      // 点击购买按钮
      // handlerImmediateBy() {
      //   this.$store.commit('order/GET_ORDER_LIST', this.goods);
      //   uni.navigateTo({
      //     url: `/pages/client/clientPackage/uptickOrder?id=${this.id}`,
      //   });
      // },

      // 加入购物车
      handlerAddCart() {
        let params = {
          merchantId: this.shoopId,
          goodsId: this.goods.id,
          quantity: 1,
          price: this.goods.specialPrice,
          goodsName: this.goods.name,
          goodsPic: this.goods.logo,
          originalPrice: this.goods.originalPrice,
        };
        addShoppingCart(params).then(res => {
          if (res.code === 'OK') {
            uni.showToast({
              title: '购物车添加成功',
              icon: 'none',
            });
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none',
            });
            return;
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .service {
    min-height: 100vh;
    background-color: #fff;
    padding: 0 20rpx;

    .service-content {
      .service-title {
        font-size: 36rpx;
        font-weight: bold;
        margin: 20rpx;
      }
    }
    .price-content {
      margin: 20rpx;
      .price {
        font-size: 24rpx;
        color: #e02e24;
      }
      .price-text {
        font-size: 36rpx;
        color: #e02e24;
      }
    }
    .evaluate {
      height: 30rpx;
      margin: 30rpx 0 30rpx 20rpx;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #f4f4f4;
    }
    .evaluate-context {
      .evaluate {
        border-bottom: none;
        padding-bottom: 10rpx;
      }
    }

    /* 占位 */
    .placeholder {
      height: 30rpx;
      background-color: #f4f4f4;
    }
  }
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text_title {
    font-size: 24rpx;
    color: #999;
  }

  // 底部
  .service-footer {

    padding: 20rpx 40rpx 80rpx 60rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-top: 1px solid #eb8b8b;
    box-sizing: border-box;

    .u-icon {
      justify-content: center !important;
    }

    .user-operate {
      text-align: center;
    }

    .user-operate-text {
      font-size: 24rpx;
      font-weight: 600;
    }

    .buyNow {
      width: 200px;
      height: 40px;
      display: flex;
      justify-content: flex-end;
      font-size: 26rpx;
      color: #fff;
      text-align: center;
      .cart {
        width: 150px;
        line-height: 40px;
        cursor: pointer;
        background-color: #fe9f1e;
        // border-radius: 40px 0px 0px 40px;
        border-radius: 40px ;
      }
      .buy {
        width: 100px;
        line-height: 40px;
        cursor: pointer;
        background-color: #fe7421;
        border-radius: 0 40px 40px 0;
      }
    }
  }
</style>
