<template>
    <div :style="style_container">
        <div class="flex-col" :style="style_img_container">
            <div class="oh" :style="tabs_container">
                <div class="oh" :style="tabs_img_container">
                    <tabs-view ref="tabs" :value="props.value" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
                </div>
            </div>
            <div class="oh" :style="ask_container">
                <div class="oh" :style="ask_img_container">
                    <model-ask :value="tabs_list" :is-common-style="false"></model-ask>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { background_computer, border_computer, box_shadow_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { cloneDeep } from 'lodash';

const props = defineProps({
    value: {
        type: Object,
        default: () => {
            return {};
        },
    },
});

const style_container = ref('');
const style_img_container = ref('');
const tabs_list = ref({});
const tabs_active_index = ref(0);
// 选项卡内容样式设置
const tabs_container = ref('');
const tabs_img_container = ref('');
// 商品区域样式设置
const ask_container = ref('');
const ask_img_container = ref('');
// 打开滑动固定开关之后，显示的样式
const tabs_sliding_fixed_bg = ref('');
watch(
    () => props.value,
    (val) => {
        const new_val = cloneDeep(val);
        const new_style = new_val?.style;
        let new_data = new_val;
        tabs_active_index.value = new_data.content.tabs_active_index;
        // 选项卡背景设置
        const tabs_data = {
            color_list: new_style.tabs_bg_color_list,
            direction: new_style.tabs_bg_direction,
            background_img_style: new_style.tabs_bg_background_img_style,
            background_img: new_style.tabs_bg_background_img,
        }
        tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + border_computer(new_style.tabs_content) + box_shadow_computer(new_style.tabs_content);
        tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
        // 商品区域背景设置
        const ask_content_data = {
            color_list: new_style.ask_content_color_list,
            direction: new_style.ask_content_direction,
            background_img_style: new_style.ask_content_background_img_style,
            background_img: new_style.ask_content_background_img,
        }
        ask_container.value = gradient_computer(ask_content_data) + margin_computer(new_style.ask_content_margin) + radius_computer(new_style.ask_content_radius) + border_computer(new_style.ask_content) + box_shadow_computer(new_style.ask_content);
        ask_img_container.value = background_computer(ask_content_data) + padding_computer(new_style.ask_content_padding);
        // 当前数组对应的值
        const new_tabs_data = new_data.content.tabs_list[tabs_active_index.value] || {};
        // 产品的值
        new_data.content.data_type = new_tabs_data.data_type;
        new_data.content.data_list = new_tabs_data.data_list;
        new_data.content.data_auto_list = new_tabs_data.data_auto_list;
        new_data.content.keywords = new_tabs_data.keywords;
        new_data.content.category_ids = new_tabs_data.category_ids;
        new_data.content.number = new_tabs_data.number;
        new_data.content.order_by_type = new_tabs_data.order_by_type;
        new_data.content.order_by_rule = new_tabs_data.order_by_rule;
        new_data.content.is_reply = new_tabs_data.is_reply;
        tabs_list.value = new_data;
        // 公共样式
        style_container.value += common_styles_computer(new_style.common_style);
        style_img_container.value = common_img_computer(new_style.common_style) + `gap: ${new_style.ask_content_spacing}px;`;
    },
    { immediate: true, deep: true }
);
</script>
<style lang="scss" scoped></style>