<template>
  <div style="max-width:1290px;margin:0 auto;padding:30px;">
    <q-card style="padding-top: 6.75rem!important;background:rgb(255,255,255)" ref="quotationbox" id="quotationbox"
      class="shadow-24" v-if="!isPrint">
      <div class="row justify-center">
        <div class="col-9">
          <div class="flex items-start" style="padding-bottom:5rem;">
            <div class="text-h3 text-weight-bold col">
              <span>报价单</span>
              <div style="font-size:13px;font-weight:400;" class="text-muted">
                No:{{model.SerialNum}}
              </div>
            </div>
            <div class="col-auto">
              <div class="text-right" style="margin-bottom:0px;">
                <img src="../../assets/images/quo_logo.png" height="30px" />
                <img src="../../assets/images/quo_logo_text.png" class="q-ml-xs" height="30px" />
              </div>
              <div class="text-muted " style="font-size: 1.05rem!important;">
                成都市锦江区青和里南段55号阳光新业中心2号楼23楼
              </div>
              <div class="text-muted text-right" style="font-size: 1.05rem!important;">
                联系热线：028-61993633
              </div>
            </div>
          </div>
          <div style="margin-bottom: 7.5rem!important;">
            <q-img src="../../assets/images/quo/banner1.jpg" spinner-color="white"
              style="height: 243px;width:100%;border-radius: 10px;" class="rounded-borders">
            </q-img>
          </div>
          <div class="row" :style="{'margin-bottom':isGengernal?'6rem':'20px'}">
            <div class="col-9" style="padding-top: 2.5rem;">
              <table class="quo-table">
                <thead>
                  <tr>
                    <th style="text-align:left;">课程名称</th>
                    <th>课时</th>
                    <th>原价</th>
                    <th>人数</th>
                    <th>折扣价</th>
                    <th>优惠内容</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in model.OfferDetails">
                    <td style="text-align:left">
                      <q-icon :color="icons[0]" name="iconfont icon-yuanquan" class="q-mr-xs" size="14px"></q-icon>
                      <span>{{item.CourseName}}</span>
                    </td>
                    <td>{{item.ClassHours}} 课时</td>
                    <td>{{item.OriginalPrice.toFixed(2)}}</td>
                    <td>{{item.JoinNum}}</td>
                    <td>{{item.ActualPrice.toFixed(2)}}</td>
                    <td class="remark-font">
                      <div v-for="(x,i) in item.Remark.split('^')" :key="i">
                        {{x}}
                      </div>
                    </td>
                    <!-- <td class="remark-font">
                      <div>双人报名享70折优惠</div>
                    </td> -->
                  </tr>
                </tbody>
              </table>
              <q-separator color="blue-grey-1" style="margin:20px auto;"></q-separator>
              <div class="quo-font text-weight-bold">销售经理</div>
              <div class="row">
                <div class="col-3 quo-font f14">姓名：</div>
                <div class="col-3 quo-font f14 text-right">{{model.CreateByName}}</div>
              </div>
              <div class="row">
                <div class="col-3 quo-font f14">联系电话：</div>
                <div class="col-3 quo-font f14 text-right">{{model.CreateTel}}</div>
              </div>
              <div class="row q-pb-xl">
                <div class="col-3 quo-font f14">微信：</div>
                <div class="col-3 quo-font f14 text-right">{{model.CreateWeChatNo}}</div><!-- TODO: 完成微信管理功能 -->
              </div>
            </div>
            <div class="col text-right"
              style="border-left:1px solid #ebedf3;padding-left: 2.5rem;padding-bottom: 2.5rem;padding-top: 2.5rem;margin-left:2.5rem">
              <div style="color:#b5b5c3!important;font-size:17px;" class="">
                合计金额
              </div>
              <div style="font-family:Poppins,Helvetica,sans-serif;font-size:26px;" class="text-weight-bold">
                ￥<span v-if="model.TotalPrice">{{model.TotalPrice.toFixed(2)}}</span>
              </div>
              <div class="remark-font"
                style="padding-bottom: 3rem;margin-bottom: 4rem;border-bottom:1px solid #ebedf3;">
                含税报价
              </div>
              <div style="color:#b5b5c3!important;font-size:14px;" class="text-weight-bold q-mb-md">
                客户信息
              </div>
              <div style="font-size:14px;" class="text-weight-bold">{{model.CustomerName}}</div>
              <div style="font-size:14px;" class="text-weight-bold q-mb-lg">
                {{model.CustomerTel}}
              </div>
              <div style="color:#b5b5c3!important;font-size:14px;" class="text-weight-bold q-mb-md">
                报价单号
              </div>
              <div style="font-size:14px;" class="text-weight-bold q-mb-lg">
                No:{{model.SerialNum}}
              </div>
              <div style="color:#b5b5c3!important;font-size:14px;" class="text-weight-bold q-mb-md">
                报价时间
              </div>
              <div style="font-size:14px;" class="text-weight-bold">
                {{model.CreateTime}}
              </div>
            </div>
          </div>
          <div v-if="!isGengernal">
            <q-separator color="blue-grey-1" style="margin-bottom:20px;"></q-separator>
            <div style="padding:6rem 0;" class="row">
              <div class="col">
                <q-btn color="primary" label="下载报价单" class="q-mr-md" @click="saveImage" :loading="isGengernal"></q-btn>
                <q-btn color="primary" flat label="获取二维码"></q-btn>
              </div>
              <div class="col-auto">
                <q-btn v-if="model&&model.CustomerStatus&&(model.CustomerStatus==1||model.CustomerStatus==2)"
                  color="dark" label="撤销报价单" @click="setOfferStatus"></q-btn>
              </div>
            </div>
          </div>
        </div>
      </div>
    </q-card>
    <div v-if="isPrint" id="quotationBoxId">
      <img :src="img" />
    </div>
  </div>
</template>

<script>
  import {
    queryCourseOfferInfo,
    saveCourseOfferCustomerStatus
  } from '../../api/course/index'
  import print from "print-js";
  import html2canvas from "html2canvas";
  export default {
    meta: {
      title: "报价单"
    },
    data() {
      return {
        icons: [
          "negative",
          "primary",
          "warning",
          "secondary",
          "accent",
          "negative",
          "primary",
          "warning",
          "secondary",
          "accent"
        ],
        img: "",
        isPrint: false,
        isGengernal: false,
        Id: 0, //报价单编号
        model: {}, //报价单详情
      };
    },
    created() {
      if (this.$route.query.Id) {
        this.Id = this.$route.query.Id;
        this.getDetails();
      }
    },
    methods: {
      //设置报价单状态
      setOfferStatus() {
        this.$confirm('是否撤销此报价单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          saveCourseOfferCustomerStatus({
            Id: this.Id,
            CustomerStatus: 3
          }).then(res => {
            if (res.Code == 1) {
              this.$message.success("撤销成功!")
              this.$router.push({
                path: "/sale/courseoffer",
              });
            } else {
              this.$message.error(res.Data.Message);
            }
          })
        })
      },
      //获取报价单详情
      getDetails() {
        queryCourseOfferInfo({
          Id: this.Id
        }).then(res => {
          if (res.Code == 1) {
            this.model = res.Data;
          }
        });
      },
      print() {
        printJS({
          printable: "quotationBoxId", // 标签元素id
          type: "html"
        });
        setTimeout(() => {
          this.isPrint = false;
          this.isGengernal = false;
        }, 1000);
      },
      dataURLToBlob(dataurl) {
        let arr = dataurl.split(",");
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
          type: mime
        });
      },
      saveImage() {
        if (!this.isGengernal) {
          this.isGengernal = true;
          setTimeout(() => {
            let canvasID = document.getElementById("quotationbox");
            let a = document.createElement("a");
            html2canvas(canvasID, {
              useCORS: true,
              allowTaint: true,
              backgroundColor: "#FFFFFF",
              scale: 1.3,
              taintTest: false
            }).then(canvas => {
              let dom = document.body.appendChild(canvas);
              dom.style.display = "none";
              a.style.display = "none";
              document.body.removeChild(dom);
              let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
              a.setAttribute("href", URL.createObjectURL(blob));
              var name = "报价单.png";
              if (this.model) {
                name = this.model.Name + "报价单.png";
              }
              a.setAttribute("download", name);
              document.body.appendChild(a);
              a.click();
              URL.revokeObjectURL(blob);
              document.body.removeChild(a);
              this.isGengernal = false;
            });
          }, 1000);
        }
      }
    }
  };

</script>

<style>
  .quo-table {
    width: 100%;
  }

  .quo-table thead th {
    font-size: 13px;
    font-weight: bold;
    color: #b5b5c3 !important;
    border-bottom: 1px solid rgb(235, 237, 243);
    line-height: 1.5;
    padding-bottom: 2.25rem !important;
    text-align: right;
  }

  .quo-table tbody td {
    padding-bottom: 0.75rem;
    vertical-align: top;
    padding-top: 1.75rem !important;
    padding-left: 0;
    font-size: 13px;
    font-weight: 600;
    color: #3f4254;
    line-height: 1.5;
    text-align: right;
  }

  .quo-font {
    color: #3f4254;
    font-size: 15px;
    margin-bottom: 0.75rem !important;
  }

  .quo-font.f14 {
    font-size: 14px;
  }

</style>
