<template>
    <v-layout>
        <v-flex xs12>
            <v-card class="mb-2" color="white">
                <v-toolbar color="blue lighten-3" dark height="50px">
                    <v-toolbar-title>TEST MAP</v-toolbar-title>
                    <v-spacer></v-spacer>
                </v-toolbar>
                <v-layout class="ma-2" row style="background:white">
                    <v-flex xs4>
                        <v-text-field hide-details="auto" class="ma-1" label="Kode" placeholder="Cari kode..." outline v-model="xcode" ></v-text-field>
                    </v-flex>
                    <v-flex xs3>
                        <v-text-field hide-details="auto" class="ma-1" label="Nama" placeholder="Ketikkan nama..." outline v-model="xname" ></v-text-field>
                    </v-flex>
                    <v-flex xs3>
                        <v-autocomplete  hide-details="auto" class="ma-1" label="Status" return-object outline item-text="name" item-value="value"
                        v-model="selected_status" :items="statuses"></v-autocomplete>
                    </v-flex>
                    <v-flex xs2>
                        <v-btn @click="searchTest()" style="height: 48px;" class="ma-1" color="primary">Cari</v-btn>
                    </v-flex>
                </v-layout>
                <v-divider></v-divider>
                <v-layout row wrap class="scroll-container" style="max-height:600px;overflow: auto;">
                    <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                        <v-data-table :headers="headers" :items="xfisikdetails" :loading="isLoading" hide-actions class="elevation-1">
                            <template slot="items" slot-scope="props">
                            <td class="text-xs-left pa-2"   @click="selectMe(props.item)" v-html="props.item.Nat_TestCode">
                                </td>
                                <td class="text-xs-left pa-2"  @click="selectMe(props.item)" v-html="props.item.Nat_TestName">
                                </td>
                                <td class="text-xs-left pa-2" @click="selectMe(props.item)">
                                    <div>
                                        <v-btn @click="changeBtnFlag(props.item,'Y')" v-if="props.item.status === 'N'" small color="error">
                                            <v-icon left>close</v-icon> Tidak aktif</v-btn>
                                        <v-btn @click="changeBtnFlag(props.item,'N')" v-if="props.item.status === 'Y'" small color="success">
                                            <v-icon left>check</v-icon> Aktif</v-btn>
                                    </div>
                                </td>
                            </template>
                        </v-data-table>
                    </v-flex>
                </v-layout>
                <v-divider></v-divider>
                <v-pagination style="margin-top:10px;margin-bottom:10px" v-model="curr_page" :length="xtotal_page"></v-pagination>

                

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

        <one-dialog-print :title="printtitle" :width="printwidth" :height="500" :status="openprint" :urlprint="urlprint" @close-dialog-print="closePrint"></one-dialog-print>
        

    </v-layout>
</template>

<style scoped>
    .divider.x_step{
        border-color:#fff;
    }
    .x_form .v-text-field--outline>.v-input__control>.v-input__slot {
        align-items: stretch;
        min-height: 20px!important;
        margin-top:0;
        line-height:25px;
    }

    .x_form .v-text-field--outline.v-text-field--single-line input {
        margin-top: 0px!important;
        font-size:14px;
    }
    table, td, th {  
    /*border: 1px solid #ddd;*/
    text-align: left;
    }

    table {
    border-collapse: collapse;
    width: 100%;
    }

    th, td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 8px;
    padding-right: 5px;
    }

    .mini-input .v-input{
        margin-top: 0px; 
    }

    .mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
        margin-top: 0px; 
        margin-bottom:0px;
        margin-left:3px;
    }
    .mini-input .v-messages{
        min-height:0px;
    }
    input.fhm-input{
        border: 1px solid black; 
        border-radius: 2px;
        -webkit-box-shadow: 
        inset 0 0 2px  rgba(0,0,0,0.1),
                0 0 4px rgba(0,0,0,0.1); 
        -moz-box-shadow: 
        inset 0 0 2px  rgba(0,0,0,0.1),
                0 0 4px rgba(0,0,0,0.1); 
        box-shadow: 
        inset 0 0 2px  rgba(0,0,0,0.1),
                0 0 4px rgba(0,0,0,0.1); 
        padding: 2px 4px;
        background: rgba(255,255,255,0.5);
        margin: 0 0 1px 0;
        width:30px;
        text-align:center;
    }
    th, td {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: left;
    }
    table.tform tr:nth-child(even) {
        background-color: #eee;
    }
    table.tform tr:nth-child(odd) {
        background-color: #fff;
    }
    .thgigi{
        width:50px!important;
        padding:5px!important;
        text-align:center;
    }
    .input_gigi{
        width:100%;
        border:1px solid grey;
        font-size:14px;
        text-align:center;
        line-height: 2;
        text-transform: uppercase;
    }
    .bggrey{
        background:#eee!important;
    }
    .background-black{
        background:black;
        color:#fff;
    }
    .background-teal{
        background:#009688;
        color:#fff;
    }
    .background-red{
        background:#f44336;
        color:#fff;
    }
    .background-brown{
        background:#795548;
        color:#fff;
    }
    .background-yellow-accent-4{
        background:#ffeb3b;
        color:#fff;
    }
    .background-info{
        background:#64b5f6;
        color:#fff;
    }
    .background-purple{
        background:#9C27B0;
        color:#fff;
    }

</style>

<script>
    module.exports = {
        components: {
            'one-date-picker': httpVueLoader('../../common/oneDatePicker.vue'),
            'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
        },
        data() {
            return {
                
                riwayats:[],
                fisiks:[],
                k3s:[],
                xcode: "",
                xname: "",
                query: "",
                items: [],
                openprint: false,
                urlprint: '',
                printtitle: '',
                printwidth: 600,
                formatreport: 'pdf',
                readonlydefault: false,
                page: 1,
                search_user: '',
                search_test: '',
                userRules: [
                    v => !!v || 'GroupResult harus dipilih'
                ],
                testRules: [
                    v => !!v || 'Pemeriksaan harus dipilih'
                ],
                headers: [
                    {
                        text: "KODE",
                        align: "left",
                        sortable: false,
                        value: "name",
                        width: "10%",
                        class: "blue lighten-3 white--text"
                    },
                    {
                        text: "NAMA",
                        align: "left",
                        sortable: false,
                        value: "name",
                        width: "30%",
                        class: "blue lighten-3 white--text"
                    },
                    {
                        text: "STATUS",
                        align: "left",
                        sortable: false,
                        value: "name",
                        width: "10%",
                        class: "blue lighten-3 white--text"
                    }
                ],
                // pagination: {
                //     descending: false,
                //     page: 1,
                //     rowsPerPage: 100,
                //     sortBy: 'Group_ResultReportName ASC',
                //     totalItems: this.$store.state.report.total_transactions
                // },
                color: "success",
                validreport: false,
                xid: 0,
                isinput: "N",
                countprice: 0,
                reportreportid: 0,
                reportxname: "",
                reportlang: "",
                reporttext: "",
                isadvance: "N",
                reportformatadvance: "",
                issenttouser: "N",
                menustartdate: false,
                menuenddate: false,
                date: new Date().toISOString().substr(0, 10),

                dialogdeletealertreport: false,
                dialogverifyalertreport: false,
                dialogreleasealertreport: false,
                alertverify: false,
                dialogunreleasealertreport: false,
                dialogunverifyalertreport: false,
                msgalertreport: "",
                dialog_template:false
            };
        },
        mounted() {},
        computed: {
            selected_status: {
                get() {
                    return this.$store.state.fisikdetail.selected_status
                },
                set(val) {
                    console.log(val)
                    this.$store.commit("fisikdetail/update_selected_status", val)
                    //this.searchTest()
                }
            },
            statuses: {
                get() {
                    return this.$store.state.fisikdetail.statuses
                },
                set(val) {
                    this.$store.commit("fisikdetail/update_statuses", val)
                }
            },
            selected_filter_status: {
                get() {
                    return this.$store.state.report.selected_filter_status
                },
                set(val) {
                    this.$store.commit("report/update_selected_filter_status", val)
                    //this.searchTest()
                }
            },
            f_statuss: {
                get() {
                    return this.$store.state.report.f_statuss
                },
                set(val) {
                    this.$store.commit("report/update_f_statuss", val)
                }
            },
            xfisikdetails() {
                return this.$store.state.fisikdetail.fisikdetails
            },
            xfisik() {
                console.log("cek fisik", this.$store.state.fisik.selected_fisik)
                return this.$store.state.fisik.selected_fisik
            },
            // dialogreport() {
            //     return this.$store.state.report.dialog_form_report
            // },
            xerrors() {
                return this.$store.state.report.errors
            },
            isLoading() {
                return this.$store.state.fisikdetail.lookup_status == 1
            },
            startComputedDateFormatted() {
                return this.formatDate(this.xstartdate)
            },
            xstartdate: {
                get() {
                    return this.$store.state.report.startdate
                },
                set(val) {
                    this.$store.commit("report/update_startdate", val)
                }
            },
            endComputedDateFormatted() {
                return this.formatDate(this.xenddate)
            },
            xenddate: {
                get() {
                    return this.$store.state.report.enddate
                },
                set(val) {
                    this.$store.commit("report/update_enddate", val)
                }
            },
            xautotests() {
                return this.$store.state.report.autotests
            },
            xautotest: {
                get() {
                    return this.$store.state.report.autotest
                },
                set(val) {
                    this.$store.commit("report/update_autotest", val)
                }
            },
            xstatuss() {
                return this.$store.state.report.statuss
            },
            dialogstatusorder() {
                return this.$store.state.report.dialog_status_order
            },
            xautousers() {
                return this.$store.state.report.autousers
            },
            xautouser: {
                get() {
                    return this.$store.state.report.autouser
                },
                set(val) {
                    this.$store.commit("report/update_autouser", val)
                }
            },
            xsearch: {
                get() {
                    return this.$store.state.fisikdetail.x_search
                },
                set(val) {
                    this.$store.commit("fisikdetail/update_x_search", val)
                }
            },
            reportgroup: {
                get() {
                    return this.$store.state.report.reportgroup
                },
                set(val) {
                    this.$store.commit("report/update_reportgroup", val)
                }
            },
            reportcode: {
                get() {
                    return this.$store.state.report.reportcode
                },
                set(val) {
                    this.$store.commit("report/update_reportcode", val)
                }
            },
            reportname: {
                get() {
                    return this.$store.state.report.reportname
                },
                set(val) {
                    this.$store.commit("report/update_reportname", val)
                }
            },
            curr_page: {
                get() {
                    return this.$store.state.fisikdetail.current_page
                },
                set(val) {
                    this.$store.commit("fisikdetail/update_current_page", val)
                    this.$store.dispatch("fisikdetail/lookup", {
                        id: this.$store.state.fisik.selected_fisik.id,
                        code: this.xcode,
                        name: this.xname,
                        current_page: val,
                        lastid: -1
                    })
                }
            },
            xtotal_page: {
                get() {
                    return this.$store.state.fisikdetail.total_data
                },
                set(val) {
                    this.$store.commit("fisikdetail/update_total_data", val)
                }
            },
            value_report: {
                get() {
                    return this.$store.state.report.value_report
                },
                set(val) {
                    this.$store.commit("report/update_value_report", val)
                }
            },
            new_report: {
                get() {
                    return this.$store.state.report.new_report
                },
                set(val) {
                    this.$store.commit("report/update_new_report", val)
                }
            },
            new_reportname: {
                get() {
                    return this.$store.state.report.new_reportname
                },
                set(val) {
                    this.$store.commit("report/update_new_reportname", val)
                }
            },
        },
        methods: {
            getDetailTemplate(item){
                this.riwayats = []
                this.fisiks = []
                this.k3s = []

                var xjson = item.xjson
                xjson.show_all = "Y"
                if(item.FisikTemplateType === 'Riwayat' ){
                    this.riwayats.push(xjson)
                }

                if(item.FisikTemplateType === 'Fisik' ){
                    this.fisiks.push(xjson)
                }

                if(item.FisikTemplateType === 'K3' ){
                    this.k3s.push(xjson)
                }

                this.dialog_template = true
            },
            changeStandartBMI(idx_f){
            var fisiks = this.fisiks
            var value_x = fisiks[idx_f].standart_bmi
            var val_now = value_x 
            if(value_x === 'who'){
                val_now = 'asia_pacific'
            }else if(value_x === 'asia_pacific'){
                val_now = 'kemenkes'
            }else{
                val_now = 'who'
            }
            //var val_now = fisiks[idx_f].standart_bmi === 'who' ? 'asia_pacific':'who'
            fisiks[idx_f].standart_bmi = val_now
           
        },
            changStandartTensi(idx_f,row){
                var fisiks = this.fisiks
                var idx_tensi = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == 'tanda_vital_5'})
                var standart = fisiks[idx_f].details[idx_tensi].standart //=== 'JNC-VII' ? 'JNC-VIII':'JNC-VII'
                if(standart === 'JNC-VII'){
                    standart = 'JNC-VIII'
                    console.log(1)
                }else if(standart === 'JNC-VIII'){
                    standart = 'ESC/ESH'
                    console.log(2)
                }
                else{
                    console.log(3)
                    standart = 'JNC-VII'
                }
                console.log(standart)
                fisiks[idx_f].details[idx_tensi].standart = standart
                
                
            }, 
            getnamelabel(kata){
                //var lang_id = this.$store.state.sample.sellang.id
                //var words = this.$store.state.sample.words
                //var row_word = _.filter(words, function(o) { return o.Translate_WordNat_LangID === lang_id && o.Translate_WordFrom.toLowerCase() === kata.toLowerCase() })

                //console.log(row_word)
                //if(row_word.length > 0)
                    //return row_word[0].Translate_WordTo
               // else
                    return kata
            },
            generate_rows(details){
                //console.log(details)
                var riwayats = details
                var row_riwayats = []
                var rows = []
                riwayats.forEach(function(item,index){
                    rows.push(item)
                    if(index%2 !== 0 || index === riwayats.length - 1 ){
                        row_riwayats.push(rows)
                        rows = []
                    }
                })
                //console.log(row_riwayats)
                return row_riwayats
            },
            changeFlagNormal(idx){
                var riwayats = this.$store.state.sample.riwayats
                var old_val = riwayats[idx].flag_normal
                riwayats[idx].flag_normal = old_val === 'Y'?'N':'Y'
                if(riwayats[idx].flag_normal === 'Y'){
                    riwayats[idx].details.forEach((item) => item.chx = false)
                    riwayats[idx].details.forEach((item) => item.value = '')
                }
                this.$store.commit("sample/update_riwayats",riwayats)
            },
            toggleDetailRiwayat(idx){
                var riwayats = this.$store.state.sample.riwayats
                var old_val = riwayats[idx].show_all
                riwayats[idx].show_all = old_val === 'Y'?'N':'Y'
                this.$store.commit("sample/update_riwayats",riwayats)
            },
            toggleDetailFisik(idx){
                var fisiks = this.$store.state.sample.fisiks
                var old_val = fisiks[idx].show_all
                fisiks[idx].show_all = old_val === 'Y'?'N':'Y'
                this.$store.commit("sample/update_fisiks",fisiks)
            },
            toggleDetailK3(idx){
                var k3s = this.$store.state.sample.k3s
                var old_val = k3s[idx].show_all
                k3s[idx].show_all = old_val === 'Y'?'N':'Y'
                this.$store.commit("sample/update_k3s",k3s)
            },
            isSelected(p) {
                return p.id == this.$store.state.fisikdetail.selected_fisikdetail.id
            },
            selectMe(sc) {
                this.$store.commit("fisikdetail/update_selected_fisikdetail", sc)

            },
            updateDialogFormReport() {
                this.$store.commit("report/update_dialog_form_report", false)
            },
            updateDialogStatusOrder() {
                this.$store.commit("report/update_dialog_status_order", false)
            },
            setStatusOrder(val) {
                this.$store.commit("report/update_reports", {})
                this.$store.commit("report/update_dialog_status_order", true)
                this.$store.commit("report/update_statuss", val.statuss)
            },
            doPriceList(val) {
                console.log(location)
                var id = val.id
                location.replace("/one-ui/user/vuex/one-md-price/" + "?id=" + id)
            },
            doPrice() {
                console.log(location)
                var id = this.xid
                location.replace("/one-ui/user/vuex/one-md-price/" + "?id=" + id)
            },
            thr_search_user: _.debounce(function () {
                this.$store.dispatch("report/searchuser", {
                    tes: this.search_user
                })
            }, 200),
            thr_search_test: _.debounce(function () {
                this.$store.dispatch("report/searchtest", {
                    search: this.search_test
                })
            }, 200),
            thr_search: _.debounce(function () {
                this.$store.dispatch("fisikdetail/lookup", {
                    id: this.$store.state.fisik.selected_fisik.id,
                    code: this.xcode,
                    name: this.xname,
                    status: this.selected_status.value,
                    current_page: 1,
                    lastid: -1
                })
            }, 200),
            searchTest() {
                console.log(this.selected_status.value)
                this.$store.dispatch("fisikdetail/lookup", {
                    id: this.$store.state.fisik.selected_fisik.id,
                    code: this.xcode,
                    name: this.xname,
                    status: this.selected_status.value,
                    current_page: 1,
                    lastid: -1
                })
            },
            doPrint() {
                console.log('doprint')
                this.printwidth = 1028
                this.printtitle = ""
                let report = one_report()
                var id = this.xid
                var d = new Date();
                var n = d.getTime()
                var rptname = 'user_price'
                var formatrpt = this.formatreport

                this.urlprint = "/birt/run?__report=report/one/md/" + rptname +
                    ".rptdesign&__format=" +
                    formatrpt + "&PReportID=" + id + "&reportxname=" + report.Group_ResultReportReportname +
                    "&tm=" + n

                this.openprint = true
            },
            closePrint() {
                this.openprint = false
            },
            changeDetail(value) {
                var details = this.$store.state.report.reports
                var idx = _.findIndex(details, function (o) {
                    return o.Nat_NormalValueID == value.Nat_NormalValueID && o.Nat_ReportUserID ==
                        value.Nat_ReportUserID
                })
                details[idx].Nat_ReportUserReportIna = value.Nat_ReportUserReportIna
                details[idx].Nat_ReportUserReportEng = value.Nat_ReportUserReportEng
                this.$store.commit("report/update_reports", details)
            },
            savedetail() {
                var prm = {
                    details: this.$store.state.report.reports
                }
                this.$store.dispatch("report/saveallreportdetail", prm)
            },
            insertNewReport() {
                var prm = {
                    xid: 0,
                    userid: this.$store.state.user.selected_user.id,
                    reportgroup: this.reportgroup,
                    reportcode: this.new_report,
                    reportname: this.new_reportname,
                    filterstatus: this.selected_filter_status.M_StatusID,
                    current_page: this.curr_page
                }
                this.$store.dispatch("report/save", prm)
                this.new_report = ''
                this.new_reportname = ''
            },
            saveReportNew() {
                var prm = {
                    id: 0,
                    value: this.value_new_report,
                    valueeng: this.new_reportname
                }
                this.$store.dispatch("report/savelistingreport", prm)
            },
            changeBtnFlag(value,status) {
                var prm = {
                    id: this.$store.state.fisik.selected_fisik.id,
                    code: this.xcode,
                    name: this.xname,
                    status: this.selected_status.value,
                    current_page: this.curr_page,
                    lastid: -1,
                    nat_testid: value.Nat_TestID,
                    new_status: status
                }
                
                this.$store.dispatch("fisikdetail/saveaddeditfisikdetail", prm)
            },
            openFormReport(val) {
                this.xid = val
                this.$store.commit("report/update_autotests", [])
                this.$store.commit("report/update_autotest", {})
                this.$store.commit("report/update_dialog_form_report", true)
            },
            editFormReport(val) {
                this.xid = val.id
                this.$store.commit("report/update_autousers", [{
                    Group_ResultID: val.Group_ResultID,
                    Group_ResultName: val.Group_ResultName
                }])
                this.$store.commit("report/update_autouser", {
                    Group_ResultID: val.Group_ResultID,
                    Group_ResultName: val.Group_ResultName
                })

                this.$store.commit("report/update_autotests", [{
                    T_TestID: val.T_TestID,
                    T_TestName: val.T_TestName
                }])
                this.$store.commit("report/update_autotest", {
                    T_TestID: val.T_TestID,
                    T_TestName: val.T_TestName
                })
                this.$store.commit("report/update_dialog_form_report", true)
            },
            checkError(value) {
                var errors = this.$store.state.report.errors
                if (errors.includes(value)) {
                    return true
                } else {
                    return false
                }
            },
            saveFormReport() {
                if (this.$refs.formuserreport.validate()) {
                    this.$store.dispatch("report/save", {
                        xid: this.xid,
                        userid: this.xautouser ? this.$store.state.report.autouser.Group_ResultID :
                            0,
                        username: this.$store.state.report.autouser.Group_ResultName,
                        testid: this.xautotest ? this.$store.state.report.autotest.T_TestID : 0,
                        testname: this.xautotest ? this.$store.state.report.autotest.T_TestName : '',
                        suser: this.$store.state.user.x_search,
                        sreport: this.xsearch
                    })
                }

            },
            set_date2(x) {
                this.startdate = x.new_date
            },
            set_date3(x) {
                this.enddate = x.new_date
            },
            formatDate(date) {
                if (!date) return null

                const [year, month, day] = date.split('-')
                return `${day}-${month}-${year}`
            },
            deFormatedDate(date) {
                if (!date) return null

                const [day, month, year] = date.split('-')
                return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
            },
            updateAlert_success(val) {
                this.$store.commit("user/update_alert_success", val)
            },
            deleteFormReport(data) {
                this.xid = data.id

                this.msgalertreport = "Yakin, mau hapus report ini?"
                this.dialogdeletealertreport = true
            },
            closeDeleteAlertReport() {
                this.$store.dispatch("report/delete", {
                    xid: this.xid,
                    userid: this.$store.state.report.autouser.Group_ResultID,
                    username: this.$store.state.report.autouser.Group_ResultName,
                    testid: this.xautotest ? this.$store.state.report.autotest.T_TestID : 0,
                    testname: this.xautotest ? this.$store.state.report.autotest.T_TestName : '',
                    suser: this.$store.state.user.x_search,
                    sreport: this.xsearch
                })
                this.dialogdeletealertreport = false
            }
        },
        watch: {
            xsearch(val, old) {
                console.log(val)
                this.xsearch = val
                this.thr_search()

            },
            search_user(val, old) {
                if (val == old) return
                if (!val) return
                if (val.length < 1) return
                if (this.$store.state.report.update_autocomplete_status == 1) return
                this.thr_search_user()
            },
            search_test(val, old) {
                if (val == old) return
                if (!val) return
                if (val.length < 1) return
                if (this.$store.state.report.update_autocomplete_status == 1) return
                this.thr_search_test()
            }
        }
    }
</script>