<template>
  <div class="hct-setting">
    <el-dialog v-model="showVisible" :title="title" center top="100px" width="814px" :lock-scroll="true"
      :close-on-click-modal="false">
      <section class="section-drag">
        <div class="hct-setting-list">
          <div class="hct-setting-title">
            <span> {{ showType == 0 ? "排序列" : "固定列" }} </span>
            <!-- <el-input v-model="fixedValue" @change="screenChange($event, false)">
              <template #suffix>
                <i class="iconfont icon-hctsousuo" />
              </template>
            </el-input> -->
          </div>
          <VueDraggableNext class="hct-setting-list-group" :style="[
            fixedList.length > 7 ? 'padding-right:12px' : 'padding-right:0',
          ]" :list="fixedList" group="people">
            <transition-group type="transition" name="flip-list">
              <div v-for="item in fixedList" :key="item.id" class="hct-setting-list-group-item">
                {{ item.showName }}
                <i v-if="showType == 1" :class="[
                  'iconfont',
                  item.isShow ? 'icon-hctxianshi' : 'icon-hctyincang',
                ]" @click="item.isShow = !item.isShow" />
                <i v-else :class="[
                  'iconfont',
                  item.isShow ? 'icon-hctshengxu' : 'icon-hctjiangxu1',
                ]" @click="item.isShow = !item.isShow" />
              </div>
            </transition-group>
          </VueDraggableNext>
        </div>
        <div class="hct-setting-list">
          <div class="hct-setting-title">
            <span> {{ showType == 0 ? "全部列" : "移动列" }} </span>
            <!-- <el-input v-model="moveValue" @change="screenChange($event, true)">
              <template #suffix>
                <i class="iconfont icon-hctsousuo" />
              </template>
            </el-input> -->
          </div>
          <VueDraggableNext class="hct-setting-list-group" :style="[
            moveList.length > 7 ? 'padding-right:12px' : 'padding-right:0',
          ]" :list="moveList" group="people" @change="onChangeShow">
            <transition-group type="transition" name="flip-list">
              <div v-for="item in moveList" :key="item.id" class="hct-setting-list-group-item">
                {{ item.showName }}
                <i v-if="showType == 1" :class="[
                  'iconfont',
                  item.isShow ? 'icon-hctxianshi' : 'icon-hctyincang',
                ]" @click="item.isShow = !item.isShow" />
                <i v-else :class="[
                  'iconfont',
                  item.isShow ? 'icon-hctshengxu' : 'icon-hctjiangxu1',
                ]" @click="item.isShow = !item.isShow" />
              </div>
            </transition-group>
          </VueDraggableNext>
        </div>
      </section>
      <section class="hct-setting-buttons">
        <el-button size="large" @click="cancel">
          取消
        </el-button>
        <el-button size="large" type="primary" @click="onSave">
          保存
        </el-button>
      </section>
    </el-dialog>
  </div>
</template>

<script setup>
import { VueDraggableNext } from "vue-draggable-next";
import { ref, watch, defineEmits, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
let props = defineProps({
  moveList: Array,
  fixedList: Array,
  showVisible: Boolean,
});
let showType = ref(0); // 全局设置 // 筛选或者排列
let title = ref("全局设置"); // 全局设置 排序列 / 全部
let emit = defineEmits([
  "onSave",
  "cancel",
  "update:moveList",
  "update:fixedList",
]);
let moveList = ref([]);// 右边数据 ,用于取消还原更改数据
let fixedList = ref([]); // 左边数据
let fixedValue = ref(""); // 固定列搜索
let moveValue = ref(""); // 移动列搜索
let moveListScreen = ref([]); // 右边搜索使用数据
let fixedListScreen = ref([]); // 左边搜索使用数据
let showVisible = ref(props.showVisible); // 是否展示设置

// 保存
const onSave = () => {
  showVisible.value = false;
  emit("update:moveList", moveList.value);
  emit("update:fixedList", fixedList.value);
  emit("onSave");
};

// 取消
const cancel = () => {
  showVisible.value = false;
  moveList.value = [...props.moveList];
  fixedList.value = [...props.fixedList];
  emit("cancel", props.moveList);
};

// 搜索
const screenChange = (val, i) => {
  console.log(val, i);
  if (val) {
    if (i) {
      moveList.value = moveListScreen.value.filter((item) => {
        return item.showName.toLowerCase().includes(val.toLowerCase())
      })
    } else {
      fixedList.value = fixedListScreen.value.filter((item) => {
        return item.showName.toLowerCase().includes(val.toLowerCase())
      })
    }
  } else {
    if (i) {
      moveList.value = [...JSON.parse(JSON.stringify(moveListScreen.value))];
    } else {
      fixedList.value = [...JSON.parse(JSON.stringify(fixedListScreen.value))];
    }
  }

}

// 数组去重
const arrayUnique = (arr, name) => {
	let hash = {}
	return arr.reduce( (acc, cru, index) => {
		if ( !hash[cru[name]] ) {
			hash[cru[name]] = {index:acc.length} 
			acc.push(cru)
		}else{
			acc.splice( hash[cru[name]]['index'], 1, cru)
		}
		return acc;
	}, [])
}

// 改变
const onChangeShow = (item) => {
  console.log(item);
  if (!showType.value) {
    if (item.moved) {
      // item.moved.element.indexs = (item.moved.newIndex+1)
      return;
    }
    if (item.removed) {
      item.removed.element.isOrder = true;
    } else {
      item.added.element.isOrder = false;
    }
  } else {
    if (item.moved) {
      // item.moved.element.indexs = (item.moved.newIndex+1)
      return;
    }
    if (item.removed) {
      item.removed.element.isFixed = true;
    } else {
      item.added.element.isFixed = false;
    }
  }
  // if(fixedValue.value==''&&moveValue.value=='') {
  //   moveListScreen.value = [...JSON.parse(JSON.stringify(moveList.value))];
  //   fixedListScreen.value = [...JSON.parse(JSON.stringify(fixedList.value))];
  // } else {
  //   fixedValue.value = ''
  //   moveValue.value = ''
  //   let k = 0;
  //   let listMove = [];
  //   let listFixed = [];
  //   if(item.removed) {
  //     // 移动列 移动到 固定列
  //     // fixedListScreen.value.push(item.element)
  //     k = moveListScreen.value.findIndex(el=>{return el.fieldName==item.removed.element.fieldName})
  //     console.log(k,moveListScreen.value);
  //     moveListScreen.value.splice(k,1)
  //     moveList.value = JSON.parse(JSON.stringify(moveListScreen.value));
  //     listFixed = [...fixedListScreen.value,...fixedList.value]
  //     fixedList.value = [...JSON.parse(JSON.stringify(arrayUnique(listFixed,'fieldName')))];
  //     fixedListScreen.value = [...JSON.parse(JSON.stringify(arrayUnique(listFixed,'fieldName')))];
  //   } else {
  //     // 固定列 移动到 移动列
  //     k = fixedListScreen.value.findIndex(el=>{return el.fieldName==item.added.element.fieldName})
  //     fixedListScreen.value.splice(k,1)
  //     fixedList.value = JSON.parse(JSON.stringify(fixedListScreen.value));
  //     listMove = [...moveList.value,...moveListScreen.value]
  //     moveList.value = [...JSON.parse(JSON.stringify(arrayUnique(listMove,'fieldName')))];
  //     moveListScreen.value = [...JSON.parse(JSON.stringify(arrayUnique(listMove,'fieldName')))];
  //   }
  // }
  
};
watch(
  () => [showType.value, showVisible.value],
  ([newVal, newVisible], [oldVal, oldVisible]) => {
    if (newVal == 0) {
      title.value = "全局设置";
    } else {
      title.value = "布局设置";
    }
    // console.log(newVal, newVisible,oldVal, oldVisible);
    if (newVisible) {
      moveList.value = [...JSON.parse(JSON.stringify(props.moveList))];
      moveListScreen.value = [...JSON.parse(JSON.stringify(props.moveList))];
      fixedList.value = [...JSON.parse(JSON.stringify(props.fixedList))];
      fixedListScreen.value = [...JSON.parse(JSON.stringify(props.fixedList))];
    }
  },
  { deep: true }
);
defineExpose({
  showVisible,
  fixedValue,
  moveValue,
  showType,
});
</script>

<script>
export default {
  name: "HctSetting",
};
</script>
<style scoped lang='scss'>
.hct-setting {
  :deep(.el-dialog__header) {
    background-color: #3b4966;
    margin-right: 0;
  }

  :deep(.el-dialog__header) {
    border-radius: 8px 8px 0 0;
  }

  :deep(.el-dialog) {
    border-radius: 8px;
  }

  :deep(.el-dialog__title) {
    color: #fff;
  }

  :deep(.el-dialog__close) {
    color: #fff;
    font-size: 20px;
  }

  :deep(.el-dialog__headerbtn) {
    top: 0;
    font-weight: 600;
  }

  .section-drag {
    display: flex;
    padding-left: 5px;
    justify-content: space-between;
    margin-bottom: 15px;

    .hct-setting-list {
      flex-shrink: 0;
      width: 367px;
      position: relative;

      .hct-setting-title {
        color: #333;
        font-weight: 600;
        display: flex;
        align-items: center;
        height: 40px;
        font-size: 16px;
        padding-left: 20px;
        border-bottom: 1px solid #dfdfdf;
        justify-content: space-between;
        position: relative;

        :deep(.el-input) {
          width: 129px;
          height: 30px;
          background: #ffffff;
        }

        :deep(.el-input__wrapper) {
          border-radius: 15px;
        }
      }

      .hct-setting-title::after {
        content: "";
        width: 4px;
        height: 16px;
        background-color: #3592ff;
        position: absolute;
        top: 12px;
        left: 2px;
      }
    }

    .hct-setting-list:nth-child(2)::after {
      content: "";
      width: 1px;
      height: 244px;
      background-color: #dfdfdf;
      position: absolute;
      bottom: 20px;
      left: -12px;
    }

    .hct-setting-list-group {
      height: 272px;
      overflow-y: auto;
    }

    .hct-setting-list-group-item {
      height: 36px;
      line-height: 36px;
      padding-left: 20px;
      font-weight: 400;
      color: #666666;
      position: relative;
      display: block;
      background-color: #fff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .svg-icon {
        width: 16px;
        height: 16px;
      }
    }
  }

  .hct-setting-buttons {
    text-align: center;
    margin-top: 10px;

    :deep(.el-button):nth-child(1) {
      margin-right: 20px;
    }
  }

  :deep(.el-table__expand-icon) {
    text-align: center !important;
  }

  /* 整个滚动条 */
  :deep(::-webkit-scrollbar) {
    /* 对应纵向滚动条的宽度 */
    width: 6px;
  }

  /* 滚动条上的滚动滑块 */
  :deep(::-webkit-scrollbar-thumb) {
    background-color: #dadada;
    border-radius: 32px;
  }

  /* 滚动条轨道 */
  :deep(::-webkit-scrollbar-track) {
    background-color: #f1f2f4;
    border-radius: 32px;
  }
}
</style>