<template>
    <view>
        <van-action-sheet :show="show" :title="title" @close="onClose">
            <van-cell-group>
                <block v-if="!item.hide" v-for="(item, index) in formControllers" :key="index">
                    <van-field
                        v-if="item.type === 'input'"
                        :label="item.label"
                        v-model="item.value"
                        :placeholder="'请输入' + item.label"
                        @input="setVal($event, { key: item.key, index })"
                        :data-key="item.key"
                        :data-index="index"
                    />

                    <van-field
                        v-if="item.type === 'textarea'"
                        type="textarea"
                        :label="item.label"
                        :value="item.value"
                        :placeholder="'请输入' + item.label"
                        autosize
                        :maxlength="item.maxlength ? item.maxlength : -1"
                        :show-word-limit="item.maxlength"
                        @input="setVal($event, { key: item.key, index })"
                        :data-key="item.key"
                        :data-index="index"
                    />

                    <block v-if="item.type === 'date'">
                        <van-cell
                            :title="item.label"
                            :value="item.value ? item.value : '请选择' + item.label"
                            @click="onShowDate($event, { value: item.value, index, key: item.key })"
                            :data-value="item.value"
                            :data-index="index"
                            :data-key="item.key"
                        />
                    </block>

                    <block v-if="item.type === 'checkbox'">
                        <van-cell
                            :title="item.label"
                            :value="item.selected ? item.selected : '请选择' + item.label"
                            @click="onShowCheckbox($event, { options: item.options, value: item.value, label: item.label, index, key: item.key })"
                            :data-options="item.options"
                            :data-value="item.value"
                            :data-label="item.label"
                            :data-index="index"
                            :data-key="item.key"
                        />
                    </block>

                    <block v-if="item.type === 'select'">
                        <picker
                            :value="item.valueIndex"
                            :range="item.options"
                            :range-key="item.optionsKey || 'label'"
                            @change="pickerChange"
                            :data-value="item.value"
                            :data-valuekey="item.valueKey || 'value'"
                            :data-options="item.options || []"
                            :data-currentindex="index"
                            :data-optionsKey="item.optionsKey || 'label'"
                            :data-index="index"
                            :data-key="item.key"
                        >
                            <van-cell :title="item.label" :value="item.valueIndex >= 0 ? item.options[item.valueIndex][item.optionsKey || 'label'] : '请选择' + item.label" />
                        </picker>
                    </block>
                </block>
            </van-cell-group>
            <view class="bottom-btn">
                <view class="btn btn-gray" @tap="onClose">取消</view>
                <view class="btn btn-blue" @tap="sure">确定</view>
            </view>
        </van-action-sheet>

        <van-calendar :show="showDate" @close="onCloseDate" @confirm="onConfirmDate" :default-date="defaultDate" />
        <van-action-sheet :show="showCheckbox" :title="checkboxTitle" @close="onCloseCheckbox">
            <scroll-view scroll-y style="max-height: 50vh">
                <van-checkbox-group :value="checkboxResult" @change="onChangeCheckbox">
                    <view class="checkbox-item" :data-index="index" @tap="toggle" v-for="(item, index) in checkboxOptions" :key="index">
                        <van-checkbox :name="item.value" :class="'checkboxes-' + index">
                            {{ item.label }}
                        </van-checkbox>
                    </view>
                </van-checkbox-group>
            </scroll-view>
            <view class="bottom-btn">
                <view class="btn btn-gray" @tap="onCloseCheckbox">取消</view>
                <view class="btn btn-blue" @tap="sureCheckbox">确定</view>
            </view>
        </van-action-sheet>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showDate: false,
            dateKey: '',
            defaultDate: '',
            dateIndex: '',
            formControllers: {},
            showCheckbox: false,
            checkboxTitle: '',
            checkboxResult: [],
            checkboxOptions: [],
            checkboxIndex: ''
        };
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ' '
        },
        formController: {
            type: Object,
            default: () => {}
        }
    },
    methods: {
        onClose() {
            this.$emit('close');
        },
        onCloseCheckbox() {
            this.setData({
                showCheckbox: false
            });
        },
        sureCheckbox() {
            let formControllers = this.formControllers;
            let checkboxResult = this.checkboxResult;
            let label = [];
            formControllers[this.checkboxIndex].value = checkboxResult.join(',');
            checkboxResult.forEach((item) => {
                formControllers[this.checkboxIndex].options.forEach((option) => {
                    if (option.value == item) {
                        label.push(option.label);
                    }
                });
            });
            formControllers[this.checkboxIndex].selected = label.join(',');
            this.setData({
                formControllers,
                showCheckbox: false
            });
        },
        toggle(event) {
            console.log(event);
            const { index } = event.currentTarget.dataset;
            const checkbox = this.zpSelectComponent(`.checkboxes-${index}`);
            console.log(checkbox);
            checkbox.toggle();
        },
        onChangeCheckbox(event) {
            this.setData({
                checkboxResult: event.detail
            });
        },
        onShowCheckbox(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let { options, value, label, index } = e.currentTarget.dataset;
            this.setData({
                showCheckbox: true,
                checkboxTitle: '选择' + label,
                checkboxResult: value.split(','),
                checkboxOptions: options,
                checkboxIndex: index
            });
        },
        onShowDate(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let { key, value, index } = e.currentTarget.dataset;
            console.log(e.currentTarget.dataset);
            this.setData({
                showDate: true,
                dateKey: key,
                defaultDate: value,
                dateIndex: index
            });
        },
        onCloseDate(e) {
            this.setData({
                showDate: false
            });
        },
        formatDate(date) {
            date = new Date(date);
            return `${date.getFullYear()}-${date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)}-${
                date.getDate() > 10 ? date.getDate() : '0' + date.getDate()
            }`;
        },
        onConfirmDate(e) {
            let formControllers = this.formControllers;
            formControllers[this.dateIndex].value = this.formatDate(e.detail);
            this.setData({
                showDate: false,
                formControllers
            });
            console.log(this.formControllers);
        },
        setVal(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let formControllers = this.formControllers;
            console.log(e);
            formControllers[e.currentTarget.dataset.index].value = e.detail;
            this.setData({
                showDate: false,
                formControllers
            });
            console.log(this.formControllers);
        },
        pickerChange(e) {
            let { valuekey, options, currentindex, key } = e.currentTarget.dataset;
            let index = e.detail.value;
            console.log(key, 'key');
            let formControllers = this.formControllers;
            let selected = options[index];
            formControllers[currentindex].value = selected[valuekey];
            formControllers[currentindex].valueIndex = e.detail.value;
            if (selected.masterControl) {
                formControllers.forEach((item) => {
                    if (item.showFlag) {
                        if (item.showFlag === selected[valuekey]) {
                            item.hide = false;
                        } else {
                            item.hide = true;
                        }
                    }
                });
            }
            this.setData({
                formControllers
            });
        },
        sure() {
            console.log('ok', this.formControllers);
            this.$emit('ok', {
                detail: this.formControllers
            });
            this.onClose();
        }
    },
    created: function () {},
    watch: {
        formController: {
            handler: function (val) {
                this.setData({
                    formControllers: val
                });
            },

            immediate: true,
            deep: true
        }
    }
};
</script>
<style>
.btn {
    width: 240rpx;
    height: 76rpx;
    border-radius: 38rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
}
.btn-blue {
    background: linear-gradient(87deg, #81b5fb 0%, #3e92ff 100%);
}
.btn-gray {
    background: #d9d9d9;
}

.bottom-btn {
    background: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 99rpx 20rpx;
    /*padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);*/
    width: 100%;
    box-sizing: border-box;
    z-index: 999;
    position: static;
}
.checkbox-item {
    display: flex;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 1px solid #f2f2f2;
}
</style>
