<template>
  <view class="container">
    <!-- 轮播图 -->
    <view class="carousel-map">
      <u-swiper :list="swiperList" previousMargin="30" nextMargin="30" circular bgColor="#000" height="430" />
      <!-- <image class='top-img' src='@/static/icon_test.jpg'></image> -->
    </view>

    <!-- 商家信息 -->
    <view class="center-box">
      <view class="merchant-info">
        <view class="info-title">
          <view>{{ merchant.name }}</view>
        </view>

        <view class='info-item'>
          <view class='item-left'>
            <view class='left-item'>
              <view class='left-name'>营业时间:</view>
              <view class='left-value'>{{ merchant.opening }}</view>
            </view>
            <view class='left-item'>
              <view class='left-name'>营业状态:</view>
              <view class='left-value'>{{ merchant.businessStatus == "1" ? "休息中" : "营业中"  }}</view>
            </view>
          </view>
          <view class='item-right'>
            <view class="info-icon">
              <view class="info-map" @click="handlerFavouriteShop">
                <view class="icon-box">
                  <u-icon :name="merchant.favorites ? 'heart-fill' : 'heart' " size="22" />
                </view>
                <view style="font-size: 20rpx; margin-top: 5rpx">收藏</view>
              </view>
              <view class="info-map" @click="handlerMakeCall">
                <view class="icon-box">
                  <u-icon name="phone" size="22"></u-icon>
                </view>
                <view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
              </view>
            </view>
          </view>
        </view>


        <view class='info-item' style="border: none;">
          <view class='item-left'>
            <view class='address'> {{ merchant.address }} </view>
            <view class='distance'> 距离您{{ (merchant.distance / 1000).toFixed(2) }}km </view>
          </view>
          <view class='item-right'>
            <view class="info-map" >
              <view class="icon-box">
                <u-icon name="map" size="22"></u-icon>
              </view>
              <view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
            </view>
          </view>
        </view>
      </view>

      <u-gap height="8" bgColor="#F9F9F9"></u-gap>

      <view class="evaluate-context">
        <view class="flex">
          <view class="flex">
            <span class='evaluate-title'>优惠</span>
            <view class="text_title"> 您有{{ coupons.length }}张购物券可领取 </view>
          </view>
          <view class="flex" style='color: #ED4444 ;' @click="openPopup">
            <span class="text_title" style="margin-right: 6rpx">去领取</span>
            <u-icon name="arrow-right" size="14" color="#ED4444" />
          </view>
        </view>
      </view>

      <u-gap height="8" bgColor="#F9F9F9"></u-gap>

      <view class="categoryList">
        <u-tabs :list="categoryList" @change='handlerChangeTab'></u-tabs>
      </view>

      <u-gap height="8" bgColor="#F9F9F9"></u-gap>

      <view>
        <view class="list" :key="index" v-for="(item, index) of goods" @click="handlerSkipGoodsDetail(item, index)">
          <image class="img" :src="!Boolean(item.logo) ? '@/static/QR57a.jpg' : item.logo"></image>
          <view class="listDetail">
            <view class="item-text">
              <view class="item-text-left"> {{ item.name }} </view>
              <view class="item-text-right">
                <image class="img" src="@/static/icon/shopCar.png" @click.stop="handlerAddCart(item)"></image>
              </view>
            </view>
            <view class="item-flex">
              <view class="star">
                <u-rate count="5" v-model="item.score" readonly :size="14" />
                <text class="line">|</text>
                <text class="points">{{ item.score }}分</text>
              </view>
              <view>
              </view>
            </view>
            <view class="list-item">
              <view class="list-price">
                <view class="item-l">
                  优惠价 <span>￥{{ item.specialPrice.toFixed(2) }}</span>
                </view>
                <view class="item-r">
                  门市价 <span>￥{{ item.originalPrice.toFixed(2) }}</span>
                </view>
              </view>
              <view class="btn-box">
                <button class="btn" @click.stop="handlerService(item, index)">预约</button>
              </view>
            </view>
          </view>

        </view>

        <u-empty v-if="goods.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
        </u-empty>
      </view>
    </view>

    <!-- 底部购物车 -->
    <view class="bottom-box">
      <settleBottomComponent :goodsCateList.sync='goodsCateList' :ids='ids' @handlerDeleteGoods='handlerDeleteGoods' />
    </view>

    <!-- 弹窗 -->
    <u-popup :show="reserve_show" @close="reserve_show = false" round="20" mode="center">
      <view class="draw-box">
        <view class="draw-title"> 预约服务 </view>
        <view class="draw-item">
          <view class="item-text">时间</view>
          <view class="time-box" @click="time_show = true" :class="template_time == '' ? 'time-text' : ''">
            {{ template_time == '' ? '请选择时间' : template_time }}
          </view>
        </view>
        <view class="draw-item">
          <view class="item-text">联系方式</view>
          <u--input placeholder="请输入联系方式" border="surround" type="number" maxlength='11'
            v-model="addParams.mobile"></u--input>
        </view>
        <button class="draw-btn" @click="handlerDrawConfirmBtn">确定</button>
      </view>
    </u-popup>

    <!-- 时间 -->
    <u-datetime-picker :show="time_show" :minDate="Number(new Date())" :formatter="formatter"
      v-model="addParams.appointTime" @change="handlerTimeChange" @confirm="time_show = false"
      @cancel="time_show = false" mode="datetime">
    </u-datetime-picker>

    <u-popup :show="show" mode="bottom" :safeAreaInsetBottom="true">
      <view>
        <cpuponComponents @close="closeCoupon" :coupons="coupons"></cpuponComponents>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    getSellsDetail,
    addReservation,
    addShoppingCart,
    getCartList,
    addFavorite,
    cancelFavorite,
    changeGoodsType
  } from '@/api/client/business.js';
  import {
    getCurrentLocation,
    hotMerchant
  } from '@/api/client/home';
  import {
    accountTotIdGetConponList
  } from "@/api/client/mine.js"
  // import GainCoupon from '@/pages/client/clientPackage/serviceDetail/GainCoupon.vue';
  import cpuponComponents from "./components/couponComponent.vue"
  import settleBottomComponent from "./components/settleBottomComponent.vue"
  import {
    mapGetters
  } from 'vuex';
  export default {
    components: {
      cpuponComponents,
      settleBottomComponent
    },
    data() {
      return {
        show: false,
        merchant: {},
        goods: [],
        swiperList: [],
        categoryList: [{
          name: '全部',
          id: 0
        }], // 分类列表
        goodsCateList: [],
        queryParams: {
          //请求参数
          id: null, //商家ID
          region: null, //地区编码
          longitude: null, //经度
          latitude: null, //纬度
        },
        time_show: false,
        reserve_show: false,
        addParams: {
          merchantId: '',
          mobile: '',
          appointTime: '',
          goodsName: ''
        },
        template_time: '',
        ids: null, // 商家id
        coupons: []
      };
    },
    onLoad(option) {
      console.log("@@@@option", option)
      this.ids = option.id
      this.queryParams.id = option.id;
    },
    mounted() {
      let {
        latitude,
        longitude,
        region
      } = this.location
      this.queryParams.latitude = latitude
      this.queryParams.longitude = longitude
      this.queryParams.region = region
      this.handlerInitList();
    },
    onShow() {
      this.handletInitShopCarList()
    },
    computed: {
      ...mapGetters(['location'])
    },
    watch: {
      reserve_show(newValue) {
        if (!newValue) {
          this.addParams.mobile = '';
          this.addParams.appointTime = '';
          this.template_time = '';
        }
      },
    },

    methods: {
      // 初始化购物车列表
      handletInitShopCarList() {
        this.swiperList = []
        getCartList(this.ids).then(res => {
          let {
            merchantDTO,
            cartItems
          } = res.data
          // 商品轮播图
          merchantDTO.banners.map(rs => {
            this.swiperList.push(rs.url)
          })
          if (cartItems.length == 0) {
            this.goodsCateList = []
          } else {
            this.goodsCateList = cartItems
          }
        })
        accountTotIdGetConponList(this.ids, {
          paging: '1,10'
        }).then(res => {
          this.coupons = res.data.records
        })
      },
      // 初始化列表
      handlerInitList() {
        this.categoryList = [{
          name: '全部',
          id: 0
        }]
        getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
          this.merchant = res.data.merchant;
          this.goods = res.data.goods;
          res.data.categories.map(rs => {
            this.categoryList.push(rs)
          })
        });
        // 获取锚点
        hotMerchant(this.queryParams.id).then();
      },
      // 点击拨打电话
      handlerMakeCall() {
        uni.makePhoneCall({
          phoneNumber: this.merchant.mobile,
          success: res => {
            console.log("@@@res", res)
          },
          fail: err => {
            console.log("@@@err", err)
          }
        });
      },
      // 点击跳转到商品详情
      handlerSkipGoodsDetail(item, index) {
        uni.navigateTo({
          url: `/pagesHome/marketer/productDetail?id=${item.id}&shopId=${this.queryParams.id}`,
        });
      },
      // 预约
      handlerService(item, index) {
        this.addParams.merchantId = this.ids;
        this.addParams.goodsId = item.id;
        this.addParams.goodsName = item.name;
        this.reserve_show = true;
      },
      // 点击预约确定按钮
      handlerDrawConfirmBtn() {
        if (this.addParams.appointTime == '') {
          uni.showToast({
            title: '请选择时间',
            icon: 'none',
          });
          return;
        } else if (this.addParams.mobile == '') {
          uni.showToast({
            title: '请填写手机号',
            icon: 'none',
          });
          return;
        } else if (!/^1[34578]\d{9}$/.test(this.addParams.mobile)) {
          uni.showToast({
            title: '请填写正确的手机号',
            icon: 'none',
          });
          return false;
        } else {
          addReservation(this.addParams.merchantId, this.addParams).then(res => {
            if (res.code === 'OK') {
              this.handlerInitList();
              this.reserve_show = false;
              uni.showToast({
                title: '预约成功',
                icon: 'success',
              });
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
              });
              return;
            }
          });
        }
      },
      // 收藏按钮
      handlerFavouriteShop() {
        if (this.merchant.favorites) {
          cancelFavorite(this.ids).then(res => {
            if (res.code === 'OK') {
              this.handlerInitList()
              uni.showToast({
                title: '取消成功',
                icon: 'none'
              })
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
              return
            }
          })
        } else {
          addFavorite(this.ids).then(res => {
            if (res.code === 'OK') {
              this.handlerInitList()
              uni.showToast({
                title: '收藏成功',
                icon: 'none'
              })
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
              return
            }
          })
        }
      },
      // 添加购物车
      handlerAddCart(e) {
        let params = {
          merchantId: this.ids,
          goodsId: e.id,
          quantity: 1,
          price: e.specialPrice,
          goodsName: e.name,
          goodsPic: e.logo,
          originalPrice: e.originalPrice,
        }
        addShoppingCart(params).then(res => {
          if (res.code === 'OK') {
            this.handletInitShopCarList()
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
            return
          }
        })
      },
      formatter(type, value) {
        if (type === 'minute') {
          return `00`;
        }
        return value;
      },

      // 选择时间
      handlerTimeChange(e) {
        if (e) {
          this.addParams.appointTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
          this.template_time = this.addParams.appointTime;
        }
      },
      handlerDeleteGoods(e) {
        this.handletInitShopCarList()
      },
      // 切换tab
      handlerChangeTab(e) {
        if (e.id == 0) {
          this.handlerInitList()
        } else {
          changeGoodsType(this.ids, {
            categoryId: e.id,
            size: 20
          }).then(res => {
            this.goods = res.data;
          })
        }
      },
      openPopup() {
        this.show = true;
      },
      closeCoupon(data) {
        this.show = data;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    position: relative;

    // 轮播图
    .carousel-map {
      width: 100%;
      height: 430rpx;

      // .top-img {
      //   width: 100%;
      // }
    }

    .center-box {
      width: 100%;
      position: absolute;
      border-radius: 32rpx 32rpx 0 0;
      background-color: #fff;
      padding-bottom: 200rpx;
      // 商家信息
      .merchant-info {
        padding: 32rpx 32rpx 0;

        .info-title {
          color: #0C1223;
          font-size: 34rpx;
          font-weight: bold;
          border-bottom: 2rpx solid #D8D8D8;
          padding-bottom: 32rpx;
        }

        .info-item {
          display: flex;
          justify-content: space-between;
          padding: 24rpx 0;
          border-bottom: 2rpx solid #D8D8D8;
          align-items: center;
          color: #0C1223;
          font-size: 28rpx;

          .item-left {
            .left-item {
              display: flex;
              margin-bottom: 10rpx;

              .left-name {
                margin-right: 10rpx;
              }

              .left-value {}
            }

            .left-item:last-child {
              margin-bottom: 0;
            }

            .address {
              color: #0C1223;
              font-weight: bold;
              margin-bottom: 10rpx;
            }

            .distance {
              color: #999999;
              font-size: 24rpx;
            }
          }

          .item-right {
            .info-icon {
              display: flex;
              align-items: center;
            }

            .info-map {
              padding: 10rpx;
              font-size: 28rpx;
              text-align: center;

              .icon-box {
                background-color: #F5F5F5;
                border-radius: 50%;
                padding: 10rpx;
              }
            }
          }
        }
      }
    }
  }



  .evaluate-context {
    background-color: #fff;
    padding:32rpx;
    .evaluate-title{
      color:#ED4444;
      font-size: 28rpx;
      font-weight: bold;
      margin-right:16rpx;
    }
    .text_title {
      font-size: 24rpx;
    }
  }

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .list {
    height: 220rpx;
    background-color: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;
    display: flex;

    .img {
      width: 140px;
      height: 100%;
      display: block;
      margin-right: 10rpx;
      border-radius: 10rpx;
    }

    .listDetail {
      width: calc(100% - 160rpx);
    }

    .item-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      margin: 10rpx 0 10rpx;
      color: #333;
      font-size: 36rpx;

      .item-text-left {}

      .item-text-right {
        .img {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }

    .item-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      margin: 0 20rpx 10rpx 0;
      color: #0d0d0d66;

      .star {
        display: flex;
        align-items: center;

        .line {
          margin: 0 12rpx;
          margin-top: 5rpx;
          font-size: 22rpx;
        }

        .points {
          color: #ff4b04;
          font-size: 22rpx;
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }

    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .list-price {
        .item-l {
          color: #e35240;
          font-weight: bold;
          font-size: 32rpx;

          span {
            font-size: 40rpx;
          }
        }

        .item-r {
          color: #a8a8a8;
          margin-top: 10rpx;

          span {
            text-decoration: line-through;
          }
        }
      }

      .btn-box {

        .btn {
          font-size: 26rpx;
          border-radius: 40rpx;
          border: 2rpx solid #ec5729;
          color: #ec5729;
          background-color: #fff;
        }
      }
    }
  }

  .draw-box {
    width: 560rpx;
    padding: 20rpx;

    .draw-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #000;
      margin-bottom: 30rpx;
    }

    .draw-item {
      margin-bottom: 20rpx;

      .item-text {
        font-size: 28rpx;
        color: #303133;
        padding-left: 20rpx;
        margin-bottom: 8rpx;
      }

      .time-box {
        border-width: 0.5px !important;
        border-color: #dadbde !important;
        border-style: solid;
        padding: 12rpx 12rpx 18rpx 18rpx;
        border-radius: 8rpx;
      }
    }

    .draw-btn {
      width: 90%;
      background-color: #5992bb !important;
      color: #fff;
      font-size: 28rpx;
      border-radius: 20rpx;
    }
  }

  .time-text {
    color: #d4d6dc;
  }

  /* 分类 */

  .categoryList {
    background-color: #fff;
    padding-bottom:10rpx;
  }

  .bottom-box {
    width: 100%;
    position: fixed;
    bottom: 5%;
  }
</style>
