<template>
    <v-layout>
        <v-flex xs12>
            <v-card class="mb-2" color="white">
                <v-toolbar color="grey lighten-2" dark height="50px">
                    <v-toolbar-title class="black--text">Satuan : {{xunit.name}}</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-btn @click="openFormUnitLang(0)" icon>
                        <v-icon class="black--text">library_add</v-icon>
                    </v-btn>
                </v-toolbar>

                <v-layout row wrap>
                    <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
                        <table>
                            <tr>
                            <th width="25%" class="text-md-center pt-2 pb-2">BAHASA</th>
                                <th width="25%" class="text-md-center pt-2 pb-2">SATUAN</th>
                                <th width="35%" class="text-md-center pt-2 pb-2">KONVERSI</th>
                                <th width="15%" class="text-md-center pt-2 pb-2">SEBAGAI SI</th>
                            </tr>
                            <tr v-if="unitlangs.length > 0 " v-for="(unitlang,idx) in unitlangs">
                            
                            <td class="text-md-left pl-3">{{unitlang.langname}}</td>
                                <td class="text-md-left pl-3">{{unitlang.name}}</td>
                                <td class="text-md-center">{{unitlang.konversi}}</td>
                                <td class="text-md-center">{{unitlang.issi}}</td>
                            </tr>
                            <tr v-if="unitlangs.length === 0">
                                <td align="center" style="height:50px;text-align:center" colspan="8">Belum ada data</td>
                            </tr>
                        </table>
                    </v-flex>
                </v-layout>
                <template>

                    <v-dialog v-model="dialogdeletealertunitlang" max-width="30%">
                        <v-card>
                            <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
                                Peringatan !
                            </v-card-title>
                            <v-card-text class="pt-2 pb-2">
                                <v-layout row>
                                    <v-flex xs12 d-flex>
                                        <v-layout row>
                                            <v-flex pb-1 xs12>
                                                <v-layout row>
                                                    <v-flex pt-2 pr-2 xs12>
                                                        {{msgalertunitlang}}
                                                    </v-flex>
                                                </v-layout>
                                            </v-flex>
                                        </v-layout>
                                    </v-flex>
                                </v-layout>
                            </v-card-text>
                            <v-divider></v-divider>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn flat @click="dialogdeletealertunitlang = false">
                                    Tutup
                                </v-btn>
                                <v-btn flat @click="closeDeleteAlertUnitLang()">
                                    Yakin lah
                                </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>

                </template>

            </v-card>
        </v-flex>



    </v-layout>
</template>

<style scoped>
    .searchbox .v-input.v-text-field .v-input__slot {
        min-height: 60px;
    }

    .searchbox .v-btn {
        min-height: 60px;
    }


    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
        background: white;
        border: 0px;
    }

    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    table>tr>td {
        padding: 8px;
    }

    table>tr>td:first {
        padding-left: 15px !important;
    }
</style>

<script>
    module.exports = {
        components: {
            'one-date-picker': httpVueLoader('../../common/oneDatePicker.vue')
        },
        data() {
            return {
                query: "",
                items: [],
                headers: [{
                        text: "BAHASA",
                        align: "Center",
                        sortable: false,
                        value: "lab",
                        width: "30%",
                        class: "blue lighten-4"
                    },
                    {
                        text: "NAMA",
                        align: "Center",
                        sortable: false,
                        value: "lab",
                        width: "30%",
                        class: "blue lighten-4"
                    },
                    {
                        text: "KONVERSI",
                        align: "Center",
                        sortable: false,
                        value: "name",
                        width: "30%",
                        class: "blue lighten-4"
                    },
                    {
                        text: "SEBAGAI SI",
                        align: "Center",
                        sortable: false,
                        value: "name",
                        width: "30%",
                        class: "blue lighten-4"
                    }
                ],
                isLoading: false,
                color: "success",
                validunitlang: false,
                xid: 0,
                name: "",
                konversi: "",
                issi: "",
                dialogdeletealertunitlang: false,
                msgalertunitlang: ""
            };
        },
        computed: {
            unitlangs() {
                return this.$store.state.unitlang.unitlangs
            },
            xunit() {
                return this.$store.state.unit.selected_unit
            },
            dialogunitlang() {
                return this.$store.state.unitlang.dialog_form_unitlang
            },
            xerrors() {
                return this.$store.state.unitlang.errors
            }
        },
        methods: {
            updateDialogFormUnitLang() {
                this.$store.commit("unitlang/update_dialog_form_unitlang", false)
            },
            openFormUnitLang(val) {
                this.xid = val
                this.name = ''
                this.konversi = ''
                this.issi = ''
                this.$store.commit("unitlang/update_dialog_form_unitlang", true)
            },
            editFormUnitLang(val) {
                //  this.$store.commit("unitlang/update_error_name", false)
                this.xid = val.id
                this.name = val.name
                this.konversi = val.konversi
                this.issi = val.issi === 'N' ? false : true
                this.$store.commit("unitlang/update_dialog_form_unitlang", true)
                this.$store.commit("unitlang/update_startdate", val.M_UnitLangStartDate)
                this.$store.commit("unitlang/update_enddate", val.M_UnitLangEndDate)
            },
            saveFormUnitLang() {
                this.$store.dispatch("unitlang/save", {
                    xid: this.xid,
                    unitid: this.$store.state.unit.selected_unit.id,
                    unitname: this.$store.state.unit.selected_unit.name,
                    name: this.name,
                    konversi: this.konversi,
                    issi: this.issi === true ? "Y" : "N",
                })
            },
            updateAlert_success(val) {
                this.$store.commit("unit/update_alert_success", val)
            },
            deleteUnitLang(data) {
                this.xid = data.id

                this.msgalertunitlang = "Yakin, mau hapus unitlang ?"
                this.dialogdeletealertunitlang = true
            },
            closeDeleteAlertUnitLang() {
                this.$store.dispatch("unitlang/delete", {
                    xid: this.xid,
                    unitid: this.$store.state.unit.selected_unit.id,
                    unitname: this.$store.state.unit.selected_unit.name,
                    name: this.name
                })
                this.dialogdeletealertunitlang = false
            }
        }
    }
</script>