<template>
  <LjDrawer ref="LjDrawerRef" size="24%" :class="prefixCls">
    <template #header>
      <div class="flx-1">
        {{ $t("business.detailSetting.title") }}
      </div>
    </template>
    <template v-if="settingData.mould.length">
      <van-cell-group :title="$t('business.detailSetting.detailAttr')" v-if="props.name">
        <van-cell :title="$t('business.detailSetting.float')">
          <el-switch v-model="detailFloat" @change="toChangeDetailFloat" />
        </van-cell>
      </van-cell-group>
      <van-cell-group :title="$t('business.detailSetting.tabAttr')">
        <van-cell :title="$t('business.detailSetting.scrollspy')">
          <el-switch v-model="settingData.header.tabsProp.scrollspy" />
        </van-cell>
        <van-cell :title="$t('business.detailSetting.sticky')" v-if="settingData.header.tabsProp.scrollspy">
          <el-switch v-model="settingData.header.tabsProp.sticky" />
        </van-cell>
      </van-cell-group>
      <van-cell-group :title="$t('business.detailSetting.tabOrder')">
        <!-- <template #title>
          <div class="flx">
            <span class="flx-1">
              {{ $t("business.detailSetting.tabOrder") }}
            </span>
            <span class="text-disable">
              {{ $t("business.detailSetting.hidden") }}
            </span>
          </div>
        </template> -->
        <draggable v-model="settingData.mould" item-key="id" animation="300" handle=".handle" forceFallback="true">
          <template #item="{ element }">
            <van-cell :title="element.label">
              <template #title>
                <i class="iconfont iconmove handle mr-8"></i>
                {{ element.label }}
              </template>
              <template #default>
                <el-switch v-model="element.isHidden" :active-action-icon="View" :inactive-action-icon="Hide" />
              </template>
            </van-cell>
          </template>
        </draggable>
      </van-cell-group>
    </template>
    <van-cell-group :title="$t('business.header.baseMsg')" v-if="ifBaseIdx > -1">
      <!-- 大小 每行展示列数,自动、固定 基础属性的显示隐藏、顺序 -->
      <!-- <van-cell :title="$t('business.detailSetting.baseBorder')">
        <el-switch v-model="settingData.mould[ifBaseIdx].props.border" />
      </van-cell>
      <van-cell :title="$t('business.detailSetting.baseDirection')">
        <el-radio-group v-model="settingData.mould[ifBaseIdx].props.direction">
          <el-radio-button v-for="item in columnsDirection" :key="item.value" :label="item.value">{{
            item.label
          }}</el-radio-button>
        </el-radio-group>
      </van-cell>
      <van-cell :title="$t('business.detailSetting.baseSize')">
        <el-radio-group v-model="settingData.mould[ifBaseIdx].props.size">
          <el-radio-button v-for="item in columnsSize" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
        </el-radio-group>
      </van-cell>
      <van-cell :title="$t('business.detailSetting.baseColumn')">
        <el-select v-model="settingData.mould[ifBaseIdx].props.descColumn" placeholder="Select" style="width: 150px">
          <el-option v-for="item in columnsList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </van-cell> -->
    </van-cell-group>
    <template #footer>
      <!-- <div class="flx-justify-between">
        <el-button
          v-if="userInfo.usercode?.trim().toLocaleLowerCase() == 'super'"
          class="enter-x"
          type="primary"
          plain
          :loading="saveDfBtnLoading"
          @click="saveDefaultClick"
        >
          <template #icon>
            <i class="iconfont iconsave-01"></i>
          </template>
          {{ $t("sys.layout.settings") }}
        </el-button> -->
      <div style="flex: auto">
        <el-button @click="hide">{{ $t("common.cancelText") }}</el-button>
        <el-button type="primary" :loading="loading" :disabled="loading" @click="confirmClick">{{
          $t("common.saveText")
        }}</el-button>
      </div>
      <!-- </div> -->
    </template>
  </LjDrawer>
</template>

<script setup lang="tsx" name="LjDetailSetting">
import { ref, computed, inject, nextTick } from "vue";
import { Hide, View } from "@element-plus/icons-vue";
import LjDrawer from "@/components/LjDrawer/index.vue";
import { useDesign } from "@/hooks/useDesign";
import draggable from "vuedraggable";
import { detailModelItemProp, DetailProp } from "../interface/index";
import { useI18n } from "vue-i18n";
import { cloneDeep } from "lodash-es";
import { ElMessage, ElNotification } from "element-plus";
import { useGlobalStore } from "@/stores/modules/global";
import { storeToRefs } from "pinia";
import { localGet } from "@/utils";
import { useUserStore } from "@/stores/modules/user";

const { prefixCls } = useDesign("detail-layout-settings");
const { t } = useI18n();
const globalStore = useGlobalStore();
const { userInfo } = useUserStore();
// const { mxFloat } = storeToRefs(globalStore);
const columnsDirection = [
  {
    label: t("common.horizontal"),
    value: "horizontal"
  },
  {
    label: t("common.vertical"),
    value: "vertical"
  }
];
const columnsSize = [
  {
    label: t("common.large"),
    value: "large"
  },
  {
    label: t("common.default"),
    value: "default"
  },
  {
    label: t("common.small"),
    value: "small"
  }
];
const columnsList = [
  {
    label: t("business.detailSetting.auto"),
    value: "auto"
  },
  {
    label: 1 + t("business.detailSetting.unit"),
    value: "1"
  },
  {
    label: 2 + t("business.detailSetting.unit"),
    value: "2"
  },
  {
    label: 3 + t("business.detailSetting.unit"),
    value: "3"
  },
  {
    label: 4 + t("business.detailSetting.unit"),
    value: "4"
  },
  {
    label: 5 + t("business.detailSetting.unit"),
    value: "5"
  }
];

const props = withDefaults(defineProps<DetailProp>(), {});
const settingData = ref();
const LjDrawerRef = ref();
const ifBaseIdx = computed(() => {
  return settingData.value?.mould.findIndex((item: any) => item.type === "base") ?? -1;
});
const detailFloat = ref(false);
const toChangeDetailFloat = (val: any) => {
  let { mxFloat } = localGet("longjoe-global");
  if (!props.name) return;
  if (val) {
    mxFloat?.push(props.name);
  } else {
    let idx = mxFloat?.indexOf(props.name) ?? -1;
    idx > -1 && mxFloat?.splice(idx, 1);
  }
  globalStore.setGlobalState("mxFloat", mxFloat);
};

const show = () => {
  LjDrawerRef.value.show();

  settingData.value = cloneDeep(props);
  // 初始化属性
  console.log("settings props :>> ", props);
  console.log("props.mould :>> ", props.mould);
  console.log("settingData.value :>> ", settingData.value);

  let { mxFloat } = localGet("longjoe-global"); // 跨越标签页通讯
  if (props.name) {
    detailFloat.value = mxFloat?.includes(props.name) ?? false;
  }
};
const hide = () => {
  LjDrawerRef.value.hide();
};

const emit = defineEmits(["confirm", "saveDefault"]);
const loading = ref(false);
/**
 * @description 保存事件
 */
const confirmClick = () => {
  let checkedNum = settingData.value.mould.filter((item: any) => item.isHidden).length;

  console.log("checkedNum :>> ", checkedNum);
  console.log("settingData.value :>> ", settingData.value);

  if (checkedNum == settingData.value.mould.length) {
    ElMessage({
      message: t("business.detailSetting.tipsTabslimit"),
      type: "warning"
    });
    return false;
  }
  loading.value = true;
  emit("confirm", settingData.value, () => {
    loading.value = false;
    hide();
  });
};

// /**
//  * @description 重置列排序等数据
//  */
// const saveDfBtnLoading = ref(false);
// /**
//  * @description 设置系统默认布局
//  */
// const saveDefaultClick = () => {
//   saveDfBtnLoading.value = true;

//   // let { layout, scroll } = saveLayoutFunc();
//   // emit("saveDefault", layout, { scrollY: scroll }, () => {
//   //   saveDfBtnLoading.value = false;
//   //   ElNotification({
//   //     title: t("sys.api.operationSuccess"),
//   //     message: t("sys.layout.successToLayout"),
//   //     type: "success"
//   //   });
//   // });
// };

defineExpose({
  show,
  hide
});
</script>

<style lang="scss">
$prefix-cls: "#{$namespace}-detail-layout-settings";

.#{$prefix-cls} {
  min-width: 330px;
  .handle {
    cursor: move;
  }
}
</style>
