<template>
  <view class="tips-popup" v-if="show">
    <view class="mask"></view>
    <view class="popup-content">
      <view class="popup-header">
        <text class="popup-title">温馨提示</text>
      </view>
      <view class="popup-body">
        <view class="rule-item">
          <text class="rule-text"
            >发布工时：您所提供的工时服务，将在您正常营业时段内，面向外部商户提供临时性购买您的服务时段的服务，商户下单后需要再指定时间到门店进行服务。具体运营过程中，请您根据实际订单需求，统筹协调预约安排，确保工作的有序开展。</text
          >
        </view>
      </view>
      <view class="btn_box">
        <view @click="goAdd" class="btn">知道了</view>
        <view @click="handleClose" class="btn">取消</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "tips-popup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClose() {
      this.$emit("closePopup", false);
    },
    goAdd() {
      this.$emit("closePopup", false);
      this.$emit("okBtn", false);
    },
  },
};
</script>

<style lang="less" scoped>
.tips-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.popup-content {
  background-image: url("/static/images/icons/tip_bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 570rpx;
  border-radius: 36rpx;
  overflow: hidden;
  box-sizing: border-box;
  padding: 60rpx 47rpx;
}

.popup-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-title {
font-weight: 500;
font-size: 34rpx;
color: #333333;
line-height: 48rpx;
text-align: left;
font-style: normal;
}

.close-btn {
  position: absolute;
  right: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 16rpx;
}

.close-icon {
  width: 32rpx;
  height: 32rpx;
}

.popup-body {
  padding: 36rpx 0rpx 50rpx 0;
}

.rule-item {
  margin-bottom: 24rpx;
}

.rule-item:last-child {
  margin-bottom: 0;
}

.rule-text {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
}
.btn_box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 72rpx;
  .btn {
    width: 200rpx;
    border-radius: 36rpx;
    border: 2rpx solid #979797;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #333333;
  }
}
</style>
