<template>
    <div
        :id="id"
        class="hc-table-form-components-box"
        :data-key="keyname"
        :data-index="`${trindex || ''}_${tdindex || ''}`"
        :data-x1="x1"
        :data-x2="x2"
        :data-y1="y1"
        :data-y2="y2"
        :data-tr="trindex"
        :data-td="tdindex"
        :data-name="name"
        :data-text="placeholder"
        :data-type="typeName"
        :data-rows="rows"
        :data-format="valueFormat || format"
        :data-weighing="weighing"
        :data-label="label"
        :data-value="value"
        :data-src="src"
        :data-val="val"
        :data-contractid="contractid"
        :data-pkeyid="pkeyid"
        :data-objs="objsData"
        :data-multiple="multiple"
        :data-range="rangeSeparator"
        :data-def="deftext"
        :data-max="maxlength"
        :data-tip="tip"
    >
        <!-- <span class="name-placeholder">{{ name || placeholder }}</span> -->
        <span class="name-placeholder">{{
            isShowName ? placeholder : name
        }}</span>
        <i class="i-iconoir-warning-triangle-solid warning-icon" />
        <div v-if="isSlots" class="slot-content">
            <slot />
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, useSlots } from "vue";
import { isNullES } from "js-fast-way";
import { useAppStore } from "~src/store";
const store = useAppStore();

const props = defineProps({
    type: [String, Number],
    placeholder: [String, Number],
    trindex: [String, Number],
    tdindex: [String, Number],
    x1: [String, Number],
    x2: [String, Number],
    y1: [String, Number],
    y2: [String, Number],
    rows: [String, Number],
    format: [String, Number],
    valueFormat: [String, Number],
    keyname: [String, Number],
    id: [String, Number],
    label: [String, Number],
    value: [String, Number],
    weighing: [String, Number],
    src: [String, Number],
    val: [String, Number],
    contractid: [String, Number],
    pkeyid: [String, Number],
    objs: Array,
    multiple: [Boolean],
    rangeSeparator: [String, Number],
    deftext: [String, Number],
    maxlength: [String, Number],
    tip: [String, Number],
});

const objsData = ref("");
const isShowName = ref(store.getIsShowName);
//渲染完成
onMounted(() => {
    if (props.multiple) {
        typeName.value = "multiple_select";
    } else {
        typeName.value = props.type;
    }
    if (!isNullES(props.objs)) {
        objsData.value = JSON.stringify(props.objs);
    }
    matchingType();
});

//匹配组件类型
const name = ref("");
const typeName = ref("");
const typeObj = {
    text: "输入框",
    select: "下拉框",
    multiple_select: "多选下拉框",
    select_option: "下拉框选项",
    textarea: "多行输入框",
    checkbox_group: "多选框组",
    form_checkbox: "多选框组合",
    checkbox: "多选框",
    radio_group: "单选框组",
    radio: "单选框",
    date: "日期框",
    time: "时间框",
    datetime: "日期时间框",
    datetimerange: "日期时间范围框",
    dap_site_data: "远程搜索框",
    strength_search: "设计强度搜索框",
    upload: "图片展示以及上传框",
    echart: "图表组件",
};
const matchingType = () => {
    if (isNullES(typeName.value)) return;
    name.value = typeObj[typeName.value];
};

//判断插槽是否有内容
const slots = useSlots();
const isSlots = !!slots.default;
</script>

<style scoped lang="scss">
.hc-table-form-components-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    color: #606266;
    cursor: pointer;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    transition: border 0.2s;
    font-size: 14px;
    height: 100%;
    .name-placeholder {
        display: block;
        pointer-events: none;
    }
    .warning-icon {
        display: none;
        color: #101010;
        font-size: 18px;
        pointer-events: none;
    }
    .slot-content {
        display: none;
        pointer-events: none;
    }
    &:hover {
        background: #eddac4;
    }
    &.cur {
        border-color: #1682f1;
        background: #eddac4;
    }
}
</style>
