<template>
    <el-divider v-if="isShowbasePattern || (patternItems && patternItems.length > 0 ? true : false)">{{$t('reportDesigner.BasicStyle')}}</el-divider>
    <el-form :model="form" ref="dialogForm1" label-width="80px"  label-position="left">
        <!-- <el-row :gutter="15" v-if="isShowbasePattern">
            <el-col :span="24">
                <el-form-item :label="$t('reportDesigner.fontName')" prop="font">
                    <el-select v-model="form.font" style="width:100%" clearable filterable @change="eventClick()">
                        <el-option v-for="item in fontItems" :key="item.Key" :label="$t(item.Value)" :value="item.Key" />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row> -->
        <el-row :gutter="15" v-if="isShowbasePattern">
            <el-col :span="24">
                <el-form-item :label="$t('reportDesigner.size')" prop="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>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15" v-if="isShowbasePattern">
            <el-col :span="24">
                <el-form-item :label="$t('reportDesigner.fontColor')" prop="color">
                    <el-color-picker v-model="form.color" @change="eventClick()"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15" v-for="(data, index) in patternItems" :key="index">
            <el-col :span="24">
                <el-form-item :label="$t(data.title)" :prop="data.field" :rules="rulesHandle(data)" :label-width="data.labelWidth ? data.labelWidth : '80px'">
                    <template v-if="data.type=='input'" >
                        <el-input v-model="form[data.field]" :id="'pattern'+data.field" :style="changeInputStyle(data.unit)" @input="inputClick(data)" @change="eventClick(data)"></el-input><span>&nbsp;&nbsp;{{ $t(data.unit) }}</span>
                    </template>
                    <template v-if="data.type=='switch'" >
                        <el-switch v-model="form[data.field]" active-value="1" style="width:100%" inactive-value="0" @change="eventClick(data)"></el-switch>
                    </template>
                    <template v-if="data.type=='colorPicker'" >
                        <el-color-picker v-model="form[data.field]" @change="eventClick(data)"></el-color-picker>
                    </template>
                    <template v-if="data.type=='borderStyleSelect'" >
                        <el-select v-model="form[data.field]" @change="eventClick(data)" :style="changeInputStyle(data.unit)">
                            <el-option v-for="item in data.options" :key="item.key" :label="$t(item.value)" :value="item.key">
                                <span style="float: left;color:#987cb9;" >{{ $t(item.value) }}</span>&nbsp;
                                <hr :style="setBorderStyle(0, item.key, 17)" width="70%" size=1 />
                            </el-option>
                        </el-select>
                    </template>
                    <template v-if="data.type=='borderWeightSelect'" >
                        <el-select v-model="form[data.field]" @change="eventClick(data)" :style="changeInputStyle(data.unit)">
                            <el-option v-for="item in data.options" :key="item" :label="item" :value="item">
                                <span style="float: left;color:#987cb9;" >{{ item }}</span>&nbsp;
                                <hr :style="setBorderStyle(1, (form.borderStyle || form.cellBorderStyle), 15, item)" width="70%" SIZE=1 />
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <el-divider v-if="otherStyleShow">{{$t('reportDesigner.OtherStyle')}}</el-divider>
    <div :class="bindActiveStyle(data)" v-for="(data, index) in fontPattern" :key="index">
        <div @click="otherStyleClick(data)" v-if="data.show">
            <div class="_fc-l-icon">
                <i class="fc-icon" :class="data.icon || 'icon-input'"></i>
            </div>
            <span class="_fc-l-name">{{ $t(data.title) }}</span>
        </div>
    </div>
    <div :class="bindActiveStyle(data)" v-for="(data, index) in alignList" :key="index">
        <div @click="otherStyleClick(data)">
            <div class="_fc-l-icon">
                <i class="fc-icon" :class="data.icon || 'icon-input'"></i>
            </div>
            <span class="_fc-l-name">{{ $t(data.title) }}</span>
        </div>
    </div>
</template>

<script>
    import { $t } from '../../locales';
    import tool from '@/utils/tool';

	export default {
        //组件传值
		props: {
			patternConfig: { type: Object, default: () => {} },
		}, 
        emits: ['patternEventClick'],
		data() {
			return {
				renderLoading: false,
                form:{
                    font: "",
                    size: 0,
                    color: "",
                },
                isShowbasePattern: false,
                fontItems:[],
                sizeItems:[],
                patternItems:[],
                fontPattern:[],
                //对齐
                alignList: [],
                otherStyleShow: false,
                curOperateField: "",
                CopyPatternConfig: {}
			}
		},
        //监听
		watch:{
            patternConfig(){
				this.renderStyle(this.patternConfig)
			},
		},
        //事件方法
		methods: {
            //构建form对象
            bindActiveStyle(data) {
                if (data.show) {
                    if (data.value)
                    {
                        return "_fc-l-item _fc-l-item-G";
                    }
                    else
                    {
                        return "_fc-l-item";
                    }
                }
                else 
                {
                    return "";
                }
            },
            //重置绑定值
            renderStyle(patternInfo) {
                this.CopyPatternConfig = tool.objCopy(patternInfo);
                if (patternInfo && patternInfo.data && patternInfo.data.style && patternInfo.data.style.basePattern && patternInfo.data.style.basePattern.length > 0)
                {
                    this.isShowbasePattern = true;
                    patternInfo.data.style.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;
                        }
                    });
               }
               else
               {
                    this.isShowbasePattern = false;
               }
               if (patternInfo && patternInfo.data && patternInfo.data.pattern && patternInfo.data.pattern.length > 0)
               {
                   this.patternItems = patternInfo.data.pattern;
               }
               if (patternInfo && patternInfo.data && patternInfo.data.style && patternInfo.data.style.fontPattern && patternInfo.data.style.fontPattern.length > 0)
               {
                    this.fontPattern = patternInfo.data.style.fontPattern;
                    this.fontPattern.forEach((element,index) => {
                        if (patternInfo.name === "label") {
                            if (index > 2) {
                                element.show = false;
                            }
                        }
                        else {
                            element.show = true;
                        }
                    });
               }
               else
               {
                   this.fontPattern = [];
               }
               if (patternInfo && patternInfo.data && patternInfo.data.specialStyle && patternInfo.data.specialStyle.length > 0)
               {
                   this.alignList = patternInfo.data.specialStyle;
               }
               else
               {
                   this.alignList = [];
               }
               if (this.fontPattern.length > 0 || this.alignList.length > 0)
               {
                    this.otherStyleShow = true;
               }
               else
               {
                    this.otherStyleShow = false;
               }
               this.bindActiveData(patternInfo);
            },
            //绑定数据
            bindActiveData(patternInfo) {
                if (patternInfo && 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.width = moduleInfo.width;
                    this.form.rows = moduleInfo.rows;
                    this.form.height = moduleInfo.height;
                    this.form.backgroundShadow = moduleInfo.backgroundShadow ? "1" : "0";
                    this.form.border = moduleInfo.border ? "1" : "0";
                    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;
                    this.form.borderStyle = moduleInfo.borderStyle;
                    this.form.borderColor = moduleInfo.borderColor;
                    this.form.borderWeight = moduleInfo.borderWeight;
                    this.form.borderWidth = moduleInfo.borderWidth;

                    this.form.allowSpanPage = moduleInfo.allowSpanPage ? "1" : "0";
                    this.form.avgColumnWidth = moduleInfo.avgColumnWidth ? "1" : "0";
                    this.form.showTableBorder = moduleInfo.showTableBorder ? "1" : "0";
                    this.form.showTableCellBorder = moduleInfo.showTableCellBorder ? "1" : "0";
                    this.form.showTableCellMargin = moduleInfo.showTableCellMargin ? "1" : "0";
                    this.form.borderStyle = moduleInfo.borderStyle;
                    this.form.borderColor = moduleInfo.borderColor;
                    this.form.borderWeight = moduleInfo.borderWeight;
                    this.form.backgroundColor = moduleInfo.backgroundColor;
                    this.form.showCellBorder = moduleInfo.showCellBorder ? "1" : "0";
                    this.form.cellBorderStyle = moduleInfo.cellBorderStyle;
                    this.form.cellBorderColor = moduleInfo.cellBorderColor;
                    this.form.cellBorderWeight = moduleInfo.cellBorderWeight;
                    this.form.cellBackgroundColor = moduleInfo.cellBackgroundColor;
                    this.form.interval = moduleInfo.interval;

                    this.form.columnNumPerPage = moduleInfo.columnNumPerPage;
                    this.form.rowNumPerPage = moduleInfo.rowNumPerPage;
                    this.form.showImageBorder = moduleInfo.showImageBorder ? "1" : "0";
                    this.form.backgroundShadow = moduleInfo.backgroundShadow ? "1" : "0";
                    this.form.showImageInterval = moduleInfo.showImageInterval ? "1" : "0";
                    if (patternInfo.result.base) {
                        this.form.colNum = patternInfo.result.base.colNum;
                        this.form.colNumPerRow = patternInfo.result.base.colNumPerRow;
                        this.form.totalCount = patternInfo.result.base.totalCount;
                    }
                    if (moduleInfo.horizontalAlignment && moduleInfo.horizontalAlignment.length > 0)
                    {
                        if (moduleInfo.horizontalAlignment === "Left")
                        {
                            this.form.left = true;
                        }
                        else if (moduleInfo.horizontalAlignment === "Right")
                        {
                            this.form.right = true;
                        }
                        else if (moduleInfo.horizontalAlignment === "Center")
                        {
                            this.form.center = true;
                        }
                        else if (moduleInfo.horizontalAlignment === "Bothends")
                        {
                            this.form.bothends = true;
                        }
                    }
                    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;
                        }
                    }
                    if (patternInfo.data && patternInfo.data.style && patternInfo.data.style.fontPattern && patternInfo.data.style.fontPattern.length > 0)
                    {
                        patternInfo.data.style.fontPattern.map(c => {
                                c.value =  this.form[c.type]
                        });
                    }
                    if (patternInfo.data && patternInfo.data.specialStyle && patternInfo.data.specialStyle.length > 0)
                    {
                        patternInfo.data.specialStyle.map(c => {
                                c.value =  this.form[c.type]
                        });
                    }
                }
            },
			//提交
			eventClick(data){
                if (data && data.field && this.form[data.field]) {
                    if((typeof this.form[data.field]=='string')&&this.form[data.field].constructor==String){
                        this.form[data.field] = this.form[data.field].replace(/^\s*|\s*$/g,"");
                    }
                }
                if (data && !this.form[data.field] && data.require)
                {
                    this.$message.warning($t('reportDesigner.StyleTip1'));
                    return false;
                }
                if (data && data.field === "colNum")
                {
                    if (parseInt(this.form[data.field]) > 4){
                        this.form[data.field] = 4;
                    }
                    if (parseInt(this.form[data.field]) < 1) {
                        this.form[data.field] = 1;
                    }
                }
                if (data && data.field === "columnNumPerPage")
                {
                    if (parseInt(this.form[data.field]) > 5){
                        this.form[data.field] = 5;
                    }
                    if (parseInt(this.form[data.field]) < 1) {
                        this.form[data.field] = 1;
                    }
                }
                if (data && data.field === "rowNumPerPage")
                {
                    if (parseInt(this.form[data.field]) > 5){
                        this.form[data.field] = 5;
                    }
                    if (parseInt(this.form[data.field]) < 1) {
                        this.form[data.field] = 1;
                    }
                }
                if (data && data.field)
                {
                    this.form["field"] = data.field;
                    if (!this.validateSize(data.field)) {
                        return false;
                    }
                }
				this.$emit("patternEventClick", this.form)
			},
            validateSize(field) {
                var res = false;
                var reg = /^[0-9]*[1-9][0-9]*$/i;
                if (this.form["width"] && field === "width")
                {
                    if (this.form["width"] != "0" && this.form["width"] != 0) {
                        if (!reg.test(this.form["width"])) {
                            this.$message.warning(this.$t("reportDesigner.DataFormatRequireError"));
                            this.form["width"] = 0;
                        }
                    }
                    if (parseFloat(this.form["width"]) < 0) {
                        this.$message.warning(this.$t("reportDesigner.widthRequireError"));
                        this.form["width"] = this.CopyPatternConfig.result.pattern.width;
                    }
                    if (parseFloat(this.form["width"]) === 0) {
                        this.form["width"] = this.CopyPatternConfig.result.pattern.width;
                    }
                }
                if (this.form["height"] && field === "height")
                {
                    if (this.form["height"] != "0" && this.form["height"] != 0) {
                        if (!reg.test(this.form["height"])) {
                            this.$message.warning(this.$t("reportDesigner.DataFormatRequireError"));
                            this.form["height"] = 0;
                        }
                    }
                    if (parseFloat(this.form["height"]) <= 0) {
                        this.$message.warning(this.$t("reportDesigner.heightRequireError"));
                        this.form["height"] = this.CopyPatternConfig.result.pattern.height;
                    }
                }
                if (this.form["interval"] && field === "interval")
                {
                    if (this.form["interval"] != "0" && this.form["interval"] != 0) {
                        if (!reg.test(this.form["interval"])) {
                            this.$message.warning(this.$t("reportDesigner.DataFormatRequireError"));
                            this.form["interval"] = 1;
                        }
                    }
                    if (parseFloat(this.form["interval"]) <= 0) {
                        this.$message.warning(this.$t("reportDesigner.intervalRequireError"));
                        this.form["interval"] = 1;
                    }
                }
                if (this.form["borderWidth"] && field === "borderWidth")
                {
                    if (this.form["borderWidth"] != "0" && this.form["borderWidth"] != 0) {
                        if (!reg.test(this.form["borderWidth"])) {
                            this.$message.warning(this.$t("reportDesigner.DataFormatRequireError"));
                            this.form["borderWidth"] = 182;
                        }
                    }
                    if (parseFloat(this.form["borderWidth"]) <= 0) {
                        this.$message.warning(this.$t("reportDesigner.borderWidthRequireError"));
                        this.form["borderWidth"] = 182;
                    }
                }
                if (this.form["rows"] && field === "rows")
                {
                    if (this.form["rows"] != "0" && this.form["rows"] != 0) {
                        if (!reg.test(this.form["rows"])) {
                            this.$message.warning(this.$t("reportDesigner.DataFormatRequireError"));
                            this.form["rows"] = 5;
                        }
                    }
                    if (parseFloat(this.form["rows"]) <= 0) {
                        this.$message.warning(this.$t("reportDesigner.rowsRequireError"));
                        this.form["rows"] = 5;
                    }
                }
                if (this.form["columnNumPerPage"] && field === "columnNumPerPage")
                {
                    if (this.form["columnNumPerPage"] != "0" && this.form["columnNumPerPage"] != 0) {
                        if (!reg.test(this.form["columnNumPerPage"])) {
                            this.$message.warning(this.$t("reportDesigner.DataFormatRequireError"));
                            this.form["columnNumPerPage"] = 2;
                        }
                    }
                    if (parseFloat(this.form["columnNumPerPage"]) <= 0) {
                        this.$message.warning(this.$t("reportDesigner.valueRequireError"));
                        this.form["columnNumPerPage"] = 2;
                    }
                }
                if (this.form["rowNumPerPage"] && field === "rowNumPerPage")
                {
                    if (this.form["rowNumPerPage"] != "0" && this.form["rowNumPerPage"] != 0) {
                        if (!reg.test(this.form["rowNumPerPage"])) {
                            this.$message.warning(this.$t("reportDesigner.DataFormatRequireError"));
                            this.form["rowNumPerPage"] = 4;
                        }
                    }
                    if (parseFloat(this.form["rowNumPerPage"]) <= 0) {
                        this.$message.warning(this.$t("reportDesigner.valueRequireError"));
                        this.form["rowNumPerPage"] = 4;
                    }
                }
                if (this.form["colNum"] && field === "colNum")
                {
                    if (this.form["colNum"] != "0" && this.form["colNum"] != 0) {
                        if (!reg.test(this.form["colNum"])) {
                            this.$message.warning(this.$t("reportDesigner.DataFormatRequireError"));
                            this.form["colNum"] = 2;
                        }
                    }
                    if (parseFloat(this.form["colNum"]) <= 0) {
                        this.$message.warning(this.$t("reportDesigner.valueRequireError"));
                        this.form["colNum"] = 2;
                    }
                }
                if (this.form["colNumPerRow"] && field === "colNumPerRow")
                {
                    if (this.form["colNumPerRow"] != "0" && this.form["colNumPerRow"] != 0) {
                        if (!reg.test(this.form["colNumPerRow"])) {
                            this.$message.warning(this.$t("reportDesigner.DataFormatRequireError"));
                            this.form["colNumPerRow"] = 2;
                        }
                    }
                    if (parseFloat(this.form["colNumPerRow"]) <= 0) {
                        this.$message.warning(this.$t("reportDesigner.valueRequireError"));
                        this.form["colNumPerRow"] = 2;
                    }
                }
                if (this.form["totalCount"] && field === "totalCount")
                {
                    if (this.form["totalCount"] != "0" && this.form["totalCount"] != 0) {
                        if (!reg.test(this.form["totalCount"])) {
                            this.$message.warning(this.$t("reportDesigner.DataFormatRequireError"));
                            this.form["totalCount"] = 4;
                        }
                    }
                    if (parseFloat(this.form["totalCount"]) <= 0) {
                        this.$message.warning(this.$t("reportDesigner.valueRequireError"));
                        this.form["totalCount"] = 4;
                    }
                }
                res = true;
                return res;
            },
            //其他样式的点击事件
            otherStyleClick(data){
                if (this.patternConfig.data && this.patternConfig.data.style && this.patternConfig.data.style.fontPattern && this.patternConfig.data.style.fontPattern.length > 0)
                {
                    this.patternConfig.data.style.fontPattern.map(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.patternConfig.data.style.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.patternConfig.data.style.fontPattern.some(c => { 
                                if (c.group === data.group)
                                {
                                    if (c.type === "middle")
                                    {
                                        c.value = true;
                                        return true;
                                    }
                                }
                            });
                        }
                    }
                }
                if (this.patternConfig.data && this.patternConfig.data.specialStyle && this.patternConfig.data.specialStyle.length > 0)
                {
                    this.patternConfig.data.specialStyle.map(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.patternConfig.data.style.fontPattern.some(c => { 
                                if (c.group === data.group)
                                {
                                    if (c.type === "left")
                                    {
                                        c.value = true;
                                        return true;
                                    }
                                }
                            });
                        }
                    }
                }
                this.eventClick();
            },
            inputClick(data) {
                var val = this.form[data.field];
                if (!val || val.length <= 0) {
                    this.curOperateField = data.field;
                }
                else {
                    this.curOperateField = "";
                }
            },
            //处理动态必填
			rulesHandle(data){
                if (this.curOperateField === data.field) {
                    return data.rules;
                }
                if (this.form[data.field])
                {
                    //有值不处理
                }
                else
                {
                    this.form[data.field] = data.value;
                }
				return data.rules;
			},
            //修改样式
            changeInputStyle(content) {
                var styleInfo = ""; 
                if (content === "mm" || content === "reportDesigner.Num" || content === "reportDesigner.Rows" || content === "reportDesigner.Columns") {
                    styleInfo += "width:85%;";
                } 
                else {
                    styleInfo += "width:100%;";
                } 
                return styleInfo;
            },
            //设置线条样式
            setBorderStyle(type, category, height, weight) {
                var styleInfo = "float:right;height:2px;border:none;"; 
                if (category === "dashed") {
                    if (type === 1 && weight > 0) 
                    {
                        styleInfo += "border-top:" + weight + "px dashed #987cb9;";
                    }
                    else {
                        styleInfo += "border-top:2px dashed #987cb9;";
                    }
                } 
                else if (category === "Solid") {
                    if (type === 1 && weight > 0) 
                    {
                        styleInfo += "border-top:" + weight + "px solid #987cb9;";
                    }
                    else {
                        styleInfo += "border-top:2px solid #987cb9;";
                    }                    
                } 
                else {
                    if (type === 1 && weight > 0) 
                    {
                        styleInfo += "border-top:" + weight + "px dotted #987cb9;";
                    }
                    else {
                        styleInfo += "border-top:2px dotted #987cb9;";
                    }
                } 
                if (height === 17) {
                    styleInfo += "margin-top:17px;";
                } 
                else if (height === 15) {
                    styleInfo += "margin-top:15px;";
                }
                return styleInfo;
            },
            //重载
            reloadPattern(moduleConfig) {
                this.renderStyle(moduleConfig);
            }
		}
	}
</script>

<style scoped>
    
</style>
