<template>
  <el-dialog
    title="显示设置"
    :visible.sync="viewSettingVisible"
    width="750px"
    top="12vh"
    :close-on-click-modal="false"
    append-to-body
    custom-class="editable-table-view-setting__dialog"
  >
    <div class="editable-table-view-setting__content">
      <div class="editable-table-view-setting__content-left">
        <div class="editable-table-view-setting__checkbox-wrapper">
          <el-checkbox-group v-model="columnsToBeShown">
            <el-checkbox
              v-for="item in props.columnConfig"
              :key="item.label"
              :label="item.prop"
              :disabled="item.isAlwaysShow"
            >
              <div class="editable-table-view-setting__content-left-item">
                {{ item.label }}
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="editable-table-view-setting__content-right">
        <div class="editable-table-view-setting__content-right-title">
          已选择
          <div class="editable-table-view-setting__selected-count">
            {{ columnsToBeShown.length }}
          </div>
        </div>
        <div class="editable-table-view-setting__content-right-frize">
          冻结前
          <el-input
            class="editable-table-view-setting__content-right-input"
            :value="tempLeftFixedColumnCount"
            @input="handleInputTempLeftFixedColumnCount"
          />
          列
        </div>
        <div class="editable-table-view-setting__content-right-selected">
          <div
            v-for="(item, index) in viewSettingDragSortOptions"
            :key="item.prop"
            class="editable-table-view-setting__selected-item editable-table-view-setting-draggable-item"
          >
            <div class="editable-table-view-setting__selected-item-left">
              <div
                class="editable-table-view-setting-drag-target editable-table-view-setting__icon-wrapper"
                :data-index="index"
              >
                <div
                  class="editable-table-view-setting-drag-target editable-table-drag-icon"
                  :data-index="index"
                />
              </div>
              <div class="editable-table-view-setting__selected-item-name">
                {{ item.label }}
              </div>
            </div>
            <div
              :class="['editable-table-view-setting__selected-item-close', item.isAlwaysShow ? 'editable-table-view-setting__selected-item-close--disabled' : '']"
              @click="handleColumnClose(item)"
            >
              <i class="el-icon-close" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="handleViewSettingClose">
        取消
      </el-button>
      <el-button
        type="primary"
        @click="handleViewSettingConfirm"
      >
        确认
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { toRefs } from 'vue';
import { useViewSetting } from '../bizHooks'
import { IColumnConfig, IProps } from '../types';

const emit = defineEmits<{
  (e: 'update:leftFixedColumnCount', val: number): void
  (e: 'update:showingColumns', val: string[]): void
  (e: 'update:viewSettingDragSortOptions', val: IColumnConfig[]): void
  (e: 'tableDoLayout'): void
}>()

const _props = defineProps<{
  actualColumns: IColumnConfig[]
  viewSettingDragSortOptions: IColumnConfig[]
  showingColumns: string[]
  props: IProps
}>()

const {
  actualColumns,
  showingColumns,
  viewSettingDragSortOptions,
} = toRefs(_props)

const {
  columnsToBeShown,
  viewSettingVisible,
  tempLeftFixedColumnCount,
  handleInputTempLeftFixedColumnCount,
  handleViewSettingShow,
  handleViewSettingClose,
  handleViewSettingConfirm
} = useViewSetting({
  showingColumns,
  actualColumns,
  viewSettingDragSortOptions,
  props: _props.props,
  emit,
});

const handleColumnClose = (item) => {
  if (item.isAlwaysShow) return;
  columnsToBeShown.value = columnsToBeShown.value.filter(c => c !== item.prop);
};

defineExpose({
  open: handleViewSettingShow
})
</script>