<template>
     <div>
        <v-layout row v-if="xtype == 'reguler'">
            <v-flex pb-1 xs12>
                <v-layout row>
                    <v-flex pl-3 pt-2  xs1>
                        <v-checkbox
                            v-model="xcbx"
                            hide-details 
                        ></v-checkbox>
                    </v-flex>
                    <v-flex pt-2  xs8 >
                        <v-text-field
                            :label="xlabel"
                            :disabled="xdisabled"
                            :error="xerror"
                            :error-messages="xerror ? xerrormessages : ''"
                            :error_count="xerror ? xerrorcount : 0 "
                            :hide-details=!xerror
                            placeholder="Alasan"
                            outline
                            v-model="xtxt"
                        ></v-text-field>
                    </v-flex>
                </v-layout>
            </v-flex>
        </v-layout>
   
        <v-layout v-else-if="xtype == 'indigo'">
            <v-flex pb-1 xs12>
                <v-layout row>
                    <v-flex pl-3 pt-2  xs1 class="indigo lighten-5">
                        <v-checkbox
                            v-model="xcbx"
                            hide-details 
                        ></v-checkbox>
                    </v-flex>
                    <v-flex pt-2 pb-2 xs8 class="indigo lighten-5">
                        <v-text-field
                            :label="xlabel"
                            :disabled="xdisabled"
                            :error="xerror"
                            :error-messages="xerror ? xerrormessages : ''"
                            :error_count="xerror ? xerrorcount : 0 "
                            :hide-details=!xerror
                            placeholder="Alasan"
                            outline
                            v-model="xtxt"
                        ></v-text-field>
                    </v-flex>
                    <v-flex class="indigo lighten-5" pt-3  xs3>
                        <v-layout align-center justify-center row>
                                    <v-icon large @click="deleteData()" color="red">delete</v-icon>
                                
                        </v-layout>
                    </v-flex>
                </v-layout>
            </v-flex>
        </v-layout>
        </div>
</template>

<script>
module.exports = {
    props : ['xdatalabel','xdatacbx','xdatatxt','xdatatype'],
    computed :{
        xtype : function(type) {
            return this.xdatatype 
        },
        xcbx: {
            get() {
                return this.xdatacbx
            },
            set(val) {
                if(val == true && this.xdatatxt !== "")
                    this.$emit('update-data-txt', "")
                this.$emit('update-data-cbx', val)
            }
        },
        xtxt: {
            get() {
                return this.xdatatxt
            },
            set(val) {
                this.$emit('update-data-txt', val)
            }
        },
        xlabel(){
            if (this.xdatalabel)
                return this.xdatalabel;

            return "";
        },
        xdisabled () {
            if (this.xcbx === "true" || this.xcbx === true)
                return true;
            return false;

        },
        xerror () {
             if ((this.xcbx === "false" || this.xcbx === false) && this.xtxt.length < 1)
                return true;
            else {
                return false;
            }
        },
        xerrormessages () {
            if (this.xerror)
                return ["Alasan harus diisi !"];

            return [];
        },
        xerrorcount () {
            if (this.xerror)
                return 1;

            return 0;
        }
    },
    methods: {
        deleteData() {
            this.$emit('update-data-delete', true)
        }
    }
}
</script>
