<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 1000px;max-width:1000px;">
      <q-card-section>
        <div class="text-h6">报价单</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh;">
        <div class="row justify-center" v-if="!isPrint" id="quotationbox" style="padding:40px;">
            <div class="col-12">
              <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>
                      </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)&&ShowCancle==0"
                      color="dark" label="撤销报价单" @click="setOfferStatus"></q-btn>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div v-if="isPrint" id="quotationBoxId">
            <img :src="img" />
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="关闭" flat color="grey-10" style="font-weight:400 !important" @click="closequoForm" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    queryCourseOfferInfo,
    saveCourseOfferCustomerStatus
  } from '../../api/course/index'
  import print from "print-js";
  import html2canvas from "html2canvas";
  export default {
    props: ["rId","isShowCancle"],
    data() {
      return {
        persistent: true,
        icons: [
          "negative",
          "primary",
          "warning",
          "secondary",
          "accent",
          "negative",
          "primary",
          "warning",
          "secondary",
          "accent"
        ],
        img: "",
        isPrint: false,
        isGengernal: false,
        Id: 0, //报价单编号
        model: {}, //报价单详情
        ShowCancle:0 //0显示 1 不显示
      };
    },
    created() {
      if (this.rId) {
        this.Id = this.rId;
        this.getDetails();
      }
      if(this.isShowCancle){
        this.ShowCancle = this.isShowCancle;
      }
    },
    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
        });
      },
      closequoForm() {
        this.$emit('close')
        this.persistent = false
      },
      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>
