<template>
  <div>
    <!-- <img src="https://m.jzlives.cn/file/servantequity/h5image/smrz.png" alt="" class="banner-adv"/> -->
    <!-- <img src="../assets/banner-bx.jpg" alt class="banner-adv" /> -->
    <div class="banner-wrapper">
      <img src="../assets/banner_bx.png" alt />
    </div>
    <div class="bx-detail-wrapper" v-if="isInsurance==1">
      <div class="item-block">
        <div class="item-title">
          <span class="item-name">家政服务保单</span>
          <span class="item-status">已投保</span>
        </div>
        <div class="item-line">
          <img src="../assets/icon_insurance.png" alt />
          <span class="line-label">投保单号:</span>
          <span class="line-content">{{insuranceInfo.policyNo}}</span>
        </div>
        <div class="item-line">
          <img src="../assets/icon_insurance.png" alt />
          <span class="line-label">验真码:</span>
          <span class="line-content">{{insuranceInfo.verificationCode}}</span>
        </div>
        <div class="item-line">
          <img src="../assets/icon_time.png" alt />
          <span class="line-label">投保时间:</span>
          <span class="line-content">{{insuranceInfo.insureTime}}</span>
        </div>
  <div class="item-result" @click="goToContract" v-if="contractSign">
          <span>去签署合同</span>
          <van-icon name="arrow" color="#999" />
        </div>
        <div class="item-result" @click="viewMyInsurance">
          <span>查看我的电子保单</span>
          <van-icon name="arrow" color="#999" />
        </div>
        <div class="item-result" @click="viewAuthInsurance">
          <span>官网查询投保凭证</span>
          <van-icon name="arrow" color="#999" />
        </div>
      
        <p class="service-tel">平安客服电话：95511</p>
      </div>
    </div>
    <!-- 未投保 0 投保成功1 失败2-->
    <div class="no-policy" v-if="isInsurance==0">
      <div class="item-title">
        <span class="item-name">家政服务保单</span>
      </div>
      <div class="submit-wrapper">
        <van-button block type="primary" @click="goToPolicy">去投保</van-button>
      </div>
    </div>
    <!-- 投保失败 -->
    <div class="no-policy" v-if="isInsurance==2">
      <div class="item-title">
        <span class="item-name">家政服务保单</span>
      </div>
      <p class="policy-fail">投保失败</p>
    </div>
    <!-- <div class="no-content" v-if="isInsurance">
      <img src="../assets/no-content.png" alt />
      <p>正在全力生成保单中…</p>
    </div>-->
    <copyright></copyright>
    <!-- 弹框 -->
    <van-dialog
      v-model="dialogShow"
      title="请确认您的投保信息"
      cancelButtonText="联系客服"
      confirmButtonText="查看电子保单"
      cancelButtonColor="#0EAEFC"
      confirmButtonColor="#0EAEFC"
      :close-on-click-overlay="true"
      show-cancel-button
      @confirm="dialogConfirm"
      @cancel="dialogCancel"
    >
      <div class="dialog-wrapper">
        <p>
          <span class="dialog-title">姓名</span>
          <span class="dialog-content">{{insuranceInfo.customerName}}</span>
        </p>
        <p>
          <span class="dialog-title">身份证</span>
          <span class="dialog-content">{{insuranceInfo.customerIdcard}}</span>
        </p>
        <p>
          <span class="dialog-title">手机号</span>
          <span class="dialog-content">{{insuranceInfo.customerTel}}</span>
        </p>
        <p>
          <span class="dialog-title">家庭服务地址</span>
          <span class="dialog-content">{{insuranceInfo.address}}</span>
        </p>
        <div class="dialog-tips">*您提交的信息将用于投保，只有信息正确保险才会生效，如果信息有误，保险将不能生效。 如有问题，请致电400-920-8718</div>
      </div>
    </van-dialog>

    <navbar :activeIndex="0"></navbar>
  </div>
</template>

<script>
import Service from "../script/api/service";
import Copyright from "@/components/Copyright";
import Navbar from "@/components/Navbar";
export default {
  name: "bx",
  data() {
    return {
      orderNo: "",
      queryUrl: "",
      isInsurance: "",
      insuranceInfo: {
        policyNo: "",
        insureTime: "",
        verificationCode: "",
        customerName: "",
        customerIdcard: "",
        customerTel: "",
        address: ""
      },
      dialogShow: false,
      contractSign: "" //是否展示去签署合同
    };
  },
  components: {
    Copyright,
    Navbar
  },
  watch: {},
  created() {
    console.log("index create");

    let userInfo = JSON.parse(localStorage.getItem("userInfo"));

    let orderNo = "";
    if (userInfo == null) {
      this.$router.replace("qyb");
    } else {
      orderNo = userInfo.orderNo;
      this.orderNo = userInfo.orderNo;
      let params = { orderNo: orderNo };
      this.getInsurance(params);
      this.selectContract(params);
    }
  },

  methods: {
    getInsurance: function(params) {
      Service.$axiosInsurance(params).then(res => {
        if (res.data.errno == "-1") {
          this.$toast(res.data.data);
        } else if (res.data.errno == "0") {
          this.isInsurance = res.data.data.state;
          if (res.data.data.state == 1) {
            this.insuranceInfo = res.data.data;
            this.queryUrl = res.data.data.attrOne;
            sessionStorage.setItem("queryUrl", res.data.data.attrOne);
            // this.insuranceInfo.policyNo = res.data.data.policyNo;
            // this.insuranceInfo.insureTime = res.data.data.insureTime;
            // this.insuranceInfo.verificationCode =
            //   res.data.data.verificationCode;
          }
        }
      });
    },
    // 根据订单号查询合同$axiosSelectContractByOrderNo
    selectContract: function(params) {
      Service.$axiosSelectContractByOrderNo(params).then(res => {
        if (res.data.errno == "-1") {
          this.$toast(res.data.data);
        } else if (res.data.errno == "0") {
          console.log(res.data.data);
          if (res.data.data == null) {
            this.contractSign = true;
          } else {
            this.contractSign = false;
          }
        }
      });
    },
    viewMyInsurance: function() {
      if (this.queryUrl == null) {
        this.$dialog
          .alert({
            title: "提示",
            message: "保单文件正在努力生成中，请稍后重试"
          })
          .then(() => {
            // on close
            let params = { orderNo: this.orderNo };
            this.getInsurance(params);
          });
      } else {
        this.dialogShow = true;
      }
    },
    dialogCancel: function() {
      window.location.href = "tel:400-920-8718";
    },
    dialogConfirm: function() {
      // 打开保单pdf
      let queryUrl = sessionStorage.getItem("queryUrl");
      // let queryUrl='https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf';
      location.href =
        "/static/pdf/web/viewer.html?file=" + encodeURIComponent(queryUrl);
    },
    viewAuthInsurance: function() {
      this.$router.push("/guide");
    },
    viewInsurance: function() {
      window.location.href =
        "https://property.pingan.com/kehufuwu/fuwugongju/chanxianbaodanchayan.shtml";
    },
    goToPolicy() {
      this.$router.push("/input");
    },
    goToContract() {
      this.$router.push("/contract");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.banner-wrapper {
  min-height: 7.7rem;
}
.banner-wrapper img {
  width: 100%;
}
.no-content {
  text-align: center;
  margin: 0 0 2.4rem 0;
}
.bx-detail-wrapper {
  margin: 0 0 2.4rem 0;
}
.no-content img {
  width: 2.24rem;
  height: 2.24rem;
  margin: 0.66rem 0 0.1rem;
}
.no-content p {
  color: #cfcfcf;
}
p.service-tel {
  padding: 0 0 0 0.26rem;
  color: #999;
  font-size: 0.24rem;
  margin: 0.2rem 0 0 0;
}
.dialog-wrapper {
  padding: 0.26rem 0.46rem;
  font-size: 0.24rem;
}
.dialog-wrapper p {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.2rem 0;
}
.dialog-wrapper span.dialog-title {
  color: #333;
  font-weight: bold;
  flex: 1;
}
.dialog-wrapper span.dialog-content {
  color: #666;
  flex: 2;
  white-space: pre-wrap;
  word-break: break-all;
  text-align: right;
}
div.dialog-tips {
  color: #0eaefc;
  text-align: left;
  font-size: 0.2rem;
  line-height: 0.28rem;
}
.no-policy {
  padding: 0.4rem 0.3rem;
  margin: 0 0 2.22rem 0;
}
.no-policy .item-title {
  padding: 0 0.06rem;
  margin: 0 0 0.32rem 0;
}
.policy-fail {
  font-size: 0.3rem;
  color: #f56c6c;
  padding: 0 0.06rem;
}
</style>
