<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" :key="index"
            :src="index < item.rating ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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, index) in commentList" :key="index">
      <div class="Msg">
        <div class="Msg_Tit">
          <div class="Msg_Tit_left">
            <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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" :key="indez"
              :src="indez < item.satisfaction ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'"
              mode="aspectFill"></image>
          </div>
        </div>

        <div class="Msg_con">
          {{ item.comment }}
          <div class="Msg_con_img" v-if="item.image_url">
            <image v-for="(img, index) in item.image_url.split(',')" :key="index" :src="picUrl + img" mode="aspectFill">
            </image>
            <video class="Msg_con_video" v-if="item.video_url" :src="picUrl + item.video_url" controls></video>
          </div>
        </div>

        <div class="Msg_iconList">
          <div class="Msg_iconList_left">
            <div class="Msg_iconList_leftIcon">
              <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png"
                mode="widthFix" @click="like(item)"></image>
              <image v-if="item.is_like == 1"
                src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_detail_Frame.png"
            mode="" />
          <view>电话</view>
        </view>
        <view class="left_label" @click="handleDiscussClick">
          <image
            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_shopList_Group_1334.png"
            mode="" />
          <view>点评</view>
        </view>
      </view>
      <text v-if="isShow" 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,
      isShow: false,
    };
  },
  onLoad(options) {
    this.info = uni.getStorageSync("merchantInfo")
  },
  onShow() {
    this.page_num = 1
    this.flag = false
    this.commentList = []
    this.getCommentList()
    this.getMerchantInfo()
  },
  onReachBottom() {
    if (this.flag) {
      this.getMechantList();
    }
  },

  methods: {
    handleQuickPayClick() {
      NavgateTo('../pay/index');
    },
    //获取评论列表
    getCommentList() {
      if (uni.getStorageSync('userId')) {
        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.isShow = res.rows[0].merchant_info.quick_purchase_enabled == 1
          const list = res.rows.filter((item) => {
            return item.status == 2;
          });

          list.forEach(item => {
            item.merchant_evaluation_reply_list = item.merchant_evaluation_reply_list.filter((item) => {
              return item.status == 2;
            })
          })

          this.commentList = this.commentList.concat(list);
        })
      }
    },

    getMerchantInfo() {
      request(apiArr.getMerchantInfo, "POST", {
        id: uni.getStorageSync("merchantInfo").id,
      }).then(res => {
        this.isShow = res.quick_purchase_enabled == 1
      })
    },

    //店铺详情
    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>
