<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="FormView"
        :filter="filter"
        :select-enable="allow('export')"
        :create-enable="allow('create')"
        :remove-enable="allow('remove')"
        @create="create"
        @edit="edit"
      >
        <template #filterCommand>
          <Button v-if="allow('export')" size="small" type="info" custom-icon="fa fa-cloud-download-alt" @click="exportFile()">{{ $t('Front_Btn_Export') }}</Button>
          <file-upload v-if="allow('import')" url="api/DataView/importFile" accept=".view" @on-success="importFileSuccess">
            <template #>
              <Button type="primary" custom-icon="fa fa-cloud-upload-alt" size="small">{{ $t('Front_Btn_Import') }}</Button>
            </template>
          </file-upload>
        </template>
        <template #command="{ row }">
          <Button size="small" :title="$t('Front_Btn_Column_Setting')" type="info" custom-icon="fa fa-bars" @click="setting(row)"></Button>
        </template>
      </view-table>
    </Card>
    <modal-form ref="form" view-code="FormViewEdit" :create-enable="allow('create')" :edit-enable="allow('edit')" @on-change="formChange" @on-after-save="$refs.table.loadData()">
      <template #footer>
        <Button type="primary" custom-icon="fa fa-save" @click="() => $refs.form.onSave()">{{ $t('Front_Btn_Save') }}</Button>
        <Button type="primary" v-if="canCopy" custom-icon="fa fa-copy" @click="copy">{{ $t('Front_Btn_Copy') }}</Button>
      </template>
    </modal-form>
    <form-setting ref="setting" @layout-mode="layoutMode" />
    <form-setting-layout ref="settingLayout" @list-mode="listMode" />
  </div>
</template>
<script>
  import dataViewApi from '../../api/dataView';
  import mixinPage from '../../mixins/page';
  import viewColumnApi from '../../api/viewColumn';

  export default {
    name: 'system-ui-formView',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        filter: {
          viewType: 'FormView'
        },
        canCopy: null
      };
    },
    computed: {},
    created() {},
    methods: {
      formChange() {
        const data = this.$refs.form.data;
        const columns = this.$refs.form.columns;

        const columnModel = columns.find(item => {
          return item.code === 'model';
        });

        if (data.isVirtual) {
          columnModel.isShow = false;
        } else {
          columnModel.isShow = true;
        }

        //this.$refs.form.forceUpdate();
      },
      // 字段设置
      async setting(row) {
        let res = await viewColumnApi.queryByDataViewID(row.id);
        this.$refs.settingLayout.open(row, res.data);
      },
      // 切换至列表模式
      listMode({ dataView, columns }) {
        this.$refs.settingLayout.close();
        this.$refs.setting.open(dataView, columns);
      },
      // 切换至预览模式
      layoutMode({ dataView, columns }) {
        this.$refs.setting.close();
        this.$refs.settingLayout.open(dataView, columns);
      },
      // 导出文件
      exportFile() {
        let ids = this.$refs.table.getSelected().map(x => {
          return x.id;
        });
        if (ids.length > 0) {
          dataViewApi.exportFile(ids);
        } else {
          this.error('Front_Msg_Please_Select_Export_Item');
        }
      },
      // 导入成功
      importFileSuccess(res) {
        if (res.code == 0) {
          this.success('Front_Msg_Success', () => {
            this.$refs.table.loadData();
          });
        } else {
          this.error(res.message);
        }
      },
      // 复制
      copy() {
        this.confirmInput(
          'Front_Msg_Sure_To_Copy_Create_View',
          this.$t('Front_Label_View_Code'),
          async () => {
            let dataView = await dataViewApi.copy(this.$refs.form.data.id, this.newCode);
            this.$refs.form.open(dataView);
            this.$refs.table.loadData();
          },
          newCode => {
            if (!(newCode || '').trim()) {
              this.warning('Front_Msg_Please_Input_View_Code');
              return false;
            } else {
              this.newCode = newCode;
              return true;
            }
          }
        );
      },
      // 新建
      create() {
        this.canCopy = false;
        this.$refs.form.openDefault({ viewType: 'FormView' });
      },
      // 编辑
      edit({ row }) {
        this.canCopy = true;
        this.$refs.form.open(row);
      }
    }
  };
</script>
