<template>
    <div class="date">
        <h4>{{title}}</h4>
        <el-form class="t-form" ref="form" :model="form" label-width="100px">
            <el-row>
                <el-col :span="20">
                    <el-form-item v-for="(item, index) in form" :label="item.label" :key="item.key">
                        <el-select v-model="item.value1" placeholder="" disabled>
                            <el-option v-for="inner in option" :label="inner.text" :value="inner.value"></el-option>
                        </el-select>
                        <el-date-picker
                            v-model="item.value2"
                            type="daterange"
                            :range-separator="toDate"
                            :start-placeholder="startDate"
                            :end-placeholder="endDate"
                            value-format="yyyyMMdd"
                            @change="dateChange(index)">
                        </el-date-picker>
                        <span @click="nowDate(index)">Today</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
export default {
  name: 'date',
  data() {
    return {
        title: this.$t('field.date'),
        btn: this.$t('field.currentDate'),
        startDate: this.$t('field.startDate'),
        endDate: this.$t('field.endDate'),
        toDate: this.$t('field.to'),
        form: [],
        defaultForm: [
            {
                label: this.$t('field.transactionDate'),
                key: 'tradeDate',
                value1: 'BT',
                value2: '',
                isNow: false
            },
            {
                label: this.$t('field.enterDate'),
                key: 'captureTime',
                value1: 'BT',
                value2: '',
                isNow: false
            },
            {
                label: this.$t('field.expirationDate'),
                key: 'maturityDate',
                value1: 'BT',
                value2: '',
                isNow: false
            }
        ],
        option: [
            {
                text: '=',
                value: 'BT'
            },
            {
                text: '!=',
                value: 'NQ'
            },
            {
                text: this.$t('field.contain'),
                value: 'IN'
            },
            {
                text: this.$t('field.notContain'),
                value: 'NOT IN'
            }
        ]
    };
  },
  mounted() {
    this.reset()
  },
  methods: {
    nowDate (index) {
        const date = new Date()
        const yyyy = date.getFullYear()
        const mm = String(date.getMonth() + 1).padStart(2, '0') // 月份需要加1，并且补零
        const dd = String(date.getDate()).padStart(2, '0') // 日需要补零
        const convertedDate = `${yyyy}${mm}${dd}`
        this.form[index].value2 = [convertedDate, convertedDate]
        this.form[index].isNow = true
    },
    dateChange (index) {
        this.form[index].isNow = false
    },
    submit () {
        this.form.forEach(item => {
            if (item.key === 'captureTime' && item.value2.length > 0) { // 录入日期特殊处理
                item.value3 = item.value2.map((c, i)=>{
                    return `${c.substr(0,4)}-${c.substr(4,2)}-${c.substr(6,2)} ${i > 0 ? '23:59:59' : '00:00:00'}`
                })
            }
        });
        return this.form
    },
    reset () {
        this.form = JSON.parse(JSON.stringify(this.defaultForm))
    }
  }
};
</script>

<style lang="scss" scoped>
    .date{
        width: 100%;
        h4{
            padding: 6px 20px;
            margin: 0;
            background-color: var(--select-item-hover-bg);
        }
        .t-form{
            padding: 20px;
            .el-form-item__content{
                .el-select{
                    &:first-child{
                        width: 20%;
                        margin-right: 10px;
                    }
                }
                div{
                    &:nth-of-type(2){
                        flex: 1;
                    }
                }
                span{
                    position: absolute;
                    color: var(--blue-80);
                    right: -70px;
                    cursor: pointer;
                }
            }
        }
    }
</style>
<style lang="scss">
    .date{
        width: 100%;
        .t-form{
            .el-form-item__content{
                display: flex;
                justify-content: space-between;
            }
        }
    }
</style>