<template>
  <view class="container">
    <view class="white_container">
      <swiper class="swiper" autoplay>
        <swiper-item v-for="(item, pageIndex) in info.bigImg" :key="pageIndex">
          <image class="pic" :src="picUrl + item" />
        </swiper-item>
      </swiper>

      <view class="main">
        <view class="title">{{ info.merchant_name }}</view>

        <!-- <u-icon name="star-fill" color="#FFB84D" /> -->
        <div class="startList">
          <image v-for="index in 5"
            :src="index < item.rating ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'"
            mode="aspectFill"></image>
        </div>

        <u-line margin="46rpx 0 30rpx 0" />
        <view class="table">
          <view class="label">联系电话</view>
          <view class="desc">{{ info.phone }}</view>
        </view>
        <view class="table">
          <view class="label">营业时间</view>
          <view class="desc">{{ info.business_hours }}</view>
        </view>
        <view class="table">
          <view class="label">营业地址</view>
          <view class="desc">{{ info.comAddress }}</view>
        </view>
        <view class="table mb32">
          <view class="label">特色服务</view>
          <view class="desc">{{ info.features }}</view>
        </view>

        <view class="particulars" @click="detail_msg">
          <view>查看详情</view>
          <u-icon name="arrow-right" size="30" />
        </view>

      </view>
    </view>
    <view class="white_container detail" v-for="item in commentList">
      <div class="Msg">
        <div class="Msg_Tit">
          <div class="Msg_Tit_left">
            <image src="http://192.168.0.172:5500/user_ava.png" v-if="!item.user.avatar" mode="aspectFill"></image>
            <image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
            {{ item.user.nick_name }}
          </div>
          <div class="Msg_Tit_right">
            <image v-for="indez in 5"
              :src="indez < item.satisfaction ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'"
              mode="aspectFill"></image>
          </div>
        </div>

        <div class="Msg_con">
          {{ item.comment }}
        </div>

        <div class="Msg_iconList">
          <div class="Msg_iconList_left">
            <div class="Msg_iconList_leftIcon">
              <image src="http://192.168.0.172:5500/local_review.png" mode="widthFix"></image>
              {{ item.merchant_evaluation_reply_list ? item.merchant_evaluation_reply_list.length : 0 }}
            </div>

            <div class="Msg_iconList_leftIcon">
              <image v-if="item.is_like == 2" src="http://192.168.0.172:5500/com_likeIcon.png" mode="widthFix"
                @click="like(item)"></image>
              <image v-if="item.is_like == 1" src="http://192.168.0.172:5500/com_likeIcon2.png" mode="widthFix"
                @click="unlike(item)"></image>
              {{ item.merchant_evaluation_like_list ? item.merchant_evaluation_like_list.length : 0 }}
            </div>
          </div>
          <div class="Msg_iconList_right" @click="commentDesc(item)">
            详情 <div><u-icon name="arrow-right" colof="#999999"></u-icon></div>
          </div>
        </div>
      </div>
    </view>
    <view class="bottom">
      <view class="left">
        <view class="left_label" @click="handleOptionClick">
          <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Index_add.png" mode="" />
          <view>导航</view>
        </view>
        <view class="left_label" @click="handlePhoneClick">
          <image src="http://192.168.0.152:5500/assets/localLife_detail_Frame.png" mode="" />
          <view>电话</view>
        </view>
        <view class="left_label" @click="handleDiscussClick">
          <image src="http://192.168.0.152:5500/assets/localLife_shopList_Group_1334.png" mode="" />
          <view>点评</view>
        </view>
      </view>
      <text class="btn" @click="handleQuickPayClick">快捷买单</text>
    </view>
  </view>
</template>

<script>
import {
  request,
  picUrl,
  NavgateTo,
} from "../../../utils";

import { apiArr } from "../../../api/v2local";

export default {
  data() {
    return {
      picUrl,
      info: {},
      page_num: 1,
      page_size: 10,
      commentList: [],
      flag: false,
    };
  },
  onLoad(options) {
    this.info = uni.getStorageSync("merchantInfo")
  },
  onShow(){
    this.page_num = 1
    this.flag = false
    this.commentList = []
    this.getCommentList()
  },
  onReachBottom() {
    if (this.flag) {
      this.getMechantList();
    }
  },

  methods: {
    handleQuickPayClick() {
      NavgateTo('../pay/index');
    },
    //获取评论列表
    getCommentList() {
      request(apiArr.getMerchantComment, "POST", {
        page_num: this.page_num,
        page_size: this.page_size,
        merchant_id: this.info.id,
      }).then(res => {
        this.page_num++
        if (res.rows.length == this.page_size) {
          this.flag = true;
        } else {
          this.flag = false;
        }
        this.commentList = this.commentList.concat(res.rows);
      })
    },

    //店铺详情
    detail_msg() {
      NavgateTo('../detail_msg/index')
    },
    // 导航
    handleOptionClick() {
      const { info } = this;
      let openParmas = {
        latitude: Number(info.latitude),
        longitude: Number(info.longitude),
        name: info.comAddress,
        address: info.comAddress,
      };
      uni.openLocation(openParmas);
    },

    //拨打电话触发事件
    handlePhoneClick() {
      uni.makePhoneCall({
        phoneNumber: this.info.phone || '',
        fail(err) {
          console.log('拨打电话失败', err)
        }
      })
    },

    // 点评
    handleDiscussClick() {
      NavgateTo('../comment/index');
    },

    like(e) {
      request(apiArr.merChantCommentLike, "POST", {
        evaluation_id: e.id,
      }).then(res => {
        console.log(e);
        if(e.merchant_evaluation_like_list){
          e.merchant_evaluation_like_list.push({})
        }else{
          e.merchant_evaluation_like_list = []
          e.merchant_evaluation_like_list.push({})
        }
        e.is_like = 1
        uni.showToast({
          icon:"none",
          title: '点赞成功',
          duration: 2000
        });
      })
    },
    unlike(e) {
      request(apiArr.merChantCommentUnlike, "POST", {
        evaluation_id: e.id,
      }).then(res => {
        e.is_like = 2
        e.merchant_evaluation_like_list.pop()
        uni.showToast({
          title: '取消成功',
          icon:"none",
          duration: 2000
        });
      })
    },

    commentDesc(e){
      NavgateTo(`../UserComment/index?id=${e.id}`)
    },
  },
};
</script>

<style>
@import url("./index.css");
</style>
