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

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

  <div class="row detail-form">
        
    <div class="card panel">
    
      <div class="row header">

        <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
          <h1 class="page-title txt-color-blueDark"><%= __('view.detail.title') %>
            <span><h2 class="txt-color-grayDark">——{{ page.title }}</h2></span>
          </h1>
        </div>

        <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8 text-right">
          <!-- 按鈕列 -->
          <actionbar
          v-if="!source.isEmpty"
          :class="{ 'disabled': !editable }"
          :disabled="!editable"
          :options="config.headerActions"
          @action="buttonActions"
          ></actionbar>
        </div>

      </div>
            
      <!-- 物件列表 -->
      <div class="form-container">
        
        <!-- 表單 -->  
        <vue-form
          :key="'form-<%= page.name %>'"
          :editable="editable"
          :fields="source._fields"
          :excludes="config.formExclude"
          :labels="config.formLabels"
          :data="body.edited"
          :validator="this.validator"
        ></vue-form>
        <!-- 表單 -->  

        <!-- 表格 -->
        <template v-if="hasAssociation">
          <br>
          <h1><%= __('view.detail.associations') %></h1>
          <div class="col col-md-12 "><hr></div>
        </template>

        <div class="association-container container-fluid"
          v-if="source._associations"
          v-for="item,index in source._associations">

          <template v-if="source[item] && source[item].id">
            <div class="container-fluid">
              <!-- 標題 -->
              <h3>
                <!-- 標題 -->
                {{ item }}
                <!-- 檢視按鈕 -->  
                <a role="button" 
                class="btn gec-btn small pull-right" 
                aria-pressed="true"
                :href="'/admin/#/admin/' + item.toLowerCase() + '/detail/' + source[item].id">
                  <i class="fa fa-external-link" aria-hidden="true"></i><%= __('view.detail.action.view') %>
                </a>
              </h3>
            </div>

            <!-- 表單 -->  
            <div class="row border">
              <vue-form
              class="col col-xs-12"
              :form-name="item"
              :ref="'form-' + page.name"
              :key="'form-'+ page.name"
              :editable="false"
              :labels="config.formLabels"
              :fields="source._fields"
              :data="source[item]"
              :validator="this.validator"
              ></vue-form>  
            </div>
          </template>

          <template v-if="source[item] && source[item].items">
            <br>
            <div class="container-fluid">
              <!-- 標題 -->
              <h3>
                <!-- 標題 -->
                {{ item }}
                <!-- 檢視按鈕 -->  
                <a role="button" 
                class="btn gec-btn small pull-right" 
                aria-pressed="true"
                :href="getTableExternamLink({ target: source[item], name: item })">
                  <i class="fa fa-external-link" aria-hidden="true"></i><%= __('view.detail.action.view-all') %>
                </a>
              </h3>
            </div>            
            <div class="row border">
              
              <div class="col-xs-12 col-md-6"
              v-if="page.tableActions">
                <!-- 按鈕列 -->
                <actionbar
                :options="page.tableActions"
                @action="tableActions"
                ></actionbar>
              </div>

              <!-- 頁數切換 -->
              <div class="col-xs-12 col-md-6">
                <sorter
                :table-name="item"
                :sorter="source[item].paging"
                @submit="apiActions"
                ></sorter>
              </div>
              
              <!-- 分頁 -->
              <div class="col-xs-12 col-md-6">
                <pagination
                :table-name="item"
                :pagination="source[item].paging"
                @submit="apiActions"></pagination>
              </div>

              <!-- 資料列表 -->
              <data-table
                :table-name="item"
                :ref="'table-' + page.name"
                :key="item"
                :items="source[item].items"
                :config="source[item].table"
                :paging="source[item].paging"
                :sortter="apiActions"
                @action="tableActions"
              ></data-table>
            </div>
          </template>
          
        </div><!-- 表格 -->

      </div><!-- form-container -->

      <div class="row">
        <!-- 按鈕列 -->
        <actionbar
        :class="{ 'disabled': !editable }"
        :disabled="!editable"
        :options="config.footerActions"
        @action="buttonActions"
        ></actionbar>
      </div><!-- row -->

    </div><!-- card panel -->
  </div><!-- detail-form -->
</div><!-- vue-app -->

<% include config/detail %>

<script>
  var appFilter = {
  };

  var appBody = {

  };
  var appConfig = {
    password: {
      type: 'passowrd',
      show: false,
    },
    headerActions: [
      { title: '<%= __("view.detail.action.edit") %>', 
        className: 'gec-white-btn btn-edit', 
        key: 'change-mode',
        icon: {
          type: 'material-icons',
          name: 'settings',
        },
      },
    ],
    footerActions: [
      { title: '<%= __("view.detail.action.cancel") %>', 
        className: 'gec-cancel',
        key: 'cancel',
      },
      { title:
        (('<%= page.action %>' !== 'create') ?
          '<%= __("view.detail.action.update") %>' : '<%= __("view.detail.action.add") %>'),
        className:
          ('<%= page.action %>' === 'create' ?
            'gec-update' : 'gec-disable disabled'),
        key:
          ('<%= page.action %>' !== 'create') ? 'update' : 'create',
      },
    ],
    formExclude: [
    ],
    formLabels: [
      { label: 'Email',
        name: 'email',
        order: 0,
      },
    ],
  };

  var appValidatorRule = {
    // 'User.username': ['rq'],
    // 'User.password': ['rq'],
  };

  var mixin = {
    computed: {
      validator: function () {
        var rules = {};
        this.source._fields
        .filter(function (e) {
          return e.required;
        }).forEach(function (e) {
          rules[e.name] = ['rq', e.type];
        });
        fn.log('rules=>', rules)
        var data = Object.assign({}, this.body.edited);
        var rule = Object.assign(appValidatorRule, rules);
        return fn.validator(data, rule);
      },
      hasAssociation: function () {
        return this.source._associations ?
          this.source._associations.some(function (e) {
            return !!source[e];
          }) : false;
      },
    },
    watch: {
      editable: function (val, oldVal) {
        // 依據資料有無切換按鈕文字
        this.config.footerActions[1].className = val ?
          'gec-greenyellow-btn btn-save' : 'gec-disable disabled'
      },
      editMode: function (val, oldVal) {
        switch (val) {
          case 'detail': 
          case 'update': 
            return 'update';
          case 'create':
            return 'create';
        }
      },
    },
    methods: {
      <% include methods/detail %>
      getTableExternamLink: function ({ source, name }) {
        var modelName = name.slice(0, -1);
        fn.log('getTableExternamLink=>', this.page.name + 'Id')
        var query = [{
          key: modelName + '.' + this.page.name + 'Id',
          value: this.page.id,
        }];
        return '/admin/#/admin/'
          + modelName.toLowerCase() 
          + '?fields='
          + encodeURIComponent(JSON.stringify(query)) ;
      },
      tableActions: function (action, payload) {
        <% include actions/detail/table %>
        switch (action) {
          default: break;
        }
      },
      buttonActions: function (action, payload) {
        <% include actions/detail/button %>
        switch (action) {
          default: break;
        }
      },
      apiActions: function ({ action, payload, tableName }) {
        var config = {
          url: null,
          method: 'get',
          // body: Object.assign({}, this.body.edited),
          funcSuccess: this.apiSuccess,
          funcError: this.apiError,
        };
        <% include actions/detail/api %>
        switch (action) {
          default: break;
        }
        return (this.page.isEmpty || this.validator.isValid) ? 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,
        ) : fn.toast.error('請完成必填資料填寫！');
      },
      apiSuccess: function (response, textStatus, jqXHR) {
        <% include actions/detail/apiSuccess %>
      },
      apiError: function (jqXHR, textStatus, errorThrown) {
        <% include actions/detail/apiError %>
        var message = (jqXHR.responseJSON && jqXHR.responseJSON.message) ? jqXHR.responseJSON.message : jqXHR.responseText;
        console.log(message);
        return fn.swal.error({
          html: '(' + message + ')',
        });
      },
    },
    created() {
      // fn.page.setTitle(this.page.title['zh-TW']);
    },
    mounted: function () {
      fn.bindAjaxEvent(null);
      this.apiActions({ action: 'detail' });
    },
  };

  var app = new Vue({
    el: '#<%= page.name %>-detail',
    mixins: [mixin],
    data: {
      editable: '<%= page.action %>' === 'create',
      editMode: '<%= page.action %>',
      page: page,
      source: source,
      apiUrl: apiUrl,
      body: Object.assign(defBody, appBody),
      filter: Object.assign(defFilter, appFilter),
      config: Object.assign(defConfig, appConfig),
    },
  });
</script>