<template src="./detail.html"></template>
<script>
    import util from "../../utils/util";
    import config from "@/utils/config.js";
    import {listService} from '@/services'
    import { Toast } from "mint-ui";
    var QRCode = require('qrcode')
    export default {
        data() {
            var serverUrl="http://skyforest.static.elab-plus.com";
            return {
                title: "投放宝",
                serverUrl:serverUrl,
                loading: false,
                hello:'',
                isOk:true,
                codeFlag:false,//绑定二维码显示
                tpbtime:'',
                rowTotal:0,//总条数
                pageNo:1,//页码
                bindCodeFlag:false,//点击已绑定小程序行提示框显示
                bindFlag:false,//绑定小程序显示
                pageSize:10,//每页显示数量
                bindingStatus:0,//是否绑定小程序，0：否，1：是
                callCount:0,//拨打数
                channel:"",//渠道
                charPV:0,//聊天PV
                charUV:0,//聊天UV
                clickPV:0,//点击PV
                clickUV:0,//点击UV
                created:'',//创建时间
                creator:'',//创建者
                tfbContentId:0,//投放内容ID
                leaveCount:0,//留电数
                onlineStatus:0,//在线状态，1：在线，-1：下线
                projectId:0,//项目ID
                status:0,//状态，1：有效，-1：无效
                templateContentId:0,//模板内容ID
                title:'',//标题
                updated:'',//修改时间
                updator:'',//修改者
                videoAvgTime:0,//视频平均时长
                videoConnectCount:0,//视频连接数
                flag:false,//控制头像显示
                customerhead:'',//头像
                logFlag:false,//控制退出登录显示
                switchValue:true,
                resultArr:[],//数据
                tableData:[],//数据
                userName:'',//用户名
                codeImg:'',//二维码
                rowIndex:'',//行索引
                templateContentId:'',//模板内容ID
                channelFlag:false,//绑定小程序状态下渠道不可编辑控制
                count:0,//是否第一次获取焦点
                id:'',//投放编号
                templateCode:null,
                pages: {
                    current: 1,
                    sizes: [10, 20, 30],
                    pageSize: 10
                },
                clas:'',
                statusa:"",
                indexA:""
            }
        },
        created() {
            //util.setTitle(this.title);
            this.userName = localStorage.getItem('_accout');
            this.codeImg = localStorage.getItem('_miniappQrcode');
            this.projectId = localStorage.getItem('_projectId');
            this.getData();
		},
        mounted() {
            this.hello = config.getTime();
        },
        updated(){
            $(".el-table__body tr").mouseover(function(){
                $(".el-table__body tr").find('.icon-edit').css("display","none");
                $(".el-table__body tr").eq($(this).index()).find('.icon-edit').css("display","inline-block");
            }).mouseout(function(){
                $(".el-table__body tr").find('.icon-edit').css("display","none");
            });
            //行中小图标行移入移出
            $(".icon-edit").mouseover(function(){
                $(".icon-edit").removeClass("after").addClass("befter");
                $(".notes").css("display","none");
                $(this).addClass("after").removeClass("befter");
                $(this).children('.notes').css("display","block");
            }).mouseout(function(){
                $(".icon-edit").removeClass("after").addClass("befter");
                $(".notes").css("display","none");
            });
            $(".el-input__inner").addClass("overflow").css("width","110px");
        },
        computed:{
            loadData(){
                return this.$store.state.loading
            }
        },
        methods: {
            async getData() {
                let data = {
                    pageNo:this.pages.current,
                    pageSize:this.pages.pageSize,
                    projectId:this.projectId
                };
                let result = await listService.initial(data);
                console.log("------", result, "-----");
                if (result.data.success) {
                    this.tableData = [];
                    for(var i =0 ;i<result.data.pageModel.resultSet.length;i++){
                        this.tableData.push({
                            date:result.data.pageModel.resultSet[i].title,
                            name:config.timestampToTime(result.data.pageModel.resultSet[i].created),
                            time:config.timestampToTime(result.data.pageModel.resultSet[i].updated),
                            user:result.data.pageModel.resultSet[i].updator,
                            channel:result.data.pageModel.resultSet[i].channel,
                            tiks:[result.data.pageModel.resultSet[i].clickPV,result.data.pageModel.resultSet[i].clickUV],
                            telNum:[result.data.pageModel.resultSet[i].callCount,result.data.pageModel.resultSet[i].leaveCount],
                            chat:[result.data.pageModel.resultSet[i].charPV,result.data.pageModel.resultSet[i].charUV],
                            video:result.data.pageModel.resultSet[i].videoConnectCount,
                            totalNum:result.data.pageModel.resultSet[i].videoAvgTime,
                            onlineStatus:result.data.pageModel.resultSet[i].onlineStatus === 1 ?true:false,
                            tfbContentId:result.data.pageModel.resultSet[i].id,
                            bindingStatus:result.data.pageModel.resultSet[i].bindingStatus === 1 ?true:false,
                            firstBindStatus:result.data.pageModel.resultSet[i].firstBindStatus === 1 ?true:false,
                            templateContentId:result.data.pageModel.resultSet[i].templateContentId,
                            rowIndex:i,
                            id:result.data.pageModel.resultSet[i].id,
                            templateCode:result.data.pageModel.resultSet[i].templateId,
                        })

                    }
                    this.rowTotal = result.data.pageModel.rowTotal;//总条数
                    //this.pages.current = result.data.pageModel.resultSet.count//当前页码

                }
            },
            async updateTfbContentStatus(dataMes) {
                let data = {
                    id:dataMes.tfbContentId,
                    updator:this.userName,
                    onlineStatus:dataMes.onlineStatus?1:-1
                };
                console.log(dataMes.id)
                let result = await listService.updateTfbContentStatus(data);
                if (result.data.success) {
                    Toast('修改成功');
                    this.getData();
                } else {
                    Toast(result.data.message);
                }
            },
            async editeTfbChannel() {
                let data = {
                    channel:this.channel,
                    updator:this.userName,
                    id:this.tfbContentId
                };
                let result = await listService.editeTfbChannel(data);
                if (result.data.success) {
                    Toast('修改成功');
                    this.getData();
                } else {
                    Toast(result.data.message);
                }
            },
            async editeBindCode(item) {
                let data = {
                    bindingStatus:item.bindingStatus?0:1,
                    id:item.tfbContentId,
                    projectId:this.projectId,
                    updator:this.userName
                };
                let result = await listService.editeBindCode(data);
                console.log('开始',data,item)
                if (result.data.success) {
                    Toast('修改成功');
                    this.getData();
                } else {
                    Toast(result.data.message);
                }
            },
            getQRCode:function(){

                const generateQR = async text => {
                    try {
                        this.codeFlag = true;
                        console.log(text)
                        console.log(await QRCode.toDataURL(text))
                        this.codeImg=await QRCode.toDataURL(text, { errorCorrectionLevel: 'H' })
                    } catch (err) {
                        console.error(err)
                    }
                };
                generateQR(WEB_CONF.qrcode+"launch/"+this.projectId);
            },
            newVersion(){//新建版本
                this.$router.push({name:'label'});
            },
            codeFn(){//点击二维码
            this.codeImg = localStorage.getItem('_miniappQrcode');
                if(this.codeImg){
                    this.codeFlag = true;
                }else{
                    Toast('二维码不存在！')
                }
            },
            closeCode(){//关闭二维码
                this.codeFlag = false;
            },
            bindCode(){//点击绑定小程序
                this.bindFlag = !this.bindFlag;
                this.channelFlag = !this.channelFlag;
                console.log(this.channelFlag)
            },
            rowClick(data,event,col){//已经绑定的小程序行点击事件
                if(this.bindFlag){
                    if(!data.bindingStatus){
                        this.indexA=data.tfbContentId;//$index
                        $(".el-table__body tr").find('.channel-mes').removeClass("show");
                        $(".el-table__body tr").eq(data.rowIndex).find('.channel-mes').addClass("show");
                    }
                }
            },
            overFn(){//用户头像移入
                this.logFlag = true;
            },
            outFn(){//用户头像移出
                setTimeout(()=>{
                    this.logFlag = false;
                },2000);
            },
            logOut(){//退出登录
                $(".logOut i").removeClass('b-out').addClass('a-out');
                $(".logOut p").addClass("active");
                this.$router.push({name:'Login'});
            },
            editModel(a,e){//编辑
                this.$router.push({name:'updateTemp',query:{templateContentId:e.templateContentId,'id':e.id}});
                console.log('编辑',a,e.templateContentId)
            },
            editChannel(index){//编辑渠道
                $('.el-input__inner').removeClass("select");
                $(".el-input__inner").eq(index).addClass("select");
            },
            editFul(index,data){//失去焦点
                this.channel = data.channel;
                this.tfbContentId = data.tfbContentId
                setTimeout(()=>{
                    $(".el-table__body tr").eq(index).find('input').removeClass('select');
                    $(".channel-edite").eq(index).hide();
                },500);
                this.editeTfbChannel();
            },
            editing(index){//获取焦点
                $(".el-table__body tr").eq(index).find('input').addClass('select');
                if(this.isOk){
                    $(".channel-edite").hide();
                    $('.el-input__inner').eq(index).closest('.cell').find('.channel-edite').show();
                }else{
                    $(".channel-edite").hide();
                }
            },
            knowFn(index){//知道了
                this.isOk = true;
                $(".channel-edite").eq(index).hide();
            },
            reminderFn(index){//不在提示
                this.isOk = false;
            },
            channelFn(index,e,type){//绑定小程序提示框
                $(".el-table__body tr").eq(index).find('.channel-mes').removeClass("show");
                if(type==1){
                    this.editeBindCode(e);
                    console.log(e)
                }
            },
            overNote(index){//已绑定小程序图标移入
                $(".el-table__body tr").eq(index).find('.note-mes').css("display","block");
            },
            outNote(index){//已绑定小程序图标移出
                $(".el-table__body tr").eq(index).find('.note-mes').css("display","none");
            },
            copyFn(index){
                var url = location.href;
                window.clipboardData.setData("Text",location.href);
                Toast('该版本的链接已复制成功');
            },
            preview(index,e){//预览
                window.templateCode = e.templateCode==null?0:e.templateCode;
                console.log('=========预览==========',window.templateCode);
                //let templateUrl = '';
                if(e.bindingStatus){
                    //templateUrl = window.location.href+'?projectId='+this.projectId
                    this.$router.push({name:'preview',query:{"projectId":this.projectId,"templateCode":window.templateCode}});
                }else{
                    //templateUrl = window.location.href+'?templateContentId='+e.templateContentId
                    this.$router.push({name:'preview',query:{"templateContentId":e.templateContentId,"templateCode":window.templateCode}});
                }
                //this.$router.push({name:'preview',query:{"projectId":this.projectId}});

            },
            copyUrl(index,e){//复制链接
                let templateUrl = '';
                window.templateCode = e.templateCode==null?0:e.templateCode;
                if(e.bindingStatus){
                    templateUrl = location.host+'/launch/#/pages/preview'+'?projectId='+this.projectId+'&'+'templateCode='+window.templateCode;
                }else{
                    templateUrl = location.host+'/launch/#/pages/preview'+'?templateContentId='+e.templateContentId+'&'+'templateCode='+window.templateCode;
                }
                //this.$router.push({name:'preview',query:{"projectId":this.projectId}});
                console.log(location.host+'#/pages/preview','shangxu')
                this.$alert(templateUrl, '项目链接');
            },
            // 修改一页显示的条数
            handleSizeChange(size) {
                this.pages.current = 1;
                this.pages.pageSize = size;
            },
            // 上下翻页
            handleCurrentChange(currentPage) {
                this.pages.current = currentPage;
                this.getData();
                console.log(this.pages.current,this.tableData,'========')
            },
            //switch开关
            switchFn(index,data){
                this.updateTfbContentStatus(data);
            },
            ct(d1,d2,d3,d4){
                console.log(d1,d2,d3,d4)
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "./detail.scss"
</style>

