<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" view-code="PrintTemplate" @create="$refs.form.open()" @edit="({ row, index }) => $refs.form.open(row)"></view-table>
    </Card>
    <modal-form ref="form" view-code="PrintTemplateEdit" @on-change="formChange" @on-after-save="$refs.table.loadData()" />
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';

  export default {
    name: 'system-printTemplate',
    mixins: [mixinPage],
    components: {},
    data() {
      return {};
    },
    computed: {},
    created() {},
    methods: {
      formChange() {
        const data = this.$refs.form.data;
        const columns = this.$refs.form.columns;
        const pageWidth = columns.find(item => {
          return item.code === 'pageWidth';
        });
        const pageHeight = columns.find(item => {
          return item.code === 'pageHeight';
        });

        if (data.pageName != undefined && data.pageName != 'custom') {
          pageWidth.isShow = false;
          pageHeight.isShow = false;
          data.pageWidth = '';
          data.pageHeight = '';
        } else {
          pageWidth.isShow = true;
          pageHeight.isShow = true;
        }
        this.$refs.form.forceUpdate();
      }
    }
  };
</script>
