<template>
    <view class="container safe-area-inset-bottom">
      <MessageNotification />
      <view class="card-box">
        <!-- 基础信息 -->
        <view class="card">
          <view class="card_title">
            基础信息
          </view>
          <!-- 姓名 -->
          <view class="card_name">
            <text>姓名</text>
            <u-input disabled v-model="names" input-align="right" placeholder="请输入真实姓名"
                     placeholder-style="text-align:right;color: #94A3B8;" :type="type" />
          </view>
          <!-- 身份证号 -->
          <view class="card_name">
            <text>身份证号</text>
            <u-input disabled v-model="form.identityCardNo" maxlength="18" input-align="right" placeholder="已经填写无法修改，请慎重填写"
                     placeholder-style="text-align:right;color: #94A3B8;padding-right:5px;" @input="inputChange"
                     :type="type" />
          </view>
          <!-- 性别 -->
          <view class="card_name">
            <text>性别</text>
            <u-input disabled v-model="form.sex" input-align="right" placeholder="-"
                     placeholder-style="text-align:right;color: #94A3B8;" :type="type" />
          </view>
          <!-- 年龄 -->
          <view class="card_name">
            <text>年龄</text>
            <u-input disabled v-model="form.age" input-align="right" placeholder="-"
                     placeholder-style="text-align:right;color: #94A3B8;" :type="type" />
          </view>

          <!-- 手机号 -->
          <view class="card_telephone">
            <text>手机号</text>
            <u-input v-model="phone" input-align="right" placeholder="请输入手机号"
                     placeholder-style="text-align:right; color: #94A3B8;" :type="type" />
          </view>

          <!-- 与您的关系 -->
          <view class="card_relation">
            <text>与您的关系</text>
            <u-input v-model="relations" type="select" input-align="right" placeholder="请选择"
                     placeholder-style="text-align:right;color: #94A3B8;" @click="showRelat = true" />
            <u-icon name="arrow-right" color="#A7ABB0" size="26" @click="showRelat = true"></u-icon>

            <u-action-sheet :list="actionSheetList" v-model="showRelat" @click="actionSheetCallback"
                            :safe-area-inset-bottom="true">
            </u-action-sheet>
          </view>
        </view>

        <!-- 健康信息 -->
        <view class="cards">
          <view class="cards_title">
            健康信息
          </view>
          <!-- 肝功能 -->
          <view class="cards_names">
            <text>肝功能</text>
            <u-radio-group v-model="liver" @change="radioGroupChange" size="44rpx">
              <u-radio @change="radioChange" v-for="(item, index) in lists" :key="index" :name="item.name"
                       :disabled="item.disabled" label-size="30rpx">
                {{item.name}}
              </u-radio>
            </u-radio-group>
          </view>

          <!-- 肾功能 -->
          <view class="cards_names">
            <text>肾功能</text>
            <u-radio-group v-model="renal" @change="radioGroupChange" size="44rpx">
              <u-radio @change="radioChange" v-for="(item, index) in lists" :key="index" :name="item.name"
                       :disabled="item.disabled" label-size="30rpx">
                {{item.name}}
              </u-radio>
            </u-radio-group>
          </view>
          <!-- 过敏史 -->
          <view class="cards_history">
            <view class="name">
              <text>过敏史</text>
              <u-radio-group v-model="allergic" @change="radioGroupChange" size="44rpx">
                <u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
                         :disabled="item.disabled" label-size="30rpx">
                  {{item.name}}
                </u-radio>
              </u-radio-group>
            </view>
            <view class="tabs" v-if="allergic=='有'">
              <u-tag :bg-color="rSelect.indexOf(index)!=-1?'#2979FF' :'rgba(41,121,255,0.08)'"
                     :color="rSelect.indexOf(index)!=-1? '#FFFFFF':'#475569'" v-for="(item,index) in allergicList"
                     :key="index" @tap="tapInfo(index,item)" :text="item.name" mode="dark" />
              <text @click="addAller">+添加</text>
            </view>
          </view>
          <!-- 个人病史 -->
          <view class="cards_history">
            <view class="name">
              <text>个人病史</text>
              <u-radio-group v-model="person" @change="radioGroupChange" size="44rpx">
                <u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
                         :disabled="item.disabled" label-size="30rpx">
                  {{item.name}}
                </u-radio>
              </u-radio-group>
            </view>
            <view class="tabs" v-if="person=='有'">
              <u-tag v-if="personList.length > 0" :plain="!item.checked" :bg-color="rSelects.indexOf(index)!=-1?'#2979FF' :'rgba(41,121,255,0.08)'"
                     :color="rSelects.indexOf(index)!=-1? '#FFFFFF':'#475569'" v-for="(item,index) in personList"
                     :key="index" @tap="tapInfos(index,item)" :text="item.name" mode="dark" />
              <text @click="addPer">+添加</text>
            </view>
          </view>
          <!-- 家族病史 -->
          <view class="cards_history">
            <view class="name">
              <text>家族病史</text>
              <u-radio-group v-model="family" @change="radioGroupChange" size="44rpx">
                <d-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
                         :disabled="item.disabled" label-size="30rpx">
                  {{item.name}}
                </d-radio>
              </u-radio-group>
            </view>
            <view class="tabs" v-if="family=='有'">
              <u-tag v-if="familyList.length > 0" :plain="!item.checked" :bg-color="rSelec.indexOf(index)!=-1?'#2979FF' :'rgba(41,121,255,0.08)'"
                     :color="rSelec.indexOf(index)!=-1? '#FFFFFF':'#475569'" v-for="(item,index) in familyList"
                     :key="index" @tap="taps(index,item)" :text="item.name" mode="dark" />
              <text @click="addFmaily">+添加</text>
            </view>
          </view>
        </view>

        <view class="floors">
          <!-- 浮层 添加历史病情 -->
          <u-popup v-model="show" mode="center" border-radius="14" width="710rpx" height="360px" :closeable="true"
                   z-index="10">
            <view class="floor_item">
              <!-- 标题 -->
              <view class="title">
                添加
              </view>
              <!-- 输入 -->
              <view class="u_inp">
                <u-input v-model="addtext" type="text" placeholder="请输入内容" placeholder-style="color:#94A3B8"
                         :border="true" border-color="#F1F5F9" :maxlength="50" :height="80" />
              </view>

              <!-- 保存 -->
              <view class="u_btn">
                <u-button type="primary" shape="circle" @click="addTag">保存</u-button>
              </view>
              <!-- 就诊 -->
              <view class="info">
                <view class="addinfo">
                  <view class="words">
                    是否就该病情到医院就诊过
                  </view>
                  <view class="radios">
                    <u-radio-group v-model="isVisit" @change="radioGroupChange">
                      <u-radio @change="radioChange" v-for="(item, index) in visitList" :key="index"
                               :name="item.name" :disabled="item.disabled">
                        {{item.name}}
                      </u-radio>
                    </u-radio-group>
                  </view>
                </view>
                <!-- 详细病情描述 -->
                <view class="u_inp">
                  <u-input v-model="visitDesc" type="text" :maxlength="50" placeholder-style="color:#94A3B8"
                           :border="true" border-color="#F1F5F9" placeholder="请输入实体医院确诊病例名称(最多50字)" />
                </view>
              </view>
            </view>
          </u-popup>
        </view>
      </view>

      <!-- 保存 -->
      <view class="footer">
        <view class="btn">
          <text @click="getAdduser">保存</text>
        </view>
      </view>
      <u-toast ref="uToast" />
    </view>
</template>

<script>
	import {
		userAdd,
		userEidtPatient,
		userList,
		userRelation
	} from '../../request/api/api';
	export default {
		data() {
			return {
				id: "", // 编辑
				checked: false,
				check: false,
				loading: false,
				// 中间变量，避免在watch中多次回调，造成无限循环
				controlStatus: false,
				names: "",
				phone: "",
				relations: "", // 关系
				relation: "", // 关系key
				type: 'text',
				showRelat: false, // 关系展示
				item: "",
				actionSheetList: [],
				addid: 1,
				text: "", // 添加病情
				form: {
					identityCardNo: "",
					sex: "",
					age: "",
				}, // 身份证
				sex: "",

				// 健康信息
				addtext: "",
				addNum: 0,
				text: "", // 添加
				show: false, // 浮层
				list: [{
						name: '无',
						disabled: false
					},
					{
						name: '有',
						disabled: false
					}
				],
				lists: [{
						name: '正常',
						disabled: false
					},
					{
						name: '异常',
						disabled: false
					}
				],

				visitList: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				isVisit: '', // 是否接诊过
				visitDesc: "", // 病情
				infoList: [], // 就诊人列表
				order_id: "", // 订单id
				liver: "正常", // 肝功能
				renal: "正常", // 肾功能
				allergic: "无", // 过敏史
				allergicList: [{
						name: '鱼虾 海鲜产品'
					},
					{
						name: '尘螨'
					},
					{
						name: '花粉'
					},
					{
						name: '动物皮屑'
					},
					{
						name: '奶制品'
					}, {
						name: '鸡蛋'
					},
					{
						name: '阿司匹林'
					}
				],
				person: "无", // 个人病史
				personList: [{
						name: '先天性心脏病'
					},
					{
						name: '肿瘤'
					},
					{
						name: '动脉硬化'
					},
					{
						name: '冠心病'
					},
					{
						name: '糖尿病'
					},
					{
						name: '脑血管病'
					},
					{
						name: '哮喘'
					}
				],
				family: "无", // 家庭病史
				familyList: [{
						name: '高血压'
					},
					{
						name: '心脏病'
					},
					{
						name: '糖尿病'
					},
					{
						name: '血脂异常'
					},
					{
						name: '白癜风'
					},
					{
						name: '癫痫'
					},
					{
						name: '哮喘'
					},
					{
						name: '近视'
					},
					{
						name: '肝炎'
					},
					{
						name: '结核病'
					}
				],
				rSelect: [],
				rSelects: [],
				rSelec: [],
				allergic_history: [],
				person_history: [],
				family_history: [],
				heathList: [], // 健康信息
			}
		},
		onLoad(e) {
			// console.log(e);
			this.id = e.id
      this.getAction()
		},
		watch: {
			// 默认就诊人
			checked(val) {
				// 等于false，意味着用户手动关闭了switch
				if (val == false) {
					if (this.controlStatus == true) {
						this.controlStatus = false;
						return;
					}
					// 重新打开switch，并让它处于加载中的状态
					this.checked = true;
					this.loading = true;
					// 模拟向后端发起请求
					this.getRestultFromServer();
				}
			}
		},
		methods: {
			// switch打开或者关闭时触发，值为true或者false
			change(status) {
				// console.log(status);
			},
			// 默认就诊人
			getRestultFromServer() {
				// 通过定时器模拟向后端请求
				setTimeout(() => {
					this.controlStatus = true;
					// 后端允许用户关闭switch，设置checked为false，结束loading状态
					this.loading = false;
					this.checked = false;
				}, 1500);
			},

			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.relations = this.actionSheetList[index].text;
				this.relation = this.actionSheetList[index].key;
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e,'e');
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e, '1');

				// console.log(this.family, 'is');
			},
			// 过敏史
			addAller() {
        this.addtext = ''
				this.show = true
				this.addNum = 1
			},
			// 个人病史
			addPer() {
        this.addtext = ''
				this.show = true
				this.addNum = 2
			},
			// 家庭病史
			addFmaily() {
        this.addtext = ''
				this.show = true
				this.addNum = 3
			},
			// 添加病情
			addTag() {
				this.show = false
				if (this.addNum == 3 && this.addtext != "") {
					let obj = {
						name: this.addtext
					}
					this.$set(this.familyList.push(obj))
				} else if (this.addNum == 1 && this.addtext != "") {
					let obj = {
						name: this.addtext
					}
					this.$set(this.allergicList.push(obj))
				} else if (this.addNum == 2 && this.addtext != "") {
					let obj = {
						name: this.addtext
					}
					this.$set(this.personList.push(obj))
				}
        this.addtext = ""
			},
			// 过敏史
			tapInfo(e, item) {

				if (this.rSelect.indexOf(e) == -1) {
					// console.log(e) //打印下标
					this.rSelect.push(e); //选中添加到数组里
					this.allergic_history.push(item.name)
				} else {
					this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
					this.allergic_history.splice(this.allergic_history.indexOf(item.name), 1)
				}

			},
			// 个人病史
			tapInfos(e, item) {
        console.log(e, item, 'daaaaaaaaaaaaaaaaaaa')
				// 如果当前选项不在已选中项的数组中
				if (this.rSelects.indexOf(e) == -1) {
				    // console.log(e) // 打印当前选项的下标
				    this.rSelects.push(e); // 将选中的选项添加到数组中
				    this.person_history.push(item.name); // 同时将选项的名称添加到历史记录中
				} else {
				    // 如果当前选项已经在已选中项的数组中，则移除它
				    this.rSelects.splice(this.rSelects.indexOf(e), 1); // 取消选中
				    // 同时从历史记录中移除该选项的名称
				    this.person_history.splice(this.person_history.indexOf(item.name), 1);
				}
			},
			//  家庭病史
			taps(e, item) {
				if (this.rSelec.indexOf(e) == -1) {
					// console.log(e) //打印下标
					this.rSelec.push(e); //选中添加到数组里
					this.family_history.push(item.name)
				} else {
					this.rSelec.splice(this.rSelec.indexOf(e), 1); //取消
					this.family_history.splice(this.family_history.indexOf(item.name), 1)
				}
			},

			// 身份证号码
			inputChange() {
				const reg =
					/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if (reg.test(this.form.identityCardNo)) {
					var org_birthday = this.form.identityCardNo.substring(6, 14);
					var org_gender = this.form.identityCardNo.substring(16, 17);
					var sex = org_gender % 2 == 1 ? "男" : "女";
					var birthday =
						org_birthday.substring(0, 4) +
						"-" +
						org_birthday.substring(4, 6) +
						"-" +
						org_birthday.substring(6, 8);
					var birthdays = new Date(birthday.replace(/-/g, "/"));

					let d = new Date();
					let age =
						d.getFullYear() -
						birthdays.getFullYear() -
						(d.getMonth() < birthdays.getMonth() ||
							(d.getMonth() == birthdays.getMonth() &&
								d.getDate() < birthdays.getDate()) ?
							1 : 0);
					this.form.sex = sex;
					this.form.age = age;
					this.sex = org_gender;
				} else {
					this.form.sex = "";
					return false;
				}
			},

			// 就诊人关系
			getAction() {
				userRelation({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'relation');
					if (res.data.errcode == 0) {
						this.actionSheetList = res.data.data
					}
				})
			},

			// 就诊人列表
			getInfolist() {
        let that = this;
				userList({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'info');

					if (res.data.errcode == 0) {
						that.infoList = res.data.data.filter((item) => item.id == that.id)

            that.actived = that.infoList[0].id;
						that.names = that.infoList[0].name
						// that.relations = that.infoList[0].relations
						that.phone = that.infoList[0].mobile
						that.form.sex = (that.infoList[0].sex) % 2 == 0 ? '女' : '男'
						that.form.age = that.infoList[0].age
						that.form.identityCardNo = that.infoList[0].id_card
						that.addid = that.infoList[0].id

						that.actionSheetCallback(that.infoList[0].relation)
            that.getHeath()
					}
				})
			},

			// 添加就诊人
			getAdduser() {
				userAdd({
						method: "post",
						data: {
							store_id: uni.getStorageSync('store_id') || '11001',
							id: this.addid,
							name: this.names,
							id_card: this.form.identityCardNo,
							sex: (this.form.sex) == '女' ? '2' : '1',
							age: this.form.age,
							mobile: this.phone,
							relation: this.relation,
							is_visit: this.isVisit == '是' ? '1' : '0',
							liver_function: this.liver == '正常' ? '0' : '1',
							renal_function: this.renal == '正常' ? '0' : '1',
							allergic_status: this.allergic == '无' ? '0' : '1',
							person_status: this.person == '无' ? '0' : '1',
							family_status: this.family == '无' ? '0' : '1',
							allergic_history: this.allergic_history,
							person_history: this.person_history,
							family_history: this.family_history,
						}
					})
					.then((res) => {
						console.log(res, 'res');
						if (res.data.errcode == 0) {

							uni.showToast({
								title: "添加成功",
								duration: 1500,
								icon: "success",
								mask: false
							})

							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 400)

						} else if (res.data.errcode != 0) {
							// uni.showToast({
							// 	title: res.data.msg,
							// 	icon: "error",
							// 	duration: 1500,
							// 	mask: false
							// })
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'default',
								icon: false
							})
						}
					})
			},

			// 健康卡片
			getHeath() {
        let that = this;
				userEidtPatient({
					method: "post",
					data: {
						user_patient_id: this.actived,
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'heath');
					if (res.data.errcode == 0) {
						this.heathList = res.data.data

						this.liver = (this.heathList.liver_function) % 2 == 0 ? '正常' : '异常'
						this.renal = (this.heathList.renal_function) % 2 == 0 ? '正常' : '异常'

						this.allergic = (this.heathList.allergic_status) % 2 == 0 ? '无' : '有'
						this.allergicList = (this.heathList.allergic_history) == 'Array' ? [] : (this.heathList
							.allergic_history).map(function (item, index) {
              console.log(index, 'sssssssssssssssssssssssssss')
              that.tapInfo(index, {
                name: item,
                checked: true
              })
              return {
                name: item,
                checked: true
              }
            })

						this.person = (this.heathList.person_status) % 2 == 0 ? '无' : '有'
						this.personList = (this.heathList.person_history != '') == 'Array' ? [] : (this.heathList
							.person_history).map(function (item, index) {
              that.tapInfos(index, {
                name: item,
                checked: true
              })
              return {
                name: item,
                checked: true
              }
            })

						this.family = (this.heathList.family_status) % 2 == 0 ? '无' : '有'
						this.familyList = (this.heathList.family_history != '') == 'Array' ? [] : (this.heathList
							.family_history).map(function (item, index) {
              that.taps(index, {
                name: item,
                checked: true
              })
                return {
                  name: item,
                  checked: true
                }
            })
					}
				})
			}
		},
		mounted() {
			this.getInfolist()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		height: 100vh;
		background: #F8FAFC;
		padding: 20rpx 0;
		padding-bottom: env(safe-area-inset-bottom);

    .card-box {
      height: 93vh;
      overflow: auto;
    }
		.card {
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 0 auto 20rpx;
			padding: 0 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;

			.card_title {
				height: 114rpx;
				line-height: 114rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #232323;
				border-bottom: 1rpx solid #E2E8F0;
			}

			.card_name {
				width: 646rpx;
				height: 106rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				border-bottom: 1rpx solid #E2E8F0;

				text {
					font-weight: 400;
					color: #1E293B;
				}

				::v-deep .u-input {
					width: 380rpx;
				}
			}

			.card_name:last-child {
				border-bottom: 0;
			}

			.card_names {
				width: 646rpx;
				padding: 34rpx 0 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				border-bottom: 1rpx solid #E2E8F0;

				text {
					font-weight: 400;
					color: #1E293B;
				}

				::v-deep .u-input {
					width: 380rpx;
				}
			}

			.card_history {
				width: 646rpx;
				padding: 34rpx 0 32rpx 0;
				font-size: 30rpx;
				border-bottom: 1rpx solid #E2E8F0;

				.name {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 5rpx;
					margin-bottom: 10rpx;

					text {
						font-weight: 400;
						color: #1E293B;
					}

					::v-deep .uni-radio-wrapper .uni-radio-input {
						background-color: transparent;
						border: 2rpx solid #E8E9EB;
					}

					::v-deep .uni-radio-wrapper .uni-radio-input.uni-radio-input-checked {
						background-color: rgba($color: #000000, $alpha: 0) !important;
						border: 2rpx solid #2979FF;
						position: relative;

						&::before {
							display: inline-block;
							content: '';
							width: 70%;
							height: 70%;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							background-color: #2979FF;
							border: none;
							border-radius: 50%;
						}
					}

				}

				.tabs {
					.tab {
						margin: 0 10rpx 0 0;
					}
				}

			}

			.card_history:last-child {
				border-bottom: 0;
			}


			.card_relation {
				width: 646rpx;
				height: 106rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				border-bottom: 1rpx solid #E2E8F0;

				text {
					font-weight: 400;
					color: #1E293B;
				}

				.u-icon {
					vertical-align: middle;
					margin-top: 2rpx;
				}

				::v-deep .u-input {
					margin-left: 130rpx;
				}

				::v-deep .u-input__right-icon ::before {
					content: ""
				}

				.choose {
					font-weight: 400;
					color: #94A3B8;
				}
			}

			.card_telephone {
				width: 646rpx;
				height: 106rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;

				text {
					font-weight: 400;
					color: #1E293B;
				}

			}
		}

		.default {
			width: 710rpx;
			height: 112rpx;
			line-height: 112rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 20rpx auto 160rpx;
			padding: 0 32rpx;

			.set {
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #1E293B;

				text {
					color: #94A3B8;
					font-weight: 400;
				}
			}
		}

		.cards {
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 40rpx auto 90rpx;
			padding: 0 32rpx 40rpx;
			font-family: PingFang SC-Regular, PingFang SC;

			.cards_title {
				height: 114rpx;
				line-height: 114rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #232323;
				border-bottom: 1rpx solid #E2E8F0;
			}

			.cards_name:last-child {
				border-bottom: 0;
			}

			.cards_names {
				width: 646rpx;
				padding: 34rpx 0 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				border-bottom: 1rpx solid #E2E8F0;

				text {
					font-weight: 400;
					color: #1E293B;
				}

				::v-deep .u-input {
					width: 380rpx;
				}
			}

			.cards_history {
				width: 646rpx;
				padding: 34rpx 0 32rpx 0;
				font-size: 30rpx;
				border-bottom: 1rpx solid #E2E8F0;

				.name {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 5rpx;
					margin-bottom: 10rpx;

					text {
						font-weight: 400;
						color: #1E293B;
					}

					::v-deep .uni-radio-wrapper .uni-radio-input {
						background-color: transparent;
						border: 2rpx solid #E8E9EB;
					}

					::v-deep .uni-radio-wrapper .uni-radio-input.uni-radio-input-checked {
						background-color: rgba($color: #000000, $alpha: 0) !important;
						border: 2rpx solid #2979FF;
						position: relative;

						&::before {
							display: inline-block;
							content: '';
							width: 70%;
							height: 70%;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							background-color: #2979FF;
							border: none;
							border-radius: 50%;
						}
					}

				}

				.tabs {
					display: flex;
					flex-wrap: wrap;

					::v-deep .u-tag {
						margin: 10rpx 20rpx 10rpx 0;
					}

					text {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #4175EE;
						margin: 10rpx 20rpx;
						text-align: center;
						border: 1rpx solid #4175EE;
						padding: 4rpx 8rpx;
					}
				}

			}

			.cards_history:last-child {
				border-bottom: 0;
			}


			.cards_relation {
				width: 646rpx;
				height: 106rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				border-bottom: 1rpx solid #E2E8F0;

				text {
					font-weight: 400;
					color: #1E293B;
				}

				.u-icon {
					vertical-align: middle;
					margin-top: 2rpx;
				}

				::v-deep .u-input {
					margin-left: 130rpx;
				}

				::v-deep .u-input__right-icon ::before {
					content: ""
				}

				.choose {
					font-weight: 400;
					color: #94A3B8;
				}
			}

			.cards_telephone {
				width: 646rpx;
				height: 106rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;

				text {
					font-weight: 400;
					color: #1E293B;
				}

			}
		}

		.floors {
			z-index: 99;

			.floor_item {
				padding: 32rpx;
				font-size: 32rpx;
				text-align: center;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;

				.title {
					height: 66rpx;
					width: 620rpx;
					font-size: 36rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #1E293B;
				}

				.u_btn {
					margin: 40rpx 0;
				}

				.u_inp {
					margin: 40rpx 0;

					::v-deep .u-input {
						background: #F1F5F9;
					}
				}

				.info {
					width: 620rpx;
					margin: 40rpx 0;

					.addinfo {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 620rpx;

						.words {
							height: 42rpx;
							font-size: 30rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #1E293B;
							margin: 20rpx 0 10rpx;
						}

						.radios {}
					}

				}
			}
		}

		.footer {
			width: 750rpx;
			background: #FFFFFF;
			border: 1rpx solid #F2F3F5;
			position: fixed;
			z-index: 10;
			left: 0;
			bottom: env(safe-area-inset-bottom);
			padding: 12rpx 0;

			.btn {
				width: 750rpx;
				height: 86rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					width: 686rpx;
					height: 86rpx;
					line-height: 86rpx;
					text-align: center;
					background: #4175EE;
					border-radius: 64rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin: 0 0 12rpx 0;
				}
			}
		}
	}
</style>
