<template>
    <div v-bind:class="{'ap-table-date-picker': true,
                        'ap-grid-column-change': isChange(rowData.changeArr),
                        'ap-grid-column-error': showRuleMsg,}">
        <template v-if="opts.datePickerType == 'time'">
            <el-time-picker
                    v-model="rowData[opts.prop]"
                    :value-format="opts.datePickerValueFormat"
                    :default-value="defaultValue"
                    :placeholder="opts.datePickerPlaceholder"
                    :picker-options="{selectableRange: opts.datePickerSelectableRange}"
                    @change="changeEvent(rowData)">
            </el-time-picker>
        </template>
        <template v-else>
            <el-date-picker
                    v-model="rowData[opts.prop]"
                    :type="opts.datePickerType"
                    :value-format="opts.datePickerValueFormat"
                    :format="opts.datePickerFormat"
                    :default-value="defaultValue"
                    :placeholder="opts.datePickerPlaceholder"
                    @change="changeEvent(rowData)">
            </el-date-picker>
        </template>

        <!-- rule校验 -->
        <div v-html="ruleMsg" v-show="showRuleMsg" class="ap-grid-column-error-msg"></div>
    </div>
</template>

<script>
    import {handleDefaultParams} from 'ap-util/util/ObjectUtil'
    import ApTableColBase from './ApTableColBase'

    export default {
        name: "ApTableColBase",
        extends: ApTableColBase,
        data() {
            return {
                defaultValue: this.getDefaultValue(),
                opts: {},
            }
        },
        created() {
            // 初始化组件前修改默认参数
            this.opts = handleDefaultParams(this.colOptions, {
                placeholder: "请选择日期",
                datePickerValueFormat: "timestamp"
            });

        },
        methods: {
            getDefaultValue() {
                let defaultValue = this.colOptions.datePickerDefaultValue;
                if (!defaultValue) {
                    return;
                }
                let isFunction = typeof defaultValue === 'function';
                var datePickerType = this.colOptions.datePickerType;
                let arr = [];
                // 默认值转为：可被new Date()解析
                let date = new Date();
                if (datePickerType == "time") {
                    // 时间格式->【11:12:13】
                    arr = isFunction ? defaultValue().split(";") : defaultValue.split(";");
                    if (arr.length == 3) {
                        date.setHours(parseInt(arr[0]));
                        date.setMinutes(parseInt(arr[1]));
                        date.setSeconds(parseInt(arr[2]));
                    }
                } else if (datePickerType == "datetime") {
                    // 日期时间格式->【2020-11-11 11:12:13】
                    let tempArr  = isFunction ? defaultValue().split(" ") : defaultValue.split(" ");
                    let dateArr = tempArr[0].split("-");
                    let timeArr = tempArr[1].split(":");
                    if (dateArr.length == 3 && timeArr.length == 3) {
                        date.setFullYear(parseInt(dateArr[0]));
                        date.setMonth(parseInt(dateArr[1]) - 1);
                        date.setDate(parseInt(dateArr[2]));
                        date.setHours(parseInt(timeArr[0]));
                        date.setMinutes(parseInt(timeArr[1]));
                        date.setSeconds(parseInt(timeArr[2]));
                    }
                } else {
                    // 日期格式->【2020-11-11】
                    arr = isFunction ? defaultValue().split("-") : defaultValue.split("-");
                    if (arr.length == 3) {
                        date.setFullYear(parseInt(arr[0]));
                        date.setMonth(parseInt(arr[1]) - 1);
                        date.setDate(parseInt(arr[2]));
                    }
                }

                return date.getTime();
            }
        }
    }
</script>

<style scoped>
    .ap-table-date-picker /deep/ .el-input {
        width: 100%;
    }

    .ap-grid-column-error /deep/ .el-input__inner {
        border: 1px solid red;
    }
</style>
