<template>
  <el-tabs v-model="rightAsignActive" :class="` flx-col h-full `" stretch>
    <el-tab-pane
      :label="`${$t('business.baseMsgSetting.style')}${Object.keys(props.value).length ? ':' + props.value.title : ''}`"
      name="style"
      class="h-full"
    >
      <template v-if="Object.keys(props.value).length === 0">
        <el-empty :description="$t('sys.empty.tableColSet')" />
      </template>
      <template v-else>
        <el-scrollbar>
          <CellGroup :title="$t('sys.setting.attributes')">
            <el-form label-position="left" :model="props.value" label-width="120">
              <el-form-item prop="span" :label="$t('sys.setting.columnWidth')">
                <el-input-number class="w-full" v-model="props.value.width" :step="10" :min="50" :max="900" />
              </el-form-item>
              <el-form-item prop="span" :label="$t('sys.setting.align')">
                <el-radio-group v-model="props.value.align" :id="props.value.field + 'align'">
                  <el-radio-button label="left">{{ $t("sys.setting.left") }}</el-radio-button>
                  <el-radio-button label="center">{{ $t("sys.setting.center") }}</el-radio-button>
                  <el-radio-button label="right">{{ $t("sys.setting.right") }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="span" :label="$t('sys.setting.sort')">
                <el-switch
                  v-model="props.value.sortable"
                  inline-prompt
                  :active-text="$t('sys.setting.on')"
                  :inactive-text="$t('sys.setting.off')"
                />
              </el-form-item>
              <el-form-item prop="span" :label="$t('sys.setting.sortDefault')" v-if="props.value.sortable">
                <el-radio-group v-model="props.value.order" :id="props.value.field + 'order'">
                  <el-radio-button label="">{{ $t("sys.setting.off") }}</el-radio-button>
                  <el-radio-button label="asc">{{ $t("sys.setting.asc") }}</el-radio-button>
                  <el-radio-button label="desc">{{ $t("sys.setting.desc") }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="span" :label="$t('sys.setting.fixed')">
                <el-radio-group v-model="props.value.fixed" :id="props.value.field + 'fixed'">
                  <el-radio-button label="">{{ $t("sys.setting.off") }}</el-radio-button>
                  <el-radio-button label="left">{{ $t("sys.setting.left") }}</el-radio-button>
                  <el-radio-button label="right">{{ $t("sys.setting.right") }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="span" :label="$t('sys.setting.format')" v-if="fnGetType(props.value) != 'string'">
                <el-select v-model="props.value.format" class="m-2" :placeholder="$t('sys.setting.notSet')" clearable>
                  <el-option
                    v-for="item in props.enumMap?.get(props.value.field)"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="span" :label="$t('sys.setting.hideTableHeader')" v-if="props.value.parents">
                <el-switch
                  v-model="props.value.parentHidden"
                  inline-prompt
                  :active-text="$t('sys.setting.yes')"
                  :inactive-text="$t('sys.setting.no')"
                />
              </el-form-item>
            </el-form>
          </CellGroup>
          <!-- 列宽<br />
              对齐方式，左/中/右<br />
              是否可排序，升/降<br />
              格式：数值/时间类型<br />
              是否隐藏<br />
              是否固定列，固定左/右<br />
              快捷筛选？<br /> -->
          <CellGroup :title="$t('common.otherMsg')">
            <el-descriptions :column="1" border>
              <el-descriptions-item :label="$t('common.table.col')" width="100px">
                {{ props.value.title }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('common.table.field')">{{ props.value.field }}</el-descriptions-item>
              <el-descriptions-item
                :label="$t('common.table.dataSources')"
                class-name="break-word"
                v-if="props.value.dataSources"
                >{{ props.value.dataSources }}</el-descriptions-item
              >
              <el-descriptions-item :label="$t('common.table.dataType')">
                <el-tag size="small">{{ $t(`common.table.${fnGetType(props.value)}`) }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </CellGroup>
        </el-scrollbar>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts" name="VxeTableSetingColAside">
import { ref } from "vue";

interface ProTableProps {
  value: any;
  enumMap?: Map<string, { [key: string]: any }[]>;
  // updateColumns: Function;
  // search: (params: any) => void; // 搜索方法
  // reset: (params: any) => void; // 重置方法
}

// 默认值
const props = withDefaults(defineProps<ProTableProps>(), {});

const rightAsignActive = ref("style");

// 判断数据类型
const fnGetType = (item: any) => {
  return item?.datatype ?? (item?.field && item.field?.indexOf("date") > -1 ? "date" : "string");
};
</script>
