<template>
  <view class="form_item">
    <view class="form_item--left" :style="styles"> {{ name }} </view>
    <view class="form_item--right">
      <template v-if="$slots.right">
        <slot name="right"></slot>
      </template>
      <view class="upop" @click="handleSelect" v-else>
        <view class="title xcv">{{ logistics }}</view>
        <image src="/static/images/new_ui/arrow-right.png" mode=""></image>
      </view>
    </view>
    <popupSelectVue
      ref="popup"
      :value.sync="logisticsValue"
      :selectData="selectData"
      @tabs="handleClick"
      :title="title"
    />
  </view>
</template>

<script>
import popupSelectVue from "../popupSelect.vue";
export default {
  components: { popupSelectVue },
  props: {
    name: {
      type: String,
      default: "物流公司"
    },
    defaultLabel: {
      type: String,
      default: "请选择物流公司"
    },
    styles: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: "物流公司信息"
    },
    value: {
      type: [String, Number],
      default: ""
    },
    isDisabledAll:{
      type:Boolean,
      default:false
    },
     isDisabledInput:{
      type:Boolean,
      default:false
    },
       isDisabledSelect:{
      type:Boolean,
      default:false
    },
    selectValue: {
      type: [String, Number],
      default: ""
    },
    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 {
      logisticsValue: "", //物流
      logisticsLabel: ""
    };
  },
  methods: {
    handleClick({ selected, item, index }) {
      this.logisticsValue = selected;
      this.logisticsLabel = item.text || item.label;
      this.$emit("click-tabs", { selected, item, index });
    },
    handleSelect() {
      if(this.isDisabledAll || this.isDisabledSelect) return;
      this.$refs.popup.open();
    }
  },
  computed: {
    logistics() {
      return this.logisticsLabel || this.defaultLabel || this.selectValue;
    }
  }
};
</script>

<style lang="scss" scoped>
.form_item {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  // border-bottom: 2rpx solid #e5e5e5;
  &--left {
    max-width: 230rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
    line-height: 30rpx;
  }
  &--right {
    flex: 1;
    padding-left: 50rpx;
    padding-right: 12rpx;
    text-align: right;
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
    }
    .upop {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: flex-end;
      image {
        width: 30rpx;
        height: 30rpx;
        margin-left: 5rpx;
      }
      .image-box {
        width: 40rpx;
        height: 38rpx;
      }
    }
    .upop_input {
      padding: 15rpx 10rpx;
      flex: 1;
    }
    .xcv {
      flex: 1;
    }
  }
  &:last-child {
    border-bottom: none;
  }
}
</style>
