<template>
  <div v-if="$config.qinghai && shipLength > 0">
    <div class="ment-container">
      <div v-if="shipLength > 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)"
        >
          <span class="ment-tabs-text">
            {{ tabItem.shipmentTypeText }}
          </span>
        </div>
        <div :class="['tabs-active', `active-${active}`]" />
      </div>
      <template v-if="active !== 101">
        <slot />
      </template>
      <div v-else class="ment-input">
        <cr-field
          v-model="shipPhone"
          class="ment-icon"
          type="tel"
          label="推广员手机号"
          placeholder="请线下确认后填写号码"
          input-align="right"
          right-holder
          :max-length="11"
          @blur="bindChangePhone"
        />
        <cr-notice-bar
          right-icon=""
          wrapable
          text="请您线下与推广员确认好商品信息后再下单付款，以免因拍错商品导致无法正常取货  "
        />
      </div>
    </div>
  </div>
  <div v-else>
    <slot />
  </div>
</template>
<script>
const CONFTIRM_ORDER = 'confirm-order';
export default {
  name: 'SelfMention',
  props: {
    shipmentTypeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      shipPhone: '',
      active: -1
    };
  },
  computed: {
    shipLength() {
      return this.shipmentTypeList.length;
    }
  },
  watch: {
    shipmentTypeList(list) {
      if (list.length) {
        const [activeItem] = list.filter(item => item.select);
        this.active = activeItem?.shipmentType;
      }
    }
  },
  methods: {
    bindChangeActive(active) {
      this.$emit(CONFTIRM_ORDER, active);
    },
    bindChangePhone() {
      this.$emit('update:promoterPhoneNo', this.shipPhone);
    }
  }
};
</script>
<style scoped lang="less">
.ment-container {
  .ment-tabs {
    display: flex;
    align-items: end;
    overflow: hidden;
    position: relative;
    &-text {
      display: block;
      font-weight: bold;
      height: 32px;
      line-height: 32px;
    }
    .ment-tabs-item {
      .text-size(13);
      color: @gray-4;
      flex: 1;
      background-color: @grey-border;
      text-align: center;
      box-sizing: border-box;
      border-radius: @border-radius-md @border-radius-md 0 0;
      &.ment-cur {
        color: @black;
        background-color: @white;
        height: 36px;
        .ment-tabs-text {
          margin-top: 4px;
        }
      }
    }
    .ment-tabs-item:not(.ment-cur) {
      margin-top: 4px;
    }
    .tabs-active {
      position: absolute;
      height: 37px;
      width: 40px;
      bottom: 0;
      background: url(~@/assets/images/order/ship.png) no-repeat right;
      background-size: 40px 37px;
      &.active--1 {
        left: 50%;
        transform: rotateY(-180deg) translateX(5px);
      }
      &.active-101 {
        right: 50%;
        transform: rotateY(0) translateX(5px);
      }
    }
  }
  @{deep} .cr-cell__title {
    color: @gray-5;
    width: auto;
  }
  @{deep} .cr-notice-bar {
    .text-size(12);
    padding: 4px 8px;
  }
  @{deep} .cr-cell {
    padding-left: 8px;
    padding-right: 8px;
  }
  @{deep} .cr-icon {
    background: url(~@/assets/images/order/edit.png) no-repeat center;
    background-size: 100%;
    background-color: #000;
  }
  .ment-input {
    border-radius: 0 0 @border-radius-md @border-radius-md;
    overflow: hidden;
    margin-bottom: @padding-sm;
  }
  .ment-icon {
    background-image: url(~@/assets/images/order/edit.png);
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 14px;
  }
}
</style>
