<template>
  <div v-show="myConfig.visible"  ref="preview" :style="divStyle">
    <Row type="flex" :justify="rowJustify" align="middle" :gutter="16"> 
        <Col v-for="(item,index) in imgData" :key="'video_' + index" :span="colSpan">
            <Badge>
                <template #count>
                <div style="text-align: center;">
                    <a v-if="!myConfig.readOnly && (showDelBtn || item.delUrl !== undefined)" href="#" @click.prevent="delFile(index)" style="display:block; height: 50%;">
                        <Icon type="md-close-circle"  color="#ed4014" size="16"  />
                    </a>
                    <a v-if="showDownBtn && item.url !== undefined" href="#"   @click.prevent="downFile(index)" style="display:block; height: 50%;">
                        <Icon type="md-cloud-download"  color="#ed4014" size="16" />
                    </a>
                </div>
                </template>
                <video :src="item.url" :style="imgStyle" controls="controls">您的浏览器不支持视频</video>
            </Badge> 
        </Col>
        <Col :span="colSpan" >   
        <UploadBox ref="uploadbox" v-show="showUpload" ismultiple :config="myConfig" :readOnly="myConfig.readOnly" @success="handleSuccess" :headers="headers" :style="imgStyle">
             <template #btn>
            <Row type="flex" justify="center" align="middle" :style="btnStyle" >
                <Icon v-if="myConfig.icon" :type="myConfig.icon" :size="myConfig.iconSize" :color="iconColor"></Icon>
                <span v-if="myConfig.text">{{myConfig.text}}</span>
            </Row>
             </template>
        </UploadBox>
        </Col>
    </Row>
    <Row v-show="showMemo" type="flex" justify="start" align="middle" :gutter="16">
        <Col span='24'>
           <ShowText :label="myConfig.memo"  contentAlign="left"  :class="myConfig.memoClass"></ShowText>
        </Col>
    </Row>
 </div>
</template>
<script>
    import Base from '@/components/base/controlbase.vue';
    import UploadBox from './uploadbox.vue';
    import $ from 'jquery';
    export default {
        name: 'videobox',
        extends: Base,
        data () {
            return {
                myConfig:{
                    fileNum: 1,
                    fileSize: 2,
                    fileType:['mp4','avi'],
                    icon:'',
                    iconSize:12,
                    iconColor:'',
                    text:'',
                    imgPath:'',
                    notdelfile:'N',
                    downfile:'',
                    delfile:'',
                    uploadfile:'',
                    multiSelect:false,
                    simpleFlag:false,
                    childColNum:6,
                    proName:{
                        'billmoduleid':'billmoduleid',
                        'billno':'billno'
                    },
                    memo:'',
                    memoClass:''
                },
                rowJustify:'center',
                visible: false,
                headers:{
                    'billmoduleid':'video',
                    'billno':'video'
                },
                imgData:[],
                userInfo:'',
                value:'',
                fileSize:2048,
                showUpload:true,
                showDelBtn:true,
                showDownBtn:true,
                showPreview:true,
                uploadFlag:false,
                showMemo:false,
                prefixCls:'demo-upload',
                imgStyle:{},
                style: {},
                btnStyle:{},
                defaultvalue:'',
                divStyle:{}
            };
        },
        components:{
            UploadBox
        },
        computed:{
            colSpan () {
                return this.getSpan();
            },
            iconColor () {
                if (this.myConfig.readOnly) {
                    return '#e3e5e8';
                } else {
                    return this.myConfig.iconColor;
                }    
            }
        } ,
        props:{
            showStyle: {
                type:String,
                default:'FormItem'
            },
            fileKey:{
                type:String,
                default:''
            }
        },
        methods: {
            customInit() {
                if (this.myConfig.fileSize) {
                    this.fileSize = Number(this.myConfig.fileSize) * 1024;
                }
                if (this.myConfig.showDelBtn !== undefined) {
                    this.showDelBtn = this.myConfig.showDelBtn;
                }
                if (this.myConfig.showDownBtn !== undefined) {
                    this.showDownBtn = this.myConfig.showDownBtn;
                }
                if (this.myConfig.showPreview !== undefined) {
                    this.showPreview = this.myConfig.showPreview;
                }
                if (this.myConfig.headers !== undefined) {
                    this.headers = Object.assign({},this.headers,this.myConfig.headers);
                }
            
                if (this.myConfig.width) {
                    this.style.width = (Number(this.myConfig.width) -2) + 'px';
                    this.btnStyle.width = (Number(this.myConfig.width) -2) + 'px';
                }  else {
                    this.style.width = '98%';
                    this.btnStyle.width = '98%';
                }
                if (this.myConfig.height) {
                    this.style.height = this.myConfig.height + 'px';
                    this.style['line-height'] = this.myConfig.height + 'px';
                    this.btnStyle.height = (Number(this.myConfig.height) -2) + 'px';
                    this.btnStyle['line-height'] = (Number(this.myConfig.height) -2) + 'px';
                    
                } else {
                    this.style.height = '100px';
                    this.style['line-height'] = '100px';
                    this.btnStyle.height = '58px';
                    this.btnStyle['line-height'] = '58px';
                }
                Object.assign(this.imgStyle , this.style);

                if (this.myConfig.imgWidth) {
                    this.imgStyle.width = this.myConfig.imgWidth+ 'px';
                    this.btnStyle.width = this.myConfig.imgWidth+ 'px';
                }

                if (this.myConfig.imgHeight) {
                    this.imgStyle.height = this.myConfig.imgHeight+ 'px';
                    this.imgStyle['line-height'] = this.myConfig.imgHeight + 'px';
                    this.btnStyle.height = (Number(this.myConfig.imgHeight) -2) + 'px';
                    this.btnStyle['line-height'] = (Number(this.myConfig.imgHeight) -2) + 'px';
                }
                if (this.myConfig.divStyle) {
                    Object.assign(this.divStyle , this.myConfig.divStyle);
                }
                
              
                if (!this.myConfig.simpleFlag) {
                    if (!this.myConfig.downfile) {
                        this.myConfig.downfile =  this.OmdUrl.downfile;
                    }
                    if (!this.myConfig.delfile) {
                        this.myConfig.delfile =  this.OmdUrl.delfile;
                    }
                    if (!this.myConfig.uploadfile) {
                        this.myConfig.uploadfile =  this.OmdUrl.uploadfile;
                    }
                    let usercode = this.getUserCode();
                    let username = this.getUserName();
                    let userInfo = '&usercode=' + usercode + '&username=' + username + '&ent_id=' + this.getEnt_id();
                    let notdelfile = this.myConfig.notdelfile;
                    if  (this.myConfig.notdelfile !== undefined) {
                        notdelfile = this.myConfig.notdelfile;
                    }
                    if (notdelfile !== 'Y') {
                        userInfo = userInfo + '&notdelfile=N';
                    } else  {
                        userInfo = userInfo + '&notdelfile=Y';
                    }
                    this.userInfo = encodeURI(userInfo);
                } else {
                     this.userInfo = this.userInfo + '&ent_id=' + this.getEnt_id();
                }

                if (this.myConfig.uploadfile.indexOf('uploadFile') !=-1) {
                    let url = 'ent_id=' + this.getEnt_id() + '&billmoduleid=' + this.headers.billmoduleid;
                    url = url+'&session='+ JSON.stringify(this.getSession());
                    if (this.myConfig.uploadfile.indexOf('?') != -1) {
                        this.myConfig.uploadfile  = this.myConfig.uploadfile + '&' + encodeURI(url);
                    } else {
                        this.myConfig.uploadfile  = this.myConfig.uploadfile + '?' + encodeURI(url);
                    }
                    this.headers = {};
                }  else {
                    if (this.myConfig.uploadfile.indexOf('?') != -1) {
                        this.myConfig.uploadfile  = this.myConfig.uploadfile + '&' + 'ent_id=' + this.getEnt_id();
                    } else {
                        this.myConfig.uploadfile  = this.myConfig.uploadfile + '?' + 'ent_id=' + this.getEnt_id();
                    }
                }
                if (this.myConfig.memo) {
                    this.showMemo = true;
                } else {
                    this.showMemo = false;
                }
                if (!this.myConfig.multiSelect) {
                    this.initFile();
                } else {
                    this.rowJustify = 'start';
                }
            },
            initFile() {
                let value  = this.fatherValue;
                if (this.fileKey) {
                    value = this.fileKey;
                }
                this.imgData = [];
                let obj = {};
                obj.filename = 'video';
                if (value) {
                    this.value = value;
                    this.showUpload = false;
                    obj.fileKey = this.value;
                    this.addImgData(obj);  
                } else {
                    if (this.config.imgPath) {
                        let obj = {};
                        obj.filename = 'video';
                        obj.imgPath = this.config.imgPath;
                        this.addImgData (obj);
                        this.showUpload = false;
                    } else {
                        this.showUpload = true;
                    }
                }
            },
            setImgPath() {
                this.imgData = [];
                if (this.config.imgPath) {
                    let obj = {};
                    obj.filename = 'video';
                    obj.imgPath = this.config.imgPath;
                    this.addImgData (obj);
                    this.showUpload = false;
                } else {
                    this.showUpload = true;
                }
            },
            handleRemove () {
                this.delFile();
                this.$refs.upload.clearFiles();
                this.showUpload = true;
            },
            handleSuccess (obj) {
                if (this.myConfig.multiSelect) {
                    this.refurbish();
                } else  {
                    this.imgData = [];
                    this.addImgData(obj.data[0]);
                    this.setFatherValue();
                    this.showUpload = false;
                } 
                if (this.config.onOpenChange) {
                    this.config.onOpenChange(false);
                }
            },
            refurbish() {
                if (this.headers.billno && this.headers.billmoduleid) {
                    this.getFilesInfo(this.headers.billno,this.headers.billmoduleid,this.myConfig.notdelfile,this.setImgData);
                } else {
                    this.imgData = [];
                }
            },
            addImgData(temp) {
                let fileKey = '';
                if (temp.fileKey !== undefined) {
                    fileKey = temp.fileKey;
                }
                if (temp.filekey !== undefined) {
                    fileKey = temp.filekey;
                }
                if (fileKey) {
                    let obj = {};
                    if (this.config.customImgPath) {
                        obj = this.config.customImgPath(temp);
                    } else {
                        this.value = fileKey;
                        if (!this.myConfig.downfile) {
                            return;
                        }
                        obj.downUrl = this.myConfig.downfile + fileKey + this.userInfo;
                        if (temp.filename) {
                            obj.title = temp.filename;
                        } else {
                            obj.title = '';
                        }
                        obj.url = obj.downUrl;
                    }
                    obj.filekey = fileKey;
                    this.imgData.push(obj);
                } else {
                    let obj = {};
                    if (temp.url !== undefined) {
                        let list = temp.url.split('/');
                        this.value = list[list.length - 1];
                        obj.title = temp.file;
                        obj.url = temp.url;
                        obj.downUrl = temp.url;
                        obj.filekey = this.value;
                    } else {
                        obj.title =temp.filename;
                        obj.url = temp.imgPath;
                        obj.downUrl = temp.imgPath;
                    }
                    this.imgData.push(obj);
                }        
            },
            setImgData (data) {
                this.imgData = [];
                let notdelfile = this.myConfig.notdelfile;
                if  (this.config.notdelfile !== undefined) {
                    notdelfile = this.config.notdelfile;
                }
                let addflag = false;
                if (data && data.length > 0) {
                    data.forEach(el => {
                        addflag = false;
                        let obj = {};
                        Object.assign(obj, el);
                        if (obj.modflag) {
                            if (notdelfile === 'Y' && obj.modflag === 'M') {
                                addflag = true;  
                            }
                        }
                        if (!addflag) {
                            this.imgData.push(obj);
                        } 
                    });
                }
            },
            delFile(index) {
                let delUrl = '';
                if (index || index === 0) {
                    if (this.imgData[index].filekey) {
                        if (this.myConfig.delfile) {
                            delUrl = this.myConfig.delfile + this.imgData[index].filekey + this.userInfo;
                        }
                    }
                    if (delUrl) {
                        if (delUrl.indexOf('deleteFile') !=-1) {
                            $.ajax({
                                type : 'POST',
                                url : encodeURI(delUrl),
                                async : true,
                                dataType : 'json'
                            });
                        } else {
                            this.asyncPost(encodeURI(delUrl),'',{},null,null,null,'get');
                        }
                    } 
                    if (this.imgData[index].filekey) {
                        if (this.$refs.uploadbox) {
                            this.$refs.uploadbox.delFile(this.imgData[index].filekey);
                        }   
                    } 
                    this.imgData.splice(index,1);
                } else {
                    let  self = this;
                    this.imgData.forEach(el => {
                        let tempDelUrl = '';
                        if (self.myConfig.delfile && el.filekey) {
                            delUrl = self.myConfig.delfile + el.filekey + self.userInfo;
                        }
                        if (tempDelUrl) {
                            if (tempDelUrl.indexOf('deleteFile') !=-1) {
                                this.asyncPost(encodeURI(el.delUrl),'',null,null,null,null,'post');
                            } else {
                                this.asyncPost(encodeURI(el.delUrl),'',{},null,null,null,'get');
                            }
                        }
                    });
                    this.imgData = [];
                }
                if (!this.myConfig.multiSelect)	{
                    this.value = '';
                    this.showUpload = true;
                    this.setFatherValue();
                }
                
            },
            downFile (index) {
                window.open(encodeURI(this.imgData[index].url), '_self');
            },
            valueToFatherValue() {
                let para= {};
                if (!this.value) {
                    para.value = '';
                } else {
                    para.value = this.value;
                }
                return para;
            },
            setFatherValue() {
                let para = this.valueToFatherValue();
                para.name = this.myConfig.name;
                this.$emit('inputValue', para);
            },
            watchCustomFatherValue() {
                this.initFile();
            },
            getSpan() {
                if (this.myConfig.multiSelect) {
                    return 24/Number(this.myConfig.childColNum);
                } else  {
                    return 24;
                } 
            },
            setReadOnly(value) {
                let obj = {};
                obj.readOnly = value;
                if (obj.readOnly === false) {
                    if (this.config.readOnly !== true) {
                        this.setPro(obj);
                    } 
                } else {
                    this.setPro(obj);
                }
            },
            checkPara () {
                if (this.myConfig.multiSelect) {
                    if (this.$parent && this.$parent.valueData) {
                        this.setHeaders(this.$parent.valueData);
                    }
                    if (!this.isHeadersOk()) {
                        if (this.myConfig.paraErrorInfo) {
                            this.alert(this.myConfig.paraErrorInfo);
                            return false;
                        }
                    }
                    return true;
                } else {
                    return true;
                }
            },
            setHeaders(data) {
                for (let temp in this.headers) {
                    this.headers[temp] = '';
                }
                if (data) {
                    for (let pro in this.myConfig.proName) {
                        if (data[this.myConfig.proName[pro]]) {
                            this.headers[pro] = data[this.myConfig.proName[pro]];
                        } else {
                            this.headers[pro] = '';
                        }
                    }
                }
                
            },
            isHeadersOk() {
                let flag = true;
                for (let pro in this.headers) {
                    if (!this.headers[pro]) {                          
                        flag = false;
                        break;
                    }
                }
                return flag;
            },
            setProValue(data) {
                if (this.myConfig.multiSelect) {
                    if (data) {
                        this.setHeaders(data);
                        if (this.isHeadersOk()) {
                            this.refurbish();
                        } else {
                            this.imgData = [];
                        }
                    }
                    
                }
            }
        },
        mounted () {
            //this.uploadList = this.$refs.upload.fileList;
        }
    };
</script>
