<template>
  <el-drawer :model-value="drawerShow" @close="close" title="编辑列表" size="40%">
    <!-- <el-checkbox  label="12" />
        <el-checkbox  label="2" /> -->
    <el-table :data="columnList" style="width: 100%; height: 700px" border ref="tableEl1">
      <el-table-column v-for="column in headtop" :key="column.prop" :prop="column.prop" :label="column.label"
        :width="column.width" flexible>
        <template #header>
          <el-text class="mx-1">{{ column.label }}</el-text>
        </template>
        <template #default="scope">
          <el-text class="mx-1" v-if="column.prop == 'label'">{{ scope.row[column.prop] }}</el-text>
          <el-checkbox-group v-else-if="column.label == '隐藏'" v-model="checkList">
            <el-checkbox :key="scope.row['label']" :label="scope.row['label']" true-label="" false-label=""
              @change="checkboxitem(1)">
              <!-- 用于隐藏文字 -->
              <template #default="scope">
                <!-- {{ scope }} -->
              </template>
            </el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-else-if="column.label == '冻结'" v-model="flexList">
            <el-checkbox :key="scope.row['label']" :label="scope.row['label']" true-label="" false-label=""
              @change="checkboxitem(2)">
              <!-- 用于隐藏文字 -->
              <template #default="scope">
                <!-- {{ scope }} -->
              </template>
            </el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-else-if="column.label == '排序'" v-model="sortlist">
            <el-checkbox :key="scope.row['label']" :label="scope.row['label']" true-label="" false-label=""
              @change="checkboxitem(3)">
              <!-- 用于隐藏文字 -->
              <template #default="scope">
                <!-- {{ scope }} -->
              </template>
            </el-checkbox>
          </el-checkbox-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- </el-checkbox-group> -->
    <div></div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, watchEffect, onMounted, watch, inject, nextTick } from 'vue';
import type { PropType } from 'vue';
const functions = inject('functions') as any;
import Sortable from "sortablejs";
interface TableColumnType {
  /** 表格列的key */
  prop: string;
  /** 表格列的名字 */
  label: string;
  /**
   * 对应列表头的类型
   * 0:直接显示为单选，prop，label，全部传空
   * 1:普通表格，正常显示
   * 2:带输入框表格
   * 3:带下拉框表格
   * 4:带日期选择器列
   * 5:带日期时间选择器
   * 6:操作栏，prop，label，全部传空
   * 7:测试
   */
  type: number | string;
  /** 用于接受表头的值 */
  values: number | string;
  /** 表头宽度 number string undefined */
  width: number | string | undefined;
  /** 下拉框可选项 */
  checkarr?: {
    value: string | number;
    label: string | number;
  }[];
  /** 是否固定表头
   * true false
   * left right
   */
  fixed: boolean | string;
  /** 是否统计
   * true false 或者直接不写该参数
   */
  isshowSummary?: boolean;
  /** 是否排序
   * true false 或者直接不写该参数
   */
  sortable?: boolean;
  /** 是否显示列
   * true false 或者直接不写该参数
   */
  head?: boolean;
}
interface headtoptype {
  prop: string;
  label: string;
  width?: string | number;
}
const checkList = ref<(string | number)[]>([]);
const flexList = ref<(string | number)[]>([]);
const sortlist = ref<(string | number)[]>([]);
const tableEl1 = ref(null);


if (functions.getStorage(window.location.pathname + 'checkList')) {
  checkList.value = functions.getStorage(window.location.pathname + 'checkList');
  console.log(checkList.value);
}
if (functions.getStorage(window.location.pathname + 'flexList')) {
  flexList.value = functions.getStorage(window.location.pathname + 'flexList');
  console.log(flexList.value);
}
if (functions.getStorage(window.location.pathname + 'sortlist')) {
  sortlist.value = functions.getStorage(window.location.pathname + 'sortlist');
  console.log(sortlist.value);
}
let emit = defineEmits(['setcolum', 'closce']);
let props = defineProps({
  columnList: {
    type: Array as PropType<TableColumnType[]>,
    required: true,
  },
  drawerShow: {
    type: Boolean as PropType<boolean>,
    required: true,
  },
});

onMounted(() => {
  nextTick(() => {
    console.log('onMounted')
    initSortable();
  });
})


watch(
  () => props.drawerShow,
  (val) => {
    if (val)
      nextTick(() => {
        initSortable();
        console.log('watch')
      });
  }
);

const initSortable = () => {
  if (tableEl1.value && tableEl1.value.$el) {
    const el1 = tableEl1.value.$el.querySelector('.el-table__body tbody')
    console.log(el1)
    Sortable.create(el1, {
      // handle: '.move-icon',
      animation: 150, // 动画
      onEnd: ({ newIndex, oldIndex }) => {
        console.log(newIndex, oldIndex)
        const arr = props.columnList
        const currRow = arr.splice(oldIndex, 1)[0]
        arr.splice(newIndex, 0, currRow)
        // nextTick(() => {
        //   emit('setcolum', arr, 4);
        // })
      }
    })
  }

}

function close() {
  emit('closce', false);
}
// watch(checkList, post => {
//   console.log(post, '++++++++');
//   props.columnList.map(item => {
//     if (post.length == 0) {
//       item.head = false;
//     }
//     (post as []).map(ite => {
//       // console.log(item.label,ite,'-+-+-+-+-+-+-+-+-+-+-+-+')
//       if (ite == item.label) {
//         item.head = true;
//       } else {
//         item.head = false;
//       }
//     });
//     return item;
//   });
//   emit('setcolum', props.columnList,post);
// });
// watchEffect(() => {
//   console.log(checkList.value);
//   props.columnList.map(item => {
//     if (checkList.value.length == 0) {
//       item.head = false;
//     }
//     (checkList.value as []).map(ite => {
//       // console.log(item.label,ite,'-+-+-+-+-+-+-+-+-+-+-+-+')
//       if (ite == item.label) {
//         item.head = true;
//       } else {
//         item.head = false;
//       }
//     });
//     return item;
//   });
//   emit('setcolum', props.columnList);
// });

// watchEffect(()=>{
//     props.columnList.map(item => {
//         if(item.head){
//             (checkList.value as string[]).push(item.label)
//         }
//   });
// })
function checkboxitem(type: number) {
  if (type == 1) {
    props.columnList.map(item => {
      item.head = false;
    });
    (checkList.value as []).map(ite => {
      props.columnList.map(item => {
        if (ite == item.label) {
          item.head = true;
        }
      });
    });
    emit('setcolum', props.columnList, checkList.value, type);
  } else if (type == 2) {
    props.columnList.map(item => {
      item.fixed = false;
    });
    (flexList.value as []).map(ite => {
      props.columnList.map(item => {
        if (ite == item.label) {
          if (item.type == 6) {
            item.fixed = 'right';
          } else {
            item.fixed = true;
          }
        }
      });
    });
    emit('setcolum', props.columnList, flexList.value, type);
  } else if (type == 3) {
    props.columnList.map(item => {
      item.sortable = false;
    });
    (sortlist.value as []).map(ite => {
      props.columnList.map(item => {
        if (ite == item.label) {
          item.sortable = true;
        }
      });
    });
    emit('setcolum', props.columnList, sortlist.value, type);
  }
}
let headtop = ref<headtoptype[]>([
  {
    prop: 'label',
    label: '列名',
    width: '',
  },
  {
    prop: '',
    label: '隐藏',
    // width:'150'
  },
  {
    prop: '',
    label: '冻结',
    // width:'150'
  },
  {
    prop: '',
    label: '排序',
    // width:'150'
  },
]);

setTimeout(() => {
}, 2000);
</script>
<style lang="scss"></style>
