<template src="./updateTemp.html">

</template>

<script>
import util from "../../utils/util";
import { loginService } from "@/services";
import { previewService } from "@/services";
import { Toast } from "mint-ui";
import template0 from '@/components/tempNothing'
import template1 from '@/components/tempOne.vue'
import template2 from '@/editComponents/template2/app.vue'
import template3 from '@/editComponents/template3/app.vue'
import template4 from '@/editComponents/template4/app.vue'
import template6 from '@/editComponents/template6/app.vue'
import template7 from '@/editComponents/template7/app.vue'
import template8 from '@/editComponents/template8/app.vue'
import template9 from '@/editComponents/template9/app.vue'
import template10 from '@/editComponents/template10/app.vue'
import template11 from '@/editComponents/template11/app.vue'
import template15 from '@/editComponents/template15/app.vue'
import template16 from '@/editComponents/template16/app.vue'
import template20 from '@/editComponents/template20/app.vue'
import template21 from '@/editComponents/template21/app.vue'
import template22 from '@/editComponents/template22/app.vue'
import template23 from '@/editComponents/template23/app.vue'
import template26 from '@/editComponents/template26/app.vue'
import template24 from '@/editComponents/template24/app.vue'
import template25 from '@/editComponents/template25/app.vue'
import template27 from '@/editComponents/template27/app.vue'
import template28 from '@/editComponents/template28/app.vue'
import template29 from '@/editComponents/template29/app.vue'
import template30 from '@/editComponents/template30/app.vue'
export default {
    components:{
        'template0':template0,
        'template1':template1,
        'template2':template2,
        'template3':template3,
        'template4':template4,
        'template5':template2,
        'template6':template6,
        'template7':template7,
        'template8':template8,
        'template9':template9,
        'template10':template10,
        'template11':template11,
        'template15':template15,
        'template16':template16,
        'template20':template20,
        'template21':template21,
        'template22':template22,
        'template23':template23,
        'template26':template26,
        'template24':template24,
        'template25':template25,
        'template27':template27,
        'template28':template28,
        'template29':template29,
        'template30':template30,

    },
    data() {
        var serverUrl = "http://skyforest.static.elab-plus.com/";
        return {
            serverUrl: serverUrl,
            urlList: [],
            version: "",
            channel: "",
            tagList:'',
            projectId:1,
            templateId:1,
            content:'',
            templateName:'template0',
            switchOn:false,  // 模板1 保存
            perviewOn:false, // 模板预览
            perviewOff:false, //模板 取消预览
            switchTemp:false,  // 空白模板 保存
            flag:true,
            creator:'',
            templateContentId:'',
            updateData:'',  //编辑模板00
            cencelShow:false,
            shareDec:'',
            shareTitle:''
            // updateData1:'',// 编辑模板1
        };
    },
    // beforeRouteEnter(to, from, next){
    //     next(vm=>{
    //         if(vm.$route.query){
    //             vm.$route.query.flag=vm.$route.query.flag.toString();
    //             vm.flag = vm.$route.query.flag === "true"? true :false;
    //         }
    //     })
    // },
    created(){
         if(this.$route.query){
            if(this.$route.query.templateContentId){
                this.templateContentId=this.$route.query.templateContentId;
                // console.log(this.templateContentId);
                this.updateTemp();
                // console.log(this.updateData,'aspdoaspd')
            }
            if(this.$route.query.flag){
                this.flag = this.$route.query.flag;
                if(this.flag=='0'){
                }else{
                    this.templateName = `template${this.flag}`
                }
                // console.log(this.flag);
                // console.log(typeof(this.flag));
            }
        }
    },
    mounted() {
        this.tagList=localStorage.getItem('_tagList');
        this.projectId=localStorage.getItem('_project_id');
        this.templateId=localStorage.getItem('_tempId');
        this.creator = localStorage.getItem('_accout');
        // if(this.$route.query){
        //     if(this.$route.query.templateContentId){
        //         this.templateContentId=this.$route.query.templateContentId;
        //         console.log(this.templateContentId);
        //         this.updateTemp();
        //     }
        //     if(this.$route.query.flag){
        //         this.$route.query.flag=this.$route.query.flag.toString();
        //         this.flag = this.$route.query.flag === "true"? true :false;
        //         console.log(this.flag);
        //         console.log(typeof(this.flag));
        //     }

        // }
    },
    methods: {
        // 修改编辑模板
        async updateTemp(){

            let data={
                // request:'',
                id:this.templateContentId
            };
            let result = await previewService.detailById(data);
            // console.log(result.data);
            if(result.data.success){
                this.version=result.data.single.title||'';
                this.channel= result.data.single.channel||'';
                this.shareTitle= result.data.single.shareTitle||'';
                this.shareDec= result.data.single.shareDescription||'';
                this.templateId=result.data.single.templateId;
                localStorage.setItem('_tagList',result.data.single.tagIds);
                //localStorage.setItem('_tempId',result.data.single.templateId);
                if(result.data.single.templateId==0){
                    this.flag = 0;
                    this.templateName = `template${this.flag}`
                    this.updateData=result.data.single.content;
                    // console.log(typeof this.updateData,this.updateData,'出现空白模板')
                    // console.log(typeof(this.flag));
                    // console.log(this.flag);
                }else{
                    this.flag = result.data.single.templateId;
                    this.templateName = `template${this.flag}`
                    this.updateData=result.data.single.content;
                    console.log(this.updateData,typeof this.updateData)
                }
            }
        },


        // 模板一
        async com(val){
            // console.log(val);
            this.content=val;
             this.content=JSON.stringify(this.content)
             this.switchOn = false;
            if(this.version==''){
                 Toast('版本名称不能为空');
                 return
             }
              if(this.shareTitle==''){
                 Toast('分享标题不能为空');
                 return
             }
            //   if(this.shareDec==''){
            //      Toast('分享描述不能为空');
            //      return
            //  }
             let data = {
                channel: this.channel,
                content: this.content,
                projectId: localStorage.getItem('_projectId'),
                tagIds: localStorage.getItem('_tagList'),
                templateId: this.templateId,
                title:this.version,
                creator:this.creator,
                id:this.templateContentId,
                updator:this.creator,
                shareTitle:this.shareTitle,
                shareDescription:this.shareDec
            };
            // console.log(data);
            let result = await loginService.save(data);
            if (result.data.success) {
                Toast("保存成功");
                // console.log(result.data)
                this.$router.push({ name: "detail",query:{templateId:this.templateId} });
            } else {
                Toast(result.data.message);
                //  this.switchOn = false;
            }
        },
        // 空白模板
         async switchTempFn(val){

            // console.log(val);
            this.content=val;
            this.content=JSON.stringify(this.content)
            this.switchTemp =false;
            if(this.version==''){
                 Toast('版本名称不能为空');
                 return
             }
            if(this.shareTitle==''){
                 Toast('分享标题不能为空');
                 return
             }
            // if(this.shareDec==''){
            //      Toast('分享描述不能为空');
            //      return
            //  }
             let data = {
                channel: this.channel,
                content: this.content,
                projectId: localStorage.getItem('_projectId'),
                tagIds:localStorage.getItem('_tagList'),
                templateId: 0,
                title:this.version,
                creator:this.creator,
                id:this.templateContentId,
                updator:this.creator,
                shareTitle:this.shareTitle,
                shareDescription:this.shareDec
            };
            // console.log(data);
            let result = await loginService.save(data);
            if (result.data.success) {
                Toast("保存成功");
                // console.log(result.data)
                this.$router.push({ name: "detail" });
            } else {
                Toast(result.data.message);
            }
        },
        checkPerview(val){
            // console.log(val);
        },
        async save() {
            // console.log('保存')
            this.switchOn = true;
            this.switchTemp =true;
        },
        perview() {
             $('.header-top').css('display','none');
            $('.temp').css('background','#000')
            this.perviewOn = true;
            this.perviewOff = false;
            this.cencelShow=true;
            // console.log("预览");

        },
        cancel(){
            //  console.log("取消预览");
             $('.header-top').css('display','block');
            $('.temp').css('background','none')
            this.perviewOff = true;
            this.perviewOn = false;
            this.cencelShow=false;
            // this.perviewOn = false;

        },
        // perviewOff(){

        // }
    },

};
</script>

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