<template>
  <el-tooltip effect="dark" placement="top" :content="curLan['列配置']">
    <span>
      <el-popover
        ref="popoverRef"
        placement="bottom-end"
        :width="680"
        trigger="click"
        popper-class="fix-custom-popove"
      >
        <template #reference>
          <el-icon :size="20" color="#0075ff"><Setting /></el-icon>
        </template>
        <div class="custom-content">
          <div class="checkbox-row">
            <el-scrollbar>
              <checkbox-group
                :columns="originColumns"
                v-model:selected="selectedColumns"
              />
            </el-scrollbar>
          </div>
          <div class="sort-row">
            <sort-group
              :columns="columns"
              :origin-columns="originColumns"
              v-model:selected="selectedColumns"
              :max-fixed="maxFixed"
              ref="sortGroupRef"
            />
          </div>
        </div>
        <div class="custom-footer">
          <el-button @click="handleConfigReset">{{
            curLan['恢复默认']
          }}</el-button>
          <div class="footer-right">
            <el-button @click="handleConfigCancel" :loading="saveLoading">{{
              curLan['取消']
            }}</el-button>
            <el-button
              type="primary"
              @click="handleConfigSave"
              :loading="saveLoading"
              >{{ curLan['保存并应用'] }}</el-button
            >
          </div>
        </div>
      </el-popover>
    </span>
  </el-tooltip>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import CheckboxGroup from './components/checkboxGroup.vue';
import sortGroup from './components/sortGroup.vue';
import ajax, { getCookie } from './utils/ajax';

const language = {
  en: {
    '列配置': 'Column Config',
    '恢复默认': 'Default',
    '取消': 'Cancel',
    '保存并应用': 'Save',
    '保存成功': 'Save Success',
    '保存失败': 'Save Fail',
  },
  zh: {
    '列配置': '列配置',
    '恢复默认': '恢复默认',
    '取消': '取消',
    '保存并应用': '保存并应用',
    '保存成功': '保存成功',
    '保存失败': '保存失败',
  },
};

const urlConfig = {
  dev: 'https://erp.erp-sit.yintaerp.com/yinta-portal-web',
  sit: 'https://erp.erp-sit.yintaerp.com/yinta-portal-web',
  uat: 'https://erp.erp-uat.yintaerp.com/yinta-portal-web',
  prod: 'https://www.yintaerp.com/yinta-portal-web',
};

const curLan = language[getCookie('language') || 'zh'];

const props = defineProps({
  autoBind: {
    type: Boolean,
    default: false,
  },
  columns: {
    type: Array,
    default: () => [],
  },
  // 菜单URL
  menuUrl: {
    type: String,
    default: '',
  },
  httpRequest: {
    type: Function,
    default: ajax,
  },
  maxFixed: {
    type: Number,
    default: 5,
  },
  env: {
    type: String,
    required: true,
    default: 'prod',
  },
});

const popoverRef = ref(null);
const saveLoading = ref(false);
const originColumns = ref([]);
const sortGroupRef = ref(null);
const selectedColumns = ref(
  props.columns.filter((column) => !column.hidden).map((column) => column.prop)
);

const emits = defineEmits(['update:columns', 'save', 'loaded']);

watch(
  () => props.columns,
  () => {
    // 第一次记录初始值
    if (originColumns.value.length === 0) {
      originColumns.value = props.columns;
    }
    selectedColumns.value = props.columns
      .filter((column) => !column.hidden)
      .map((column) => column.prop);
  },
  {
    immediate: true,
  }
);

// 找到隐藏的列
const getHideProps = (config) => {
  const curProps = config.map((item) => item.prop);
  const hideProps = originColumns.value.filter(
    (column) => !curProps.includes(column.prop)
  );
  hideProps.forEach((item) => {
    item.hidden = true;
  });
  return hideProps;
};

// 拼接最终列数据
const getFinalData = (config) => {
  config.forEach((item) => {
    item.hidden = false;
  });
  return config.concat(getHideProps(config));
};

const broadcastSourceData = (config) => {
  if (props.autoBind) {
    emits('update:columns', config);
  }
  emits('save', config);
};

// 获取上一次配置
const getLastConfig = () => {
  // 没有配置 key，默认组件外获取
  if (!props.menuUrl) {
    return;
  }
  let lastConfig = [];
  const options = {
    action:
      urlConfig[props.env] +
      '/userCustomItem/selectByUrl?menuUrl=' +
      props.menuUrl,
    method: 'get',
    withCredentials: true,
    onSuccess: (res) => {
      if (+res.code === 200 && res.data?.resultItems) {
        lastConfig = JSON.parse(res.data.resultItems);
        broadcastSourceData(
          lastConfig ? [...lastConfig] : [...originColumns.value]
        );
        emits('onload', true);
      }
    },
    onError: (err) => {
      console.log('onError...', err);
      broadcastSourceData([...originColumns.value]);
      emits('onload', true);
    },
  };

  const req = props.httpRequest(options);

  if (req && req.then) {
    req.then(options.onSuccess, options.onError);
  }
};

watch(
  () => props.env,
  () => {
    getLastConfig();
  },
  {
    immediate: true,
  }
);

// 取消
const handleConfigCancel = () => {
  popoverRef.value.hide();
  selectedColumns.value = props.columns
    .filter((column) => !column.hidden)
    .map((column) => column.prop);
  sortGroupRef.value.sortColumns = JSON.parse(JSON.stringify(props.columns));
};
// 恢复默认
const handleConfigReset = () => {
  popoverRef.value.hide();
  handleConfigPost();
};
// 保存并应用
const handleConfigSave = () => {
  handleConfigPost(sortGroupRef.value.sortColumns);
};
// 提交配置
const handleConfigPost = (data = '') => {
  // 没有配置 key，默认组件外保存
  if (!props.menuUrl) {
    emits('save', data ? getFinalData(data) : [...originColumns.value]);
    popoverRef.value.hide();
    return;
  }
  if (saveLoading.value) {
    return;
  }
  saveLoading.value = true;

  const options = {
    action: urlConfig[props.env] + '/userCustomItem/save',
    method: 'post',
    data: {
      menuUrl: props.menuUrl,
      resultItems: data
        ? JSON.stringify(getFinalData(data))
        : JSON.stringify(data),
    },
    withCredentials: true,
    onSuccess: (res) => {
      if (+res.code === 200) {
        ElMessage.success(curLan['保存成功']);
        broadcastSourceData(
          data ? getFinalData(data) : [...originColumns.value]
        );
        popoverRef.value.hide();
      } else {
        ElMessage.success(curLan['保存失败']);
      }
      saveLoading.value = false;
    },
    onError: (err) => {
      console.log('onError...', err);
      saveLoading.value = false;
    },
  };

  const req = props.httpRequest(options);

  if (req && req.then) {
    req.then(options.onSuccess, options.onError);
  }
};
</script>

<style lang="scss">
.fix-custom-popove {
  max-height: 540px;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  .checkbox-row {
    flex: 2;
    border-right: 1px solid #e6e8eb;
    padding-top: 20px;
    .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
      max-height: 100% !important;
      padding-left: 16px;
    }
    .checkbox-section .check-item .el-checkbox {
      white-space: normal;
      align-items: flex-start;
      height: unset;
      margin-bottom: 10px;
    }
  }
  .custom-content {
    display: flex;
    margin-top: 0 !important;
    border-bottom: 1px solid #e6e8eb;
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
    .sort-row {
      flex: 1;
      width: 0;
      display: flex;
      flex-direction: column;
    }
    .checkbox-section {
      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        padding-bottom: 10px;
      }
      .section-title {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .title-text {
          color: #0b1019;
          font-weight: 600;
          margin-right: 2px;
          font-size: 12px !important;
        }
      }
      .section-list {
        display: flex;
        flex-wrap: wrap;
        .check-item {
          width: 130px;
          margin: 0 4px 4px 0;
        }
      }
    }
  }
  .custom-footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
  }
}
</style>

<style lang="scss" scoped>
.el-icon {
  cursor: pointer;
}
</style>