<template>
  <u-popup mode="center" round="10" :show="isShow" :closeOnClickOverlay="false">
    <view class="dialog">
      <view class="close">
        <u-icon name="close" color="#9E9E9E" size="24" @tap="closeDialog"></u-icon>
      </view>
      <view class="top">
        <image src="@/static/images/dialog/insurance-icon2.png" mode="widthFix"></image>
      </view>

      <block v-if="type === 1">
        <view class="title">证件过期提示</view>
        <view class="text" v-if="day > 0">您的{{ name }}{{ day }}天后即将过期，请及时上传最新证件，以免影响接单！</view>
        <view class="text" v-else>您的{{ name }}已过期{{ Math.abs(day) }}天，请及时上传最新证件，以免影响接单！</view>
      </block>

      <block v-if="type === 2">
        <view class="title">证件复审提示</view>
        <view class="text" v-if="day > 0"
          >您的{{ name }}{{ day }}天后即将过复审日期，请及时上传最新证件，以免影响接单！</view
        >
        <view class="text" v-else
          >您的{{ name }}复审日期已过期{{ Math.abs(day) }}天，请及时上传最新证件，以免影响接单！</view
        >
      </block>

      <view class="btn">
        <u-button text="去上传" shape="circle" type="primary" @click="clickButton()"> </u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 0 // 1=证件快过期提示 2=复审快过期提示
    }
  },

  data() {
    return {
      name: '',
      day: ''
    }
  },

  onLoad() {},

  methods: {
    initData() {
      const userInfo = this.$store.state.userInfo
      this.name = userInfo.certExpireName
      this.day = userInfo.certExpireDay
    },

    closeDialog() {
      this.$emit('close')
    },

    clickButton() {
      this.$emit('handle')
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  width: 640rpx;
  background: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 70rpx 70rpx;
  box-sizing: border-box;
  .close {
    position: absolute;
    right: 40rpx;
    top: 40rpx;
  }
  .top {
    margin-top: 30rpx;
    image {
      width: 390rpx;
      height: 220rpx;
    }
  }
  .title {
    font-size: 44rpx;
    font-weight: 500;
  }
  .text {
    text-align: center;
    font-size: 32rpx;
    color: $sec-font;
    line-height: 48rpx;
    margin-top: 30rpx;
  }
  .btn {
    width: 100%;
    margin-top: 60rpx;
  }
}
</style>
