<template>
  <el-dialog
    :class="`${prefixCls}`"
    :title="$t('business.baseMsgSetting.title')"
    width="80%"
    draggable
    v-model="drawerVisible"
    direction="btt"
  >
    <template #default>
      <el-row :gutter="16" class="h-full">
        <el-col :span="6">
          <draggable class="card grid-container" v-model="cpColumns" item-key="prop" animation="300" forceFallback="true">
            <template #item="{ element }">
              <el-form-item :label="`${element.label} :`">
                <template #label>
                  {{ element.label }}
                </template>
                <BaseMsgFormItem :column="element" :search-param="searchParam" />
              </el-form-item>
            </template>
          </draggable>
        </el-col>
        <el-col :span="12">
          <el-container :class="`${prefixCls}__main`">
            <el-form :label-width="_globalLabelWidth" class="flx-1" :label-position="_globalAlign">
              <!-- <el-row> -->
              <!-- <draggable class="el-row" v-model="cpColumns" item-key="prop" animation="300" forceFallback="true">
                <template #item="{ element }">
                  <el-col :span="element.span + 7" :key="element.prop">{{ element.prop }}</el-col>
                </template>
              </draggable> -->
              <!-- </el-row> -->
              <!-- <Grid ref="gridRef" :gap="[20, 0]" :cols="searchCol"> -->
              <!-- <GridItem
                  :class="`${prefixCls}__grid-item`"
                  v-for="(item, index) in cpColumns"
                  :key="item.prop"
                  v-bind="getResponsive(item)"
                  :index="index"
                  @click="handleSelFormItem(item)"
                >
                  <el-form-item :class="{ 'is-active': activeColumn.prop == item.prop }" :label="`${item.label} :`">
                    <BaseMsgFormItem :column="item" :search-param="searchParam"> 文本内容 </BaseMsgFormItem>
                  </el-form-item>
                </GridItem> -->
              <!-- </Grid> -->
              <draggable class="el-row" v-model="cpColumns" item-key="prop" animation="300" forceFallback="true">
                <template #item="{ element, index }">
                  <el-col
                    :class="`${prefixCls}__grid-item`"
                    :key="element.prop"
                    :index="index"
                    :span="element.span + 8"
                    @click="handleSelFormItem(element)"
                  >
                    <el-form-item :label="`${element.label} :`" :class="{ 'is-active': activeColumn.prop == element.prop }">
                      <BaseMsgFormItem :column="element" :search-param="searchParam">文本内容</BaseMsgFormItem>
                    </el-form-item>
                  </el-col>
                </template>
              </draggable>
            </el-form>
          </el-container>
        </el-col>
        <el-col :span="6">
          <div class="card h-full">
            <el-tabs v-model="rightAsignActive" class="demo-tabs" stretch @tab-click="handleClick">
              <el-tab-pane :label="$t('business.baseMsgSetting.style')" name="style">
                <template v-if="JSON.stringify(activeColumn) == '{}'">
                  <el-empty description="请点击左侧模块" />
                </template>
                <template v-else>
                  <el-form :model="activeColumn" label-width="120">
                    <el-form-item prop="span" label="尺寸">
                      <el-select v-model="activeColumn.span" @change="handeChangeStyle('span', activeColumn.span)">
                        <el-option label="1" :value="1" />
                        <el-option label="2" :value="2" />
                        <el-option label="3" :value="3" />
                        <el-option label="4" :value="4" />
                      </el-select>
                    </el-form-item>
                  </el-form>
                </template>
              </el-tab-pane>
              <el-tab-pane :label="$t('business.baseMsgSetting.config')" name="config">
                <el-form label-width="120">
                  <el-form-item label="对齐方式">
                    <el-select v-model="_globalAlign">
                      <el-option label="left" value="left" />
                      <el-option label="right" value="right" />
                      <el-option label="top" value="top" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="标签长度" v-if="_globalAlign != 'top'">
                    <el-input-number v-model="_globalLabelWidth" :min="80" :max="300" />
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">{{ $t("common.cancelText") }}</el-button>
        <el-button type="primary" @click="confirmClick">{{ $t("common.saveText") }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, inject } from "vue";
import { ElMessageBox, ElDrawer } from "element-plus";
import BaseMsgFormItem from "./BaseMsgFormItem.vue";
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";
import { BreakPoint } from "@/components/Grid/interface";
import { ColumnProps, SearchProps } from "@/components/ProTable/interface";
import draggable from "vuedraggable";
import { useDesign } from "@/hooks/useDesign";
import { cloneDeep } from "lodash-es";
import { useGlobalStore } from "@/stores/modules/global";
import { storeToRefs } from "pinia";

const { prefixCls } = useDesign("base-msg-setting");
const globalStore = useGlobalStore();
const { globalAlign, globalLabelWidth } = storeToRefs(globalStore);

interface ProTableProps {
  data?: any; // 搜索配置列
  searchParam?: { [key: string]: any }; // 搜索参数
  searchCol: number | Record<BreakPoint, number>;
  // updateColumns: Function;
  // search: (params: any) => void; // 搜索方法
  // reset: (params: any) => void; // 重置方法
}

interface BaseMseSettingColumns {
  prop: string;
  label: string;
  table: string;
  search: SearchProps | undefined; // 搜索项配置
  span: number;
  lableWidth: number;
  // invisible: false,
}

// 默认值
const props = withDefaults(defineProps<ProTableProps>(), {
  // data: () => [],
  searchParam: () => ({})
});

let cpColumns = ref([...props.data]);
// const cpColumns = reactive(cloneDeep(props.data));

// defineEmits(["update:data"]);
// const fnDraggableCol = (e: any) => {
//   console.log("e :>> ", e);
//   console.log("cpColumns :>> ", cpColumns);
// };
// let cpColumns = computed({
//   get() {
//     console.log("props.data :>> ", props.data);
//     return props.data;
//   },
//   set(data) {
//     console.log("data :>> ", data);
//     props.updateColumns(data);
//   }
// });
console.log("cpColumns :>> ", cpColumns);
// 接受父组件参数，配置默认值
// const props = defineProps({
//   // data: () => [],
//   // requestAuto: true,
//   // pagination: true,
//   // initParam: {},
//   // border: true,
//   // rowKey: "id",
//   searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })
// });

// 获取响应式设置
const getResponsive = (item: BaseMseSettingColumns) => {
  return {
    span: item?.span,
    offset: item.search?.offset ?? 0,
    xs: item.search?.xs,
    sm: item.search?.sm,
    md: item.search?.md,
    lg: item.search?.lg,
    xl: item.search?.xl
  };
};

function cancelClick() {
  drawerVisible.value = false;
}
const emit = defineEmits(["confirm"]);
function confirmClick() {
  // fnUpdate(cpColumns);
  emit("confirm", cpColumns);
  drawerVisible.value = false;
}
// const fnUpdate: any = inject("updateColumn");

import type { TabsPaneContext } from "element-plus";

const rightAsignActive = ref("config");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const drawerVisible = ref<boolean>(false);

const openColSetting = () => {
  drawerVisible.value = true;
};

let activeColumn = ref<any>({});
const handleSelFormItem = (item: any) => {
  console.log("item :>> ", item);
  activeColumn.value = item;
  console.log("activeColumn :>> ", activeColumn);
  rightAsignActive.value = "style";
};

// 全局设置
let _globalAlign: any = globalAlign;
const handeChange = (arg: any, name: string) => {
  console.log("name :>> ", name);
  console.log("arg :>> ", arg);
};

// 全局设置
let _globalLabelWidth: any = globalLabelWidth;

// 样式
// inject("updateSettingColumn", )
const handeChangeStyle: any = inject("updateSettingColumn");

defineExpose({
  openColSetting
});
</script>

<style lang="scss" scoped>
$prefix-cls: "#{$namespace}-base-msg-setting";

.#{$prefix-cls} {
  &__main {
    .#{$prefix-cls}__grid-item {
      cursor: pointer;
      .is-active {
        position: relative;
        // background-color: $color-primary-200 !important;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: -10px;
          right: -10px;
          bottom: 0;
          border: 2px solid $color-primary-200;
          border-radius: 8px;
        }
      }
    }
  }
}
</style>
