<template>
	<view>
		<u-modal :show="show" title="请添加客服微信" :closeOnClickOverlay="true" :showCancelButton="true"
			:showConfirmButton="false" cancelText="关闭" cancelColor="#007aff" @cancel="closeHandle" @close="closeHandle">
			<view class="flex flex-col justify-center items-center" style="width: 80%;">
				<u-radio-group v-model="chooseCS" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
						:label="item.name" :name="index">
					</u-radio>
				</u-radio-group>
				<image v-if="radiolist.length" style="width: 350upx;height: 350upx;"
					:src="radiolist[chooseCS].url" mode="aspectFit"></image>
				<view class="p-20">
					<view style="color: #646566;font-size: 28upx;">添加请备注自己的用户ID</view>
					<view style="color: #646566;font-size: 28upx;">截图本页去微信扫码添加</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { getCustomerList } from '@/api/index.js'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return {
				chooseCS: 0,
				// 基本案列数据
				radiolist: [],
			}
		},
		created() {
			this.getServiceList()
		},
		methods: {
			async getServiceList() {
				const res = await getCustomerList({})
				this.radiolist = res.data
				this.chooseCS = 0
			},
			groupChange(n) {
				this.chooseCS = n
			},
			closeHandle() {
				this.$emit('close')
			}
		}
	} 
</script>