<template>
  <div :style="pageStyle">
    <q-card
      v-if="showSearchPanel"
      style="margin-bottom: 15px;"
    >
      <q-resize-observable @resize="onSearchPanelResize"></q-resize-observable>
      <q-card-main>
        <slot name="search-form"></slot>
      </q-card-main>
      <q-card-actions align="center">
        <div class="w3-container">
          <q-btn
            color="primary"
            @click="searchOk"
            :label="$t('sys.search')"
            style="min-width:80px;"
          ></q-btn>
          <q-btn
            color="secondary"
            v-if="showDownloadBtn"
            @click="downloadCsv"
            :label="$t('sys.export')"
            style="min-width:80px;"
          ></q-btn>
          <slot name="search-panel-actions"></slot>
        </div>
      </q-card-actions>
    </q-card>
    <q-modal
      position="top"
      no-backdrop-dismiss
      no-esc-dismiss
      v-model="searchOpened"
    >
      <div style="min-width:300px;min-height:100px;">
        <div class="w3-padding">
          <slot name="search-form"></slot>
        </div>
        <div class="w3-padding w3-center">
          <q-btn
            color="primary"
            @click="searchOk"
            :label="$t('sys.search')"
            style="width:100px;"
          ></q-btn>
          <q-btn
            color="secondary"
            @click="searchCancel"
            :label="$t('sys.cancel')"
            style="width:100px;"
          ></q-btn>
        </div>
      </div>
    </q-modal>
    <div>
      <slot
        name="search-container"
        :search_panel_height="searchPanelHeight"
      ></slot>
    </div>
    <q-page-sticky
      position="top-right"
      :offset="[10, 10]"
    >
      <!-- 預設有一個 search button //-->
      <q-btn
        round
        v-if="showSearchBtn"
        color="primary"
        @click="searchOpened=true"
        icon="search"
      ></q-btn>
      <q-btn
        round
        v-if="showSearchBtn && showDownloadBtn"
        color="primary"
        @click="downloadCsv"
        icon="download"
      ></q-btn>
      <slot name="page-sticky">
      </slot>
    </q-page-sticky>
  </div>
</template>

<script>
module.exports = {
  name: "search-page",
  props: {
    "title": {
      "type": "String",
    },
    "show-search-btn": { // 是否顯示查詢按鈕
      "type": "Boolean",
      "default": false
    },
    "show-search-panel": { // 是否顯示查詢面版
      "type": "Boolean",
      "default": false
    },
    "show-download-btn": { // 是否顯示下載按鈕
      "type": "Boolean",
      "default": false
    },
    "columns": { // 欄位清單
      "type": "Array",
      "default": []
    },
    "data": { // 資料清單
      "type": "Array",
      "default": []
    },
    "page-style": { // 放在頁面 template / div 的 style
      "type": "String",
      "default": "",
    }
  },
  data () {
    return {
      "searchOpened": false,
      "searchPanelHeight": 0
    }
  },
  computed: {
    isDesktop () { // 是否為桌面平台
      return this.$root.VarIsDesktop;
    },
    isMobile () { // 是否為手機平台
      return this.$root.VarIsMobile;
    },
    isTablet () { // 是否為平板平台
      return this.$root.VarIsTablet;
    },
    isMenuOpen () { // 是否開啟選單
      return this.$root.VarIsMenuOpen;
    },
    screenIsVertical () { // 螢幕是否直立
      return this.$root.VarScreenIsVertical;
    },
    layoutScreenHeight () { // 螢幕的高
      return this.$root.VarLayoutScreenHeight;
    },
    layoutContainerHeight () { // 螢幕的寬
      return this.$root.VarLayoutContainerHeight;
    },
  },
  mounted () {
  },
  methods: {
    rowClick (props, evt) {
      this.$emit("row-click", props, evt);
    },
    searchOk (evt) {
      this.$emit("search-ok", evt);
      this.searchOpened = false;
    },
    searchCancel (evt) {
      this.$emit("search-cancel", evt);
      this.searchOpened = false;
    },
    downloadCsv () {
      this.$root.FnReportDownload("csv", this.data, this.columns);
    },
    onSearchPanelResize (props) {
      if (this.showSearchPanel) { // 若不顯示 search panel 則不需要取得它的高度
        this.searchPanelHeight = props.height;
      }
    }
  }
}
</script>

<style scoped>
.q-table-top {
  background-color: #334048;
  color: #fff;
  font-size: 13pt;
}
.q-table-top .q-input-target,
.q-table-top .q-if {
  color: #fff;
  font-size: 13pt;
}
.q-select .q-input-target {
  width: 10px !important;
}
th {
  font-size: 14pt;
  font-weight: bold;
  color: #287dd1;
}
td {
  font-size: 13pt !important;
}
</style>
