<template>
    <el-form
            ref="eventForm"
            :model="eventData" label-width="120px"
            :validate-on-rule-change="false" size="small"
            class="edit-control-main">
        <el-form-item label="修改属性" prop="controlProperty" :rules="plValidate('required')" >
            <el-select v-model="eventData.controlProperty" multiple @change="changeProperty">
                <el-option v-for="(item,index) in allControlProperty"
                           :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-row>
            <el-col :span="12" v-if="eventData.controlProperty && eventData.controlProperty.indexOf('isRequired') > -1">
                <el-form-item label="是否必填">
                    <el-checkbox v-model="eventData.isRequired" true-label="1" false-label="0"
                                 :disabled="(fieldControlObj[eventData.fieldId] || {}).fieldEmpty == 'true'">
                    </el-checkbox>
                </el-form-item>
            </el-col>
            <el-col :span="12" v-if="eventData.controlProperty && eventData.controlProperty.indexOf('editable') > -1">
                <el-form-item label="是否可编辑" label-width="100">
                    <el-checkbox v-model="eventData.editable" true-label="true" false-label="false"></el-checkbox>
                </el-form-item>
            </el-col>
        </el-row>
        <div v-if="eventData.controlProperty && eventData.controlProperty.indexOf('selectType') > -1">
            <el-form-item label="数据类型"
                          prop="selectType"  :rules="plValidate('required')" >
                <el-select v-model="eventData.selectType">
                    <el-option  v-for="selectType in selectTypeArr"
                                :key="selectType.value"
                                :label="selectType.label"
                                :value="selectType.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <!--数据字典下拉-->
            <div v-if="eventData.selectType == 'sysData'">
                <el-form-item label="数据字典" prop="dataDic"  :rules="plValidate('required')">
                    <el-select v-model="eventData.dataDic"  filterable clearable @change="changeDataType">
                        <el-option v-for="item in dataTypeArr"
                                   :key="item.id"
                                   :label="item.typeName"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="父级数据">
                    <tree-select style="width:100%;" v-model="eventData.parentId" :options="dataTreeObj[eventData.dataDic]" appendToBody
                                 placeholder="请选择"/>
                </el-form-item>
            </div>
            <!--自定义数据来源下拉-->
            <el-form-item label="请求地址" v-if="eventData.selectType == 'remote'"
                          prop="reqUrl"  :rules="plValidate('required')">
                <el-input type="input"
                          placeholder="例：data/dataController/getDataTreeBye?typeId=1"
                          v-model="eventData.reqUrl">
                </el-input>
            </el-form-item>
            <!--select下拉框配置-->
            <el-form-item label="下拉配置" v-if="eventData.selectType == 'select'">
                <el-popover placement="top" width="400">
                    <div style="max-height: 400px;overflow-y: scroll">
                        <!--自定义下拉框-->
                        <tableview-select-option-table
                                :max-height="'300'"
                                :field-info="eventData"
                                :is-view="eventData.isView">
                        </tableview-select-option-table>
                    </div>
                    <el-button slot="reference">配置</el-button>
                </el-popover>
            </el-form-item>

            <template  v-if="eventData.selectType === 'remote'">
                <el-form-item label="值域">
                    <el-input v-model="eventData.valueField"></el-input>
                </el-form-item>
                <el-form-item label="文本域">
                    <el-input v-model="eventData.textField"></el-input>
                </el-form-item>
            </template>

            <!--ifram选项配置-->
            <el-form-item label="标题" v-if="eventData.controlProperty && eventData.controlProperty.indexOf('title') > -1">
                <el-input v-model="eventData.title"  ></el-input>
            </el-form-item>
            <el-form-item label="访问地址" v-if="eventData.controlProperty && eventData.controlProperty.indexOf('url') > -1">
                <el-input v-model="eventData.url" ></el-input>
            </el-form-item>
            <el-form-item label="参数" v-if="eventData.controlProperty && eventData.controlProperty.indexOf('param') > -1">
                <el-input v-model="eventData.param" ></el-input>
            </el-form-item>
            <!--超链接选项配置-->
            <el-form-item label="链接标题" v-if="eventData.controlProperty && eventData.controlProperty.indexOf('linkTitle') > -1">
                <el-input v-model="eventData.title" ></el-input>
            </el-form-item>
            <el-form-item label="链接地址" v-if="eventData.controlProperty && eventData.controlProperty.indexOf('url') > -1">
                <el-input v-model="eventData.url" type="textarea" :rows="2" ></el-input>
                <span style="color:red;">
                                        提示：外部地址请加上http://
                                    </span>
            </el-form-item>
            <el-form-item label="打开方式" v-if="eventData.controlProperty && eventData.controlProperty.indexOf('openType') > -1">
                <el-select v-model="eventData.openType" >
                    <el-option v-for="item in linkOpenTypeArr" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
            </el-form-item>
            <!--自定义按钮-->
            <el-form-item label="弹框地址"
                          v-if="eventData.controlProperty && eventData.controlProperty.indexOf('linkUrl') > -1"
                          prop="linkUrl"  :rules="plValidate('required')">
                <el-input type="text" v-model="eventData.linkUrl"  style="width: 90%" ></el-input>
                <el-tooltip effect="light" content="例：views/framework/config/usermanage/userManage.vue" placement="top">
                    <i class="el-icon-info" style="position:absolute;top: 8px;right:0px;
                                                                font-size: 16px;cursor: pointer;color: #5cb6ff;"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="弹框标题"
                          v-if="eventData.controlProperty && eventData.controlProperty.indexOf('dialogTitle') > -1"
                          prop="dialogTitle" :rules="plValidate('required')">
                <el-input type="text" v-model="eventData.dialogTitle" ></el-input>
            </el-form-item>
        </div>

        <!--修改样式-->
        <div v-if="eventData.controlProperty && eventData.controlProperty.indexOf('css') > -1">
            <el-form-item label="字体样式">
                <div>
                    <!--字体样式（粗体）  开始-->
                    <el-tooltip slot="append" effect="light" content="加粗（将所选内容字体加粗）" placement="top">
                        <div class="form-title-style" :class="{'form-title-style-active':eventData.showFontWeight == '1'}"
                             @click="changeStyle(eventData,'weight')">
                            <i class="saspiconfont pl-icon-font-weight"></i>
                        </div>
                    </el-tooltip>
                    <!--字体样式（斜体）  开始-->
                    <el-tooltip slot="append" effect="light" content="倾斜（将所选内容字体设置为倾斜）" placement="top">
                        <div class="form-title-style" :class="{'form-title-style-active':eventData.showFontLean == '1'}"
                             @click="changeStyle(eventData,'lean')">
                            <i class="saspiconfont pl-icon-zitixieti"></i>
                        </div>
                    </el-tooltip>
                    <!--字体颜色  开始-->
                    <el-tooltip slot="append" effect="light" content="选择字体颜色" placement="top">
                        <div class="form-title-style">
                            <i class="saspiconfont pl-icon-zitiyanse1 color-set-css" :style="{borderBottomColor:eventData.fontColor}"></i>
                            <el-color-picker v-model="eventData.fontColor" size="mini"
                                             popper-class="control-font-popper"
                                             class="control-fomt-color">
                            </el-color-picker>
                        </div>
                    </el-tooltip>
                    <!--内容背景色  开始-->
                    <el-tooltip slot="append" effect="light" content="选择背景色" placement="top">
                        <div class="form-title-style">
                            <i class="saspiconfont pl-icon-youqitong color-set-css" :style="{borderBottomColor:eventData.bgColor}"></i>
                            <el-color-picker v-model="eventData.bgColor" size="mini"
                                             popper-class="control-font-popper"
                                             style="position: absolute;left: 124px;opacity: 0;">
                            </el-color-picker>
                        </div>
                    </el-tooltip>
                    <el-input-number v-model="eventData.fontSize" style="width: 80%"></el-input-number>
                    <el-tag style="width: 40px;color: #409EFF;background-color: white;cursor: default;">px</el-tag>
                </div>
            </el-form-item>
        </div>
    </el-form>
</template>

<script>

    import EventParentConfig from "../../eventParentConfig";
    import ElColorPicker from "element-ui/packages/color-picker/src/main";
    import TableviewSelectOptionTable from "../../../../tableViewsDialog/components/tableviewSelectOptionTable";
    export default {
        name: "edit-control-config",
        extends: EventParentConfig,
        components: {TableviewSelectOptionTable, ElColorPicker},
        eventType: 'tableView',
        eventName:'修改控件',
        props:{
            fieldControlObj:{type:Object,default:() => {return {};}},
            controlData:{type:Object,default:() => {return {};}},//控件信息
            dataTypeArr:{type:Array,default:() => {return [];}},
            dataTreeObj:{type:Object,default:() => {return {};}},
            changeStyle:{type:Function,default:null},
        },
        data(){
            return {

                controlProperty:{},
                basicProperty:[
                    {label:"是否必填",value:"isRequired"},
                    {label:"是否可编辑",value:"editable"}
                ],
                selectProperty:[
                    {label:"数据类型",value:"selectType"},
                ],
                iframeProperty:[
                    {label:"标题",value:"title"},
                    {label:"访问地址",value:"url"},
                    {label:"参数",value:"param"}
                ],
                hyperlinkProperty:[
                    {label:"链接标题",value:"linkTitle"},
                    {label:"访问地址",value:"url"},
                    {label:"打开方式",value:"openType"}
                ],
                diyButtonProperty:[
                    {label:"弹框地址",value:"linkUrl"},
                    {label:"弹框标题",value:"dialogTitle"},
                ],
                //下拉框类型
                selectTypeArr:[
                    {value:"sysData",label:"数据字典下拉框"},
                    {value:"remote",label:"数据来源下拉框"},
                    {value:"select",label:"自定义下拉框"}
                ],
                //超链接类型
                linkOpenTypeArr:[
                    {label:"直接跳转",value:"thispage"},
                    {label:"新页面",value:"newpage"},
                    {label:"弹出框",value:"dilaogPage"},
                ],
                allControlProperty:[
                ], //所有控件类型

            }
        },
        created(){
            this.initData();
            this.initProperty();
        },
        watch:{
          "eventData.fieldId":{
              deep:true,
              handler:function(){
                  this.initProperty();
              }
          }
        },
        methods:{
            /**
             * 对象数组去重
             */
            unique(arr) {
                const res = new Map();
                return arr.filter((arr) => !res.has(arr.value) && res.set(arr.value, 1))
            },

            initData(){

            },
            /**
             * 可改变的控件属性
             */
            initProperty(){
                this.allControlProperty = [];
                let filedArr = this.eventData.fieldId || [];
                let cssProperty = this.basicProperty.concat([{label:"样式",value:"css"}]);
                let textProperty = cssProperty.concat([{label:"富文本编辑器",value:"editor"}]);
                let selectProperty = this.basicProperty.concat(this.selectProperty);
                filedArr.forEach(field =>{
                    if(this.controlData[field]){
                        let controlType = this.controlData[field].controlType;
                        switch (controlType){
                            case 'input':
                            case 'password':
                            case 'radio':
                            case 'checkbox':
                            case 'titleBox':
                            case 'displayBox':
                            case 'time':
                                this.allControlProperty = this.allControlProperty.concat(cssProperty);
                                break;
                            case 'select':
                                this.allControlProperty = this.allControlProperty.concat(selectProperty);
                                break;
                            case 'textarea':
                                this.allControlProperty = this.allControlProperty.concat(textProperty);
                                break;
                            case 'contactParty':
                                this.allControlProperty = this.allControlProperty.concat(this.basicProperty);
                                break;
                            case 'iframeLink':
                                this.allControlProperty = this.allControlProperty.concat(this.iframeProperty);
                                break;
                            case 'hyperlink':
                                this.allControlProperty = this.allControlProperty.concat(this.hyperlinkProperty);
                                break;
                            case 'diyButton':
                                this.allControlProperty = this.allControlProperty.concat(this.diyButtonProperty);
                                break;
                            default:
                                this.allControlProperty = this.allControlProperty.concat(this.basicProperty);
                                break;
                        }
                    }
                });
                this.allControlProperty = this.unique(this.allControlProperty);
            },

            changeProperty(){
                this.$set(this.eventData,"bgColor","");
                this.$set(this.eventData,"fontColor","");
                this.$set(this.eventData,"fontSize","14");

                this.$set(this.eventData,"titleBgColor","");
                this.$set(this.eventData,"titleFontColor","");
                this.$set(this.eventData,"titleFontSize","14");
            },
            changeDataType(){
                this.$set(this.eventData,"parentId",null);
            },

            /**
             * 校验规则，不写默认通过
             * @returns {boolean}
             */
            validateMethod(){
                let result = false;
                this.$refs.eventForm.validate(valid => {
                    result = valid;
                })
                return result;
            },

            /**
             * 如果是表单规则（eventType: 'tableView'）走此渲染方法
             * @vm 当前整个表单对象
             * @CTX 后台url前缀 如 http://localhost:8080
             * @axios axios 请求对象
             * @formData 响应字段配置
             * @affectContent 响应配置（表单规则配置好数据）
             *
             */
            renderTableViewConfig(vm,CTX,axios,formData,affectContent){
                let affectContentOtherObj = {
                    "title":["title"],
                    "url":["url"],
                    "param":["param"],
                    "linkTitle":["linkTitle"],
                    "openType":["openType"],
                    "dialogTitle":["dialogTitle"],
                    "selectType":["selectType","dataDic","parentId","reqUrl","optionSetting","valueField","textField"],
                };
                let field = affectContent.field;
                if(!formData[field]){
                    return;
                }
                if(affectContent.selectType == "select"){
                    affectContent.optionSetting = affectContent.optionSetting || [];
                }
                let controlPropertyArr = affectContent.controlProperty || [];
                if(controlPropertyArr.indexOf("editable") > -1 && affectContent.editable){
                    vm.$set(formData[field],"editable",affectContent.editable);
                }
                if(controlPropertyArr.indexOf("isRequired")>-1 && affectContent.isRequired){
                    vm.$set(formData[field],"isRequired",affectContent.isRequired);
                    (formData[field].cascadeSetArr || []).forEach(item => {
                        if(item["isNull"]){
                            item["isNull"] = affectContent.isRequired;
                        }
                    })
                }
                if(controlPropertyArr.indexOf("bgColor") > -1 && affectContent.bgColor){
                    if(!formData[field]["control-style"]){ //控件样式
                        vm.$set(formData[field],'control-style',{});
                    }
                    vm.$set(formData[field]["control-style"],"background-color",affectContent.bgColor);
                }
                let controlCss = formData[field].controlCss;
                let fontColor = affectContent.fontColor;
                let fontSize = affectContent.fontSize;
                let showFontLean = affectContent.showFontLean;
                let showFontWeight = affectContent.showFontWeight == "1";
                let bgColor = affectContent.bgColor;
                let css = "";
                if(controlPropertyArr.indexOf("css")>-1){
                    if(controlCss){
                        let cssArr = controlCss.split(";");
                        cssArr.forEach(cssStr => {
                            if(cssStr.includes("color:") && fontColor){
                                css += "color:" + fontColor+';';
                            }
                            if(cssStr.includes("font-size:") && fontSize){
                                css += "font-size:" + fontSize + "px;";
                            }
                            if(cssStr.includes("font-style:") && showFontLean == "1"){
                                css += "font-style:italic;";
                            }
                            if(cssStr.includes("font-weight:") && showFontWeight == "1"){
                                css += "font-weight:bold;";
                            }
                            if(cssStr.includes("background-color:") && bgColor){
                              css += "background-color:" + bgColor+';';
                            }
                        });
                    }else{
                        if(fontColor){
                            css += "color:" + fontColor+';';
                        }
                        if(fontSize){
                            css += ";font-size:" + fontSize + "px;";
                        }
                        if(showFontLean == "1"){
                            css += "font-style:italic;";
                        }
                        if(showFontWeight == "1"){
                            css += "font-weight:bold;";
                        }
                        if(bgColor){
                            css += "background-color:" + bgColor+';';
                        }
                    }
                }
                // if(css){
                //     css = css.substring(1);
                // }

                vm.$set(formData[field],"controlCss",css);
                vm.affectContentOtherArr.forEach(key =>{
                    if(affectContentOtherObj[key]){
                        let arr = affectContentOtherObj[key];
                        arr.forEach(a =>{
                            if(affectContent[a]){
                                vm.$set(formData[field],a,affectContent[a]);
                            }
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-select {
        width:100%;
    }
    .el-card ::v-deep .el-card__body {
        padding-bottom: 10px;
    }

    .drag-class {
        .el-card {
            background-color: #F5F6F7;
        }
    }

    .color-set-css {
        display: inline-block;
        height: 17px;
        border-bottom-width:2px;
        border-bottom-style:solid;
    }

    .el-color-picker {
        position: absolute;left: 116px;opacity: 0;
    }

    .form-title-style{
        display: inline-block;
        height: 30px;
        line-height: 22px;
        padding: 0 4px;
        box-sizing: border-box;
        background-color: #ecf5ff;
        box-shadow: -1px -1px 3px lightgray;
        border: 4px outset rgba(236,245,255,0.4);
        border-radius: 4px;
        margin-right: 6px;
        i{
            font-size: 16px;
            cursor: pointer;
            color: #409EFF;
        }
        .el-color-picker__color::before {
            color: red;
            z-index: 2200 !important;
        }
    }

    .form-title-style-active{
        box-shadow: -2px -2px 4px lightgrey;
        border: 4px solid #409EFF;
        background-color: #409EFF;
        i{
            color: #ecf5ff;
        }
    }
    .edit-control-main{
        width: 100%;
        height: 100%;
        padding:5px;
        box-sizing: border-box;

    }
    .control-fomt-color{
        position: absolute;
        left: 84px;
        opacity: 0;
        z-index: 2200 !important;
    }
</style>

<style>
    .control-font-popper{
        z-index: 3200 !important;
    }
</style>
