<template>
	<view class="mine">
		<!-- 状态栏占位 -->
		<view class="mine__nav" :style="{ height: 77 + 'px' }" />
		<view class="mine__person">
			<view class="mine__person--info">
				<view @click="$Router.push('/pageMerchant/mineModule/personalInfo')">
					<image :src="merchantInfo.merchant.logo" style="width: 140rpx; height: 140rpx; border-radius: 50%"
						v-if="merchantInfo.merchant.logo" />
					<image src="@/static/QR57a.jpg" style="width: 140rpx; height: 140rpx; border-radius: 50%" v-else />
				</view>
				<view class="userName">
					<view>
						<view v-if="merchantInfo.storeName"> {{ merchantInfo.storeName }}</view>
						<view v-else> 微信用户</view>
					</view>
					<view>
						<view v-if=" merchantInfo.mobileNumber" class="text">
							+86 {{ merchantInfo.mobileNumber }}
						</view>
						<!-- <view v-else class="text">
							<text style="color: #f6bf3f"> 您当前还未认证，</text>
							<text @click="$Router.push('/pageMerchant/mineModule/certification/index')">
								去认证>
							</text>
						</view> -->
					</view>
				</view>
				<view class="status" :style="{ 'background-color': getStatusColor(state) }" @click="show = true">
					<view style="margin-right: 6rpx">{{ stateName }}</view>
					<u-icon name="play-right-fill" color="#fff" size="12" />
				</view>
			</view>
		</view>

		<view class="mine__main">
			<view class="mine__main--purse" @click="toMyPurse">
				<view class="wallet">
					<view class="wallet--title">我的钱包</view>
					<view class="wallet--more">
						<text>查看钱包余额</text>
						<u-icon name="arrow-right" color="#333" size="14" />
					</view>
				</view>
				<view class="walletInfo">
					<view v-for="item,index in incomeList" :key="index">
						<view class="text-title">{{item.title}}</view>
						<view class="text-data">￥{{item.num}}</view>
						<!-- <view class="text-info">最高可用</view> -->
					</view>
				</view>
				<!--        <view class="shortcut">
          <view style="display: flex">
            <view>快捷支付</view>
            <view style="margin: 0 20rpx">|</view>
            <view>一银升级银行卡用于麦付</view>
          </view>
          <u-icon name="arrow-right" color="#fff" size="14" />
        </view> -->
			</view>

			<view class="mine__main--setting">
				<template v-for="item in list1">
					<u-cell size="large" :border="false" :key="item.name" :title="item.name" isLink :url="item.url">
						<image slot="icon" src="@/static/tools.jpg" style="width: 60rpx; height: 60rpx" />
					</u-cell>
				</template>
			</view>

			<view class="mine__main--setting">
				<template v-for="item in list2">
					<u-cell size="large" :border="false" :key="item.name" :title="item.name" isLink :url="item.url">
						<image slot="icon" src="@/static/tools.jpg" style="width: 60rpx; height: 60rpx" />
					</u-cell>
				</template>
			</view>
		</view>

		<!-- 营业状态选择弹框 -->
		<u-picker :show="show" :columns="columns" @cancel="cancel" @confirm="confirm" keyName="label"></u-picker>

		<!-- 商家认证的弹框 -->
		<u-modal :show="showAut" :title="title" :content="content" :confirmText="'开始认证'" :cancelText="'返回用户端'"
			:showCancelButton="true" @confirm="confirmSwitch" @cancel="showAut = false"></u-modal>

		<tabbar currentTab="merchantMine" />
	</view>
</template>

<script>
	import {
		getMerchantAuthData,
		getMerchantPures
	} from '@/api/merchant/merchantAuth';
	import {
		updateBusinessStatus
	} from '@/api/merchant/mine';
	import {
		phoneEncryption
	} from '@/utils/tools';


	export default {
		data() {
			return {
				state: 0,
				stateName: '营业中',
				show: false,
				showAut: false,
				title: '商家认证',
				content: '进入商家端前，我们需要一定的认证',
				merchantInfo: {},
				// purse:{}, // 钱包信息
				incomeList: [{
						num: '0.00',
						title: '总收益',
					},
					{
						num: '0.00',
						title: '今日收益',
					},
					{
						num: '0.00',
						title: '昨日收益',
					},
					{
						num: '0.00',
						title: '可提现',
					},
				],
				columns: [
					// 营业状态 0-营业中，1-休息中
					[{
							label: '营业中',
							id: '0',
						},
						{
							label: '休息中',
							id: '1',
						},
					],
				],
				list1: [{
						id: '1',
						name: '门店环境',
						url: '/pageMerchant/mineModule/storeEnviron',
					},
					// {
					//   id: '2',
					//   name: '我要开店',
					//   url: '/pages/merchant/mine/openStore/index',
					// },
					{
						id: '3',
						name: '资质信息',
						url: '/pageMerchant/mineModule/openStoreAppealDetail',
						// url: '/pageMerchant/mineModule/certification/storeInformation',
					},
				],

				list2: [{
						id: '1',
						name: '意见反馈',
						url: 'PageMine/feedback?channelType=1',
					},
					{
						id: '2',
						name: '设置',
						url: '/pageMerchant/mineModule/setting/index',
					},
				],
			};
		},

		created() {
			this.getMerchantAuth();
			this.request()
		},

		mounted() {
			if (this.merchantInfo) {
				this.showAut = false;
			} else {
				this.showAut = true;
			}
		},

		methods: {
			/*===========================================================*/
			// 获取商家信息
			async getMerchantAuth() {
				let res = await getMerchantAuthData();
				if (res.code === 'OK') {
					// 将数据存储到vuex中
					console.log(res.data, "存储到vuex的数据")
					this.merchantInfo = Object.assign({}, {
						...res.data,
						mobileNumber: phoneEncryption(res.data && res.data.mobileNumber),
					}, );

					this.$store.commit('SET_MERCHANTINFO', res.data);
				}
			},
			// 获取钱包信息
			async request() {
				const res = await getMerchantPures(this.$store.state.data.merchantInfo.merchant.id)
				this.purse = res.data
				if (res.data) {
					this.incomeList[0].num = res.data.walletDTO.totalEarnings ? res.data.walletDTO.totalEarnings :
						'0.00'
					this.incomeList[1].num = res.data.walletDTO.todayEarnings ? res.data.walletDTO.todayEarnings :
						'0.00'
					this.incomeList[2].num = res.data.walletDTO.yesterdayEarnings ? res.data.walletDTO
						.yesterdayEarnings : '0.00'
					this.incomeList[3].num = res.data.walletDTO.withdraw ? res.data.walletDTO.withdraw : '0.00'
				}
			},

			/*===========================================================*/
			// 开始认证
			confirmSwitch() {
				uni.navigateTo({
					url: '/pageMerchant/mineModule/certification/index'
				});
			},

			/*===========================================================*/

			// 修改商家状态
			confirm(val) {
				this.state = val.value[0].id;
				this.stateName = val.value[0].label;
				this.show = false;

				updateBusinessStatus(this.merchantInfo.merchant.id, {
					businessStatus: this.state
				}).then(
					res => {
						if (res.code === 'OK') {
							this.$u.toast('修改成功');
						}
					},
				);
			},

			getStatusColor(state) {
				if (state === 0) {
					return '#19be6b';
				} else if (state === 1) {
					return '#ff9900';
				}
			},
			toMyPurse() {
				uni.navigateTo({
					url: "/pageMerchant/mineModule/myPurse/purse"
				})
			}


		},
	};
</script>

<style lang="scss" scoped>
	.mine {
		min-height: calc(100vh - 80rpx);
		box-sizing: border-box;

		&__nav {
			background-color: $uni-bg-color-primary;
		}

		&__person {
			height: 160rpx;
			padding: $uni-bg-padding-sm;
			background-color: $uni-bg-color-primary;
			position: relative;

			&--info {
				color: #fff;
				display: flex;

				.userName {
					width: 400rpx;
					font-size: 36rpx;
					margin: 20rpx 0 0 16rpx;

					.text {
						margin-top: 15rpx;
						font-size: 28rpx;
					}
				}

				.status {
					display: flex;
					position: absolute;
					bottom: 80rpx;
					padding-left: 20rpx;
					right: 0;
					width: 150rpx;
					height: 60rpx;
					font-size: 25rpx;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					border-radius: 30rpx 0 0 30rpx;
					background-color: rgba(255, 255, 255, 0.3);
				}
			}
		}

		&__main {
			padding: $uni-bg-padding-sm;

			&--purse {
				background-color: $uni-bg-color;
				padding: $uni-bg-padding-sm;
				border-radius: $uni-border-radius-base;

				.wallet {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;

					&--title {
						color: #000;
						font-size: 36rpx;
						font-weight: 700;
					}

					&--more {
						color: #333;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.walletInfo {
					margin: 40rpx 0;
					color: #333;
					display: flex;
					text-align: center;
					justify-content: space-around;
				}

				// .shortcut {
				//   height: 70rpx;
				//   padding: 0 20rpx;
				//   color: #fff;
				//   font-size: 28rpx;
				//   display: flex;
				//   align-items: center;
				//   justify-content: space-between;
				//   background-color: $uni-bg-color-primary;
				//   border-radius: $uni-border-radius-sm;
				// }
			}

			&--setting {
				margin: 20rpx 0;
				background-color: $uni-bg-color;
				padding: $uni-bg-padding-sm;
				border-radius: $uni-border-radius-base;
			}
		}
	}

	.text-title {
		font-size: 34rpx;
	}

	.text-data {
		font-size: 40rpx;
		margin: 15rpx 0;
		font-weight: 700;
	}

	.text-info {
		font-size: 24rpx;
	}
</style>