<template>
    <view>
        <view class="title">
            <text class="tag"></text>
            {{ popupTitle }}
        </view>
        <view class="form_card">
            <view v-for="(itemP, index) in formListClone" :key="index">
                <!-- 下拉菜单 -->

                <view class="form_item" v-if="itemP.itemType == 'select'">
                    <view class="form_item_label">{{ itemP.label }}</view>
                    <view class="form_item_input">
                        <picker
                            @change="bindPicker"
                            range-key="label"
                            :value="index"
                            :range="itemP.opction"
                            :data-formNameP="itemP.formNameP"
                            :data-formName="itemP.formName"
                            :data-opction="itemP.opction"
                            :class="itemP.selectLabel ? '' : 'gray'"
                        >
                            {{ itemP.selectLabel ? itemP.selectLabel : '请选择' }}
                        </picker>
                        <image src="/static/images/right.png" mode="" />
                    </view>
                </view>

                <!-- 单选框 -->

                <view class="form_item" v-if="itemP.itemType == 'radio'">
                    <view class="form_item_label">{{ itemP.label }}</view>
                    <radio-group
                        @change="radioChange"
                        :data-formNameP="itemP.formNameP"
                        :data-formName="itemP.formName"
                        :data-opction="itemP.opction"
                        class="form_item_input_radio"
                    >
                        <label class="weui-cell weui-check__label" v-for="(item, index1) in itemP.opction" :key="itemP.value">
                            <view class="weui-cell__hd">
                                <radio :value="item.value" :checked="itemP.selectLabel == item.value ? true : false" />
                            </view>

                            <view class="weui-cell__bd">{{ item.label }}</view>
                        </label>
                    </radio-group>
                </view>

                <!-- 输入框 -->

                <view class="form_item" v-if="itemP.itemType == 'input'">
                    <view class="form_item_label">{{ itemP.label }}</view>
                    <view class="form_item_input">
                        <input
                            confirm-type="next"
                            @blur="bindinput"
                            @input="bindinput"
                            :value="itemP.selectLabel"
                            :data-formNameP="itemP.formNameP"
                            :data-formName="itemP.formName"
                            placeholder-class="gray"
                            placeholder="请输入"
                        />
                    </view>
                </view>

                <!-- 复选框 -->

                <view class="form_item" v-if="itemP.itemType == 'checkbox'">
                    <view class="form_item_label">{{ itemP.label }}</view>
                    <view class="form_item_input">
                        <checkbox-group @change="bindCheckbox" :data-formNameP="itemP.formNameP" :data-formName="itemP.formName">
                            <label class="weui-cell weui-check__label" v-for="(itemC, index1) in itemP.opction" :key="item.value">
                                <view class="weui-cell__hd">
                                    <checkbox :value="itemC.value" color="#3974f6" :checked="itemC.selectLabel" />
                                </view>

                                <view class="weui-cell__bd">{{ itemC.label }}</view>
                            </label>
                        </checkbox-group>
                    </view>
                </view>

                <!-- 时间选择器 -->

                <view class="form_item" v-if="itemP.itemType == 'datepicker'">
                    <view class="form_item_label">{{ itemP.label }}</view>
                    <view class="form_item_input">
                        <picker mode="date" :value="itemP.value" @change="bindDateChange" :data-formNameP="itemP.formNameP" :data-formName="itemP.formName">
                            <view :class="itemP.selectLabel ? '' : 'gray'">
                                {{ itemP.selectLabel ? itemP.selectLabel : '请选择' }}
                            </view>
                        </picker>
                    </view>
                </view>
            </view>
        </view>

        <view class="bot_btn">
            <button type="default" :plain="true" class="bottom_btn bottom_btn_close" @tap="hideForm">关闭</button>
            <button type="primary" class="btn_bule bottom_btn" @tap="confirm">确认</button>
        </view>
    </view>
</template>

<script>
// subpages/addResi/com/expandForm.js

export default {
    data() {
        return {
            formType: null,
            formListClone: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        formList: {
            type: Array,
            value: []
        },
        popupTitle: {
            type: String,
            value: ''
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    /**
     * 组件的方法列表
     */
    methods: {
        // onReady(){
        // },
        ready: async function () {
            if (this.formList && this.formList.length > 0) {
                this.setData({
                    formType: this.formList[0].formNameP
                });
            }
        },

        bindPicker(e) {
            const selectedIndex = e.detail.value;
            let opction = e.currentTarget.dataset.opction;
            let formName = e.currentTarget.dataset.formname;
            let formValue = opction[selectedIndex];
            let formNameP = e.currentTarget.dataset.formnamep;
            let { label, value } = formValue;
            this.$emit('changExpandForm', {
                detail: {
                    formName,
                    formNameP,
                    formValue: value
                }
            });
            this.setData({
                formListClone: this.formList.map((item) => {
                    if (item.formName === formName) {
                        return {
                            ...item,
                            selectLabel: label
                        };
                    } else {
                        return item;
                    }
                })
            });
        },

        radioChange(e) {
            console.log(e);
            const selectedIndex = Number(e.detail.value);
            let formName = e.currentTarget.dataset.formname;
            let formValue = Number(e.detail.value);
            let formNameP = e.currentTarget.dataset.formnamep;
            this.$emit('changExpandForm', {
                detail: {
                    formName,
                    formNameP,
                    formValue
                }
            });
            this.setData({
                formListClone: this.formList.map((item) => {
                    if (item.formName === formName) {
                        return {
                            ...item,
                            selectLabel: selectedIndex
                        };
                    } else {
                        return item;
                    }
                })
            });
        },

        bindinput(e) {
            let formName = e.currentTarget.dataset.formname;
            let formValue = e.detail.value;
            let formNameP = e.currentTarget.dataset.formnamep;
            this.$emit('changExpandForm', {
                detail: {
                    formNameP,
                    formName,
                    formValue
                }
            });
        },

        bindCheckbox(e) {
            let formName = e.currentTarget.dataset.formname;
            let formValue = e.detail.value;
            let formNameP = e.currentTarget.dataset.formnamep;
            this.$emit('changExpandForm', {
                detail: {
                    formNameP,
                    formName,
                    formValue
                }
            });
        },

        bindDateChange(e) {
            let formName = e.currentTarget.dataset.formname;
            let formNameP = e.currentTarget.dataset.formnamep;
            this.$emit('changExpandForm', {
                detail: {
                    formName,
                    formNameP,
                    formValue: e.detail.value
                }
            });
            this.setData({
                formListClone: this.formList.map((item) => {
                    if (item.formName === formName) {
                        return {
                            ...item,
                            selectLabel: e.detail.value
                        };
                    } else {
                        return item;
                    }
                })
            });
        },

        hideForm() {
            this.$emit('hideExpandForm', {
                detail: {
                    formType: this.formType
                }
            });
        },

        confirm() {
            console.log(this.formList);
            this.$emit('confirmExpandForm', {
                detail: {
                    formList: this.formList,
                    formType: this.formType
                }
            });
        }
    },
    created: function () {},
    watch: {
        formList: {
            handler: function (newVal, oldVal) {
                this.formListClone = newVal;
            },

            immediate: true,
            deep: true
        }
    }
};
</script>
<style>
/* subpages/addResi/com/expandForm.wxss */
.title {
    height: 90rpx;
    line-height: 90rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: bold;
    padding-left: 30rpx;
    box-sizing: border-box;
    color: #333333;
    position: relative;
}
.gray {
    color: #808080;
}
.form_card {
    height: calc(100% - 235rpx);
    overflow-y: scroll;
    padding: 0 10px;
    box-sizing: border-box;
}
.title .tag {
    width: 10rpx;
    height: 28rpx;
    background: #3a80e7;
    border-radius: 4rpx;
    position: absolute;
    left: 0rpx;
    top: 50%;
    transform: translateY(-14rpx);
}
.form_item {
    display: flex;
    align-items: center;
    border-top: 1px solid #eaeaea;
    min-height: 100rpx;
}
.form_item .form_item_label {
    min-width: 130rpx;
    height: 100%;
    line-height: 100rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    position: relative;
}
.form_item .form_item_input {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 51rpx;
    overflow: hidden;
}
.form_card .form_item .form_item_input picker,
.form_card .form_item .form_item_input input {
    flex: 1;
    height: 100rpx;
    line-height: 100rpx;
}
.form_card .form_item .form_item_input image {
    height: 22rpx;
    width: 22rpx;
}
.form_item .form_item_input_radio {
    display: flex;
}
.form_item .weui-cell {
    display: flex;
    margin-left: 20rpx;
    align-items: center;
}
.bot_btn {
    display: flex;
    background-color: #fff;
    z-index: 10;
    width: 100%;
    justify-content: space-between;
    position: fixed;
    bottom: 40rpx;
    left: 50%;
    box-sizing: border-box;
    transform: translateX(-50%);
    padding: 12rpx 90rpx;
    box-sizing: border-box;
}
.bot_btn .bottom_btn {
    width: 240rpx;
    height: 76rpx;
    border-radius: 43rpx;
    text-align: center;
    line-height: 76rpx;
    font-size: 32rpx;
}
.bot_btn .btn_bule {
    background: #3974f6;
    color: #fff;
}
.bottom_btn_close {
    border-color: #999999 !important;
}
.weui-cell__bd {
    font-size: 24rpx;
}
.form_item_input checkbox-group {
    display: flex;
    flex-wrap: wrap;
}
</style>
