<template>
  <u-popup mode="center" round="10" :show="isShow" :closeOnClickOverlay="false">
    <view class="dialog">
      <view class="close">
        <u-icon name="close-circle" color="#ffffff" size="40" @tap="closeDialog"></u-icon>
      </view>
      <view class="top">
        <image src="@/static/images/dialog/protocol-bg.png" class="bg" mode="widthFix"></image>
        <view class="title">电子协议签约提示</view>
      </view>
      <view class="box">
        <view class="icon">
          <image src="@/static/images/dialog/protocol-icon1.png" mode="widthFix"></image>
        </view>
        <view class="text">您的电子协议已过期，逾期不签约将影响登录使用，是否现在去签约？</view>
        <view class="link">请先阅读《服务人员承揽协议》</view>
      </view>
      <view class="btn">
        <u-button
          text="去签约"
          shape="circle"
          color="linear-gradient(172deg, #7FDAFF 0%, #6DA7FF 100%);"
          @click="clickButton()"
        >
        </u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {}
  },

  onLoad() {},

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

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

<style lang="scss" scoped>
.dialog {
  width: 640rpx;
  background: #ffffff;
  border-radius: 20rpx;
  position: relative;
  .close {
    position: absolute;
    right: 0;
    top: -100rpx;
    width: 640rpx;
    display: flex;
    justify-content: flex-end;
    padding-bottom: 20rpx;
  }
  .top {
    position: relative;
    height: 312rpx;
    .bg {
      width: 640rpx;
      height: 312rpx;
    }
    .title {
      position: absolute;
      top: 50rpx;
      left: 0;
      width: 640rpx;
      text-align: center;
      font-size: 44rpx;
      color: #ffffff;
    }
  }
  .box {
    width: 560rpx;
    background: #ffffff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -140rpx;
    position: relative;
    margin-left: 40rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    .icon {
      width: 184rpx;
      height: 184rpx;
      border-radius: 50%;
      box-shadow: 0px 8px 32px 2px rgba(58, 171, 250, 0.3);
      margin-top: -40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      image {
        width: 126rpx;
        margin-left: -10rpx;
      }
    }
    .text {
      font-size: 32rpx;
      line-height: 48rpx;
      text-align: center;
      margin-top: 30rpx;
    }
    .link {
      color: $theme-color;
      text-align: center;
      margin-top: 30rpx;
    }
  }
  .btn {
    padding: 40rpx;
  }
}
</style>
