<template>
  <div>
    <modal-table ref="table" :static="true" :setting-enable="false" :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-eye" @click="layoutMode">{{ $t('Front_Btn_Preview_Mode') }}</Button>
        <Button type="primary" v-if="!dataView.isVirtual" ghost custom-icon="fa fa-indent" @click="openColumnSelect">{{ $t('Front_Btn_Select_Column') }}</Button>
        <Button type="primary" custom-icon="fa fa-bookmark" @click="createVirtual">{{ $t('Front_Btn_Virtual_Column') }}</Button>
        <Button type="primary" custom-icon="fa fa-save" v-if="!isSetting" @click="save">{{ $t('Front_Btn_Save') }}</Button>
        <Button type="error" custom-icon="fa fa-save" v-if="isSetting" @click="globalSave">{{ $t('Front_Btn_Global_Save') }}</Button>
        <Button type="error" custom-icon="fa fa-cog" v-if="isSetting" @click="setting">{{ $t('Front_Btn_Form_Setting') }}</Button>
      </template>
    </modal-table>
    <column-select ref="columnSelect" />
    <column-edit ref="columnEdit" view-type="FormView" />
    <modal-form ref="setting" view-code="FormViewSetting" v-if="isSetting">
      <template slot="footer">
        <Button type="primary" custom-icon="fa fa-save" @click="saveSetting">{{ $t('Front_Btn_Save') }}</Button>
      </template>
    </modal-form>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import columnSelect from './column-select';
  import columnEdit from './column-edit';
  import { mapActions } from 'vuex';

  export default {
    mixins: [mixinPage],
    components: { columnSelect, columnEdit },
    data() {
      return {
        active: false,
        dataView: {}
      };
    },
    created() {},
    props: {
      // 是否公共配置界面
      isSetting: {
        type: Boolean,
        default: false
      }
    },
    computed: {},
    methods: {
      ...mapActions('admin/dataView', {
        saveDataView: 'save',
        saveDataViewSetting: 'saveSetting'
      }),
      // 打开
      open(dataView, columns) {
        this.dataView = dataView;
        this.active = true;

        setTimeout(async () => {
          await this.$refs.table.init('FormViewColumn');
          this.$refs.table.loadData(columns);
          this.$refs.table.open();
        });
      },
      // 关闭
      close() {
        this.$refs.table.close();
      },
      // 打开字段设置界面
      edit(row, index) {
        this.$refs.columnEdit.open(row, index, this.$refs.table.data, 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);
      },
      // 打开字段选择界面
      openColumnSelect() {
        let columns = this.$refs.table.data;
        this.$refs.columnSelect.open(this.dataView, columns, checked => {
          // 移除未勾选的
          columns = columns.filter(column => {
            return (
              checked.some(item => {
                return column.code === item.code;
              }) || column.isVirtual
            );
          });

          // 添加新勾选的
          checked.forEach(item => {
            if (
              !columns.some(column => {
                return column.code === item.code;
              })
            ) {
              columns.push({
                code: item.code,
                name: item.name,
                dataType: item.dataType,
                dataView: this.dataView,
                isShow: true,
                controlType: this.getDefaultControlType(item.dataType),
                columnWidth: 'Column6', // 默认宽度1/2
                source: item.objColumn != null ? item.objColumn.dataType : null,
                sourceDataCode: item.objColumn != null ? 'id' : null,
                sourceModel: item.objColumn != null ? item.objColumn.dataType : null,
                sourceDisplayCode:
                  item.objColumn != null &&
                  item.objColumn.columns.some(function (column) {
                    return column.code === item.objColumn.code + '.name';
                  })
                    ? 'name'
                    : null
              });
            }
          });

          setTimeout(() => {
            this.$refs.table.loadData(columns);
          });
        });
      },
      // 创建虚拟字段
      createVirtual() {
        let columns = this.$refs.table.data;

        let row = {
          isShow: true,
          isVirtual: true,
          dataType: 'String',
          dataView: this.dataView
        };

        this.$refs.columnEdit.open(row, -1, this.$refs.table.data, data => {
          columns.push(data);
          this.$refs.table.loadData(columns);
        });
      },
      // 全局保存
      globalSave() {
        this.confirm('Front_Msg_Sure_To_Save_Global_Setting', () => {
          this.confirm('Front_Msg_Sure_To_Save_Global_Setting_Confirm', async () => {
            await this.saveDataView({
              code: this.dataView.code,
              columns: this.$refs.table.data
            });

            this.$emit('on-change', this.dataView.code);
            this.success('Front_Msg_Success', () => {
              this.$refs.table.close();
            });
          });
        });
      },
      // 保存
      save() {
        this.confirm('Front_Msg_Sure_To_Save_Setting', async () => {
          await this.saveDataView({
            code: this.dataView.code,
            columns: this.$refs.table.data
          });

          this.success('Front_Msg_Success', () => {
            this.$refs.table.close();
          });
        });
      },
      // 设置
      setting() {
        this.$refs.setting.open(this.copy(this.dataView));
      },
      // 保存设置
      saveSetting() {
        this.confirm('Front_Msg_Sure_To_Save_Setting', async () => {
          let res = await this.saveDataViewSetting(this.$refs.setting.data);
          this.dataView = res.dataView;

          this.$emit('on-change', this.dataView.code);
          this.success('Front_Msg_Success', () => {
            this.$refs.setting.close();
          });
        });
      },
      // 切换至预览模式
      layoutMode() {
        this.$emit('layout-mode', {
          dataView: this.dataView,
          columns: this.$refs.table.data
        });
      },
      // 获取默认控件类型
      getDefaultControlType(dataType) {
        if (dataType == 'Integer' || dataType == 'BigInteger' || dataType == 'Decimal' || dataType == 'Float' || dataType == 'Double') {
          return 'NumberInput';
        } else if (dataType == 'Boolean') {
          return 'Check';
        } else if (dataType == 'DateTime') {
          return 'Date';
        } else {
          return 'TextInput';
        }
      }
    }
  };
</script>
