<template>
  <div v-if="showPopup" class="sl-popup">
    <div :class="[ani, animation ? 'ani' : '', !custom ? 'sl-custom' : '']" class="sl-popup__mask" @click="close(true)" />
    <div :class="[type, ani, animation ? 'ani' : '', !custom ? 'sl-custom' : '']" class="sl-popup__wrapper" @click="close(true)">
      <div class="sl-popup__wrapper-box" @click.stop="clear">
        <div class="sl-popup-page">
          <img class="image close" src="./close.svg" @click="close()"/>
          <div class="img" :style="{backgroundImage:`url('`+img+`')`}"></div>
          <div class="content">
            <div class="title">This package is protected by Buyer Protection.</div>
            <div class="ul">
              <div class="li">
                <div class="label">Email</div>
                <div class="value">{{ info.admin_domain?info.admin_domain:'--' }}</div>
              </div>
              <div class="li">
                <div class="label">Cover ID</div>
                <div class="value">{{ info.policy_id?info.policy_id:'--' }}</div>
              </div>
              <div class="li">
                <div class="label">Order Number</div>
                <div class="value">{{ info.order_name?info.order_name:'--' }}</div>
              </div>
              <div class="li">
                <div class="label">Order Date</div>
                <div class="value">{{ info.order_date?format(info.order_date):'--' }}</div>
              </div>
              <div class="li">
                <div class="label">Protected value</div>
                <div class="value">{{ info.sum_assured?info.sum_assured:'--' }}</div>
              </div>
              <div class="li">
                <div class="label">Protection cost</div>
                <div class="value">{{ info.amount?info.amount:'--' }}</div>
              </div>
            </div>
            <div class="btn-solid">
              <div class="span" @click="ok">Report an issue ></div>
            </div>
            <div class="desc">
              <div class="p">Having questions about the cover?</div>
              <div class="p">Contact us at <span>17support@seel.com</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 备注 -->
 <!--
 <sl-popup ref="popup" @change="change" @ok="ok"></sl-popup>

	通过ref来开启或者关闭弹窗 例：打开this.$refs.popup.open() 关闭this.$refs.popup.close()

	animation -> 窗口动画开启或者关闭 boole 默认true
	maskClick -> 点击背景是否允许关闭窗口 boole 默认false

	@change ->窗口发生变化触发事件返回show:ture/false,
	@ok ->按钮被点击触发事件
	-->
<script>

	export default {
		name: 'Policy',
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 是否开启自定义
			custom: {
				type: Boolean,
				default: false
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: false
			}
			// show: {
			// 	type: Boolean,
			// 	default: true
			// }
		},
		data () {
			return {
				img: require('./image.svg'),
				type: 'center', // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
				ani: '',
				showPopup: false,
				info: {}
			}
		},
		watch: {
			show (newValue) {
				if (newValue) {
					this.open()
				} else {
					this.close()
				}
			}
		},
		created () {},
		mounted () {
			var me = this
			window.onresize = function () {
				me.position()
			}
		},
		methods: {
			clear () {},
			// 打开
			async open () {
				await this.position()
				await this.getData()
				this.$emit('change', {
					show: true
				})
				this.showPopup = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = 'sl-' + this.type
					}, 30)
				})
			},
			// 获取数据
			getData: async function () {
				var me = this
				var myHeaders = new Headers()
				myHeaders.append('Content-Type', 'application/json')

				var requestOptions = {
					method: 'POST',
					headers: myHeaders,
					// redirect: 'follow',
					body: 'follow'
				}

				fetch('https://api-dev.seel.com/v1/17pp/get_policy_info?tracking=123456677&carrier=UPS&email=user_mock@qq.com', requestOptions)
					.then(result => {
						me.info = result.data
						console.log(result)
					})
					.catch(error => console.log('error', error))
			},
			// 关闭
			close (type) {
				if (!this.maskClick && type) return
				this.$emit('change', {
					show: false
				})
				this.ani = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false
					}, 300)
				})
			},
			// 处理弹窗显示的位置
			position: async function () {
				var me = this
				var w = document.documentElement.clientWidth
				if (w <= 480) {
					if (me.type != 'bottom') {
						me.type = 'bottom'
						me.close()
						me.$nextTick(() => {
							setTimeout(() => {
								me.open()
							}, 300)
						})
					}
				} else {
					if (me.type != 'center') {
						me.type = 'center'
						me.close()
						me.$nextTick(() => {
							setTimeout(() => {
								me.open()
							}, 300)
						})
					}
				}
				me.$forceUpdate()
			},
			ok: function () {
				this.$emit('ok', true)
			},
			format: function (timestamp) {
				const date = new Date(timestamp)
				return date.toDateString()
			}
		}
	}
</script>
<style>
	@charset "UTF-8";
	.sl-popup {position: fixed;top: 0;top: 0;bottom: 0;left: 0;right: 0;z-index: 998;overflow: hidden;}
	.sl-popup__mask {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 998;background: rgba(0, 0, 0, .4);opacity: 0;}
	.sl-popup__mask.ani {transition: all .3s;}
	.sl-popup__mask.sl-bottom, .sl-popup__mask.sl-center, .sl-popup__mask.sl-top {opacity: 1;}
	.sl-popup__wrapper {position: absolute;z-index: 999;box-sizing: border-box;}
	.sl-popup__wrapper.ani {transition: all .3s;}
	.sl-popup__wrapper.top {top: 0;left: 0;width: 100%;transform: translateY(-100%);}
	.sl-popup__wrapper.bottom {bottom: 0;left: 0;width: 100%;transform: translateY(100%);}

	.sl-popup__wrapper.center {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;transform: scale(1.2);opacity: 0;}
	.sl-popup__wrapper-box {position: relative;box-sizing: border-box;}
	.sl-popup__wrapper.sl-custom.center .sl-popup__wrapper-box {position: relative;}
	.sl-popup__wrapper.sl-custom.bottom .sl-popup__wrapper-box, .sl-popup__wrapper.sl-custom.top .sl-popup__wrapper-box {width: 100%;}
	.sl-popup__wrapper.sl-bottom, .sl-popup__wrapper.sl-top {transform: translateY(0);}
	.sl-popup__wrapper.sl-center {transform: scale(1);opacity: 1;}

	.sl-popup-page{max-width:480px;border-radius: 8px;background-color: #ffffff;position: relative;overflow: hidden;}
	.sl-popup-page .close{width: 24px;height:24px;position: absolute;top:18px;right: 24px; z-index: 1;cursor: pointer;}
	.sl-popup-page .img{width:100%;height:250px;background-position:bottom;background-repeat: no-repeat;background-size:cover;}
	.sl-popup-page .content{padding:32px;}
	.sl-popup-page .content .title{font-family: 'Inter';font-style: normal;font-weight: 700;font-size: 24px;line-height: 32px;color: #1E2022;}
	.sl-popup-page .content .ul{padding:8px 0;display: flex;-webkit-box-wrap: wrap;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;flex-wrap:wrap;}
	.sl-popup-page .content .ul .li{width:50%;padding:8px 0;}
	.sl-popup-page .content .ul .li .label{font-family: 'Inter';font-style: normal;font-weight: 400;font-size: 14px;line-height: 20px;color: #1A1F24;padding-bottom:3px;}
	.sl-popup-page .content .ul .li .value{font-family: 'Inter';font-style: normal;font-weight: 400;font-size: 14px;line-height: 20px;color: #6D7175;}

	.sl-popup-page .content .btn-solid{display: flex;justify-content:center;padding:20px 0px 15px 0;}
	.sl-popup-page .content .btn-solid .span{width: 100%;height: 60px;background: #003A9B;border-radius: 30px;display: flex;justify-content:center;align-items:center;box-shadow: 0px 3px 12px rgba(74, 58, 255, 0.18);cursor: pointer;font-family: 'DM Sans';font-style: normal;font-weight: 700;font-size: 18px;color: #FFFFFF;}
	.sl-popup-page .content .btn-solid:hover{opacity: 0.7;}
	.sl-popup-page .content .desc .p{font-family: 'Inter';font-style: normal;font-weight: 400;font-size: 14px;line-height: 20px;text-align: center;color: #5C5F62;}
	.sl-popup-page .content .desc .p span{color:#003A9B;}

	@media only screen and (max-width: 480px){
		.sl-popup-page{max-width:none;width:100%;}
	}
</style>
