<template>
  <el-dialog title="媒体方案新增" :visible.sync="showAdd"  style="padding: 0;" width="65%"
    center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
    <div style="padding: 15px;width:100%">
    </div>
  <div style="padding:0px 10px 10px 10px;background-color:#fff">
        <el-tabs  :before-leave="beforeTabLeave">
          <el-tab-pane label="推广方案">
			  <el-form ref="jibenFrom" :model="ruleForm" :rules="rules" label-width="120px">
			    <el-form-item label="方案分类" prop="classificationCode">
					<el-cascader
					          v-model="ruleForm.classificationCode"
					         :options="fenleiName"
					          @change="fenleiChange"
					          :props="{ checkStrictly: true }"
					           :show-all-levels="false"
					         clearable
					         style="width: 100%;"
					     ></el-cascader>
						   </el-form-item>
						   <el-form-item label="方案名称" prop="schemeTitle">
						   	 <el-input v-model="ruleForm.schemeTitle" placeholder="请输入" size="mini" style="width:100%" />
						   		   </el-form-item>
								   <el-form-item label="方案编辑器" prop="promotionContent">
								   	 <wang-editor v-model="ruleForm.promotionContent" ref="editor"></wang-editor>
								   		   </el-form-item>
					</el-form>
            
            </el-tab-pane>
          <el-tab-pane label="发布信息">
			  <el-form ref="jibenFrom" :model="ruleForm" :rules="rules" label-width="120px">
			    
			  						   
			  								   <el-form-item label="封面海报" prop="coverImage">
			  								   	 <upimg filePath="tuiguang" :value="ruleForm.coverImage" inputtype="coverImage" :limit="1" @changimg="e=>changimg(e,'coverImage')"></upimg>
			  								   		   </el-form-item>
			  					</el-form>
            
          </el-tab-pane>
        </el-tabs>
<div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
  <!-- <el-button plain @click="zancun" size="mini" style="background-color: #3F9B6A;color: #fff;">方案暂存
  </el-button> -->
        <el-button plain @click="onSubmit" size="mini" style="background-color: #3F9B6A;color: #fff;">方案发布
        </el-button>
        <!-- <el-button plain @click="close" size="mini" style="background-color: #3F9B6A;color: #fff;">发布信息填写
        </el-button> -->
     <!--   <el-button plain @click="close" size="mini" style="background-color: #3F9B6A;color: #fff;">媒体上传
        </el-button>
        <el-button plain @click="close" size="mini" style="background-color: #fff;color: #000;border:1px solid #A0A0A0" class="buttonHover">一键发布
        </el-button> -->
        <el-button plain @click="close" size="mini" style="background-color: #fff;color: #000;border:1px solid #A0A0A0" class="buttonHover">返回
        </el-button>
      </div>
  </div>

</el-dialog>

</template>

<script>
  import {
  addTui,
  editTui
  } from '@/api/tuiguancehuguanli'
  import wangEditor from "@/components/editor/index";
  import upimg from "@/components/ImageUpload/index"
  import { uploadUrl } from '@/utils/request'
  import html2canvas from 'html2canvas'
  import jsPDF from 'jspdf'
  export default {
     props: {
       showAdd:{
         type: Boolean,
         default: false
       },
       fenleiName:{
          type: Array,
                     default: function() {
                         return []; // 返回一个空数组作为默认值
                     },
       }
     },
    name: 'activityBz',
    components: { wangEditor ,upimg},
    data() {
      return {
        uploadFileUrl: uploadUrl, // 请求地址
        editTrue:false,
        addMing:false,
         input: "",
        ruleForm: {
          planName:'',
          classificationCode:'',
        schemeTitle:'',
        promotionContent:'',
        updateUser:'',
        coverImage:'',
          createDate:'',//创建时间
		  state:'1',
        },
        mingFrom:{
          detailLtemName:'',
          estimatedQuantity:'',
          estimatedCost:'',
          notes:''
        },
        time: '',
        tableData: [],
        fileData:[],
        dataList:[],
        currentTime:'',
        tuxiangData: {
          bian: null,
        fabu:null
        },
		rules:{
		  classificationCode:[{ required: true, message: '请选择分类', trigger: 'change' }],
		  schemeTitle: [{
		    required: true,
		    message: '请输入方案名称',
		    trigger: 'blur'
		  }],
		  coverImage: [{
		    required: true,
		    message: '请上传图片',
		    trigger: 'change'
		  }],
		
		},
        }
      },
      created() {


        },
         mounted() {
             this.editTrue = true
          },
        methods: {
          changimg(e,type) {
            this.ruleForm[type] = e

          },
          //获取当前时间
           updateCurrentTime() {
                const now = new Date();
                const year = now.getFullYear();
                const month = (now.getMonth() + 1).toString().padStart(2, '0');
                const day = now.getDate().toString().padStart(2, '0');
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                const seconds = now.getSeconds().toString().padStart(2, '0');

                this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
              },
zancun(){
},
handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
          //上传
          submitUpload() {
            this.$refs.upload.submit();
          },
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePreview(file) {
            console.log(file);
          },
         // 切换事件
         beforeTabLeave(activeName, oldActiveName) {
           // let bian = document.getElementById('bian')
           // let fabu = document.getElementById('fabu')
           // this.ActiveName = activeName
           // console.log(activeName)
           // if (oldActiveName == 0) {
           //   html2canvas(bian).then(canvas => {
           //     // 将canvas转换为图片
           //     const imgData = canvas.toDataURL('image/png');
           //     this.tuxiangData.bian = imgData
           //   })

           // } if (activeName == 1) {
           //   html2canvas(fabu).then(canvas => {
           //     // 将canvas转换为图片
           //     const imgData = canvas.toDataURL('image/png');
           //     this.tuxiangData.fabu = imgData
           //   })
           // }

         },
          //保存
          onSubmit() {
			   this.$refs.jibenFrom.validate((valid) => {
			          if (valid) {
							let FlieName = this.ruleForm.schemeTitle
							this.updateCurrentTime();
							this.ruleForm.createDate =this.currentTime
							addTui(this.ruleForm).then(res => {
							  this.$message({
							    message: '保存成功',
							    type: 'success'
							  });
							  this.$emit('childClose', false);
							       this.$refs.editor.html = '<p><br></p>'
							       this.ruleForm={
							    planName:'',
							    classificationCode:'',
							  schemeTitle:'',
							  promotionContent:'',
							  updateUser:'',
							  coverImage:'',
							    createDate:'',//创建时间
								state:'1',
							  }
							      }).catch(err => {
							        console.log(err)
							      })
			          } else {
			            this.$message({
			                message: '请填写数据',
			                type: 'error',
			                offset: 100
			              })
			            return false;
			          }
			        });
            let that = this
         
            // this.$nextTick(() => {
            //   var bian = document.getElementById('bian')
            //   var fabu = document.getElementById('fabu')
            // })
            // if (that.oldActiveName == 0) {
            //   html2canvas(bian).then(canvas => {
            //     // 将canvas转换为图片
            //     const imgData = canvas.toDataURL('image/png');
            //     this.tuxiangData.bian = imgData
            //   })

            // } else if (that.oldActiveName == 1) {
            //   html2canvas(fabu).then(canvas => {
            //     // 将canvas转换为图片
            //     const imgData = canvas.toDataURL('image/png');
            //     this.tuxiangData.fabu = imgData
            //   })
            // }
        
              // const pdf = new jsPDF('p', 'mm', 'a4');
              // Object.keys(that.tuxiangData).forEach((key, index) => {
              //   // console.log(this.tuxiangData[key])
              //   if (that.tuxiangData[key] != null) {
              //     pdf.addImage(that.tuxiangData[key], 'PNG', 5, 10 + index * 80, 200, 60); // 调整位置和尺寸以适应你的需求
              //   }

              // });
              // const pdfData = pdf.output('arraybuffer');
              // const blob = new Blob([pdfData], {
              //   type: `${FlieName}.pdf`
              // });
              // const url = URL.createObjectURL(blob);
              // pdf.save(`${FlieName}.pdf`)
              // // 创建FormData
              // const formData = new FormData();
              // formData.append('file', blob, `'${FlieName}.pdf'`);
              // // 使用fetch上传文件
              // fetch(uploadUrl, {
              //     method: 'POST',
              //     body: formData,
              //   })
              //   .then(response => response.json())
              //   .then(data => console.log(data))
              //   .catch(error => console.log(error));

      
          },
          close(){
            this.tuxiangData = {
              bian: null,
              fabu: null,
            }
            this.$emit('childClose', false);
            this.$refs.editor.html = '<p><br></p>'
            this.ruleForm= {
          planName:'',
          classificationCode:'',
        schemeTitle:'',
        promotionContent:'',
        updateUser:'',
        coverImage:'',
          createDate:'',//创建时间
		  state:'1',
        }
    },
    fenleiChange(value){
        this.ruleForm.classificationCode = value[value.length - 1]
    }
  }
  }
</script>

<style scoped>
  .zhuti {
    background-color: #Fff;
    min-height: calc(100vh - 50px - 20px);
  }

  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    line-height: 108px;
    /*text-align: center;*/
  }

  .avatar {
    width: 108px;
    height: 108px;
    display: block;
  }
  ::v-deep .el-input__inner{
    height:32px;
    line-height:32px;
  }
  ::v-deep .el-input__inner:focus {
       border: #11be59 1px solid;
    }
    ::v-deep .el-input__inner:hover {
         border: #11be59 1px solid;
      }
      ::v-deep .el-select .el-input.is-focus .el-input__inner{
          border-color:#11be59
      }
     ::v-deep .el-form-item__label{
       font-weight: 100;
       font-size: 14px;
       color:#000000e6;

        }
</style>
<style lang="scss" scoped>
  ::v-deep .dialog_css{
    margin-top:11vh;
    margin-left:13%;
    .el-dialog__body {
      padding: 0px;
      background-color: #fff;
    }
    .el-dialog__header {
      background-color: #fff;
      padding:10px 20px 10px 20px;
      border-bottom: 1px solid #EFEFEF;
    }

    .el-dialog__title {
      font-size:14px;
      color: #000;
    }
  }
  ::v-deep .el-tabs--border-card {
        border: none;
        -webkit-box-shadow:none;
        box-shadow:none;
    .el-tabs__content{
      border:  1px solid #E4E7ED;
      padding:0;
    }
    .el-tabs__header{
      background-color: #fff;
        border-bottom:none;
    }
    .el-tabs__content{
        border: none;
     }
    .el-tabs__header .el-tabs__item{
      border: none;
      margin-right: 10px;
      background-color: #F2F2F2;
      font-size:12px;
       border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      padding:0 15px;
    }
    .el-tabs__header .el-tabs__item.is-active{
      color:#fff;
      background-color: #3F9B6A;
    }
    .el-tabs__header .el-tabs__item:not(.is-disabled):hover{
       color:#3F9B6A;
    }
  }
    ::v-deep .el-date-table td.end-date span, .el-date-table td.start-date span{
      background-color:#3F9B6A;
    }
   ::v-deep .el-date-table td.available:hover{
      color: #3F9B6A;
    }
    ::v-deep .el-button.is-plain:focus, .el-button.is-plain:hover{
      border-color:fff;
      color:#3F9B6A;
    }
    ::v-deep .el-upload--picture-card{
      width:70px;
      height:70px;
      line-height:80px;
    }
    ::v-deep .buttonHover:hover{
      color:#3f9b6a !important;
      border-color: #c5e1d2 !important;
      background-color: #ecf5f0 !important;
      outline: none;
    }
</style>
