webapp / GreenwayWeb

<template>
  <div>
    <el-form :model="formInline" :rules="rulesHetong" ref="heForm" label-width="130px" class="demo-ruleForm">
      <!-- <el-form-item label="退租日期" prop="exitDate">
        <el-input v-model="info.contractTerminationDate" disabled></el-input>
      </el-form-item>
      <el-form-item label="退租原因" prop="reasonForExit">
        <el-input maxlength="200" show-word-limit rows="4" v-model="formInline.reasonForExit" placeholder="请输入退租原因"
          type="textarea" />
      </el-form-item>
      <el-form-item label="待缴租金" prop="outstandingRent">
        <el-input v-model="formInline.outstandingRent" placeholder="请输入"></el-input>
      </el-form-item> -->
      <el-form-item label="入驻须知" prop="exitNotice">
        <el-input maxlength="200" show-word-limit rows="4" v-model="formInline.exitNotice" placeholder="请输入" type="textarea" />
        <!-- <wang-editor v-model="formInline.exitNotice" ref="editor" :height="200"></wang-editor> -->
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item>
            <div style="margin-top: 20px">
              <el-button @click="yulanShow()" style="background-color: #3F9B6A;color: #fff;">预览</el-button>
              <el-button @click="close()" class="buttonHover"
                style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog :visible.sync="yulan" custom-class="actSpye_dialog" style="padding: 0;" width="50%" center
      :close-on-click-modal="false" append-to-body>
      <div style="padding:50px 40px;">
        <div class="form-container" ref="contentToConvert" style="background-color:#fff;">
          <div class="form-header">入驻告知单</div>
          <div style="width:100%;" v-html="formInline.exitNotice"></div>
        </div>
        <div style="justify-content:flex-end;margin:20px 20px 0 0;display:flex;">
          <el-button @click="downloadPdf" style="background-color: #3F9B6A;color: #fff">下载</el-button>
          <!-- <el-button style="background-color: #3F9B6A;color: #fff">打印</el-button> -->
          <el-button @click="add" style="background-color: #3F9B6A;color: #fff">发送</el-button>

        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    cereTerminateNotice
  } from '../../../api/commodityLease.js'
  import jsPDF from 'jspdf'
  import wangEditor from "@/components/editor/index"
  import html2canvas from 'html2canvas'
  export default {
    components: {
      wangEditor
    },
    data() {
      return {
        yulan: false,
        shopList: [],
        formInline: {
          // 合同ID
          contractId: null,
          // 租户ID，外键关联Tenants表
          tenantId: null,
          // 租户手机号
          tenantPhone: '',
          // 退租日期
          exitDate: '',
          // 退租原因
          reasonForExit: '',
          // 待缴租金
          outstandingRent: null,
          // 退租须知
          exitNotice: '',
          // 通知类型
          noticeType: '2'
        },
        rulesHetong: {
          exitNotice: [{
            required: true,
            message: '请输入入驻须知',
            trigger: 'blur'
          }],
          noticeType: [{
            required: true,
            message: '请选择通知类型',
            trigger: 'change'
          }]
        },
        xudan: {
          tuizhu: '',
          yuan: '',
          daijiao: '',
          zhifu: '',
          zhifushuo: '',
          zhuangxiu: '',
          noto: '',
        },
      };
    },
    props: {
      info: {
        type: Object,
        default: {}
      }
    },
    created() {

    },
    methods: {
      // 下载
      async downloadPdf() {
        const content = this.$refs.contentToConvert;

        // 使用 html2canvas 将 div 渲染为画布
        const canvas = await html2canvas(content);

        // 获取画布的图像数据
        const imgData = canvas.toDataURL('image/png');

        // 创建一个新的 PDF 文档
        const pdf = new jsPDF('p', 'mm', 'a4');

        // 添加图像到 PDF，第二个参数是图像格式，第三个参数是缩放比例
        const imgWidth = 190; // 图像的宽度（mm）
        const imgHeight = (canvas.height * imgWidth) / canvas.width; // 保持图像的宽高比

        pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); // 10, 10 是图像在 PDF 中的位置（mm）

        // 保存 PDF 文件
        pdf.save('downloaded.pdf');
      },
      yulanShow() {
        this.formInline.exitDate = this.info.contractTerminationDate
        this.$refs.heForm.validate((valid) => {
          console.log(valid)
          if (valid) {
            this.yulan = true
          } else {
            this.$message({
              message: '请填写完整信息',
              type: 'error'
            })
            return;
          }
        })
       
      },
      async add() {
        let that = this
        console.log({...this.info})
        const content = this.$refs.contentToConvert;

        // 使用 html2canvas 将 div 渲染为画布
        const canvas = await html2canvas(content);
        // return
        this.formInline.contractId = this.info.id
        this.formInline.tenantId = this.info.relatedMerchants
        this.formInline.tenantPhone = this.info.tenantTelephone
        this.formInline.exitDate = this.info.contractTerminationDate
        this.formInline.pdfUrl = canvas.toDataURL('image/png')
        console.log({...this.formInline})
        // return
        let info = {
          type:'租赁提醒',
          phone:this.formInline.tenantPhone,
          content:{
            type:'2',
            title:'入驻告知单',
            content:this.formInline.pdfUrl
          },
        }
        console.log(']]]]]]')
        let res =  await that.$setmsg(info);
        console.log(res)
        if (res.code == 200) {
          this.$message({
          message: '发送成功',
          type: 'success'
          })
          this.$emit('removeonaction', '1')
        } else {
          this.$message({
          message: '发送失败',
          type: 'error'
          })
        }
        // this.$refs.heForm.validate((valid) => {
        //   console.log(valid)
        //   if (valid) {
        //     cereTerminateNotice(this.formInline).then(res => {
        //       console.error(res)
        //       if (res.code == 200) {
        //         this.$message({
        //           message: '发送成功',
        //           type: 'success'
        //         })
        //         this.$emit('removeonaction', '1')
        //       } else {
        //         this.$message({
        //           message: '发送失败',
        //           type: 'error'
        //         })
        //       }
        //     })
        //   } else {
        //     this.$message({
        //       message: '请填写完整信息',
        //       type: 'error'
        //     })
        //     return false;
        //   }
        // })
      },
      close() {
        this.$emit('removeonaction', '1')
      }
    },
  };
</script>
<style lang="css">
  .el-upload {
    display: block;
    text-align: left;
  }

  .el-dialog__header {
    background-color: #F2F3F5;
    text-align: left;
  }

  .el-dialog__title {
    line-height: 30px;
    font-size: 15px;
    color: #303133;
  }

  .form-container {
    max-width: 600px;
    margin: 0px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;

  }

  .form-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center
  }

  .form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    width: 152px;
  }

  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .form-group textarea {
    resize: vertical;
  }

  .form-header {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5em;
    font-weight: bold;
  }

  .jianju {
    margin-bottom: 10px;
  }

  .titles {
    position: relative;
    padding-left: 10px;

  }

  .titles::before {
    content: '';
    width: 2px;
    height: 10px;
    background-color: #3F9B6A;
    position: absolute;
    top: 2px;
    left: 0;
  }
</style>