<template>
  <view class="detail">
    <!-- 轮播图 -->
    <view class="carousel-map">
      <u-swiper :list="list3" previousMargin="0" nextMargin="100" circular :autoplay="false" bgColor="#ffffff" />
      <view class="carousel-item">
        <view class="mark">
          <view class="mark-item">{{merchant.score}}分</view>
          <u-rate :count="count" v-model="value" active-color="#fff" inactive-color="#fff" :size="12" />
        </view>
        <view class="good-item">近期有6266个购买者给了给好评</view>
      </view>
    </view>

    <!-- 商家信息 -->
    <view class="merchant-info">
      <view class="info-title">
        <view>{{merchant.name}}</view>
        <text class="info-mark">{{merchant.sale/10000}}w+单</text>
      </view>
      <view class="info-tag">商家信息</view>
      <view class="info-item">
        <view class="info-text">
          <view>营业时间：{{merchant.opening}}</view>
          <view>电话号码：{{merchant.mobile}}</view>
          <view>{{merchant.address}}</view>
          <view class="distance">{{(merchant.distance/1000).toFixed(2)}}km</view>
        </view>
        <view class="info-icon">
          <view class="info-map">
            <u-icon name="map" size="25"></u-icon>
            <view>导航</view>
          </view>
          <view class="info-map" @click="handlerMakeCall">
            <u-icon name="phone" size="25"></u-icon>
            <view>电话</view>
          </view>
        </view>
      </view>
    </view>

    <view class="list" v-for="(item,index) of goods" @click="handlerSkipGoodsDetail(item,index)">
      <!-- <image class="img" :src="
		      error || !loaded
		        ? 'https://cdn.uviewui.com/uview/album/10.jpg'
		        : goods.logo
		    " mode="scaleToFill" @click="$Router.push(`/pages/business/detail?id=${item.id}`)"></image> -->
      <image class="img" src="../../static/logo.png"></image>
      <view>
        <view class="item-text">{{ item.name }}</view>
        <view class="item-flex">
          <view class="star">
            <u-rate :count="item.score" :size="14" />
            <text class="line">|</text>
            <text class="points">{{ item.score }}分</text>
          </view>
          <view>{{ item.score }}单</view>
        </view>
        <view class="list-item">
          <view class="list-price">
            <view class="item-l">券后价 <span>￥{{ (item.originalPrice).toFixed(2) }}</span> </view>
            <view class="item-r">门市价 <span>￥{{ (item.specialPrice).toFixed(2) }}</span></view>
          </view>
          <view class="btn-box">
            <button class='btn btn1' @click.stop="handlerService(item,index)">预约</button>
            <button class='btn btn2' @click.stop="handlerSkipBuy(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>

    <u-popup :show="reserve_show" @close="reserve_show = false" @open="open" 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="handlerSelectTime" :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' 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>

  </view>
</template>

<script>
  import {
    getSellsDetail,
    addReservation
  } from '@/api/business.js'
  import {
    getCurrentLocation
  } from '@/api/home';
  export default {
    data() {
      return {
        merchant: {},
        goods: [],
        count: 5,
        value: 3,
        list3: [],

        queryParams: { //请求参数
          id: null, //商家ID
          region: null, //地区编码
          longitude: null, //经度
          latitude: null, //纬度
        },

        template_value: '',
        time_show: false,
        reserve_show: false,
        value: '',

        addParams: {
          merchantId: '',
          mobile: '',
          appointTime: ''
        },
        template_time: ''
      };
    },
    onLoad(option) {
      this.queryParams.id = option.id
      this.handlerInitLocation()
    },
    watch: {
      reserve_show(newValue) {
        if (!newValue) {
          this.addParams.mobile = ''
          this.addParams.appointTime = ''
          this.template_time = ''
        }
      }
    },
    methods: {
      // 获取当前经纬度
      handlerInitLocation() {
        uni.getLocation({
          type: 'gcj02',
          success: res => {
            this.queryParams.longitude = res.longitude;
            this.queryParams.latitude = res.latitude;
            let point = {
              latitude: res.latitude,
              longitude: res.longitude
            }
            getCurrentLocation(point).then(rc => {
              this.queryParams.region = rc.data.id
              this.handlerInitList()
            })
          },
          fail: (rs) => {
            uni.showToast({
              title: rs,
              icon: 'none'
            })
          }
        });
      },
      // 初始化列表
      handlerInitList() {
        getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
          this.merchant = res.data.merchant
          this.goods = res.data.goods,
            this.list3 = res.data.merchant.banners.map(h => h.url)
        })
      },
      // 点击拨打电话
      handlerMakeCall() {
        uni.makePhoneCall({
          phoneNumber: this.merchant.mobile
        })
      },
      // 点击跳转到商品详情
      handlerSkipGoodsDetail(item, index) {
        uni.navigateTo({
          url: `/pages/business/service/detail?id=${item.id}`
        })
      },
      // 预约
      handlerService(item, index) {
        this.addParams.merchantId = item.id
        this.reserve_show = true
      },
      // 购买
      handlerSkipBuy(item, index) {
        uni.navigateTo({
          url: '/pages/order/order'
        })
      },

      open() {},
      // 点击选择时间
      handlerSelectTime() {
        this.time_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 == 200) {
              this.handlerInitList()
              this.reserve_show = false
              uni.showToast({
                title: '预约成功',
                icon: 'success',
              })
            } 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
        }
      },
    }
  };
</script>

<style lang="scss" scoped>
  .detail {
    min-height: 100vh;
    background-color: #efefef;
  }

  // 轮播图
  .carousel-map {
    background-color: #fff;
    padding: 0 20rpx;

    .carousel-item {
      height: 90rpx;
      display: flex;
      background-color: #fff7e0;
      border-radius: 0 0 10rpx 10rpx;

      .mark {
        background-color: #ff4b04;
        color: #fff;
        padding: 20rpx;
        border-radius: 0 0 0 10rpx;
        box-sizing: border-box;

        .mark-item {
          text-align: center;
        }
      }

      .good-item {
        font-size: 24rpx;
        color: #a39c85;
        line-height: 90rpx;
        margin-left: 40rpx;
      }
    }
  }

  // 商家信息
  .merchant-info {
    padding: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;

    .info-title {
      display: flex;
      justify-content: center;
      font-size: 40rpx;
      font-weight: bold;

      .info-mark {
        font-size: 12px;
        font-weight: normal;
        color: #999;
        margin: 20rpx 0 20rpx 30rpx;
      }
    }

    .info-tag {
      width: 160rpx;
      padding: 10rpx;
      text-align: center;
      border: 1px solid #5992bb;
      color: #5992bb;
      margin-bottom: 10rpx;
    }

    .info-item {
      display: flex;
      justify-content: space-between;

      .info-text {
        font-size: 30rpx;
        line-height: 58rpx;
        color: #212020;
        font-weight: 600;

        .distance {
          font-size: 26rpx;
          color: #555252;
          font-weight: normal;
        }
      }

      .info-icon {
        display: flex;
      }

      .info-map {
        padding: 10rpx;
        font-size: 28rpx;
        margin-top: 120rpx;
      }
    }
  }

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

    .img {
      width: 120px;
      height: calc(100% - 20rpx);
      margin: 10rpx 20rpx 10rpx 0;
    }

    .item-text {
      font-weight: bold;
      margin: 10rpx 0 10rpx;
      color: #333;
    }

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

      .star {
        display: flex;

        .line {
          margin-left: 16rpx;
          margin-top: 5rpx;
          font-size: 22rpx;
        }

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

    .list-item {
      margin-top: 40rpx;
      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 {
        display: flex;
        margin-left: 30rpx;

        .btn {
          font-size: 28rpx;
          height: 70rpx;
        }

        .btn1 {
          border-radius: 40rpx 0 0 40rpx;
          border: 2rpx solid #EC5729;
          color: #EC5729;
          background-color: #fff;
        }

        .btn2 {
          color: #fff;
          background-color: #EC5729;
          border-radius: 0 40rpx 40rpx 0;
        }
      }

    }
  }

  .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: #000;
        padding-left: 20rpx;
      }

      .time-box {
        margin: 10rpx 20rpx;
      }
    }

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

  .time-text {
    color: #D4D6DC;
  }
</style>