<template>
  <el-select v-if="!readonly && isEdit && isSelectType(dbType, scope)" v-model="scope.row['defaultValue']" placeholder="请选择" collapse-tags-tooltip
    filterable allow-create default-first-option :reserve-keyword="false">
    <el-option v-for="opt in optionsConfig[dataType]" :key="opt['value']" :label="opt['label']" :value="opt['value']" />
  </el-select>
  <el-date-picker v-else-if="!readonly && isEdit && dataType === 'date'" v-model="scope.row['defaultValue']" type="date"
    format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择" />
  <el-date-picker v-else-if="!readonly && isEdit && dbType === 'mysql' && dataType === 'datetime'"
    v-model="scope.row['defaultValue']" placeholder="请选择" type="datetime" format="YYYY-MM-DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss" />
  <el-input v-else-if="!readonly && isEdit" v-model.trim="scope.row['defaultValue']" placeholder="请填写"
    @input="(val) => inputChange(val, scope.row.dataType, scope)" />
  <span v-else>{{ scope.row["defaultValue"] == null ? '-' : (isSelectType(dbType, scope) ?
    (optionsConfig[dataType].find(s => s.value == scope.row["defaultValue"])?.label ??
      scope.row["defaultValue"]) : scope.row["defaultValue"]) }}</span>
</template>

<script lang="ts" setup name="tableDefaultValue">
import { ref } from "vue";
import { useDefault } from "@/hooks/useDefault";
const { optionsConfig, inputChange, isSelectType } = useDefault()

const props = defineProps({
  dbType: {
    type: String,
    default: ''
  },
  scope: {
    type: Object,
    default: {}
  },
  readonly: {
    type: Boolean,
    default: false
  }
})

const isEdit = computed(() => {
  return props.scope.row['isEdit'];
});

const dataType = computed(() => {
  return props.scope.row['dataType'];
});

</script>