<template>
  <div :class="`${prefixCls}`" class="card table-search">
    <div :class="`${prefixCls}__header flx-start`">
      <div class="title flx-1 text-h5-m">{{ $t("business.header.baseMsg") }}</div>
      <aside class="as">
        <el-button :icon="Operation" circle @click="openColSetting" />
      </aside>
    </div>
    <el-form :label-width="_globalLabelWidth" class="flx-1" :label-position="_globalAlign">
      <Grid ref="gridRef" :gap="[20, 0]" :cols="searchCol">
        <GridItem
          :class="`${prefixCls}__grid-item`"
          v-for="(item, index) in columns"
          :key="item.prop"
          v-bind="getResponsive(item)"
          :index="index"
        >
          <el-form-item :label="`${item.label} :`">
            <!-- <template #label>
            <i class="iconfont iconFilter_light handle"></i>
            {{ item.label }}
          </template> -->
            <BaseMsgFormItem :column="item" :search-param="{}"> 文本内容 </BaseMsgFormItem>
          </el-form-item>
        </GridItem>
      </Grid>
    </el-form>
    <!-- <el-form :model="form" label-width="120px">
      <el-form-item label="Activity name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="Activity zone">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="Activity time">
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
        </el-col>
      </el-form-item>
      <el-form-item label="Instant delivery">
        <el-switch v-model="form.delivery" />
      </el-form-item>
      <el-form-item label="Activity type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="Online activities" name="type" />
          <el-checkbox label="Promotion activities" name="type" />
          <el-checkbox label="Offline activities" name="type" />
          <el-checkbox label="Simple brand exposure" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Resources">
        <el-radio-group v-model="form.resource">
          <el-radio label="Sponsor" />
          <el-radio label="Venue" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Activity form">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <div>
          <el-button type="primary" @click="onSubmit">Create</el-button>
          <el-button>Cancel</el-button>
        </div>
      </el-form-item>
    </el-form> -->
  </div>
  <!-- 基础信息设置窗口 -->
  <BaseMsgSetting
    v-if="toolButton"
    ref="baseMsgSettingRef"
    v-model:data="settingColumn"
    :search-col="searchCol"
    @confirm="settingConfirm"
  />
</template>
<script setup lang="ts" name="BaseMsgForm">
import { ref, reactive, provide, watch } from "vue";
import { useDesign } from "@/hooks/useDesign";
import { Refresh, Printer, Operation, Search } from "@element-plus/icons-vue";
import { ColumnProps, SearchProps } from "@/components/ProTable/interface";
import BaseMsgSetting from "./components/BaseMsgSetting.vue";
import { BreakPoint } from "@/components/Grid/interface";
import { quoteColumns } from "@/config/baseMsgColumns";
import BaseMsgFormItem from "./components/BaseMsgFormItem.vue";
import { useGlobalStore } from "@/stores/modules/global";
import { storeToRefs } from "pinia";

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

export interface BaseMsgProps {
  // columns?: ColumnProps[]; // 列配置项  ==> 必传
  columns?: any; // 搜索配置列
  data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
  // requestApi?: (params: any) => Promise<any>; // 请求表格数据的 api ==> 非必传
  // requestAuto?: boolean; // 是否自动执行请求 api ==> 非必传（默认为true）
  // requestError?: (params: any) => void; // 表格 api 请求错误监听 ==> 非必传
  // dataCallback?: (data: any) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
  // title?: string; // 表格标题，目前只在打印的时候用到 ==> 非必传
  // pagination?: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
  // initParam?: any; // 初始化请求参数 ==> 非必传（默认为{}）
  // border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
  toolButton?: boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
  // rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
  searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
}

// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<BaseMsgProps>(), {
  // columns: () => [],
  // requestAuto: true,
  // pagination: true,
  // initParam: {},
  // border: true,
  toolButton: true,
  // rowKey: "id",
  searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })
});

// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: ""
});

const onSubmit = () => {
  console.log("submit!");
};

// 列设置 ==> 过滤掉不需要设置的列
const baseMsgSettingRef = ref<InstanceType<typeof BaseMsgSetting> | null>(null);
const openColSetting = () => {
  baseMsgSettingRef.value?.openColSetting();
};

let settingColumn: any = reactive(quoteColumns.cloumns);
const fnUpdateSettingColumn = (prop: string, val: any) => {
  console.log("prop :>> ", prop);
  console.log("settingColumn :>> ", settingColumn);
  for (let i = 0; i < settingColumn.length; i++) {
    if (settingColumn[i].prop == prop) {
      console.log("settingColumn[i] :>> ", settingColumn[i]);
      // quoteColumns.cloumns[i][prop] = val
    }
  }
};
provide("updateSettingColumn", fnUpdateSettingColumn);
const emit = defineEmits(["update:columns"]);
const settingConfirm = (column: any) => {
  console.log("column :>> ", column.value);
  // settingColumn = column;
  // console.log("settingColumn :>> ", settingColumn);
  emit("update:columns", column.value);
};

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

// 获取响应式设置
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
  };
};

let _columns: any = ref([...props.columns]);
let _globalAlign: any = globalAlign;
let _globalLabelWidth: any = globalLabelWidth;
watch(
  () => props.columns,
  val => {
    // const { globalAlign, globalLabelWidth } = storeToRefs(globalStore);
    // console.log("globalLabelWidth :>> ", globalLabelWidth);
    // _globalAlign = globalAlign;
    // _globalLabelWidth = globalLabelWidth;
    // console.log("globalAlign :>> ", globalAlign);
    _columns.value = val;
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
