<template>
    <v-layout wrap>
        <v-flex xs12 and-down>
            <v-layout row>
                <v-flex sm12 and-down>
                    <v-card color="#C8DFC3">
                        <v-card-title class="pa-1" style="background:#3F848F" >

                        </v-card-title>
                        <v-card-text class="pt-1">
                            <v-layout row>
                                <v-flex class="text-xs-left" sm6 and-down>
                                    <p class="mb-0 caption mono" style="color:#616161">PASIEN</p>
                                    <p class="mb-1 text--primary"><span class="display-1 font-weight-black">3.500</span> <span class="subtitle-2 font-weight-light">org</span></p>
                                </v-flex>
                                <v-flex class="text-xs-right" sm6 and-down>
                                    <p class="mb-0 caption mono" style="color:#616161">PENJUALAN</p>
                                    <p class="mb-1 text--primary"><span class="display-1 font-weight-black">1.500</span> <span class="subtitle-2 font-weight-light">jt</span></p>
                                </v-flex>
                            </v-layout>
                            <v-divider style="border-color:#0D7F8B"></v-divider>
                            <v-layout mt-2 align-center row>
                                <v-flex sm6 d-flex>
                                    <p class="mb-0">bandung raya</p>
                                </v-flex>
                                <v-flex sm6 class="text-xs-right" d-flex>
                                    <p class="mb-0">april 2020</p>
                                </v-flex>
                            </v-layout>
                        </v-card-text>
                    </v-card>
                </v-flex>
            </v-layout>
            <v-layout row>
                <v-flex sm12 and-down>
                    <v-card color="#C8DFC3">
                        <v-card-title class="pa-1" style="background:#3F848F" >

                        </v-card-title>
                        <v-card-text class="pt-1">
                            <v-layout row>
                                <v-flex class="text-xs-left" sm12 and-down>
                                  <div id="chart">
      <apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
    </div>
                                </v-flex>
                            </v-layout>
                            
                        </v-card-text>
                    </v-card>
                </v-flex>
            </v-layout>
        </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.v-table tbody td,
    table.v-table tbody th {
        height: 40px;
    }

    table.v-table thead tr {
        height: 40px;
    }
</style>
<script>
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
        )
    </script>

    

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<script>

    module.exports = {

        components: {
            'apexchart': VueApexCharts,
            'one-dialog-info': httpVueLoader('../../../common/oneDialogInfo.vue'),
            'one-dialog-alert': httpVueLoader('../../../common/oneDialogAlert.vue')
        },
        mounted() {
            
        },
        methods: {
            reHTMLAddress(xxaddresses){
                var rtn = ''
                if(xxaddresses && xxaddresses !== ''){
                    var peraddress = xxaddresses.split("+")
                    peraddress.forEach(function(entry) {
                        var perpart = entry.split("^")
                        rtn += "<p class='mb-0 font-weight-black' style='font-size:11px'>"+perpart[0].toUpperCase()+"</p>"
                        rtn += "<p class='mb-1 caption mono'>"+perpart[1]+"</p>"
                    })
                }
                
                return rtn
            }
        },
        computed: {
             in_saving: {
                get() {
                    return this.$store.state.sales.in_saving
                },
                set(val) {
                    this.$store.commit("sales/update_in_saving", val)
                }
            }
        },
           data: {
          
          series: [{
            data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
          }],
          chartOptions: {
            chart: {
              type: 'bar',
              height: 350
            },
            plotOptions: {
              bar: {
                horizontal: true,
              }
            },
            dataLabels: {
              enabled: false
            },
            xaxis: {
              categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
                'United States', 'China', 'Germany'
              ],
            }
          },
          
          
        },
    }
</script>