<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <view-table
        ref="table"
        v-if="page"
        :create-enable="allow('create')"
        :remove-enable="allow('remove')"
        @create="$refs.form.open()"
        @edit="({ row, index }) => $refs.form.open(row)"
        @show="({ row, index }) => $refs.showForm.open(row)"
      >
        <template #command="{ row }">
          <Button
            v-for="item in page.controls"
            :key="item.id"
            size="small"
            :title="item.name"
            :type="item.colorType.toLowerCase()"
            :custom-icon="item.icon"
            @click="controlClick(row, item.targetCode, item.param)"
          ></Button>
        </template>
      </view-table>
    </Card>
    <modal-form ref="form" :create-enable="allow('create')" :edit-enable="allow('edit')" v-if="page" @on-after-save="$refs.table.loadData()" />
    <modal-form ref="showForm" v-if="page" :readonly="page.showViewCode == null" :save-enable="false" />
    <template v-if="inited">
      <modal-table
        v-for="table in tables"
        :key="table.id"
        :ref="table.code"
        :view-code="table.dataView.code"
        @create="param => create(param, table.targetCode)"
        @edit="({ row, index }) => edit(row, table.targetCode)"
      >
        <template command="{ row }">
          <Button
            v-for="item in table.controls"
            :key="item.id"
            size="small"
            :title="item.name"
            :type="item.colorType.toLowerCase()"
            :custom-icon="item.icon"
            @click="controlClick(row, item.targetCode, item.param)"
          ></Button>
        </template>
      </modal-table>
    </template>
    <template v-if="inited">
      <modal-form v-for="form in forms" :key="form.id" :ref="form.code" :view-code="form.dataView.code" @on-after-save="aftersave(form.targetCode)" />
    </template>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import { mapActions } from 'vuex';

  export default {
    name: 'template-viewPage',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        inited: false,
        page: {},
        tables: [],
        forms: []
      };
    },
    computed: {},
    mounted() {
      this.init(this.$route.meta.data.id);
    },
    // watch: {
    //   $route() {
    //     if (this.$route.meta.data.id) {
    //       //this.init(this.$route.meta.data.id);
    //     }
    //   }
    // },
    methods: {
      ...mapActions('admin/viewPage', { loadPage: 'load' }),
      // 初始化
      async init(pageID) {
        let res = await this.loadPage(pageID);
        this.page = res.customPage;

        setTimeout(() => {
          this.$refs.table.init(this.page.tableViewCode, () => {
            if (!this.$refs.table.tableView.autoLoadDisable) {
              this.$refs.table.loadData();
            }
          });

          if (!!(this.page.formViewCode || '').trim()) {
            this.$refs.form.init(this.page.formViewCode);
          }

          if (!!(this.page.showViewCode || '').trim()) {
            this.$refs.showForm.init(this.page.showViewCode);
          } else if (!!(this.page.formViewCode || '').trim()) {
            this.$refs.showForm.init(this.page.formViewCode);
          }

          this.page.controls = res.customPageControls.filter(item => {
            return item.customPageComponentID == null;
          });
          this.tables = res.customPageComponents.filter(item => {
            return item.componentType === 'Table';
          });

          this.tables.forEach(component => {
            component.controls = res.customPageControls.filter(item => {
              return item.customPageComponentID === component.id;
            });
          });
          this.forms = res.customPageComponents.filter(item => {
            return item.componentType === 'Form';
          });
        });
      },
      // 点击按钮
      controlClick(data, targetCode, param) {
        let model = null;
        if (param) {
          model = JSON.parse(param);
          for (let key in model) {
            model[key] = data[model[key]];
          }
        }

        this.$refs[targetCode][0].open(model);
      },
      // 点击新增
      create(param, targetCode) {
        this.$refs[targetCode][0].openDefault(param);
      },
      // 点击修改
      edit(data, targetCode) {
        this.$refs[targetCode][0].open(data);
      },
      // 新增、修改完成后事件
      aftersave(targetCode) {
        this.$refs[targetCode][0].loadData();
      }
    }
  };
</script>
