<template >
    <div class="_fc-l-item1" v-for="(item, index) in patternList" :key="index" :class="bindActiveStyle(item)" :style="setSelectStyle(item)">
        <div class="_fc-l-icon1" v-if="item.type=='color'">
            <!-- 特定下拉菜单颜色选择器 -->
            <el-dropdown class="user panel-item" trigger="click" style="color:black;">
                <div class="user-avatar">
                    <el-icon :size="25" :title="$t(item.title)"><sc-icon-color /></el-icon>
                </div>
                <template #dropdown >
                    <el-divider style="margin: 15px 0;font-weight:600;color:black; ">{{ $t("reportDesigner.mainTitleColor") }}</el-divider>
                    <el-dropdown-menu style="padding:0px;">
					    <el-dropdown-item style="padding: 1px 10px;margin-top:-3px;">
                            <el-form >
                                <el-row :gutter="15" style="width:100%;margin-left:-5px;margin-right: 0px;padding-left: 5px;padding-right: 5px;margin-top:-3px;">
                                    <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                        <el-form-item class="fontColor" style="background: #EEECE1;" @click="chooseSpeicalColor('#EEECE1')"></el-form-item>
                                    </el-col>
                                    <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                        <el-form-item class="fontColor" style="background: #1F497D;" @click="chooseSpeicalColor('#1F497D')"></el-form-item>
                                    </el-col>
                                    <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                        <el-form-item class="fontColor" style="background: #4F81BD;" @click="chooseSpeicalColor('#4F81BD')"></el-form-item>
                                    </el-col>
                                    <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                        <el-form-item class="fontColor" style="background: #C0504D;" @click="chooseSpeicalColor('#C0504D')"></el-form-item>
                                    </el-col>
                                    <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                        <el-form-item class="fontColor" style="background: #9BBB59;" @click="chooseSpeicalColor('#9BBB59')"></el-form-item>
                                    </el-col>
                                    <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                        <el-form-item class="fontColor" style="background: #8064A2;"  @click="chooseSpeicalColor('#8064A2')"></el-form-item>
                                    </el-col>
                                    <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                        <el-form-item class="fontColor" style="background: #4BACC6;" @click="chooseSpeicalColor('#4BACC6')"></el-form-item>
                                    </el-col>
                                    <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                        <el-form-item class="fontColor" style="background: #F79646;" @click="chooseSpeicalColor('#F79646')"></el-form-item>
                                    </el-col>
                                </el-row>    
                            </el-form>
                        </el-dropdown-item>
					    <el-dropdown-item style="padding: 1px 10px;">
                            <el-form >
                            <el-row :gutter="15" style="width:100%;margin-left:-5px;margin-right: 0px;padding-left: 5px;padding-right: 5px;">
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #DDD9C3;" @click="chooseSpeicalColor('#DDD9C3')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #D2DAE5;" @click="chooseSpeicalColor('#D2DAE5')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #DBE5F1;" @click="chooseSpeicalColor('#DBE5F1')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #F2DCDB;" @click="chooseSpeicalColor('#F2DCDB')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #EBF1DD;" @click="chooseSpeicalColor('#EBF1DD')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #E5E0EC;" @click="chooseSpeicalColor('#E5E0EC')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #DBEEF3;" @click="chooseSpeicalColor('#DBEEF3')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #FDEADA;" @click="chooseSpeicalColor('#FDEADA')"></el-form-item>
                                </el-col>
                            </el-row>    
                            </el-form >
                        </el-dropdown-item>
                        <el-dropdown-item style="padding: 1px 10px;">
                            <el-form >
                            <el-row :gutter="15" style="width:100%;margin-left:-5px;margin-right: 0px;padding-left: 5px;padding-right: 5px;">
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #C3BC96;" @click="chooseSpeicalColor('#C3BC96')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #A5B6CB;" @click="chooseSpeicalColor('#A5B6CB')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #B8CCE4;" @click="chooseSpeicalColor('#B8CCE4')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #E5B9B7;" @click="chooseSpeicalColor('#E5B9B7')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #D7E3BC;" @click="chooseSpeicalColor('#D7E3BC')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #CCC1D9;" @click="chooseSpeicalColor('#CCC1D9')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #B7DDE8;" @click="chooseSpeicalColor('#B7DDE8')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #FBD5B5;" @click="chooseSpeicalColor('#FBD5B5')"></el-form-item>
                                </el-col>
                            </el-row>    
                            </el-form>
                        </el-dropdown-item>
                        <el-dropdown-item style="padding: 1px 10px;">
                            <el-form >
                             <el-row :gutter="15" style="width:100%;margin-left:-5px;margin-right: 0px;padding-left: 5px;padding-right: 5px;">
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #998D4B;" @click="chooseSpeicalColor('#998D4B')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #7891B1;" @click="chooseSpeicalColor('#7891B1')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #95B3D7;" @click="chooseSpeicalColor('#95B3D7')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #D99694;" @click="chooseSpeicalColor('#D99694')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #C3D69B;" @click="chooseSpeicalColor('#C3D69B')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #B2A2C7;" @click="chooseSpeicalColor('#B2A2C7')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #93CDDC;" @click="chooseSpeicalColor('#93CDDC')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #FAC090;" @click="chooseSpeicalColor('#FAC090')"></el-form-item>
                                </el-col>
                            </el-row>
                            </el-form >
                        </el-dropdown-item>
                        <el-dropdown-item style="padding: 1px 10px;">
                            <el-form >
                            <el-row :gutter="15" style="width:100%;margin-left:-5px;margin-right: 0px;padding-left: 5px;padding-right: 5px;">
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #4C4625;" @click="chooseSpeicalColor('#4C4625')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #18375E;" @click="chooseSpeicalColor('#18375E')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #3C618E;" @click="chooseSpeicalColor('#3C618E')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #903C3A;" @click="chooseSpeicalColor('#903C3A')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #758D43;" @click="chooseSpeicalColor('#758D43')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #604B7A;" @click="chooseSpeicalColor('#604B7A')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #398195;" @click="chooseSpeicalColor('#398195')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #BA7135;" @click="chooseSpeicalColor('#BA7135')"></el-form-item>
                                </el-col>
                            </el-row>
                            </el-form>
                        </el-dropdown-item>
                        <el-dropdown-item style="padding: 1px 10px;">
                            <el-form >
                            <el-row :gutter="15" style="width:100%;margin-left:-5px;margin-right: 0px;padding-left: 5px;padding-right: 5px;">
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #19170C;" @click="chooseSpeicalColor('#19170C')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #10243E;" @click="chooseSpeicalColor('#10243E')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #28405E;" @click="chooseSpeicalColor('#28405E')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #602826;" @click="chooseSpeicalColor('#602826')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #4E5E2C;" @click="chooseSpeicalColor('#4E5E2C')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #403251;" @click="chooseSpeicalColor('#403251')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #265663;" @click="chooseSpeicalColor('#265663')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #7C4B23;" @click="chooseSpeicalColor('#7C4B23')"></el-form-item>
                                </el-col>
                            </el-row>
                            </el-form>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                    <el-divider style="margin: 15px 0;font-weight:600;color:black;">标准色</el-divider>
                    <el-dropdown-menu style="padding:0px;">
					    <el-dropdown-item style="padding: 1px 10px;margin-top:-3px;">
                            <el-form >
                            <el-row :gutter="15" style="width:100%;margin-left:-5px;margin-right: 0px;padding-left: 5px;padding-right: 5px;margin-top:-3px;padding-bottom: 5px;">
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #FF0000;" @click="chooseSpeicalColor('#FF0000')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #008000;" @click="chooseSpeicalColor('#008000')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #FFFF00;" @click="chooseSpeicalColor('#FFFF00')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #0000FF;" @click="chooseSpeicalColor('#0000FF')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #A52A2A;" @click="chooseSpeicalColor('#A52A2A')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #FFA500;" @click="chooseSpeicalColor('#FFA500')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #800080;" @click="chooseSpeicalColor('#800080')"></el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" style="background: #00BDF0;" @click="chooseSpeicalColor('#00BDF0')"></el-form-item>
                                </el-col>
                            </el-row>
                            </el-form>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                    <el-divider style="margin: 15px 0;font-weight:600;color:black;">小工具</el-divider>
                    <el-dropdown-menu style="padding:0px;">
					    <el-dropdown-item style="padding: 1px 10px;margin-top:-3px;">
                            <el-form >
                            <el-row :gutter="15" style="width:100%;margin-left:-5px;margin-right: 0px;padding-left: 5px;padding-right: 5px;margin-top:-3px;padding-bottom: 5px;">
                                <el-col :span="3" style="padding-left: 0px; padding-right: 0px;">
                                    <el-form-item class="fontColor" title="自定义颜色">
                                        <el-color-picker v-model="form.color" @change="eventClick"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="3" style="padding-left: 15px; padding-right: 0px;">
                                    <el-form-item class="fontColor">
                                        <el-icon style="width:1.2em;height:1.2em;" title="移除颜色" @click="removeColor()"><sc-icon-operate-delete style="width:1.2em;height:1.2em" /></el-icon>
                                    </el-form-item>
                                </el-col>
                            </el-row>  
                            </el-form>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="_fc-l-icon1" v-else-if="item.type=='font'">
            <el-select v-model="form.font" style="width:100%" filterable @change="eventClick">
                <el-option v-for="item in fontItems" :key="item.Key" :label="item.Value" :value="item.Key" />
            </el-select>
        </div>
        <div class="_fc-l-icon1" v-else-if="item.type=='size'">
            <el-select v-model="form.size" style="width:100%" filterable @change="eventClick">
                <el-option v-for="item in sizeItems" :key="item.Key" :label="item.Value" :value="item.Key" />
            </el-select>
        </div>
        <div class="_fc-l-icon1" v-else>
            <el-icon :size="25" :title="$t(item.title)" v-if="item.type=='foldone'" @click="operateClick(item)"><sc-icon-unfoldone v-if="item.show"/><sc-icon-foldone v-else /></el-icon>
            <!-- <el-icon :size="25" :title="item.title" v-else-if="item.type=='foldone' && item.show" @click="operateClick(item)"><sc-icon-foldone /></el-icon> -->
            <el-icon :size="25" :title="$t(item.title)" v-else-if="item.type=='save'" @click="manualEventClick(5)"><sc-icon-save /></el-icon>
            <el-icon :size="25" :title="$t(item.title)" v-else-if="item.type=='preview'" @click="manualEventClick(6)"><sc-icon-preview /></el-icon>
            <el-icon :size="25" :title="$t(item.title)" v-else-if="item.type=='clear'" @click="manualEventClick(7)"><sc-icon-clear /></el-icon>
            <el-icon :size="25" :title="$t(item.title)" v-else-if="item.type=='undo'" @click="manualEventClick(0)"><sc-icon-undo /></el-icon>
            <el-icon :size="25" :title="$t(item.title)" v-else-if="item.type=='goon'" @click="manualEventClick(1)"><sc-icon-goon /></el-icon>
            <el-icon :size="25" :title="$t(item.title)" v-else-if="item.type=='copy'" @click="manualEventClick(2)"><sc-icon-copy /></el-icon>
            <el-icon :size="25" :title="$t(item.title)" v-else-if="item.type=='shear'" @click="manualEventClick(3)"><sc-icon-shear /></el-icon>
            <el-icon :size="25" :title="$t(item.title)" v-else-if="item.type=='paste'" @click="manualEventClick(4)"><sc-icon-paste /></el-icon>
            <el-icon :size="25" v-model="form.strong" :title="$t(item.title)" v-else-if="item.type=='strong'" @click="otherStyleClick(item)"><sc-icon-strong /></el-icon>
            <el-icon :size="25" v-model="form.bothends" :title="$t(item.title)" v-else-if="item.type=='bothends'&&item.show" @click="otherStyleHClick(item)"><sc-icon-bothends /></el-icon>
            <el-icon :size="25" v-model="form.bottom" :title="$t(item.title)" v-else-if="item.type=='bottom'&&item.show" @click="otherStyleHClick(item)"><sc-icon-bottom /></el-icon>
            <el-icon :size="25" v-model="form.center" :title="$t(item.title)" v-else-if="item.type=='center'&&item.show" @click="otherStyleHClick(item)"><sc-icon-center /></el-icon>
            <el-icon :size="25" v-model="form.italic" :title="$t(item.title)" v-else-if="item.type=='italic'" @click="otherStyleClick(item)"><sc-icon-italic /></el-icon>
            <el-icon :size="25" v-model="form.left" :title="$t(item.title)" v-else-if="item.type=='left'&&item.show" @click="otherStyleHClick(item)"><sc-icon-left /></el-icon>&nbsp;&nbsp;&nbsp;&nbsp;
            <el-icon :size="25" v-model="form.middle" :title="$t(item.title)" v-else-if="item.type=='middle'&&item.show" @click="otherStyleHClick(item)"><sc-icon-middle /></el-icon>
            <el-icon :size="25" v-model="form.right" :title="$t(item.title)" v-else-if="item.type=='right'&&item.show" @click="otherStyleHClick(item)"><sc-icon-right /></el-icon>
            <el-icon :size="25" v-model="form.top" :title="$t(item.title)" v-else-if="item.type=='top'&&item.show" @click="otherStyleHClick(item)"><sc-icon-top /></el-icon>
            <el-icon :size="25" v-model="form.underline" :title="$t(item.title)" v-else-if="item.type=='underline'" @click="otherStyleClick(item)"><sc-icon-underline /></el-icon>
            <el-icon :size="25" :title="$t(item.title)" v-else-if="item.type=='code'" @click="loadData()"><sc-icon-code /></el-icon>
        </div>
    </div> 
</template>

<script>
	export default {
		props: {
			config: { type: Object, default: () => {} },
		},
        emits: ['styleEventClick', 'operateEventClick', 'loadDefaultData', 'manualEventClick'],
		data() {
			return {
				renderLoading: false,
                form:{
                    font:"",
                    size:0,
                    color:'',
                    strong: false,
                    italic: false,
                    underline: false,
                    left: false,
                    right: false,
                    center: false,
                    bothends: false,
                    top: false,
                    middle: false,
                    bottom: false
                },
                fontItems:[],
                sizeItems:[],
                patternList:[]
			}
		},
        created() {
            this.onLayoutResize();
            window.addEventListener('resize', this.onLayoutResize);
        },
		watch:{
			config(){
				this.render()
			}
		},
		computed: {
			hasConfig(){
				return Object.keys(this.config).length > 0
			},
		},
		mounted() {
			if(this.hasConfig){
				this.render()
			}
		},
		methods: {
            setSelectStyle(data) {
                var styleInfo = {};
                if (data.type === 'font') {
                    styleInfo["width"] = "15%"
                }
                else if (data.type === 'size') {
                    styleInfo["width"] = "8%"
                }
                return styleInfo;
            },
            bindActiveStyle(data) {
                if (data.type === 'color' || data.type === 'font' || data.type === 'size') {
                    return "_fc-l-item1";
                }
                else {
                    if (data.value && data.show)
                    {
                        return "_fc-l-item1 _fc-l-item-G";
                    }
                    else
                    {
                        return "_fc-l-item1";
                    }
                }
            },
            onLayoutResize() {
                var asideStyle = {};
                var status = false;
                if (document.body.clientWidth < 1500) {
                    asideStyle.defaultStyle = "width:17%;min-width:330px;display:none";
                    status = false;
                }
                else{
                    asideStyle.defaultStyle = "width:17%;min-width:330px;";
                    status = true;
                }
                asideStyle.defaultScreenWidth = document.body.clientWidth;
                this.$emit("operateEventClick", null, asideStyle);
                if (this.config.assistPattern && this.config.assistPattern.length > 0)
                {
                    this.config.assistPattern.forEach(data => {
                        if (data.type === "foldone") {
                            if (!status) {
                                //点击收起按钮时，应该显示展开按钮
                                data.show = false;
                                data.title = "展开";
                                this.footerStyleEventClick(false);
                            }
                            else {
                                //点击展开按钮时，应该显示收起按钮
                                data.show = true;
                                data.title = "折叠";
                                this.footerStyleEventClick(true);
                            }
                        }
                    });
                }
            },
			render() {
                var tempList = [];
                if (this.config.fontPattern && this.config.fontPattern.length > 0)
                {
                    this.config.fontPattern.map(c => {
                        tempList.push(c);
                    });
                }
                if (this.config.assistPattern && this.config.assistPattern.length > 0)
                {
                    this.config.assistPattern.map(c => {
                        tempList.push(c);
                    });
                }
                if (this.config.basePattern && this.config.basePattern.length > 0)
                {
                    this.config.basePattern.map(c => {
                        if (c.type === "font")
                        {
                            this.fontItems = c.children;
                            this.form.font = c.value;
                        }
                        if (c.type === "size")
                        {
                            var curLanguage = this.$TOOL.data.get("APP_LANG")
                            if (curLanguage === null || curLanguage.length <= 0) {
                                curLanguage = "zh-CN";
                            }
                            if (curLanguage === "zh-CN")
                            {
                                this.sizeItems = c.childrenCN;
                            }
                            else
                            {
                                this.sizeItems = c.childrenEN;
                            }
                            this.form.size = c.value;
                        }
                        if (c.type === "color")
                        {
                            this.form.color = c.value;
                        }
                        tempList.push(c);
                    });
                }
                this.patternList = this.sortKey(tempList,"sort");
			},
            //排序
            sortKey(array,key,order) {
                 return array.sort(function(a,b){
                     var x = a[key];
                     var y = b[key];
                     if (order === "desc")
                     {
                        //倒序
                        return ((x>y)?-1:(x<y)?1:0)
                     }
                     else
                     {
                        //正序
                        return ((x<y)?-1:(x>y)?1:0)
                     }
                 })
            },
            //移除颜色
            removeColor(){
                this.form.color = "";
                this.eventClick();
            },
            //选择颜色
            chooseSpeicalColor(val)
            {
                if (val && val.length > 0)
                {
                    this.form.color = val;
                }
                this.eventClick();
            },
			//提交
			eventClick(){
				this.$emit("styleEventClick", this.form)
			},
            //其他样式的点击事件
            otherStyleClick(data){
                this.form[data.type] = !data.value;
                this.config.fontPattern.map(c=>{
                    if (c.type === data.type)
                    {
                        c.value = !data.value
                        return false;
                    }
                });
                this.eventClick();
            },
            otherStyleHClick(data){
                this.form[data.type] = !data.value;
                this.config.fontPattern.forEach(c=>{
                    if (c.group === data.group)
                    {
                        if (c.type === data.type)
                        {
                            c.value = !data.value;
                        }
                        else
                        {
                            c.value = false;
                        }
                        this.form[c.type] = c.value;
                    }
                });

                if (data.group === "horizontalAlignment") {
                    if (!this.form.left && !this.form.right && !this.form.center && !this.form.bothends) {
                        this.form.left = true;
                        this.config.fontPattern.some(c => { 
                            if (c.group === data.group)
                            {
                                if (c.type === "left")
                                {
                                    c.value = true;
                                    return true;
                                }
                            }
                        });
                    }
                }
                if (data.group === "verticalAlignment") {
                    if (!this.form.top && !this.form.middle && !this.form.bottom) {
                        this.form.middle = true;
                        this.config.fontPattern.some(c => { 
                            if (c.group === data.group)
                            {
                                if (c.type === "middle")
                                {
                                    c.value = true;
                                    return true;
                                }
                            }
                        });
                    }
                }

                this.eventClick();
            },
            loadData(){
                this.$emit("loadDefaultData");
            },
            //操作事件，包括左侧菜单的展开与收起，操作的撤销与恢复
            operateClick(item)
            {
                if (item.type === "foldone")
                {
                    if (this.config.assistPattern && this.config.assistPattern.length > 0)
                    {
                        this.config.assistPattern.forEach(data => {
                            if (data.type === item.type) {
                                if (item.show) {
                                    //点击收起按钮时，应该显示展开按钮
                                    data.show = false;
                                    data.title = "reportDesigner.unfold";
                                    this.footerStyleEventClick(false);
                                }
                                else {
                                    //点击展开按钮时，应该显示收起按钮
                                    data.show = true;
                                    data.title = 'reportDesigner.fold';
                                    this.footerStyleEventClick(true);
                                }
                            }
                        });
                    }
                }
                this.$emit("operateEventClick", item);
            },
            //绑定数据
            bindData(patternInfo) {
                if (patternInfo.name === "input" || patternInfo.name === "label" || patternInfo.name === "select"
                    || patternInfo.name === "textarea" || patternInfo.name === "datetime" || patternInfo.name === "checkbox"
                    || patternInfo.name === "radio") {
                    if (patternInfo.result && patternInfo.result.pattern)
                    {
                        var moduleInfo = patternInfo.result.pattern;
                        this.form.font = moduleInfo.fontName;
                        this.form.size = moduleInfo.fontSize;
                        this.form.strong = (moduleInfo.fontWeight > 400) ? true : false;
                        this.form.italic = moduleInfo.fontItalic;
                        this.form.underline = moduleInfo.fontUnderLine;
                        this.form.color = moduleInfo.fontColor;
                        this.form.left = false;
                        this.form.right = false;
                        this.form.center = false;
                        this.form.bothends = false;
                        this.form.top = false;
                        this.form.middle = false;
                        this.form.bottom = false;
                        if (moduleInfo.verticalAlignment && moduleInfo.verticalAlignment.length > 0)
                        {
                            if (moduleInfo.verticalAlignment === "Top")
                            {
                                this.form.top = true;
                            }
                            else if (moduleInfo.verticalAlignment === "Middle")
                            {
                                this.form.middle = true;
                            } 
                            else if (moduleInfo.verticalAlignment === "Bottom")
                            {
                                this.form.bottom = true;
                            }
                        }
                    }
                }
                else {
                    this.form.font = "微软雅黑";
                    this.form.size = "10.5";
                    this.form.strong = false;
                    this.form.italic = false;
                    this.form.underline = false;
                    this.form.color = "";
                    this.form.left = false;
                    this.form.right = false;
                    this.form.center = false;
                    this.form.bothends = false;
                    this.form.top = false;
                    this.form.middle = false;
                    this.form.bottom = false;
                    if (patternInfo.result && patternInfo.result.pattern) {
                        var moduleInfo1 = patternInfo.result.pattern;
                        if (moduleInfo1.verticalAlignment && moduleInfo1.verticalAlignment.length > 0)
                        {
                            if (moduleInfo1.verticalAlignment === "Top")
                            {
                                this.form.top = true;
                            }
                            else if (moduleInfo1.verticalAlignment === "Middle")
                            {
                                this.form.middle = true;
                            } 
                            else if (moduleInfo1.verticalAlignment === "Bottom")
                            {
                                this.form.bottom = true;
                            }
                        }
                    }
                }
                if (patternInfo && patternInfo.result && patternInfo.result.pattern && patternInfo.result.pattern.horizontalAlignment && patternInfo.result.pattern.horizontalAlignment.length > 0)
                {
                    if (patternInfo.result.pattern.horizontalAlignment === "Left")
                    {
                        this.form.left = true;
                    }
                    else if (patternInfo.result.pattern.horizontalAlignment === "Right")
                    {
                        this.form.right = true;
                    }
                    else if (patternInfo.result.pattern.horizontalAlignment === "Center")
                    {
                        this.form.center = true;
                    }
                    else if (patternInfo.result.pattern.horizontalAlignment === "Bothends")
                    {
                        this.form.bothends = true;
                    }
                }
                if (this.patternList && this.patternList.length > 0)
                {
                    this.patternList.forEach(c => {
                        if (patternInfo.name === "label") {
                            if (c.type === "left" || c.type === "center" || c.type === "right" || c.type === "bothends" || c.type === "top" || c.type === "middle" || c.type === "bottom") 
                            {
                                c.show = false;
                            }
                        }
                        else {
                            c.show = true;
                        }
                        c.value =  this.form[c.type]
                    });
                }
            },
            //操作
            manualEventClick(type) {
                this.$emit("manualEventClick", type);
            },
            footerStyleEventClick(flag)
            {
                this.$emit("footerStyleEventClick", flag);
            }
		}
	}
</script>

<style scoped>
    .fontColor {
        width:20px;
        height:20px;
        margin-left:5px;
        margin-top:5px;
        margin-bottom: 0px;
    }
    .fontColor:hover {
        transform: scale(1.3);
        border: 1px solid #DCDFE6;
    }

    ::v-deep .el-divider__text {
        position: absolute;
        background-color: #fff;
        padding: 0 20px;
        font-weight: 800;
        color: var(--el-text-color-primary);
        font-size: 14px;
    }

    ::v-deep .el-color-picker__trigger {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        height: 18px;
        width: 18px; 
        padding: 1px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        font-size: 0;
        position: relative;
        cursor: pointer;
    }

    ::v-deep .el-dropdown-menu__item i {
        margin-right: 0px;
    }
</style>
