<template>
    <div class='no-print' ref='print'>
        <div v-if="buttonType == 'dialog'">
            <el-button type="primary" size="small" @click="buttonClick">{{buttonName}}</el-button>
            <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="setDialog" style="overflow-y:hidden" v-if="setDialog"
                       class="diyDialogClass"
                       append-to-body :width="width" :top="topRange" :destroy-on-close="true">
                <div :style="{'height':diyheight}">
                    <component v-if="iframeUrl==''" :is="componentIndex" ref="detailRef"
                               v-bind="paramDiySetting"
                               :formData="formData" :relationId="relationId" :closedialog="closedialog"></component>
                    <div v-if="iframeUrl!=''">
                        <iframe :src="iframeUrl" frameborder="0" width="100%" scrolling="auto" :style="{'height':diyheight}"></iframe>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer"  v-if="needFooter=='1'?true:false">
                    <el-button type="primary" size="small" v-if="needCallback == '1'"
                               @click="callBackClick()">
                        {{winButtonName}}
                    </el-button>
                    <el-button type="primary" size="small" @click="setDialog = false">关闭</el-button>
                </div>
            </el-dialog>
        </div>

        <div v-if="buttonType == 'count'">
            <el-row>
                <el-col :span="16"><el-input type="text" size="small" v-model="formData[resultField]" disabled></el-input></el-col>
                <el-col :span="8" style="padding-left: 5px;box-sizing: border-box;">
                    <el-button type="primary" size="small" @click="buttonClick">{{buttonName}}</el-button>
                </el-col>
            </el-row>
        </div>

        <div v-if="buttonType == 'noOperatinon'">
            <el-row>
                <el-col :span="8" style="padding-left: 5px;box-sizing: border-box;">
                    <el-button type="primary" size="small" @click="buttonClick">{{ buttonName }}</el-button>
                </el-col>
            </el-row>
      </div>
    </div>
</template>

<script>
    export default {
        name: "plDiyButton",
        props:{
            formData:{type:Object,default:() => {return {};}},
            buttonType:{type:String,require:true},
            buttonName:{type:String,require:true},
            linkUrl:{type:String,require: true},
            dialogTitle:{type: String,default:""},
            relationId:{type: String,default:""},
            topRange:{type:String,default:"5vh"},
            width:{type:String,default:"800px"},
            height:{type:String,default:"600px"},
            needCallback:{type:String,default:"0"},
            needFooter:{type:String,default:"1"},
            winButtonName:{type:String,default:"确定"},
            funcName:{type:String,default:""},
            countFieldArr:{type:Array,default:() => {return [];}},
            resultField:{type:String,default:""},
            changeField:{type:Function,default:null},
            paramDiySetting:{type:Object,default:() => {return {};}},
            clickFuncBoy:{type:String,default:""},
            clickFuncBoyPrint:{type:String,default:""},
        },
        data(){
            return {
                setDialog:false,
                componentIndex: "",
                iframeUrl: '',
                diyheight:"",
            }
        },
        watch: {
            linkUrl(){
                this.renderWrap();
            }
        },
        created(){
            if(this.height && this.height.includes("%")){
                this.diyheight=(Number(this.height.split("%")[0])-11)+"vh";
            }else{
                this.diyheight=this.height;
            }
            this.renderWrap();
        },
        methods:{
            buttonClick(){
                let result = true;
                if(this.clickFuncBoy){
                    // 执行脚本
                    let diyfunc = new Function("vm,formData",this.clickFuncBoy);
                    result = diyfunc(this,this.formData);
                }
                if(this.clickFuncBoyPrint){
                    // 打印按钮执行脚本
                    let diyfuncprint = new Function("vm,formData,tableFormRenderRef",this.clickFuncBoyPrint);
                    result = diyfuncprint(this,this.formData,document.querySelector('.pl-el-form'));
                }
                if(result == false){
                    return;
                }
                if(this.buttonType == 'dialog'){
                    this.setDialog = true;
                }else if(this.buttonType == 'count'){
                    let result = 0;
                    this.countFieldArr.forEach(item => {
                        let num = this.formData[item] || "0";
                        result += Number(num);
                    });
                    this.$set(this.formData,this.resultField,result.toFixed(2));
                }
            },
            renderWrap(){
                if(this.buttonType == 'count'){
                    return;
                }
                let url = this.linkUrl || '';
                let index =(this.linkUrl || '').indexOf(".vue");
                if(index > -1){
                    url = this.linkUrl.substring(0,index);
                }
                if(url.indexOf("http")!=-1){
                    this.iframeUrl = url;
                }else{
                    if(url.indexOf("/") == 0){
                        url = url.substring(1);
                    }
                    let urlArr = url.split("/");
                    let allRouterArr = this.$router.options.routes || [];
                    this.eachRouterSet(allRouterArr,urlArr,-1);
                    // this.componentIndex = () => Promise.resolve(require('@/' + url + '.vue').default);
                    // // this.componentIndex = () => import('@/' + url + '.vue');
                }
            },

            callBackClick(){
               if(this.funcName){
                   this.$refs.detailRef[this.funcName]();
                   this.setDialog = false;
               } else {
                   this.setDialog = false;
               }
            },

            /* 遍历
            * @param allRouterArr
            * @param urlArr
            * @param index
            */
            eachRouterSet(allRouterArr,urlArr,index){
                allRouterArr.forEach(item =>{
                    if(urlArr[index + 1] && ((urlArr[index +1] == (item.name ? item.name : item.path))||((item.name ? item.name : item.path)).indexOf(urlArr[index +1]+"/:")>-1)){
                        //当前匹配
                        //判断 urlArr是否存在下级
                        if(item.children && item.children.length > 0) {
                            //如果存在下级
                            allRouterArr = item.children || [];
                            index = index + 1;
                            this.eachRouterSet(allRouterArr,urlArr,index);
                        }else{
                            this.componentIndex = item.component;
                        }
                    }
                })
            },
            closedialog(){
                this.setDialog=false;
            },

    }
    }
</script>

<style scoped>
    .diyDialogClass /deep/ .el-dialog__body{
        overflow-y:auto;
    }
</style>
