<template>
  <div id="app">
    <router-view />
    <loader />
    <modal-table ref="multiDialogTable" :autoLoad="false" :select-enable="true" :check-cross-page="true" :footer-enable="true">
      <template #footer>
        <Button type="primary" custom-icon="fa fa-save" @click="multiSave">{{ $t('Front_Btn_OK') }}</Button>
        <Button type="default" custom-icon="fa fa-times" @click="$refs.dialogTable.close()">{{ $t('Front_Btn_Close') }}</Button>
      </template>
    </modal-table>
    <modal-table ref="dialogTable" :autoLoad="false" :check-cross-page="true" @on-row-dblclick="dialogTableRowDblclick">
      <template #command="{ row }">
        <Button size="small" type="primary" custom-icon="fa fa-check" @click="dialogCheck(row)">{{ $t('Front_Btn_Select') }}</Button>
      </template>
    </modal-table>
  </div>
</template>
<script>
  import { on, off } from 'view-ui-plus/src/utils/dom';
  import { setMatchMedia } from 'view-ui-plus/src/utils/assist';

  import loader from './components/loader/index.vue';

  import { mapMutations } from 'vuex';

  setMatchMedia();

  export default {
    name: 'app',
    components: { loader },
    data() {
      return {
        dialogCheck: null,
        multiSave: null
      };
    },
    computed: {},
    methods: {
      ...mapMutations('admin/layout', ['setDevice', 'setBodyHeight']),
      handleWindowResize() {
        this.handleMatchMedia();
        this.handleSetBodyHeight();
      },
      handleMatchMedia() {
        const matchMedia = window.matchMedia;

        if (matchMedia('(max-width: 600px)').matches) {
          this.setDevice('Mobile');
        } else if (matchMedia('(max-width: 992px)').matches) {
          this.setDevice('Tablet');
        } else {
          this.setDevice('Desktop');
        }
      },
      handleSetBodyHeight() {
        this.setBodyHeight(document.body.offsetHeight);
      },
      // 打开多选表格
      openMultiDialogTable(param, multiSave) {
        this.multiSave = multiSave;
        this.$refs.multiDialogTable.open(param);
      },
      // 打开单选表格
      openDialogTable(param, dialogCheck) {
        this.dialogCheck = dialogCheck;
        this.$refs.dialogTable.open(param);
      },
      // 双击行选中
      dialogTableRowDblclick(row) {
        this.dialogCheck(row);
      }
    },
    mounted() {
      on(window, 'resize', this.handleWindowResize);
      this.handleMatchMedia();
      this.handleSetBodyHeight();
    },
    beforeUnmount() {
      off(window, 'resize', this.handleWindowResize);
    }
  };
</script>
