<template>
	<view :style="{'background-color':forms.marginColor,'padding-top':forms.marginTop+'rpx'}" class="checkform">
		&nbsp;
		<view :style="bgStyle">
			<view :class="{'s1':forms.style==1}" v-for="(item, index) in lists" :key="index" :style="{'margin-bottom':forms.marginBottom+'rpx'}">
				<view class="text-label" :style="{'color':forms.inputLabel}" v-if="!(forms.style==2 && (item.key=='text' || item.key=='textarea' || item.key=='date' || item.key=='time'))">{{item.name}}</view>
				<view class="content-label">
					<input type="text" v-if="item.key=='text'" :placeholder-style="placeholderStyle" :style="inputStyle" :placeholder="item.hint"
					 :v-model="item.val" />
					<textarea type="text" v-else-if="item.key=='textarea'" :placeholder-style="placeholderStyle" :style="inputStyle"
					 :placeholder="item.hint" :v-model="item.val"></textarea>
					<picker mode="date" :value="item.val" v-else-if="item.key=='date'" @change="changeDateHandler" :data-index="index">
						<input v-model="item.val" :placeholder="item.hint" :placeholder-style="placeholderStyle" :style="inputStyle" />
					</picker>
					<picker mode="time" :value="item.val" v-else-if="item.key=='time'" @change="changeDateHandler" :data-index="index">
						<input v-model="item.val" :placeholder="item.hint" :placeholder-style="placeholderStyle" :style="inputStyle" />
					</picker>

					<u-checkbox-group v-else-if="item.key=='checkbox'" size="36" v-model="item.val">
						<u-checkbox v-for="(x, i) in item.list" :key="i" :name="x.label" v-model="x.value" shape>{{x.label}}</u-checkbox>
					</u-checkbox-group>

					<u-radio-group v-else-if="item.key=='radio'" size="36" v-model="item.val">
						<u-radio v-for="(x, i) in item.list" :key="i" :name="x.label" shape="circle" @change="radioChange(x.label,index)">{{x.label}}</u-radio>
					</u-radio-group>

					<u-upload v-else-if="item.key=='img_upload'" :file-list="item.val" :max-count="item.num" />
				</view>
			</view>
			<button :style="buttonStyle" @click="submitForm">{{forms.borderContent}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["forms"],
		data() {
			return {
				bgStyle: "",
				inputStyle: "",
				placeholderStyle: "",
				lists: [],
				buttonStyle: ""
			};
		},
		created() {
			this.lists = this.forms.formDialog;
			this.lists.forEach(x => {
				x.val = x.default ? x.default : "";
				if (this.forms.style == 2) {
					x.hint = x.name;
				}
			});
			let s = this.forms;
			this.bgStyle =
				`background-color:${
      s.backgroundColor
    };background-image:url(${s.backgroundPicUrl});background-size:${
      s.backgroundWidth
    }% ${s.backgroundHeight}%;margin-top:${s.marginTop}rpx;padding:${
      s.padding
    }rpx ${s.inputPadding}rpx;`;

			this.inputStyle =
				`border-radius:${s.radius}px;background-color:${
      s.inputBackground
    };border:1px solid ${s.inputBorder};color:${s.inputText};height:${
      s.height
    }rpx;outline:none;padding:0 12px;font-size:12px`;

			this.placeholderStyle = `color:${s.inputTip};font-size:12px`;

			this.buttonStyle =
				`display:block;margin:${s.buttonMargin}rpx ${
      s.buttonPadding
    }rpx 0 ${s.buttonPadding}rpx;height:${s.buttonHeight}rpx;border-raduis:${
      s.buttonRadius
    }px;color:${s.borderText};background-color:${
      s.borderBackground
    };border:none;`;
			if (s.borderBorder) {
				this.buttonStyle += "border:1px solid " + s.borderBorder + ";";
			}
		},
		methods: {
			changeDateHandler(e) {
				this.lists.forEach((x, i) => {
					if (i == e.mp.currentTarget.dataset.index) {
						this.$set(x, "val", e.mp.detail.value);
					}
					if (x.key == "img_upload" && x.img_type == "2") {
						x.num = 2;
					}
				});
				this.$forceUpdate();
			},
			radioChange(v, i) {
				this.lists[i].val = v
				this.$forceUpdate();
			},
			checkChangeItemHandler(e) {
				console.log(e)
			},
			afterRead(e) {
				console.log(e);
				//todo 文件上传
			},
			submitForm(e) {
				let msg = "";
				this.lists.forEach(x => {
					x.val = x.default ? x.default : "";
					if ((!x.val || x.val.length == 0) && x.is_required == 1) {
						msg = `${x.name}为必填项，请填写后提交`
						return false
					}
				});
				if (msg == '') {
					msg = '提交成功'
				}
				wx.showModal({
					content: msg,
					showCancel: false
				});
			}
		}
	};
</script>

<style>
	.checkform .s1,
	.checkform .s2 {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.checkform .s3 {
		display: flex;
		flex-direction: column;
	}

	.checkform .s1 .text-label,
	.checkform .s2 .text-label {
		width: 48px;
		text-align: left;
		font-size: 12px;
		margin-right: 12px;
	}

	.checkform .s3 .text-label {
		width: 100%;
		font-size: 12px;
	}

	.checkform .s1 .content-label,
	.checkform .s2 .content-label {
		flex: 1;
		width: 1px;
	}

	.checkform .s3 .content-label {
		width: 100%;
	}

	.checkform textarea {
		height: 100px !important;
		width: unset !important;
		padding: 12px !important;
	}

	.checkform .van-checkbox__label {
		font-size: 12px !important;
	}

	.u-list-item {
		background: #eaeaea;
	}
</style>
