<template>
    <div class="dataView_box" :style="isDark ? 'color: #fff;' : 'color: #333;'">
        <p>当前组件：</p>
        <div
            class="card_box"
            :style="
                isDark
                    ? ' border: 1px solid #a3a2a25e;background-color: #d1d1d115;'
                    : '  border: 1px solid #d6d5d5;background-color: #c4c3c31a;'
            "
        >
            <p>组件id：{{ templateID }}</p>
            <p>组件类型：{{ templateType }}</p>
        </div>
        <p>字段设置：</p>
        <div
            class="card_box"
            :style="
                isDark
                    ? ' border: 1px solid #a3a2a25e;background-color: #d1d1d115;'
                    : '  border: 1px solid #d6d5d5;background-color: #c4c3c31a;'
            "
        >
            <p>
                字段名：
                <el-input style="width: 60%" v-model="dataSQL.name" @change="changeName($event, 'field')" />
            </p>
            <p>
                注释：
                <el-input style="width: 60%" v-model="dataSQL.info" @change="changeName($event, 'label')" />
            </p>
            <p>
                字段类型：
                <el-select
                    style="width: 60%"
                    placeholder="请选择字段类型"
                    v-model="dataSQL.type"
                    @change="changeSQL"
                    :disabled="edit"
                >
                    <el-option v-for="option in selectOptions" :key="option.value" :label="option.label" :value="option.value" />
                </el-select>
            </p>
            <p>
                字段长度：
                <el-input-number
                    style="width: 60%"
                    :min="edit ? dataSQL.length : 1"
                    :max="255"
                    placeholder="请输入字段长度"
                    v-model="dataSQL.length"
                    @change="changeSQL"
                />
            </p>
            <p>
                能否为NULL：
                <el-switch v-model="dataSQL.isNull" @change="changeSQL" />
            </p>
            <p>
                是否主键：
                <el-switch v-model="dataSQL.isKey" @change="changeSQL" />
            </p>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { Designer } from "../../../../../types/epic-designer";
import { inject, reactive, ref, watch, onMounted, computed } from "vue";
import { ElInput, ElSelect, ElOption, ElInputNumber, ElSwitch } from "element-plus";
import { setAttributeValue, setdataSource } from "@/components/EpicDesigner/utils";
import { useTheme } from "@/components/EpicDesigner/utils";
const { isDark } = useTheme();

/**
 * 页面data
 * */
const designer = inject("designer") as Designer;
let templateID = ref("");
let templateType = ref("");
let dataSQL = reactive({
    name: "",
    type: "",
    length: 50,
    isNull: true,
    isKey: false,
    info: ""
});

const selectOptions = ref([
    { value: "int", label: "int" },
    { value: "bigint", label: "bigint" },
    { value: "float", label: "float" },
    { value: "double", label: "double" },
    { value: "char", label: "char" },
    { value: "varchar", label: "varchar" },
    { value: "text", label: "text" },
    { value: "longtext", label: "longtext" }
]);

const checkedNode = computed(() => {
    return designer.state.checkedNode;
});

// const domID = computed(() => {
//     return designer.state.checkedNode?.id;
// });

const dataSource = computed(() => {
    return designer.state.dataSource;
});

let edit = computed(() => {
    return designer.state.status;
});

/**
 * 监听数据变化
 * */
watch(
    () => designer.state.checkedNode?.id,
    () => {
        setdataSourceData();
    }
);

onMounted(() => {
    /**
     * 数据初始化
     * 先赋值默认值，然后判断该组件是否已经有自己的字段，有的话就赋值
     * */
    setdataSourceData();
});

/**
 * 数据绑定
 * */
const setdataSourceData = () => {
    templateID.value = designer.state.checkedNode?.id;
    templateType.value = designer.state.checkedNode?.type;

    // 判断当前组件是否已经赋值
    let dataArr = dataSource.value;
    // 判断当前的设计器的dataSource数据，看看当前组件是否已经存在
    let flag = dataArr.some(item => {
        return item.id === templateID.value;
    });

    if (flag) {
        dataArr.forEach(element => {
            if (element.id === templateID.value) {
                for (const key in dataSQL) {
                    dataSQL[key] = element[key];
                }
            }
        });
    } else {
        // 重置数据
        for (const key in dataSQL) {
            if (key === "isNull") {
                dataSQL[key] = true;
            } else if (key === "isKey") {
                dataSQL[key] = false;
            } else if (key === "length") {
                dataSQL[key] = 50;
            } else {
                dataSQL[key] = "";
            }
        }
    }

    dataSQL.name = designer.state.checkedNode?.field;
    dataSQL.info = designer.state.checkedNode?.label;
};

/**
 * 改变“数据库”模块的字段名和注释的时候，同时修改“属性”模块中的字段名和文字
 * */
const changeName = (value, field) => {
    _setAttributeValue(value, field);
    _databaseData();
};

const _setAttributeValue = (value: any, field: string, editData = checkedNode.value) => {
    setAttributeValue(value, field, editData!);
};

/**
 * 保存当前组件的字段属性到整个设计器的字段属性
 * */
const _databaseData = () => {
    setdataSource(dataSQL, templateID.value, dataSource.value);
};

/**
 * 深拷贝
 * 参数：obj
 * */
// function deepCopy(obj) {
//     if (typeof obj !== "object" || obj === null) {
//         return obj;
//     }
//     let copy = Array.isArray(obj) ? [] : {};
//     for (const key in obj) {
//         if (obj.hasOwnProperty(key)) {
//             copy[key] = deepCopy(obj[key]);
//         }
//     }
//     return copy;
// }

/**
 * 改变了dataSQL
 * */
const changeSQL = () => {
    _databaseData();
};
</script>
<style scoped>
.dataView_box {
    padding: 2px;
}
.dataView_box p {
    padding: 0;
    margin: 17px 0;
    font-size: 14px;
}
.dataView_box .card_box {
    padding: 5px 15px;
    border-radius: 10px;
}
</style>
