<template>
    <view class="diy-form-calendar" :style="{backgroundColor: data.bg_color}">
        <view :style="{padding: `20rpx ${data.input_padding}rpx`,border: `1px solid ${data.input_radius}`}">
            <view class="_diy-form-label"
                  :style="{ color: data.title_color}"
                  v-if="data.list_style != 3"
                  :class="{required: data.is_required}">
                {{ data.title }}
            </view>
            <view :style="[inputStyle]" class="calendar-basic dir-left-nowrap cross-center">
                <view class="_diy-form-label box-grow-0"
                      :style="{ color: data.title_color}"
                      v-if="data.list_style == 3"
                      :class="{required: data.is_required}"
                      style="padding: 0;margin: 0 16rpx 0 0;"
                >
                    {{ calcTextWidth(data.title) }}
                </view>
                <view v-if="data.is_alone == 1" class="dir-left-nowrap cross-center"
                      :style="{marginLeft: data.list_style == 3 ? 'auto': '0'}">
                    <view class="c-select cross-center"
                          :style="{color: date.fulldate ? data.in_color : data.place_color}">
                        {{ date.fulldate || data.place_text }}
                    </view>
                </view>
                <template v-else>
                    <view class="box-grow-1 dir-left-nowrap cross-center" style="width: 50%">
                        <view class="c-select cross-center"
                              :style="{color: date.before ? data.in_color : data.place_color}">
                            {{ date.before || data.place_text }}
                        </view>
                    </view>
                    <view class="box-grow-0" style="color:#343434;padding: 0 20rpx">至</view>
                    <view class="box-grow-1 dir-left-nowrap cross-center" style="width: 50%">
                        <view class="c-select cross-center" :style="{color: date.after ? data.in_color : data.place_color}">
                            {{ date.after || data.place_text }}
                        </view>
                    </view>
                    <view v-if="date.data.length" class="box-grow-0" style="color: #242424">
                        共{{ data.has_kuatian == 1 ? date.data.length - 1 : date.data.length }}{{data.place_unit}}
                    </view>
                </template>
            </view>
        </view>
        <view :style="{margin: `0 ${data.box_padding}rpx`,background: data.padding_color,border: `1px solid ${data.border_color || data.padding_color}`,borderRadius: `${data.box_radius}rpx`}">
            <uni-calendar
                v-if="data.list_style"
                :start-date="cTime"
                :date="cTime"
                :end-date="data.end_at"
                :range="data.is_alone == 0"
                @change="change"
                :end-title="data.end_title"
                :is-day="data.is_day"
                :day-max="data.day_max"
                :active-color="data.active_color"
                :noactive-color="data.noactive_color"
                :select-color="data.select_color"
                :place-unit="data.place_unit"
                :has-kuatian="data.has_kuatian"
            ></uni-calendar>
        </view>
    </view>
</template>

<script>
import uniCalendar from "@/components/page-component/diy-form/uni-calendar/uni-calendar";

export default {
    name: 'diy-form-calendar',
    props: {
        index: [Number, String],
        value: Object
    },
    components: {
        uniCalendar,
    },
    data() {
        let meYear = new Date().getFullYear();
        let meMonth = new Date().getMonth() + 1;
        meMonth = meMonth.length === 1 ? '0' + meMonth : meMonth
        let meDay = new Date().getDate();
        return {
            myDate: meYear + '-' + meMonth + '-' + meDay,
            date: {
                before: '',
                after: '',
                data: [],
                fulldate: '',
            },
            data: {},
        }
    },
    computed: {
        cTime(){
            if(this.data.is_now == 1){
                if(this.data.is_today === 'today'){
                    return this.myDate;
                } else {
                    let dateTime = new Date(this.myDate.replace(/-/g, '/'));
                    dateTime = dateTime.setDate(dateTime.getDate() + (+this.data.after_day));
                    dateTime = new Date(dateTime);

                    let meYear = dateTime.getFullYear();
                    let meMonth = dateTime.getMonth() + 1;
                    meMonth = meMonth.length === 1 ? '0' + meMonth : meMonth
                    let meDay = dateTime.getDate();
                    console.error(meYear + '-' + meMonth + '-' + meDay);
                    return meYear + '-' + meMonth + '-' + meDay;
                }
            } else {
                return this.data.start_at
            }
        },
        calcTextWidth() {
            return text => text ? text.substring(0, 4) : '';
        },
        inputStyle() {
            let {
                border_color,
                input_radius,
                padding_color,
                list_style,
            } = this.data;
            let style = {
                padding: '0 24rpx',
            }
            if (list_style == 1) {
                Object.assign(style, {
                    borderBottomWidth: '1px',
                    borderBottomStyle: 'solid',
                    borderBottomColor: border_color || padding_color,
                })
            } else {
                Object.assign(style, {
                    border: `1px solid ${border_color || padding_color}`,
                    borderRadius: `${input_radius}rpx`,
                    background: padding_color,
                })
            }
            return style;
        },
        boxStyle() {
            let {
                box_padding,
                border_color,
                padding_color,
            } = this.data;
            return {
                padding: `20rpx ${box_padding}px`,
                border: `1px solid ${border_color || padding_color}`,
            }
        },
    },
    created() {
        this.data = this.value;
    },
    methods: {
        change(e) {
            if (this.data.is_alone == 1) {
                let {year, month, date} = e;
                let fulldate = year + '-' + month + '-' + date;
                Object.assign(this.date, {fulldate})
            } else {
                Object.assign(this.date, e.range)
            }
            this.$emit('updateValue', {
                index: this.index,
                value: Object.assign(this.date, {
                    s: {
                        key: this.data.key,
                        is_alone: this.data.is_alone,
                        has_kuatian: this.data.has_kuatian,
                    }
                }),
            });
        }
    }
}
</script>

<style scoped lang="scss">
._diy-form-label {
    padding-left: #{20rpx};
    font-size: #{30rpx};
    white-space: nowrap;
    margin-bottom: #{18rpx};
}

._diy-form-label.required:after {
    content: '*';
    margin-left: 6#{rpx};
    color: #FF4544;
}

.diy-form-calendar {
    padding-bottom: 20#{rpx};
    .calendar-basic {
        height: 84#{rpx};
    }
    > .c-select {
        font-size: 30#{rpx};
        height: 84#{rpx};
    }
    >view {
        font-size: 30#{rpx};
    }
}
</style>
