<%
  LayoutUtils.addMeta({ property: 'title', content: page.title }); 
%>

<div id="<%= page.name %>-list" class="vue-app">

  <!-- 搜尋欄 -->
  <% include ../partials/inc.search.ejs %>

  <div class="row search-wrapper">

    <div class="card panel">
       
      <!-- 欄位篩選器 -->
      <field-filter
      :columns="source.searchable"
      :filter="source.filter"
      @submit="apiActions"
      ></field-filter>

      <!-- 物件列表 -->
      <div class="list-container">

        <div class="row">

          <!-- 按鈕列 -->
          <div class="col col-md-12">
          <actionbar
          :options="config.headerActions"
          @action="buttonActions"
          ></actionbar>
          </div>

          <!-- 頁數切換 -->
          <div class="col col-md-6">
            <sorter
            :sorter="source.paging"
            @submit="apiActions"
            ></sorter>
          </div>
          
          <!-- 分頁 -->
          <div class="col col-md-6">
            <pagination
            :pagination="source.paging"
            @submit="apiActions"></pagination>
          </div>

          <!-- 資料列表 -->
          <data-table
          ref="table"
          :config="table"
          :items="source.items"
          :sortter="apiActions"
          :paging="source.paging"
          @action="tableActions"
          ></data-table>

          <!-- 頁數切換 -->
          <div class="col col-md-6">
            <sorter
            :sorter="source.paging"
            @submit="apiActions"
            ></sorter>
          </div>

          <!-- 分頁 -->
          <div class="col col-md-6">
            <pagination
            :pagination="source.paging"
            @submit="apiActions"></pagination>
          </div>
          
          <!-- 按鈕列 -->
          <actionbar
          :options="config.footerActions"
          @action="buttonActions"
          ></actionbar>

        </div><!-- row -->
      </div><!-- list-container -->
      
    </div><!-- card panel -->
  </div><!-- search-wrapper -->
  
  <!-- include ejs here -->

  <!-- include ejs here -->

</div><!-- vue-app -->

<% include config/index %>

<script>
  var appFilter = {
  };

  var appBody = {
  };

  var appConfig = {
    headerActions: page.headerActions
      ? page.headerActions
      : defConfig.headerActions,
    footerActions: page.footerActions
      ? page.footerActions
      : defConfig.footerActions,
    // searchable: [
    //   { label: '城市別 City', column: 'city', type: '' },
    // ],
    status: [],
  };

  var appValidatorRule = {
    'edited.title': ['rq'],
    'edited.content': ['rq'],
  };

  var mixin = {
    computed: {
      table: function () {
        return {
          headers: this.source.table.headers,
          columns: this.source.table.columns,
          sn: null,
          selectable: this.page.tableConfig
            ? this.page.tableConfig.selectable
            : true,
          action: {
            title: '<%= __("view.table.action.view") %>',
            className: 'btn gec-btn gec-edit small'
          },
        };
      },
      config: function () {
        var config = {
          searchable: this.source.searchable,
        };
        return Object.assign(config, defConfig, appConfig);
      },
      validator: function () {
        var data = Object.assign({}, this.body);
        var rule = Object.assign({}, appValidatorRule);
        return fn.validator(data, rule);
      },
    },
    watch: {
    },
    methods: {
      buttonActions: function (action, payload) {
        <% include actions/index/button %>
        switch (action) {
          default: break;
        }
      },
      tableActions: function (action, payload) {
        <% include actions/index/table %>
        switch (action) {
          default: break;
        }
      },
      modalActions: function (action, payload) {
        <% include actions/index/modal %>
        switch (action) {
          default: break;
        }
      },
      apiActions: function ({ action, payload, url, tableName }) {
        var config = {
          url: url || null,
          method: 'get',
          body: null,
          funcSuccess: this.apiSuccess,
          funcError: this.apiError,
        };
        <% include actions/index/api %>
        switch (action) {
          default: break;
        }
        return fn.api.fetch(
          config.method,
          config.url ? config.url : fn.api.getQueryUrl({
            tableName: tableName,
            apiPath: this.apiUrl,
            source: this.source,
          }),
          config.funcSuccess,
          config.funcError,
          config.body,
        );
      },
      apiSuccess: function (response) {
        <% include actions/index/apiSuccess %>
      },
      apiError: function (jqXHR, textStatus, errorThrown) {
        <% include actions/index/apiError %>
        return fn.swal.error({
          html: '(' + jqXHR.responseText + ')',
        });
      },
    },
    created() {
      // fn.page.setTitle(this.page.title);
    },
    mounted: function () {
      fn.bindAjaxEvent(null);
      var option = {};
      var hasApiParams = window.location.href.indexOf('?') !== -1;
      if (hasApiParams) {
        try {
          option.url = this.apiUrl + '?' + window.location.href.split('?')[1];
        } catch (e) {}
      }
      fn.log('option=>', option);
      this.apiActions(option);
    },
  };
  
  var app = new Vue({
    el: '#<%= page.name %>-list',
    mixins: [mixin],
    data: {
      page: page,
      source: source,
      apiUrl: apiUrl,
      body: Object.assign(defBody, appBody),
      filter: Object.assign(defFilter, appFilter),
      // config: Object.assign(defConfig, appConfig),
    },
  });
</script>
