<template>
  <uni-popup ref="popup" type="center" :animation="true" :is-mask-click="false">
    <view class="popup_data">
      <view class="popup_data__headers">
        <view class="popup_data__headers--title">{{ title }}</view>
        <uni-icons
          type="closeempty"
          class="custom_icons"
          size="30"
          @click="handleClose"
        ></uni-icons>
      </view>

      <view class="popup_data__content">
        <view
          v-for="(item, index) in selectData"
          :key="index + '_index_'"
          class="popup_data__content--list"
          @click="handleTabs(item, index)"
        >
          <view class="popup_data__content--item">
            <uni-icons
              type="checkmarkempty"
              :class="[
                '_select_icons',
                index === selectId || selectId === item.value ? 'isActive' : ''
              ]"
              size="25"
            ></uni-icons>
            <view
              :class="[
                'popup_data__content--item__title',
                index === selectId || selectId === item.value ? 'isActive' : ''
              ]"
            >
              {{ item.text || item.label }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "物流公司信息"
    },
    value: {
      type: [String, Number],
      default: ""
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          props: "text",
          value: "value"
        };
      }
    },
    selectData: {
      type: Array,
      default: () => {
        return [
          { value: 0, text: "顺丰速运", code: "SF" },
          { value: 1, text: "中通快递", code: "ZTO" },
          { value: 2, text: "韵达快递", code: "YUNDA" },
          { value: 3, text: "申通快递", code: "STO" },
          { value: 4, text: "EMS邮政", code: "EMS" },
          { value: 5, text: "圆通速递", code: "YTO" },
          { value: 6, text: "DHL国际", code: "DHL" },
          { value: 7, text: "京东物流", code: "JD" },
          { value: 8, text: "FedEx联邦", code: "FDX" },
          { value: 9, text: "UPS联合包裹", code: "UPS" },
          { value: 10, text: "德邦快递", code: "DEPPON" },
          { value: 11, text: "百世快递", code: "BEST" },
          { value: 12, text: "极兔速递", code: "J&T" },
          { value: 13, text: "TNT快递", code: "TNT" },
          { value: 14, text: "跨越速运", code: "KYE" }
        ];
      }
    }
  },
  data() {
    return {
      selectId: ""
    };
  },
  watch: {
    value: {
      handler(val) {
        this.selectId = val;
      },
      immediate: true
    }
  },
  mounted() {
    this.selectId = this.value;
  },
  methods: {
    handleTabs(item, index) {
      const data = item.value || index;
      if (this.selectId === data) {
        this.selectId = "";
      } else {
        this.selectId = item.value || index;
      }
      this.$emit("update:value", this.selectId);
      const itemObj = this.selectId !== "" ? item : {};
      this.$emit("tabs", { selected: this.selectId, item: itemObj, index });
      this.handleClose();
    },
    handleClose() {
      this.close();
    },
    open(type = "bottom") {
      this.$refs.popup.open(type);
    },
    close() {
      this.$refs.popup.close();
    }
  }
};
</script>

<style lang="scss">
.popup_data {
  padding: 26rpx 30rpx;
  min-height: 550rpx;
  max-height: 650rpx;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(180deg, #e5edff 0%, #ffffff 100%);
  border-radius: 24rpx 24rpx 0 0;
  &__headers {
    // height: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #e5e5e5;
    padding-bottom: 15rpx;
    &--title {
      flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      justify-content: space-between;
      padding-right: 60rpx;
      font-size: 32rpx;
      font-weight: 600;
    }
    .custom_icons {
      flex-shrink: 0;
    }
  }
  &__content {
    max-height: 540rpx;
    overflow-y: auto;
    &--list {
      user-select: none;
      border-bottom: 2rpx solid #e5e5e5;
      &:last-child {
        border-bottom: none;
      }
    }
    &--item {
      display: flex;
      gap: 20rpx;
      padding: 20rpx 0;

      ._select_icons {
        color: #eee !important;
      }
      &__title {
      }
    }
    .isActive {
      color: #007aff !important;
    }
  }
}
</style>
