<template>
    <div class="w h">
        <el-form :model="form" label-width="80">
            <common-content-top :value="form.content_top"></common-content-top>
            <div class="divider-line"></div>
            <card-container>
                <div class="mb-12">展示风格</div>
                <el-form-item label="选择风格" label-width="60">
                    <div class="flex align-c flex-wrap gap-10">
                        <div v-for="(item, index) in style_list" :key="index" :class="['flex-item', {'flex-item-actived': form.style_actived === index }]" @click="style_click(index)">
                            <icon :name="item" :color="`${ form.style_actived === index ? '#E1EEF9' : '#EDEDED'}`" size="30"></icon>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="容器高度" label-width="60">
                    <slider v-model="form.container_height" :min="30" :max="1000" @update:model-value="handleResize"></slider>
                </el-form-item>
            </card-container>
            <div class="bg-f5 divider-line" />
            <card-container>
                <div class="mb-12 flex-row jc-sb align-c">
                    展示设置
                    <template v-if="form.style_actived === 9">
                        <el-radio-group v-model="form.magic_cube_density" @change="density_change">
                            <el-radio-button label="4X4" :value="4" />
                            <el-radio-button label="6X6" :value="6" />
                            <el-radio-button label="8X8" :value="8" />
                        </el-radio-group>
                    </template>
                </div>
                <el-form-item label-width="0" class="show-config">
                    <!-- 风格9 -->
                    <template v-if="form.style_actived == 7">
                        <div class="flex-row align-c jc-c gap-2 style-size flex-wrap">
                            <div v-for="(item, index) in form.data_magic_list" :key="index" :class="['bg-f5 oh', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)">
                                <div class="cube-selected-text">
                                    <template v-if="[0, 1].includes(index)">建议195 x {{ Math.round(form.container_height / 2) }}px</template> 
                                    <template v-else>建议130 x {{ Math.round(form.container_height / 2) }}px</template>
                                    <div>{{ data_title(item) }}</div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <magic-cube :key="form.style_actived" :list="form.data_magic_list" :flag="form.style_actived == 9" :magic-cube-density="form.magic_cube_density" :cube-width="cubeWidth" :count-height="form.container_height" type="data" :cube-height="cubeHeight" :default-content="data_content" :default-style="data_style" @selected_click="selected_click"></magic-cube>
                    </template>
                </el-form-item>
            </card-container>
            <!-- 内容和样式组件 -->
            <template v-if="!isEmpty(form.data_magic_list[selected_active])">
                <div class="bg-f5 divider-line" />
                <el-tabs v-model="tabs_name" class="content-tabs">
                    <el-tab-pane label="内容设置" name="content">
                        <tabs-content :value="form.data_magic_list[selected_active].data_content"></tabs-content>
                    </el-tab-pane>
                    <el-tab-pane label="样式设置" name="styles">
                        <tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content"></tabs-styles>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
const props = defineProps({
    value: {
        type: Object,
        default: () => {},
    },
});
// 风格数组
const style_list = ['magic-w-2', 'magic-h-2', 'magic-t2-b1', 'magic-t1-b2', 'magic-l1-r2', 'magic-l2-r1', 'magic-2x2', 'magic-t2-b3', 'magic-l1-rt1-rb2', 'magic-4x4'];
// 每个小模块独立的样式
const data_style = {
    chunk_padding: {
        padding: 0,
        padding_top: 20, 
        padding_bottom: 20, 
        padding_left: 15,
        padding_right: 15,
    },
    chunk_margin: {
        margin: 0,
        margin_bottom: 0,
        margin_left: 0,
        margin_right: 0,
        margin_top: 0
    },
    color_list: [{ color: '#FFD9C3', color_percentage: 0 }, { color: '#FFECE2', color_percentage: 12 }, { color: '#FFFFFF', color_percentage: 30 }],
    direction: '180deg',
    background_img_style: '2',
    background_img: [],
    data_common_style: {
        // 边框样式
        border_is_show: '0',
        border_color: '#FF3F3F',
        border_style: 'solid',
        border_size: {
            padding: 1,
            padding_top: 1,
            padding_right: 1,
            padding_bottom: 1,
            padding_left: 1,
        },
        // 阴影
        box_shadow_color: '',
        box_shadow_x: 0,
        box_shadow_y: 0,
        box_shadow_blur: 0,
        box_shadow_spread: 0,
    },
    carouselKey: get_math(),
    is_roll: '0',
    rolling_fashion: 'cut-screen',
    rotation_direction: 'horizontal',
    interval_time: 3,
    title_gap: 5,
    title_data_gap: 10,
    heading_color: '#000',
    heading_typeface: '400',
    heading_size: 20,
    heading_img_height: 28,
    subtitle_color: '#FF852A',
    subtitle_typeface: '400',
    subtitle_size: 14,
    subtitle_img_height: 28,
    goods_title_typeface: 'bold',
    goods_title_size: 14,    
    goods_title_color: "#333333",
    goods_price_typeface: 'bold',
    goods_price_size: 18,
    goods_price_color: "#EA3323;",
    goods_color_list: [{ color: '', color_percentage: undefined }],
    goods_direction: '180deg',
    goods_background_img_style: '2',
    goods_background_img: [],
    goods_chunk_margin: {
        margin: 0,
        margin_top: 0,
        margin_bottom: 0,
        margin_left: 0,
        margin_right: 0,
    },
    goods_chunk_padding: {
        padding: 0,
        padding_top: 0, 
        padding_bottom: 0, 
        padding_left: 0,
        padding_right: 0,
    },
    goods_radius: {
        radius: 4,
        radius_top_left: 4,
        radius_top_right: 4,
        radius_bottom_left: 4,
        radius_bottom_right: 4,
    },
    goods_price_symbol_size: 9,
    goods_price_symbol_color: "#EA3323;",
    goods_price_unit_size: 9,
    goods_price_unit_color: "#EA3323;",
    goods_price_location: 'center',
    goods_price_color_list: [{ color: '#fff', color_percentage: undefined }],
    goods_price_direction: '180deg',
    goods_price_background_img_style: '2',
    goods_price_background_img: [],
    goods_price_margin: {
        margin: 0,
        margin_top: 0,
        margin_bottom: 4,
        margin_left: 0,
        margin_right: 0,
    },
    goods_price_padding: {
        padding: 0,
        padding_top: 0,
        padding_bottom: 0,
        padding_left: 10,
        padding_right: 10,
    },
    goods_price_radius: {
        radius: 4,
        radius_top_left: 4,
        radius_top_right: 4,
        radius_bottom_left: 4,
        radius_bottom_right: 4,
    },
    // 边框样式
    border_is_show: '0',
    border_color: '#FF3F3F',
    border_style: 'solid',
    border_size: {
        padding: 1,
        padding_top: 1,
        padding_right: 1,
        padding_bottom: 1,
        padding_left: 1,
    },
    // 阴影
    box_shadow_color: '',
    box_shadow_x: 0,
    box_shadow_y: 0,
    box_shadow_blur: 0,
    box_shadow_spread: 0,
    // 图片圆角
    img_radius: {
        radius: 4,
        radius_top_left: 4,
        radius_top_right: 4,
        radius_bottom_left: 4,
        radius_bottom_right: 4,
    },
    is_show: '1',
    data_goods_gap: 10,
    data_color_list: [{ color: '', color_percentage: undefined }],
    data_direction: '180deg',
    data_background_img_style: '2',
    data_background_img: [],
    data_chunk_margin: {
        margin: 0,
        margin_top: 0,
        margin_bottom: 0,
        margin_left: 0,
        margin_right: 0,
    },
    data_chunk_padding: {
        padding: 0,
        padding_top: 0, 
        padding_bottom: 0, 
        padding_left: 0,
        padding_right: 0,
    },
    data_radius: {
        radius: 4,
        radius_top_left: 4,
        radius_top_right: 4,
        radius_bottom_left: 4,
        radius_bottom_right: 4,
    },
    data_content_style: {
        color_list: [{ color: '', color_percentage: undefined }],
        direction: '180deg',
        background_img_style: '2',
        background_img: [],
        radius: 0,
        radius_top_left: 0,
        radius_top_right: 0,
        radius_bottom_left: 0,
        radius_bottom_right: 0,
        padding: 0,
        padding_top: 0,
        padding_bottom: 0,
        padding_left: 0,
        padding_right: 0,
        margin: 0,
        margin_top: 0,
        margin_bottom: 0,
        margin_left: 0,
        margin_right: 0,
        // 边框样式
        border_is_show: '0',
        border_color: '#FF3F3F',
        border_style: 'solid',
        border_size: {
            padding: 1,
            padding_top: 1,
            padding_right: 1,
            padding_bottom: 1,
            padding_left: 1,
        },
        // 阴影
        box_shadow_color: '',
        box_shadow_x: 0,
        box_shadow_y: 0,
        box_shadow_blur: 0,
        box_shadow_spread: 0,
    },
    data_pattern: {
        // 边框样式
        border_is_show: '0',
        border_color: '#FF3F3F',
        border_style: 'solid',
        border_size: {
            padding: 1,
            padding_top: 1,
            padding_right: 1,
            padding_bottom: 1,
            padding_left: 1,
        },
        // 阴影
        box_shadow_color: '',
        box_shadow_x: 0,
        box_shadow_y: 0,
        box_shadow_blur: 0,
        box_shadow_spread: 0,
    },
    column_gap: 0,
    row_gap: 0,
    indicator_style: 'dot',
    indicator_new_location: 'bottom',
    indicator_location: 'center',
    indicator_size: 5,
    indicator_bottom: 6,
    indicator_radius: {
        radius: 4,
        radius_top_left: 4,
        radius_top_right: 4,
        radius_bottom_left: 4,
        radius_bottom_right: 4,
    },
    actived_color: '#2A94FF',
    color: '#DDDDDD',
}
// 每个小模块独立的内容
const data_content = {
    // 列表数据类型
    data_type: 'goods',
    // 主标题副标题处理
    heading_title_type: 'text',
    heading_title: '主标题',
    heading_title_img: [],
    subtitle_title_type:'text',
    subtitle: '副标题',
    subtitle_title_img: [],
    // 商品数据处理
    goods_list:[],
    goods_ids: '',
    goods_outerflex: 'row',
    goods_flex: 'row',
    goods_num: 1,
    image_scale: 50,
    is_show: ['title', 'price'],
    // 图片数据处理
    img_fit: 'cover',
    images_list:[
        {
            carousel_img: [],
            carousel_link: {},
        }
    ],
    // 自定义数据处理
    // 容器的基础高度
    height: 150,
    // 容器基础的宽度
    width: 0,
    data_source_is_loop: '1',
    // 手动模式下的唯一标识
    show_data: {
        data_key: 'id',
        data_name: 'name'
    },
    // 是否是自定义数据类型
    is_custom_data: '0',
    // 数据源类型 商品(goods) 文章(article) 品牌(brand) 用户信息(user-info)
    data_source:'',
    // 铺满方式 vertical 纵向展示 vertical-scoll 纵向滑动 horizontal 横向滑动
    data_source_direction: 'vertical',
    // 滑动时的显示 轮播数量
    data_source_carousel_col: 1,
    // 数据源内容
    data_source_content: {
        // 存放手动输入的id
        data_ids: [],
        // 手动输入
        data_list: [],
        // 自动
        data_auto_list: [],
    },
    custom_mark_name: '',
    // 自定义内容列表
    custom_list: [],
    // 存放所有的数据字段
    field_list: [],
    //视频信息
    video: [],
    video_img: [],
}

// 不同风格的数据
const style_show_list = [
    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }], // 风格1
    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }], // 风格2
    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }],// 风格3
    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }],// 风格4
    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }],// 风格5
    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }],// 风格6
    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }],// 风格7
    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }],// 风格8
    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col_price_float', outerflex: 'col', title_text_gap: 10, width: 98 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col_price_float', outerflex: 'col', title_text_gap: 10, width: 98 }],// 风格9
    [], //风格10
]
const tabs_name = ref('content');
const state = reactive({
    form: props.value
});
const { form } = toRefs(state);
//#region 容器大小变更
const cubeWidth = ref(400);
const cubeHeight = ref(400);
const style_width = computed(() => cubeWidth.value + 'px');
const style_height = computed(() => cubeHeight.value + 'px');

onBeforeMount(() => {
    if (isEmpty(form.value.data_magic_list)) {
        form.value.data_magic_list = magic_list(form.value?.style_actived || 0);
    } else {
        // 历史数据处理一下，避免有新增字段导致报错
        form.value.data_magic_list.forEach((item: any) => {
            item.data_style = Object.assign({}, cloneDeep(data_style), item.data_style);
            item.data_style.data_content_style = Object.assign({}, cloneDeep(data_style.data_content_style), item.data_style.data_content_style);
            item.data_content = Object.assign({}, cloneDeep(data_content), item.data_content);
        });
    }
})
onMounted(() => {
    handleResize();
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
    if (window.innerWidth <= 1560) {
        const sales = 330 / 390;
        cubeWidth.value = 330;
        cubeHeight.value = form.value.container_height * sales;
    } else {
        cubeWidth.value = 390;
        cubeHeight.value = form.value.container_height;
    }
}
//#endregion
//#region 选中切换数据
const selected_active = ref(0);
// 切换风格
const style_click = (index: number) => {
    form.value.style_actived = index;
    if (index !== 9) {
        form.value.magic_cube_density = 4;
        form.value.data_magic_list = magic_list(index);
    } else {
        form.value.data_magic_list = [];
    }
    selected_active.value = 0;
    tabs_name.value = 'content';
    handleResize();
}
// 规整复制的数据
const magic_list = (index: number) => {
    return cloneDeep(style_show_list[index]).map((item, map_index) => ({
        ...item,
        actived_index: 0,
        data_content: {
            ...cloneDeep(data_content),
            width: item.width,
            heading_title: module_7_handle(index, map_index) ? '' : data_content.heading_title,
            subtitle: module_7_handle(index, map_index) ? '' : data_content.subtitle,
            goods_outerflex: item.outerflex,
            goods_flex: item.flex,
            goods_num: item.num,
            image_scale: form.value.style_actived == 9 ? 30 : data_content.image_scale, // 风格9的时候是30%，其他都是50%
        },
        data_style: {
            ...cloneDeep(data_style),
            title_data_gap: item.title_text_gap,
            goods_price_size: different_styles(index, map_index) ? 12 : 18,
            chunk_padding: {
                padding: different_styles(index, map_index) ? 10 :  module_7_handle(index, map_index) ? 0 : 0,
                padding_top: different_styles(index, map_index) ? 10 : module_7_handle(index, map_index) ? 0 : 20,
                padding_bottom: different_styles(index, map_index) ? 10 : module_7_handle(index, map_index) ? 0 : 20,
                padding_left: different_styles(index, map_index) ? 10 : module_7_handle(index, map_index) ? 0 : 15,
                padding_right: different_styles(index, map_index) ? 10 : module_7_handle(index, map_index) ? 0 : 15,
            },
            goods_chunk_padding: {
                padding: module_7_handle(index, map_index) ? 10 : 0,
                padding_top: module_7_handle(index, map_index) ? 10 : 0,
                padding_bottom: module_7_handle(index, map_index) ? 10 : 0,
                padding_left: module_7_handle(index, map_index) ? 10 : 0,
                padding_right: module_7_handle(index, map_index) ? 10 : 0,
            },
            carouselKey: get_math(),
        }
    }));
}

// 选中风格内不同的块
const selected_click = (index: number) => {
    selected_active.value = index;
    tabs_name.value = 'content';
}
const padding_handle = [
    { index: 2, index_index: [0 , 1] },
    { index: 3, index_index: [1 , 2] },
    { index: 4, index_index: [1 , 2] },
    { index: 5, index_index: [0, 1] }, 
    { index: 6, index_index: [0, 1, 2, 3] },
    { index: 7, index_index: [0, 1] },
    { index: 8, index_index: [1, 2, 3] },
]
const different_styles = (index:number, map_index:number) => {
    const list = padding_handle.filter(item => item.index == index && item.index_index.includes(map_index))
    if (list.length > 0) {
        return true;
    }
    return false;
}

const module_7_handle = (index:number, map_index:number) => {
    return index == 7 && ![0, 1].includes(map_index);
}
// 密度切换时情况数据
const density_change = () => {
    form.value.data_magic_list = [];
}
//#endregion
const data_title = (item: any) => {
    let title = `共有`;
    if (item.data_content) {
        if (item.data_content.data_type == 'goods') {
            title += `${ item.data_content.goods_list.length }个商品`;
        } else {
            title += `${ item.data_content.images_list.length }个图片`;
        }
    }
    return title;
};
</script>
<style lang="scss" scoped>
.flex-item {
    width: 4.7rem;
    height: 4.7rem;
    background: #F7F7F7;
    border-radius: 0.4rem;
    border: 1px solid #E4E4E4;
    padding: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-item-actived {
    background: #F5F9FF;
    border-radius: 4px;
    border: 1px solid #2A94FF;
}
.show-config {
    :deep(.el-form-item__content) {
        justify-content: center;
    }
}
.style-size {
    width: v-bind(style_width);
    height: v-bind(style_height);
    .style9-top {
        width: calc(50% - 0.2rem);
        height: 50%;
        position: relative;
    }
    .style9-bottom {
        width: calc(33% - 0.1rem);
        height: 50%;
        position: relative;
    }
}
.cube-selected-active {
    border: 1px solid $cr-primary;
}
.cube-selected-text {
    font-size: 12px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    color: $cr-primary;
}
:deep(.el-tabs.content-tabs) {
    .el-tabs__header.is-top {
        background: #fff;
        margin: 0;
        padding-top: 2rem;
    }
    .el-tabs__item.is-top {
        padding: 0;
        align-items: center;
        width: 10rem;
        font-size: 1.4rem;
    }
    .el-tabs__active-bar{
        width: 100%;
    }
}
</style>
