<!-- --------------------------------------------------------------------
                            Add task Modal
-------------------------------------------------------------------- -->
<template>
    <v-dialog v-model="$store.state.TaskAdd" width="60%" transition="slide-x-transition">
        <v-card class="RTL">
            <v-card-title class=" grey lighten-3" primary-title>
                <WM-PartTitle class="WM-Margin-T-20" TitleFa=" تعریف وظیفه " TitleEn=" Define a Task  " Color="purple"></WM-PartTitle>
            </v-card-title>

            <v-card-text>
                <!-- -------------------------------------------------------------
                                        Task Details
                ------------------------------------------------------------- -->
                <v-layout row wrap class="WM-Section" style="border-right-color: #ac3773;">
                    <v-flex lg3>
                        <v-card-text class="hasConfig">
                            <v-autocomplete prepend-icon="fas fa-align-right" :items="taskTypes" color="purple" item-text="name" label=" نوع وظیفه "></v-autocomplete>
                            <v-tooltip bottom color="black">
                                <v-btn class="XS" @click.native="$store.state.ConfigTrasnactionTypeList = true" slot="activator" outline fab color="black" dark>
                                    <v-icon dark>fas fa-pencil-alt</v-icon>
                                </v-btn>
                                <span> ویرایش دسته ها </span>
                            </v-tooltip>
                        </v-card-text>
                    </v-flex>
                    <v-flex lg3>
                        <v-card-text>
                            <v-autocomplete prepend-icon="fas fa-user" :items="taskables" color="purple" item-text="name" label=" مسئول وظیفه "></v-autocomplete>
                        </v-card-text>
                    </v-flex>
                    <v-flex xs12 sm4 md3>
                        <v-card-text>
                            <v-menu :close-on-content-click="false" v-model="taskDateBegin" :nudge-right="40" lazy transition="slide-y-transition" offset-y full-width min-width="290px">
                                <v-text-field slot="activator" v-model="date" label=" تاریخ شروع وظیفه " prepend-icon="fas fa-calendar-alt" color="purple" readonly></v-text-field>
                                <v-date-picker v-model="date" @input="taskDateBegin = false" color="purple" locale="fa-ir"></v-date-picker>
                            </v-menu>
                        </v-card-text>
                    </v-flex>
                    <v-flex xs12 sm4 md3>
                        <v-card-text>
                            <v-menu :close-on-content-click="false" v-model="taskDateEnd" :nudge-right="40" lazy transition="slide-y-transition" offset-y full-width min-width="290px">
                                <v-text-field slot="activator" v-model="date" label=" تاریخ اتمام وظیفه " prepend-icon="fas fa-calendar-alt" color="purple" readonly></v-text-field>
                                <v-date-picker v-model="date" @input="taskDateEnd = false" color="purple" locale="fa-ir"></v-date-picker>
                            </v-menu>
                        </v-card-text>
                    </v-flex>
                    <v-flex md12>
                        <v-card-text class="WM-JustSide">
                            <v-textarea name="input-7-1" label=" جزئیات وظیفه " value="" hint="حداکثر 2500 کاراکتر " color="purple" prepend-icon="fas fa-quote-right"></v-textarea>
                        </v-card-text>
                    </v-flex>
                </v-layout>
                <!-- -------------------------------------------------------------
                                        Remind Me
                ------------------------------------------------------------- -->
                <v-layout row wrap class="WM-Section" style="border-right-color: #b07593;">
                    <v-flex xs12 sm4 md2>
                        <v-card-text class="WM-Padd-T-40">
                            <WM-Checkbox ItemText=" یادآوری کن " ItemID="Remind"></WM-Checkbox>
                        </v-card-text>
                    </v-flex>
                    <v-flex xs12 sm4 md2>
                        <v-card-text>
                            <v-menu :close-on-content-click="false" v-model="taskRemindDate" :nudge-right="40" lazy transition="slide-y-transition" offset-y full-width min-width="290px">
                                <v-text-field slot="activator" v-model="date" label="  در تاریخ " prepend-icon="fas fa-calendar-alt" color="purple" readonly></v-text-field>
                                <v-date-picker v-model="date" @input="taskRemindDate = false" color="purple" locale="fa-ir"></v-date-picker>
                            </v-menu>
                        </v-card-text>
                    </v-flex>
                    <v-flex xs12 sm4 md2>
                        <v-card-text>
                            <v-menu ref="selfTimeMenu" v-model="taskRemindTime" :close-on-content-click="false" :nudge-right="40" :return-value.sync="taskTime" lazy transition="slide-y-transition" offset-y full-width max-width="290px" min-width="290px">
                                <template v-slot:activator="{ on }">
                                    <v-text-field v-model="taskTime" label="در ساعت" prepend-icon="fas fa-clock" class="text-lg-center" readonly color="purple" v-on="on"></v-text-field>
                                </template>
                                <v-time-picker class="LTR" v-if="taskRemindTime" v-model="taskTime" color="purple" full-width  @click:minute="$refs.taskRemindTime.save(selfTime)" locale="fa-ir"></v-time-picker>
                            </v-menu>
                        </v-card-text>
                    </v-flex>
                    <v-flex xs12 sm6>
                        <v-card-text style="padding-top:6px;">
                            <v-select v-model="taskRemindValues" :items="taskRemindMethods"  color="purple" attach chips label=" روش های اطلاع رسانی " multiple></v-select>
                        </v-card-text>
                    </v-flex>
                </v-layout>

            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="purple" depressed dark @click="$store.state.TaskAdd = false">
                    <v-icon dark right>fas fa-plus</v-icon> ثبت وظیفه
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>

</template>

<script>

export default {
    props: {
        Color:     { default: 'grey darken-4' },
    },
    data () {
        return {
            date: new Date().toISOString().substr(0, 10),
            date2: new Date().toISOString().substr(0, 10),
            taskDateBegin: false,
            taskDateEnd: false,
            taskRemindDate: false,
            taskTypes: [
                { name: ' ویزیت دکتر ', id: 1 },
                { name: ' عمل جراحی ', id: 2 },
                { name: ' خرید ', id: 2 },
            ],
            taskables: [
                { name: ' علیرضا حسنی ', id: 1 },
                { name: ' فرید ساروی ', id: 2 },
                { name: ' سعید خاکبازان ', id: 3 },
            ],
            taskTime: '12:00',
            taskRemindTime: false,
            taskRemindMethods: [' پیام کوتاه ', ' ایمیل '],
            taskRemindValues: [' پیام کوتاه ', ' ایمیل '],
        }
    }

};
</script>
