<script lang="ts" setup name="existingTableSelect">
import { ref } from "vue";
import Dialog from "@/components/Dialog/index.vue";

const emits = defineEmits([
  "expandValueChange"
]);

const props = defineProps({
  tableCreateInfo: {
    type: Object,
    default: {},
  },
  partitionAttribute: {
    type: Object,
    default: {},
  },
  isLook: {
    type: Boolean,
    default: false
  }
});

const expandProperties: any = computed(() => {
  let partitionAttribute = props.tableCreateInfo.partitionAttribute;
  return {
    partitionMode: partitionAttribute?.partitionMode || 'dynamic',
    staticPartitionType: partitionAttribute?.staticPartitionType || 'Range',
    partitionCol: partitionAttribute?.partitionCol || "",
    partitionTimeUnit: partitionAttribute?.partitionTimeUnit || "DAY",
    dynamicPartitionEnd: partitionAttribute?.dynamicPartitionEnd == null ? 3 : partitionAttribute?.dynamicPartitionEnd,
    staticPartitionRange: partitionAttribute?.staticPartitionRangeBegin ? [partitionAttribute?.staticPartitionRangeBegin,
    partitionAttribute?.staticPartitionRangeEnd] : null,
    dynamicPartitionHistory: partitionAttribute?.dynamicPartitionHistory === "Y",
    dynamicPartitionHistoryNum: partitionAttribute?.dynamicPartitionHistoryNum,
    staticPartitionEnum: partitionAttribute?.staticPartitionEnum,
  }
})

const formItems: any = ref([
  {
    label: "分区模式",
    type: "radio-panel",
    placeholder: "",
    field: "partitionMode",
    default: "dynamic",
    options: [
      { label: "动态分区", value: "dynamic" },
      { label: "静态分区", value: "static" },
    ],
    children: [],
    required: true,
    block: true,
    col: "no-wrap col2",
  },
  {
    label: "分区类型",
    type: "select",
    placeholder: "请选择",
    options: [
      {
        label: "Range",
        value: "Range",
      },
      {
        label: "List",
        value: "List",
      },
    ],
    field: "staticPartitionType",
    default: 'Range',
    required: true,
    visible: false,
  },
  {
    label: "分区字段",
    type: "select",
    placeholder: "请选择",
    options: [],
    field: "partitionCol",
    default: "",
    props: {
      label: 'chName',
      value: 'enName'
    },
    tooltip: true,
    tooltipContent: '分区字段为日期、日期时间类型且为主键的字段。',
    clearable: true,
    required: true,
    visible: true,
  },
  {
    label: "分区单位",
    type: "select",
    placeholder: "请选择",
    options: [
      {
        value: "DAY",
        label: "按天",
      },
      {
        value: "WEEK",
        label: "按星期",
      },
      {
        value: "MONTH",
        label: "按月",
      },
      {
        value: "YEAR",
        label: "按年",
      },
    ],
    default: "DAY",
    field: "partitionTimeUnit",
    required: true,
    visible: false,
  },
  {
    type: "select-group",
    field: "dynamicPartitionTimeUnit",
    children: [
      {
        label: "分区单位",
        type: "select",
        placeholder: "请选择",
        options: [
          {
            value: "HOUR",
            label: "按小时",
          },
          {
            value: "DAY",
            label: "按天",
          },
          {
            value: "WEEK",
            label: "按星期",
          },
          {
            value: "MONTH",
            label: "按月",
          },
          {
            value: "YEAR",
            label: "按年",
          },
        ],
        default: "DAY",
        field: "partitionTimeUnit",
        required: true,
        visible: true,
      },
      {
        label: "   ",
        type: "input",
        placeholder: "结束偏移量",
        default: 3,
        field: "dynamicPartitionEnd",
        required: true,
        visible: true,
      },
    ],
    col: "col2",
    visible: true
  },
  {
    label: "分区范围",
    type: "date-picker",
    field: "staticPartitionRange",
    default: null,
    placeholder: "开始时间~截止时间",
    clearable: true,
    required: true,
    visible: false,
  },
  {
    type: "checkbox-input",
    placeholder: "创建历史分区",
    field: "dynamicPartitionHistory",
    default: false,
    children: [
      {
        label: "",
        type: "input",
        placeholder: "历史分区数量",
        field: "dynamicPartitionHistoryNum",
        default: 1,
        required: false,
        visible: false,
      },
    ],
    class: "dialog-checkbox-input",
    visible: true,
    required: false,
  },
  {
    label: "分区枚举值",
    type: "textarea",
    placeholder: "请使用“,”号分隔",
    field: "staticPartitionEnum",
    default: "",
    clearable: true,
    required: true,
    block: true,
    visible: false,
  },
]);
const formRules = ref({
  staticPartitionType: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value) {
          callback(new Error("分区类型不为空"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  partitionCol: [{
    validator: (rule: any, value: any, callback: any) => {
      if (!value) {
        callback(new Error("分区字段不为空"));
      } else {
        callback();
      }
    },
    trigger: "blur",
  }],
  staticPartitionRange: [{
    validator: (rule: any, value: any, callback: any) => {
      if (!value?.length) {
        callback(new Error("分区范围不为空"));
      } else {
        callback();
      }
    },
    trigger: "blur",
  }],
  staticPartitionEnum: [{
    trigger: "blur",
    required: true,
    message: '分区枚举值不能为空'
  }],
  dynamicPartitionHistoryNum: {
    validator: (rule: any, value: any, callback: any) => {
      const r = /(^[0-9]([0-9]*)$|^[0-9]$)/; // 正整数（可以以0打头）
      if (value && !r.test(value)) {
        callback(new Error('请填写大于或等于零整数'));
        return;
      }
      if ((value + '').length > 6) {
        callback(new Error('请填写小于7位的整数'));
        return;
      }
      callback();
    },
    trigger: "blur",
  },
  dynamicPartitionEnd: {
    validator: (rule: any, value: any, callback: any) => {
      const r = /(^[0-9]([0-9]*)$|^[0-9]$)/; // 正整数（可以以0打头）
      if (value && !r.test(value)) {
        callback(new Error('请填写大于或等于零整数'));
        return;
      }
      if ((value + '').length > 6) {
        callback(new Error('请填写小于7位的整数'));
        return;
      }
      callback();
    },
    trigger: "blur",
  },
});

const expandPropertyDialogInfo = ref({
  readonly: false,
  visible: false,
  size: 700,
  height: "270px",
  header: {
    title: "扩展属性",
  },
  direction: "column",
  type: "",
  contents: [
    {
      type: "form",
      title: "",
      formInfo: {
        readonly: false,
        id: "edit-expand-property",
        items: formItems.value,
        rules: formRules.value,
      },
    },
  ],
  footer: {
    visible: true,
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit" },
    ],
  },
});

/** 记录对话框编辑过程中的扩展属性。提交之后才会记录在expandProperties */
const editExpandProperties: any = ref({});

/** 扩展属性弹出对话框 */
const handleClickExpand = () => {
  expandPropertyDialogInfo.value.visible = true;
  if (props.isLook || props.tableCreateInfo.isCreate) {
    expandPropertyDialogInfo.value.contents[0].formInfo.readonly = true;
    expandPropertyDialogInfo.value.footer.visible = false;
  } else {
    expandPropertyDialogInfo.value.contents[0].formInfo.readonly = false;
    expandPropertyDialogInfo.value.footer.visible = true;
  }
  if (expandProperties.value.partitionMode === 'dynamic') {
    formItems.value[1].visible = false;
    formItems.value[2].visible = true;
    formItems.value[3].visible = false;
    formItems.value[4].visible = true;
    formItems.value[5].visible = false;
    formItems.value[6].visible = true;
    formItems.value[7].visible = false;
    formItems.value[6].children[0].visible = expandProperties.value.dynamicPartitionHistory;
    formItems.value[2].options = props.tableCreateInfo.tableFields?.filter(field => field.isPrimary === 'Y' && (field.dataType === 'date' || field.dataType === 'datetime')) || [];
    formItems.value[2].tooltipContent = '分区字段为日期、日期时间类型且为主键的字段。';
  } else {
    formItems.value[1].visible = true;
    formItems.value[2].visible = true;
    formItems.value[3].visible = true;
    formItems.value[4].visible = false;
    formItems.value[5].visible = true;
    formItems.value[6].visible = false;
    formItems.value[7].visible = false;
    let val = expandProperties.value.staticPartitionType;
    formItems.value[3].visible = val !== 'List';
    formItems.value[5].visible = val !== 'List';
    formItems.value[7].visible = val === 'List';
    if (val !== 'List') {
      formItems.value[2].options = props.tableCreateInfo.tableFields?.filter(field => field.isPrimary === 'Y' && (field.dataType === 'date' || field.dataType === 'datetime')) || [];
      formItems.value[2].tooltipContent = '分区字段为日期、日期时间类型且为主键的字段。';
    } else {
      formItems.value[2].options = props.tableCreateInfo.tableFields?.filter(field => field.isPrimary === 'Y') || [];
      formItems.value[2].tooltipContent = '分区字段为主键字段。';
    }
  }
  expandPropertyDialogInfo.value.contents[0].formInfo.items = formItems.value;
  editExpandProperties.value = Object.assign({}, expandProperties.value);
  setFormItems(editExpandProperties.value);
};

/** 重置formItems的值 */
const setFormItems = (row: any = null) => {
  formItems.value.forEach(item => {
    if (item.field === 'dynamicPartitionTimeUnit') {
      item.children.forEach(child => {
        child.default = row[child.field];
      });
    } else if (item.field === 'dynamicPartitionHistory') {
      item.default = row[item.field];
      item.children.forEach(child => {
        child.default = row[child.field];
      });
    } else {
      item.default = row[item.field];
    }
  })
}

const radioGroupChange = (val, info) => {
  formItems.value[0].default = val;
  if (val == "dynamic") {
    formItems.value[1].visible = false;
    formItems.value[2].visible = true;
    formItems.value[3].visible = false;
    formItems.value[4].visible = true;
    formItems.value[5].visible = false;
    formItems.value[6].visible = true;
    formItems.value[7].visible = false;
  } else if (val == "static") {
    formItems.value[1].visible = true;
    formItems.value[2].visible = true;
    formItems.value[3].visible = true;
    formItems.value[4].visible = false;
    formItems.value[5].visible = true;
    formItems.value[6].visible = false;
    formItems.value[7].visible = false;
  }
  expandPropertyDialogInfo.value.contents[0].formInfo.items = formItems.value;
  editExpandProperties.value = Object.assign({}, editExpandProperties.value, info)
  setFormItems(editExpandProperties.value);
};

const dialogCheckboxChange = (val, info) => {
  let opts: any = formItems.value[6].children;
  opts[0].visible = val;
  editExpandProperties.value = Object.assign({}, editExpandProperties.value, info)
  setFormItems(editExpandProperties.value);
};

const dialogSelectChange = (val, row, info) => {
  if (row.field == 'staticPartitionType') {
    formItems.value[3].visible = val !== 'List';
    formItems.value[5].visible = val !== 'List';
    formItems.value[7].visible = val === 'List';
    if (val !== 'List') {
      formItems.value[2].options = props.tableCreateInfo.tableFields?.filter(field => field.isPrimary === 'Y' && (field.dataType === 'date' || field.dataType === 'datetime')) || [];
      formItems.value[2].tooltipContent = '分区字段为日期、日期时间类型且为主键的字段。';
    } else {
      formItems.value[2].options = props.tableCreateInfo.tableFields?.filter(field => field.isPrimary === 'Y') || [];
      formItems.value[2].tooltipContent = '分区字段为主键字段。';
    }
  }
  editExpandProperties.value = Object.assign({}, editExpandProperties.value, info)
  setFormItems(editExpandProperties.value);
}

const expandPropertyDialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    emits('expandValueChange', info);
    expandPropertyDialogInfo.value.visible = false;
  } else if (btn.value == 'cancel') {
    expandPropertyDialogInfo.value.visible = false;
  }
};

defineExpose({
  handleClickExpand
});

</script>

<template>
  <Dialog ref="expandPropertyDialogRef" :dialogInfo="expandPropertyDialogInfo" @radioGroupChange="radioGroupChange"
    @checkboxChange="dialogCheckboxChange" @selectChange="dialogSelectChange" @btnClick="expandPropertyDialogBtnClick" />
</template>

<style scoped lang="scss"></style>