<template>
  <su-popup
    :show="show"
    type="center"
    round="15"
    @close="emits('close')"
    backgroundColor="#fff"
  >
    <view class="model-box">
      <view class="model-box-header">
        <image class="model-box-header-image" src="/static/counpon-header.png" />
        <view class="model-box-header-title">恭喜升级</view>
        <view class="model-box-header-des">恭喜您升级为<text>初级代理</text>，</view>
        <view class="model-box-header-des">平台赠送商品券<text>请选择</text>。</view>
      </view>
      <view class="model-box-content">
        <view class="model-box-content-item" v-for="(item, idx) in dataList" :key="item.type">
          <view class="model-box-content-item-title ss-flex ss-col-center ss-row-between">
            <view>{{ item.type }}</view>
            <radio
              :checked="state.current_type === item.type"
              color="var(--ui-BG-Main)"
              style="transform: scale(0.6)"
              @tap.stop="onChange(item.key)"
            />
          </view>
          <view class="model-box-content-item-cont" v-for="unit in item.typeList" :key="unit.name">
            <view class="model-box-content-item-cont-name">{{ unit.name }}</view>
            <view class="model-box-content-item-cont-time">有效期：{{ unit.time }}</view>
          </view>
        </view>
      </view>
    </view>
  </su-popup>
</template>
<script setup>
  import { computed, reactive } from 'vue';
  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    dataList: {
      type: Array,
      default: () => [{
        type: '方案一',
        key: 'programme_1',
        typeList: []
      }, {
        type: '方案二',
        key: 'programme_2',
        typeList: []
      }],
    },
  });
  const emits = defineEmits(['get', 'close']);
  const state = reactive({
    current_type: '',
  });
  function onChange(key) {
    state.current_type = key;
    emits('get', key);
  }
</script>
<style lang="scss" scoped>
  .model-box {
    width: 554rpx;
    height: 957rpx;
    &-header {
      text-align: center;
      position: relative;
      &-image {
        width: 298rpx;
        height: 64rpx;
      }
      &-title {
        width: 100%;
        font-weight: 400;
        font-size: 26rpx;
        color: #FFFFFF;
        margin-top: -60rpx;
        margin-bottom: 44rpx;
      }
      &-des {
        font-weight: 500;
        font-size: 24rpx;
        color: #000000;
        margin-bottom: 10rpx;
        text {
          color: var(--ui-BG-Main);
        }
        &:last-child {
          margin-bottom: 43rpx;
        }
      }
    }
    &-content {
      padding: 0 34rpx;
      &-item {
        margin-bottom: 45rpx;
        &-title {
          height: 24rpx;
          font-weight: bold;
          font-size: 24rpx;
          color: #010101;
          border-left: 7rpx solid var(--ui-BG-Main);
          padding-left: 10rpx;
          margin-left: 10rpx;
          margin-bottom: 19rpx;
        }
        &-cont {
          background: #FFFFFF;
          border-radius: 15rpx 15rpx 15rpx 15rpx;
          border: 2rpx solid #ccc;
          padding: 26rpx 63rpx;
          &:last-child {
            margin-top: 10rpx;
          }
          &-name {
            font-weight: 500;
            font-size: 22rpx;
            color: #000000;
            margin-bottom: 10rpx;
          }
          &-time {
            font-weight: 400;
            font-size: 17rpx;
            color: #898989;
          }
        }
      }
    }
  }
</style>
