<template>
	<view class="g-components-item">
		<view class="m-set g_bg_f g_radius_8" :style="{ borderRadius: list[0] && list[0].radius == 'no_top' ? '0 0 8px 8px' : list[0] && list[0].radius == 'no_bottom' ? '8px 8px 0 0 ' : '' }">
			<block v-for="(item, index) in list" :key="index">
				<view
					class="item g_flex_row_start"
					:style="{
						'padding-top': (item.pColumn ? item.pColumn : 19) + 'px',
						'padding-bottom': (item.pColumn ? item.pColumn : 19) + 'px',
						'padding-left': (item.pRow ? item.pRow : 10) + 'px',
						'padding-right': (item.pRow ? item.pRow : 10) + 'px',
					}"
				>
					<view class="g_flex_none g_pr_10 g_flex_column_center">
						<view
							class="g_flex_1 g_flex_row_start"
							:class="{
								labelRequire: item.require,
								customRequire: item.customRequire,
							}"
						>
							<view class="t-icon g_h_22 g_w_22 g_pl_7 g_mr_5" style="width: 22px; height: 22px" v-if="item.icon" :class="'t-' + item.icon"></view>
							<view class="g_flex_column_center g_c_0 g_fs_17">{{ item.label }}</view>
						</view>
					</view>
					<view class="g_flex_1 g_flex_column_center">
						<view class="g_flex_row_end 1" style="width: 100%">
							<slot></slot>
							<view class="g_flex_row_end 2 from-type" style="width: 100%">
								<!-- 通用类型 -->
								<view class="form-base g_fs_16 g_ell_1 g_lh_1_2 g_w_all g_text_r g_flex_1" :class="item.fontColor" v-if="item.result" @click="handleResult(item)">{{ item.result }}</view>
								<!-- 迷你二维码 -->
								<view class="form-wx-code g_flex_rowRight_columnCenter" v-if="item.tip == 'code'">
									<i class="iconfont icon-a-erweimabeifen2 g_fs_21 g_c_c" style="font-size: 21px"></i>
								</view>
								<!-- 头像类 -->
								<view class="form-avatar g_flex_rowRight_columnCenter" v-if="item.tip == 'avatar'">
									<img :src="item.value" alt="" class="g_w_48 g_h_48 g_radius_50" />
								</view>
								<!-- 上传图片头像类 -->
								<!-- #ifdef APP-PLUS || H5 || MP-TOUTIAO || MP-KUAISHOU -->
								<button v-if="item.tip == 'update-avatar'" aria-role="button" class="from-wx-avatar g_flex_rowRight_columnCenter g_bg_f g_w_all" style="padding-right: 0px; margin: 0" @click="handleOpenAvatar">
									<img :src="item.value || localBaseImg + 'default.svg'" class="g_w_32 g_h_32 g_radius_50" />
									<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
								</button>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<button open-type="chooseAvatar" @chooseavatar="handleStartChangeAvatar" v-if="item.tip == 'update-avatar'" aria-role="button" class="from-wx-avatar g_flex_rowRight_columnCenter g_bg_f g_w_all" style="padding-right: 0px; margin: 0">
									<img :src="item.value || localBaseImg + 'default.svg'" class="g_w_32 g_h_32 g_radius_50" />
									<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
								</button>
								<button @click="uploadQRCode" v-if="item.tip == 'update-QRCode'" aria-role="button" class="from-wx-avatar g_flex_rowRight_columnCenter g_bg_f g_w_all" style="padding-right: 0px; margin: 0">
									<img :src="item.img || localBaseImg + 'default.svg'" class="g_w_48 g_h_48 g_radius_4" />
									<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
								</button>
								<!-- #endif -->

								<!-- 指定输入框。场景：当有多个list时使用；若list只有一个，使用slot即可 -->
								<view
									:style="{
										width: item.type != 'slot' ? 'calc(100% - 16px)' : item.tip == 'slot-choose-address' ? 'calc(100% - 22px)' : '100%',
									}"
									class="form-code"
									v-if="item.tip && item.tip.indexOf('slot') > -1"
								>
									<!-- 验证码 -->
									<view class="g_flex_column_center" v-if="item.tip == 'slot-code'">
										<view class="g_flex_row_end">
											<view class="g_flex_1 g_mr_16">
												<u-input maxlength="4" type="number" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r" placeholder-style="color:#999;font-size:16px;" v-model="item.code" @blur="(e) => handleCode(e, item, index)" />
											</view>
											<view class="btn-text g_flex_column_center g_flex_none" @click="handleSendMsg">
												<button class="btn-con g_fs_14 g_c_9 g_w_88 g_flex_row_center">{{ msgCode.btnText }}</button>
											</view>
										</view>
									</view>
									<!-- 新密码 -->
									<view class="form-new-pwd g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-new-pwd'">
										<u-input type="password" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleNewPwd(e, item, index)" />
									</view>
									<!-- 确认密码 -->
									<view class="form-new-conpwd g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-confirm-pwd'">
										<u-input type="password" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleConfirmPwd(e, item, index)" />
									</view>
									<!-- 姓名输入框 -->
									<view class="form-new-name g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-name' || item.tip == 'slot-upID' || item.tip == 'slot-weChat'">
										<u-input type="text" :hover-stop-propagation="true" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @input="(e) => handleName(e, item, index)" @blur="(e) => handleName(e, item, index)" />
										<view class="form-new-why g_flex_column_center" style="" @click="updateImg" v-if="item.tip == 'slot-upID'">
											<image class="g_ml_4 g_w_24 g_h_22" :src="item.img || cdnBaseImg + 'mock_photo1.svg'"></image>
										</view>
									</view>
									<!-- 性别输入框 -->
									<view class="form-new-sex g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-sex'">
										<u-radio-group v-model="item.value" @change="(e) => handleSex(e, item, index)" active-color="#6A81FF">
											<u-radio :mr="sexItem.mr" v-for="(sexItem, sexIndex) in sexList" :key="sexIndex" :name="sexItem.tip">
												{{ sexItem.name }}
											</u-radio>
										</u-radio-group>
									</view>
									<!-- 年龄输入框 -->
									<view class="form-new-age g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-age'">
										<u-input type="number" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" :custom-style="{ fontSize: item.fontSize || ' 16px' }" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleAge(e, item, index)" />
									</view>
									<!-- 民族picker -->
									<view class="form-new-nation g_flex_rowRight_columnCenter g_fs_16" v-if="item.tip == 'slot-nation'" style="width: calc(100% - 0px)">
										<picker @change="(e) => handleNation(e, item, index)" :value="item.nationIndex" :range="nationData.list" style="width: 100%; text-align: right">
											<view class="g_flex_row_end flex_center">
												<view class="uni-input" :class="nationData.list[item.nationIndex] ? 'g_c_3' : 'g_c_9'">{{ nationData.list[item.nationIndex] || "请选择民族" }}</view>
												<view class="g_flex_column_center">
													<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
												</view>
											</view>
										</picker>
									</view>
									<!-- 身份证号输入框 -->
									<view class="form-new-idcard g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-code-idcard'">
										<u-input type="idcard" :clearable="false" :maxlength="18" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleIDcard(e, item, index)" />
									</view>
									<!-- 家庭住址输入框 -->
									<view class="form-new-address g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-address'">
										<u-input type="text" :clearable="false" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleAddress(e, item, index)" />
									</view>
									<!-- 地址选择框 -->
									<view class="form-new-choose g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-choose-address'">
										<view class="g_text_r g_w_all g_fs_16" :class="item.value ? 'g_c_3' : 'g_c_9'" @click="chooseAddress">{{ item.value || item.placeholder }}</view>
									</view>
									<!-- 手机号 -->
									<view class="form-new-tel g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-mobile'">
										<u-input type="number" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :maxlength="13" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @input="(e) => handleMobile(e, item, index)" />
									</view>
									<!-- 多文本输入 -->
									<view class="form-new-textarea g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-more-word'" style="width: calc(100%)">
										<textarea class="  g_text_r g_fs_16" v-model="item.value" :placeholder="item.placeholder" placeholder-style="color:#999999;font-size:16px" :maxlength="-1" auto-height style="min-height: 24px; width: 200px; line-height: 16px" @blur="(e) => handleMoreWord(e, item, index)"></textarea>
									</view>
									<!-- 时间 --> 
									<view class="form-new-time g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-time'">
										<g-panel-detail-item :from="item.from" style="width: 100%" label=" " :isShowBottom="false" :value="item.value" afterType="time" @confirmChooseTime="handleMianshi" />
									</view>
									<!-- 附件上传 -->
									<view class="g_flex_rowRight_columnCenter g_w_all" @click="uploadPhoto" v-if="item.tip == 'slot-update-file'">
										<view class="g_flex_1 g_c_9 g_text_r g_fs_16">请选附件上传</view>
										<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
									</view>
									<!-- 财务信息显示 -->
									<view class="g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-caiwu'">
										<view class="g_flex_1 g_c_3 g_text_l g_fs_16 g_pl_6" :class="[caiwuToggle ? '' : 'g_ell_3', item.value.length > 1 ? 'g_text_l' : 'g_text_r']" style="white-space: pre-line">{{ item.value || "-" }}</view>
									</view>
									<!-- 选择政策 -->
									<view class="g_flex_rowRight_columnCenter g_w_all" @click="uploadZhengce" v-if="item.tip == 'slot-zhengce'">
										<view class="g_flex_1 g_c_3 g_text_r g_fs_16">{{ item.value }}</view>
									</view>
								</view>
								<!-- 右箭头 -->
								<view class="form-new-right g_flex_column_center" v-if="item.type != 'slot'" @click.capture="item.path ? handleResult(item) : ''">
									<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
								</view>
								<view class="form-new-why g_flex_column_center" v-if="item.tip == 'slot-choose-address'">
									<i class="iconfont g_fsi_18 g_c_c g_ml_4" :class="item.suffix" @click="chooseAddress"></i>
								</view>
								<view class="form-new-why g_flex_column_center" v-if="item.tip == 'slot-zhengce'">
									<i class="iconfont g_fsi_18 g_c_c g_ml_4" :class="item.suffix" @click="uploadZhengce"></i>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>

			<slot name="after"></slot>
			<view
				v-if="
					list.filter((item) => {
						return item.tip == 'slot-caiwu';
					}).length
				"
				@click="caiwuToggle = !caiwuToggle"
				style="height: 45px"
				class="g_flex_column_center tog"
			>
				<view class="g_flex_c">
					<view class="g_flex_row_center">
						<view class="g_fs_14 g_c_9 g_flex_column_center">{{ caiwuToggle ? "收起" : "展开" }}</view>
						<view class="g_fs_14 g_flex_column_center">
							<i class="iconfont icon-gengduo11 g_c_c g_ml_4" style="font-size: 14px" :class="caiwuToggle ? 'icon_down' : 'icon_up'"></i>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="zhengceModal.isShow" mode="bottom" border-radius="16" height="980" :mask-close-able="true">
			<view class="g_fs_18 g_c_3 g_flex_row_center g_pt_16"> 选择政策 </view>
			<scroll-view scroll-y="true" style="height: 710rpx">
				<view class="g_pl_12 g_pr_12">
					<view class="g_flex_row_between g_pt_16 g_pb_16 g_border_d_b" v-for="(item, index) in zhengceList" :key="index" @click="handleChooseZhengce(item, index)">
						<view class="g_fs_17 g_c_3">{{ item.name }}</view>
						<view class="g_flex_column_center">
							<i
								class="iconfont icon-a-duigoubeifen2"
								style="font-size: 24px"
								:style="{
									color: item.isSelected ? '#6A81FF' : '#fff',
								}"
							></i>
						</view>
					</view>
				</view>
			</scroll-view>
			<g-panel-fixed>
				<slot>
					<view class="g_flex_row_center">
						<rh-button primaryColor='#3578f6' btnText="确定" type="primary" @clickBtn="submitZhengce" />
					</view>
				</slot>
			</g-panel-fixed>
		</u-popup>
	</view>
</template>

<script>
/* item单行卡片
 * 示例：我的页面中的设置展示UI
 */
import { nationlist } from "../../utils/nation.js";
export default {
	data() {
		return {
			cdnBaseImg: this.G.store().cdnBaseImg,
			localBaseImg: this.G.store().localBaseImg,

			msgCode: {
				// 短信倒计时
				code: "",
				btnText: "获取验证码", // 6s
				countdown: 0,
				timer: null,
			},
			nationData: {
				list: null,
				index: 0,
			},
			sexList: [
				{
					name: "男",
					tip: 1,
					mr: 24,
				},
				{
					name: "女",
					tip: 2,
					mr: 0,
				},
			],
			caiwuToggle: false,
			zhengceModal: {
				isShow: false,
			},
			zhengceList: [],
		};
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
		defaultOption: {
			type: Array,
			default: () => {
				return [];
			},
		},
		jobInfo: {
			type: Number,
			default: 0,
		},
	},
	created() {
		this.localBaseImg = this.G.store().localBaseImg;
		this.nationData.list = nationlist.map((item, index) => {
			return item.name;
		});
		this.zhengceList = this.defaultOption;
	},
	watch: {
		defaultOption(val) {
			this.zhengceList = val;
		},
	},
	onHide() {
		if (this.msgCode.timer) {
			clearInterval(this.msgCode.timer);
		}
	},
	methods: {
		// 验证码
		handleCode(e, $item, $index) {
			this.$emit("changeCode", e);
		},
		// 新密码
		handleNewPwd(e, $item, $index) {
			this.$emit("changeNewPwd", e);
		},
		// 确认密码
		handleConfirmPwd(e, $item, $index) {
			this.$emit("changeConfirmPwd", e);
		},
		// 姓名
		handleName(e, $item, $index) {
			if ($item.tip == "slot-weChat") {
				this.$emit("changeWeChat", e, $item);
			} else {
				this.$emit("changeName", e, $item);
			}
		},
		// 性别
		handleSex(e, $item, $index) {
			// console.log("性别选择", e);
			$item.value = e;
			this.$emit("changeSex", e);
		},
		// 年龄
		handleAge(e, $item, $index) {
			this.$emit("changeAge", e);
		},
		// 民族
		handleNation(e, $item, $index) {
			let that = this;
			that.list.filter((item, index) => {
				return index == $index;
			})[0].value = that.nationData.list[e.detail.value];
			that.list.filter((item, index) => {
				return index == $index;
			})[0].nationIndex = e.detail.value;

			that.$emit("changeNation", {
				e: e,
				name: that.nationData.list[e.detail.value],
				index: e.detail.value,
			});
		},
		// 身份证号
		handleIDcard(e, $item, $index) {
			this.$emit("changeIDcard", e);
		},
		// 家庭住址
		handleAddress(e, $item, $index) {
			this.$emit("changeAddress", e);
		},
		// 多文字输入框
		handleMoreWord(e, $item, $index) {
			// // console.log(e);
			// // console.log($item);
			this.$emit("changeMoreWord", $item);
		},
		// 地图选择地址
		chooseAddress() {
			let that = this;
			uni.chooseLocation({
				success(e) {
					// console.log(e);
					let res = {};
					var reg = /.+?(省|市|自治区|自治州|县|区)/g; // 省市区的正则
					if (e.address) {
						let arr = e.address.match(reg);
						res.district = [arr[0], arr[1]].join(" ");
						res.address = e.address;
						res.name = e.name;
					}
					res.lat = e.latitude;
					res.lng = e.longitude;
					that.$emit("chooseAddress", res);
				},
				fail(e) {
					// console.log("err", e);
				},
			});
		},

		// 发送验证码
		handleSendMsg() {
			let that = this;
			if (this.msgCode.countdown > 0) {
				return;
			}
			that.G.Get(
				that.api.login_sendMsg,
				{
					tel: uni.getStorageSync("apply-tel"),
				},
				(res) => {
					that.msgCode.countdown = 60;
					that.msgCode.btnText = that.msgCode.countdown + "s";
					clearInterval(that.msgCode.timer);
					that.msgCode.timer = setInterval(() => {
						if (that.msgCode.countdown > 0) {
							that.msgCode.countdown--;
							that.msgCode.btnText = that.msgCode.countdown + "s";
						} else {
							clearInterval(that.msgCode.timer);
							that.msgCode.timer = null;
							that.msgCode.btnText = "获取验证码";
						}
					}, 1000);
				}
			);
		},
		// 上传图片
		updateImg() {
			let that = this;
			// console.log("updateImg");
			this.G.uploadImg((res) => {
				// console.log("身份证信息：", res);
				if (res.status == "上传成功") {
					that.$emit("updateIDInfo", res);
				} else {
					that.showToast({
						title: "上传失败请重试",
						icon: "none",
					});
				}
				uni.hideLoading();
			}, "idcard");
		},
		// 上传图片
		uploadQRCode() {
			let that = this;
			that.G.cropBeforeUpload({
				cropScale: "1:1",
				success: (res) => {
					// console.log(res);
					that.$emit("updateFile", res.image);
				},
				fail: (err) => {
					// console.log(err);
				},
			});
		},
		// 上传图片
		uploadPhoto() {
			let that = this;
			that.G.uploadImg((res) => {
				// console.log(res);
				this.$emit("updateFile", res.image);
			});
		},
		// 更新政策
		uploadZhengce() {
			let that = this;
			// 处理回显
			let ids = "";
			if (this.jobInfo == 0) {
				uni.showToast({
					icon: "none",
					title: "请选择职位",
				});
				return false;
			}
			that.zhengceList
				.filter((item) => {
					return ids.indexOf(item.id) > -1;
				})
				.forEach((item, index) => {
					item.isSelected = true;
				});
			that.zhengceModal.isShow = true;
		},
		handleChooseZhengce($item, $index) {
			let that = this;
			that.zhengceList.forEach((item, index) => {
				if (index == $index) {
					if (item.isSelected) {
						item.isSelected = false;
					} else {
						item.isSelected = true;
					}
				} else {
					item.isSelected = false;
				}
			});
		},
		submitZhengce() {
			let that = this;
			let ids = [];
			ids = that.zhengceList
				.filter((item) => {
					return item.isSelected;
				})
				.map((item) => {
					return item.id;
				});
			if (ids.length == 0) {
				uni.showToast({
					title: "请选择一个政策",
					icon: "none",
				});
				return false;
			}
			that.zhengceModal.isShow = false;
			that.$emit("updateZhengce", {
				onSiteUserIds: ids.join(","),
				item: that.zhengceList.filter((item) => {
					return item.isSelected;
				})[0],
			});
		},

		handleStartChangeAvatar(e) {
			let that = this;
			that.G.uploadTmpImg(e.detail.avatarUrl, (res) => {
				// console.log("微信：", res.image);
				that.$emit("updateImg", res.image);
			});
		},
		handleOpenAvatar() {
			let that = this;
			uni.showActionSheet({
				itemList: ["从相册选择", "使用相机"],
				success: function (res) {
					if (res.tapIndex == 0) {
						// console.log("点击相册");
						// 相册
						that.setAvatar(["album"]);
					} else {
						// console.log("点击拍照");
						// 拍照
						that.setAvatar(["camera"]);
					}
				},
				fail: function (res) {},
			});
		},
		setAvatar($type) {
			let that = this;
			that.G.uploadImg(
				(res) => {
					// console.log("其他：", res.image);
					that.$emit("updateImg", res.image);
				},
				"default",
				1,
				$type
			);
		},
		handleResult(e) {
			this.$emit("clickResult", e);
		},
		handleMobile(e, $item, $index) {
			this.$emit("changeMobile", e, $item);
		},
		handleMianshi(e, $item, $index) {
			this.$emit("changeTime", e);
		},
	},
};
</script>

<style lang="scss">
.g-components-item {
	.m-set {
		width: calc(100% - 40rpx);
		margin: 0 auto;

		.item {
			position: relative;
			// border-bottom: 1rpx solid #eee;
			&:after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 10px;
				border-bottom: 1rpx solid #eee;
				height: 1rpx solid #eee;
				width: calc(100% - 20px);
			}

			&:last-child {
				border-bottom: none;
				&:after {
					content: none;
				}
			}
		}

		.labelRequire {
			position: relative;
			&::after {
				position: absolute;
				right: -8px;
				top: 8px;
				content: "*";
				color: #ff4400;
			}
		}
		.customRequire {
			&::after {
				top: 4px;
			}
		}
	}

	.btn-text {
		.btn-con {
			border-left: 1rpx solid #eee;
			padding: 0 0 0 16px;
			background-color: transparent;
			border-radius: 0;
			height: 40rpx;
			line-height: 40rpx;
		}
	}
}
.icon_up {
	transform: rotate(90deg);
}
.icon_down {
	transform: rotate(-90deg);
}
</style>
