<template>
  <div v-if="shipmentTypeList.length" class="ment-container">
    <div v-if="shipmentTypeList.length > 1" class="ment-tabs">
      <div
        v-for="tabItem in shipmentTypeList"
        :key="tabItem.shipmentType"
        class="ment-tabs-item"
        :class="{ 'ment-cur': active === tabItem.shipmentType }"
        @click="bindChangeActive(tabItem.shipmentType)"
      >
        <div class="ment-tabs-text">
          {{ tabItem.shipmentTypeText }}
        </div>
      </div>
      <div :class="['tabs-active', `active-${active}`]" />
    </div>
    <template v-if="active !== 101">
      <slot />
    </template>
    <div v-else class="ment-input">
      <div class="ment-input-flex">
        <text class="ment-input-label">推广员手机号</text>
        <input
          class="ment-input-text"
          type="text"
          :value="shipPhone"
          placeholder="请线下确认后填写号码"
          maxlength="11"
          @blur="bindChangePhone"
        />
      </div>
      <div class="ment-notice">
        请您线下与推广员确认好商品信息后再下单付款，以免因拍错商品导致无法正常取货
      </div>
    </div>
  </div>
</template>
<script>
const CONFTIRM_ORDER = "confirm-order";
export default {
  props: {
    shipmentTypeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      shipPhone: "",
      active: -1
    };
  },
  watch: {
    shipmentTypeList: {
      handler(list) {
        if (list.length) {
          const [activeItem] = list.filter(item => item.select);
          this.active = activeItem?.shipmentType;
        }
      },
      immediate: false,
      deep: true
    }
  },
  methods: {
    bindChangeActive(active) {
      this.$emit(CONFTIRM_ORDER, active);
    },
    bindChangePhone(e) {
      this.$emit("update:promoterPhoneNo", e.detail.value);
    }
  }
};
</script>
<style scoped lang="scss">
.ment-container {
  .ment-tabs {
    display: flex;
    overflow: hidden;
    position: relative;
    &-text {
      display: block;
      font-weight: bold;
      height: 64rpx;
      line-height: 64rpx;
    }
    .ment-tabs-item {
      font-size: $uni-font-size-md;
      color: $uni-text-color-grey;
      flex: 1;
      background-color: #f2f3f5;
      text-align: center;
      box-sizing: border-box;
      border-radius: 16rpx 16rpx 0 0;
      &.ment-cur {
        color: $black;
        background-color: $white;
        height: 72rpx;
        .ment-tabs-text {
          margin-top: 8rpx;
        }
      }
    }
    .ment-tabs-item:not(.ment-cur) {
      margin-top: 8rpx;
    }
    .tabs-active {
      position: absolute;
      height: 74rpx;
      width: 80rpx;
      bottom: 0;
      background: url(https://img.lkbang.net/xcx/ship-202111290242.png) no-repeat right;
      background-size: 80rpx 74rpx;
      &.active--1 {
        left: 50%;
        transform: rotateY(-180deg) translateX(10rpx);
      }
      &.active-101 {
        right: 50%;
        transform: rotateY(0) translateX(10rpx);
      }
    }
  }
  .ment-input {
    border-radius: 0 0 $border-radius-md $border-radius-md;
    background-color: $white;
    overflow: hidden;
    margin-bottom: $uni-spacing-col-lg;
    &-label {
      color: $text-color-n3;
    }
    &-flex {
      padding: 44rpx 16rpx 30rpx 16rpx;
      font-size: $font-md;
      display: flex;
      justify-content: space-between;
      align-content: center;
      background: url(https://img.lkbang.net/xcx/edit-202111290243.png) no-repeat calc(100% - 20rpx)
        52rpx;
      background-size: 26rpx 28rpx;
    }
    &-text {
      color: $text-color-n5;
      text-align: right;
      width: 328rpx;
      padding-right: 40rpx;
    }
  }
  .ment-notice {
    font-size: $font-sm;
    color: #ed6a0c;
    padding: 8rpx 16rpx;
    background-color: #fffbe8;
  }
}
</style>
