<template>
	<view class="container">
		<view class="body">
			<view class="body-top">
				<view style="z-index: 2;position: relative;">
					<VNavigationBar titleColor="#fff" backgroundColor="rgba(0,0,0,0)">
						<template v-slot:back>
							<image style="width: 56rpx;height: 56rpx;" src="../../static/icons/backIcon.png"
								mode="aspectFit"></image>
						</template>
					</VNavigationBar>
				</view>
				<image class="shopImg" src="../static/outImage.jpg" mode="aspectFill"></image>
			</view>
			<view class="shopBody">
				<view class="shopDetail">
					<!--					<view class="shopTitle">顺捷汽车维修搭电救援补胎中心</view>-->
					<view class="shopTitle">{{ info.corpName }}</view>
					<view class="rate">
						<view class="rateNumBox">
							<text>4.5</text>
							<image style="width: 28rpx;height: 28rpx;" src="../../static/icons/rateIcon.png"
								mode="aspectFit"></image>
						</view>
						<text>强烈推荐</text>
					</view>
					<view class="shopDetailText">
						<mote-lines-divide :line="3" expandText="全部" foldHint="收起" v-if="info && info.corpContent">
							<text class="shopDetailTextLabel">厂家介绍：</text>
							<!--							<text class="shopDetailTextValue">-->
							<!--								正安汽车维修服务有限公司成立于1993年10月25日，属东莞市成立最早、规模最大的民营汽修企业之一。现在莞城区及桥头镇开设有二家连锁经营分厂及直属汽车销售部，主要从事汽车销售、售后，-->
							<!--							</text>-->
							<text class="shopDetailTextValue">
								{{ info.corpContent }}
							</text>
						</mote-lines-divide>
					</view>
					<view class="shopDetailFooter">
						<view class="shopAddress">
							<image style="width: 32rpx;height: 32rpx;" src="../../static/icons/order-icon1.png"
								mode="aspectFit"></image>
							<!--							<text>济南市历下区福瑞达历下护理院东南门旁</text>-->
							<text>{{ info.address }}</text>
						</view>
						<view class="shopPhone">
							<image style="width: 32rpx;height: 32rpx;" src="../../static/icons/order-icon2.png"
								mode="aspectFit"></image>
							<text>电话</text>
						</view>
					</view>
				</view>
				<view class="busiDetail">
					<!--					<view class="busiDetailTitle">顺捷汽车维修搭电救援补胎中心</view>-->
					<view class="busiDetailTitle">{{info.corpName}}</view>
					<view class="busiList">
						<view v-for="(item, index) in busiList" :key="index" class="busiItem">
							<image class="busiTypeImg" :src="item.image" mode="aspectFill"></image>
							<view class="busiItemInfo">
								<view class="busiItemTitle">{{ item.name }}</view>
								<view class="busiItemDesc">{{ item.desc }}</view>
							</view>
							<!--							<view class="busiItemBtn">查看</view>-->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="gotoReservation">开始预约</view>
		</view>
    <view>
      <!-- 普通弹窗 -->
      <uni-popup ref="popup" background-color="#fff">
        <view  :class="{ 'popup-height': type === 'left' || type === 'right' }">
          <view class="popup-content">
            <text class="text">{{info.corpName}}申请获取您的个人信息、车辆信息。</text>
          </view>
          <view class="popup-button">
            <button type="default" @click="cancelReservation">取消</button>
            <button type="primary" @click="gotoReservation">授权</button>
          </view>
        </view>
      </uni-popup>
    </view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
	import request from "../../utils/request";
  import {getJSONData,getToken} from '@/utils/auth'
	export default {
		components: {
			VNavigationBar
		},
		data() {
			return {
        type: 'center',
        shopName:"",
				// busiList: [{
				// 	title: '钣金喷漆维修',
				// 	desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
				// 	image: ''
				// }, {
				// 	title: '钣金喷漆维修',
				// 	desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
				// 	image: ''
				// }, {
				// 	title: '钣金喷漆维修',
				// 	desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
				// 	image: ''
				// }, {
				// 	title: '钣金喷漆维修',
				// 	desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
				// 	image: ''
				// }, ]
				busiList: [],
				info: {}
			};
		},
		onLoad(data) {
		  if(data.id){
        this.info = getJSONData("shopInfo")
      }
		},
		onShow() {
		  this.cancelReservation()
			this.getServer()
		},
		methods: {
      /**
       * 弹出层
       * @param type 位置
       */
      toggle(type) {
        this.type = type
        // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        this.$refs.popup.open(type)
      },
      /**
       * 取消授权
       */
      cancelReservation(){
        this.$refs.popup.close()
      },
			// 去预约
			gotoReservation() {
				if(getToken()){
          //授权信息，需要调后台接口插入数据
          uni.showLoading();
          request({
            url: "/app-api/base/user-car/empowerUserInfo",
            method: 'get',
            tenantIdFlag: false,
            params:{tenantId:this.info.tenantId,systemCode:"04"}
          }).then(res=>{
            uni.hideLoading();
            if(res.code==200){
              uni.navigateTo({
                url: '/pages/myReservation/addReservation?id=' + this.info.id
              })
            }else{
              uni.showToast({
                title: '授权失败，请联系客户经理！',
                icon: 'none'
              })
            }
          })
				}else{
				  //未登录去登录
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 取能提供的服务
			async getServer() {
				const res = await request({
					url: "/userClient/base/company/get",
					method: 'get',
					params: {
						id: this.info.id
					}
				})
				this.busiList = res.data.servicePackages
				this.busiList.forEach(item => {
					item['image'] = require("../static/inImage.jpg")
					item['desc'] = this.info.business
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);

		.body {
			flex: 1;
			height: 0;
			overflow: auto;
		}

		.body-top {
			position: relative;
			width: 750rpx;
			height: 468rpx;

			.shopImg {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				background-color: #eee;
			}

			.back {}
		}

		.shopBody {
			position: relative;
			top: -50rpx;
			overflow: auto;
			padding-bottom: 20rpx;
		}

		.shopDetail {
			position: relative;
			z-index: 2;
			padding: 30rpx 32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
			border-radius: 32rpx 32rpx 0rpx 0rpx;

			.shopTitle {
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}

			.rate {
				margin: 30rpx 0;
				box-sizing: border-box;
				width: 282rpx;
				height: 56rpx;
				background: #FFF1DB;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				padding-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				font-weight: 500;
				font-size: 28rpx;
				color: #E8A321;

				.rateNumBox {
					width: 120rpx;
					height: 56rpx;
					background: linear-gradient(180deg, #FFD187 0%, #FEB33A 100%);
					border-radius: 30rpx 30rpx 30rpx 30rpx;

					display: flex;
					align-items: center;
					justify-content: center;
					column-gap: 4rpx;

					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 1.5;
				}
			}

			.shopDetailText {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #EEEEEE;
				margin-bottom: 30rpx;

				.shopDetailTextLabel {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.shopDetailTextValue {
					font-size: 28rpx;
					color: #666666;
				}
			}

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

				.shopAddress {
					flex: 1;
					width: 0;
					display: flex;
					align-items: center;
					column-gap: 8rpx;
					font-size: 28rpx;
					color: #666666;
					border-right: 1rpx solid #EEEEEE;
					margin-right: 20rpx;
				}

				.shopPhone {
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					row-gap: 4rpx;
					font-size: 24rpx;
					color: #333333;
				}
			}

		}

		.busiDetail {
			padding: 30rpx 32rpx;
			background: #FFFFFF;

			.busiDetailTitle {
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}

			.busiList {
				.busiItem {
					padding: 30rpx 0;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #DDDDDD;
					column-gap: 20rpx;
				}

				.busiTypeImg {
					width: 112rpx;
					height: 112rpx;
					background-color: #eee;
				}

				.busiItemInfo {
					flex: 1;
					width: 0;
				}

				.busiItemTitle {
					font-size: 28rpx;
					color: #333333;
				}

				.busiItemDesc {
					font-size: 24rpx;
					color: #858BA0;

					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-break: break-all;
				}

				.busiItemBtn {
					width: 100rpx;
					height: 48rpx;
					background: #0174F6;
					border-radius: 24rpx 24rpx 24rpx 24rpx;

					font-size: 28rpx;
					color: #FFFFFF;

					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.footer {
			padding: 12rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: relative;

			.btn {
				width: 510rpx;
				height: 76rpx;
				margin: 0 auto;
				background: #0174F6;
				border-radius: 38rpx 38rpx 38rpx 38rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
<style lang="scss">
.popup-content {
  @include flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: 50px;
  background-color: #fff;
}
.popup-button {
  @include flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: 50px;
  background-color: #fff;
}
</style>
