<template>
    <hc-drawer
        v-model="isShow"
        ui="hc-project-list-adjust-excel-drawer"
        to-id="hc-layout-box"
        is-close
        @close="drawerClose"
    >
        <hc-page-split :fold="false" :options="splitOptions">
            <template #left>
                <hc-card
                    :title="`【调整表单】${
                        type == 2 ? dataInfo.title : dataInfo.tableName
                    }`"
                >
                    <hc-table-form
                        ref="excelRef"
                        :html="excelHtml"
                        @tap="excelClick"
                    />
                </hc-card>
            </template>
            <hc-card ui="hc-project-list-adjust-excel-card" scrollbar>
                <template #header>
                    <el-segmented v-model="tabsKey" :options="tabsProps" />
                </template>
                <HcSetInput
                    v-if="tabsKey === 'tab1'"
                    ref="setInputRef"
                    :info="dataInfo"
                    @finish="getDataApi"
                />
                <HcSetEVisa
                    v-if="tabsKey === 'tab2'"
                    ref="setEVisaRef"
                    :info="dataInfo"
                    @finish="getDataApi"
                    :type="type"
                />
                <HcSetFormula
                    v-if="tabsKey === 'tab3'"
                    ref="setFormulaRef"
                    :info="dataInfo"
                    @finish="getDataApi"
                />
                <HcSetDefault
                    v-if="tabsKey === 'tab4'"
                    ref="setDefaultRef"
                    :info="dataInfo"
                    @finish="getDataApi"
                    :type="2"
                />
                <HcSetPrompt
                    v-if="tabsKey === 'tab5'"
                    ref="setPromptRef"
                    :info="dataInfo"
                    @finish="getDataApi"
                    :type="2"
                />
            </hc-card>
        </hc-page-split>
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from "vue";
import { getObjValue, isNullES } from "js-fast-way";
import HcSetInput from "./adjust-excel/set-input.vue";
import HcSetEVisa from "./adjust-excel/set-e-visa.vue";
import HcSetFormula from "./adjust-excel/set-formula.vue";
import HcSetDefault from "./adjust-excel/set-default.vue";
import HcSetPrompt from "./adjust-excel/set-prompt.vue";
import excelApi from "~api/exctab/exceltab";

import { useAppStore } from "~src/store";
const store = useAppStore();
const props = defineProps({
    info: {
        type: Object,
        default: () => ({}),
    },
    type: {
        type: [String, Number],
        default: "", //默认没有，独立表单库类型为2
    },
});

//事件
const emit = defineEmits(["close"]);

//双向绑定
const isShow = defineModel("modelValue", {
    default: false,
});

//监听数据
const dataInfo = ref(props.info);
const type = ref(props.type);
watch(
    () => [props.info, props.type],
    ([data, tpe]) => {
        dataInfo.value = getObjValue(data);

        type.value = tpe;
    },
    { immediate: true, deep: true }
);

//监听显示
watch(isShow, (val) => {
    if (val) getDataApi();
    store.setIsShowName(false);
});

//页面分割
const splitOptions = { sizes: [70, 30], snapOffset: 0, minSize: [300, 300] };

//选项卡
const tabsKey = ref("tab1");
const tabsProps = [
    { label: "输入框", value: "tab1" },
    { label: "电签位置", value: "tab2" },
    { label: "公式条件", value: "tab3" },
    { label: "默认信息", value: "tab4" },
    { label: "提示信息", value: "tab5" },
];

//处理相关数据
const excelRef = ref(null);
const excelHtml = ref("");
const getDataApi = async () => {
    const { pkeyId, excelId, primaryKeyId, excelIds } = getObjValue(
        dataInfo.value
    );
    if (type.value !== 2) {
        if (isNullES(pkeyId) || isNullES(excelId)) {
            tableFormLoading.value = false;
            window?.$message.warning("表单值异常，请联系管理员");
            return;
        }
    } else {
        if (isNullES(primaryKeyId) || isNullES(excelIds)) {
            tableFormLoading.value = false;
            window?.$message.warning("表单值异常，请联系管理员");
            return;
        }
    }
    const { data } = await excelApi.getExcelHtml({
        pkeyId: pkeyId ? pkeyId : primaryKeyId,
    });
    excelHtml.value = data || "";
};

//ref
const setInputRef = ref(null);
const setEVisaRef = ref(null);
const setFormulaRef = ref(null);
const setDefaultRef = ref(null);
const setPromptRef = ref(null);

//框框被点击
const keys = [
    "type",
    "key",
    "tr",
    "td",
    "index",
    "x1",
    "y1",
    "x2",
    "y2",
    "name",
    "text",
    "rows",
    "format",
    "tip",
    "weighing",
    "label",
    "value",
    "src",
    "val",
    "contractid",
    "pkeyid",
    "objs",
    "range",
    "def",
    "max",
];
const excelClick = async (item) => {
    const dom = item?.target;
    let obj = { zdom: item };
    for (let i = 0; i < keys.length; i++) {
        obj[keys[i]] = await getAttribute(dom, keys[i]);
    }
    if (tabsKey.value === "tab1") {
        //设置输入框
        setInputRef.value?.setDomData(obj);
    } else if (tabsKey.value === "tab2") {
        //电签
        setEVisaRef.value?.setDomData(obj);
    } else if (tabsKey.value === "tab4") {
        //默认信息
        setDefaultRef.value?.setDomData(obj);
    } else if (tabsKey.value === "tab5") {
        //提示信息
        setPromptRef.value?.setDomData(obj);
    }
};

//获取属性
const getAttribute = async (dom, key) => {
    try {
        return dom?.getAttribute(`data-${key}`);
    } catch (e) {
        return null;
    }
};

//关闭抽屉
const drawerClose = () => {
    isShow.value = false;
    emit("close");
};
</script>

<style lang="scss">
.el-overlay .el-drawer.hc-project-list-adjust-excel-drawer {
    background-color: #f1f5f8;
    .hc-table-form-data-item {
        padding: 0;
    }
    .hc-table-form-data-item .hc-excel-table-form {
        background: #e4e7eb;
    }
    .el-card.hc-card-box.hc-new-card-box.hc-project-list-adjust-excel-card
        .el-scrollbar__bar.is-vertical {
        right: -8px;
    }
}
</style>
