<template>
  <div>
    <modal-table ref="table" view-code="TableFilterColumn" :static="true" :footer-enable="true" :draggable="true" :sticky="true" @on-drag-drop="dragDrop" v-if="active">
      <template slot-scope="{ row, index }" slot="command">
        <Button size="small" :title="$t('Front_Btn_Edit')" type="primary" ghost custom-icon="fa fa-edit" @click="edit(row, index)"></Button>
        <Button size="small" :title="$t('Front_Btn_Up')" type="primary" ghost custom-icon="fa fa-chevron-up" @click="up(row, index)"></Button>
        <Button size="small" :title="$t('Front_Btn_Down')" type="primary" ghost custom-icon="fa fa-chevron-down" @click="down(row, index)"></Button>
        <Button size="small" :title="$t('Front_Btn_Remove')" type="primary" ghost custom-icon="fa fa-times" @click="remove(row, index)"></Button>
      </template>
      <template slot="footer">
        <Button type="primary" ghost custom-icon="fa fa-plus" @click="add">{{ $t('Front_Btn_Add') }}</Button>
        <Button type="primary" custom-icon="fa fa-save" @click="save">{{ $t('Front_Btn_Save') }}</Button>
      </template>
    </modal-table>
    <filter-edit ref="filterEdit" :data-view="dataView" />
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import filterEdit from './filter-edit';
  import { mapActions } from 'vuex';

  export default {
    mixins: [mixinPage],
    components: { filterEdit },
    data() {
      return {
        active: false,
        dataView: {}
      };
    },
    created() {},
    props: {},
    computed: {},
    methods: {
      ...mapActions('admin/dataView', {
        resetDataView: 'reset',
        saveDataView: 'save',
        saveUserView: 'saveUserView',
        saveDataViewSetting: 'saveSetting',
        saveFilterColumn: 'saveFilterColumn'
      }),
      // 打开
      open(dataView, columns) {
        this.dataView = dataView;
        this.active = true;

        setTimeout(async () => {
          this.$refs.table.loadData(columns);
          this.$refs.table.open();
        });
      },
      // 新增
      add() {
        this.$refs.filterEdit.open(null, data => {
          let columns = this.$refs.table.data;
          columns.push(data);

          this.$refs.table.loadData(columns);
        });
      },
      // 打开字段设置界面
      edit(row, index) {
        this.$refs.filterEdit.open(row, data => {
          let columns = this.$refs.table.data;
          columns.splice(index, 1, data);

          this.$refs.table.loadData(columns);
        });
      },
      // 上移
      up(row, index) {
        let columns = this.$refs.table.data;
        if (index > 0) {
          columns.splice(index, 1);
          columns.splice(index - 1, 0, row);

          this.$refs.table.loadData(columns);
        }
      },
      // 下移
      down(row, index) {
        let columns = this.$refs.table.data;
        if (index < columns.length - 1) {
          columns.splice(index, 1);
          columns.splice(index + 1, 0, row);

          this.$refs.table.loadData(columns);
        }
      },
      // 拖动完成
      dragDrop({ index1, index2 }) {
        if (index1 != index2) {
          let columns = this.$refs.table.data;
          let row = columns[index1];

          columns.splice(index1, 1);
          columns.splice(index2, 0, row);
        }
      },
      // 移除
      remove(row, index) {
        let columns = this.$refs.table.data;
        columns.splice(index, 1);

        this.$refs.table.loadData(columns);
      },
      // 保存
      save() {
        this.confirm('Front_Msg_Sure_To_Save_Setting', async () => {
          let columns = this.$refs.table.data;
          await this.saveFilterColumn({
            code: this.dataView.code,
            columns
          });

          this.$emit('on-change', this.dataView.code);

          this.success('Front_Msg_Success', () => {
            this.$refs.table.close();
          });
        });
      }
    }
  };
</script>
