<template>
  <view class="logistics-information">
    <view class="logistics-information__text" v-if="isShowTitle">{{
      headersName
    }}</view>
    <view class="logistics-information__form">
      <reInputItemVue
        placeholder="请手动输入或扫描二维码"
        name="物流单号"
        @change="changeInput"
      >
        <image
          slot="next"
          src="/static/images/new_ui/qcode.png"
          mode=""
          class="image-box"
          @click="handleQrcode"
        ></image>
      </reInputItemVue>
      <popupSelectItemVue @click-tabs="handleClick" :selectData="ruleOptions"></popupSelectItemVue>
    </view>
  </view>
</template>

<script>
import reInputItemVue from "./reInputItem/reInputItem.vue";
import popupSelectItemVue from "./popupSelectItem/popupSelectItem.vue";
export default {
  components: { reInputItemVue, popupSelectItemVue },
  props: {
    headersName: {
      type: String,
      default: "填写物流信息"
    },
    isShowTitle: {
      type: Boolean,
      default: true
    },
    ruleOptions:{
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      formData: {
        delivery_id:"",//快递单号
        delivery_name:"",//快递公司value
        delivery_type:1,//发货类型
      }
    };
  },
  methods: {

    //TODO 扫码识别
    handleQrcode() {
      console.log("handleQrcode");
      uni.showModal({
        title: "提示",
        content: "正在升级中...",
        success(res) {
          if (res.confirm) {
            console.log("用户点击了确定");
          } else if (res.cancel) {
            console.log("用户点击了取消");
          }
        }
      });
    },
    changeInput(val) {
      this.formData.delivery_id = val;
       this.chageValue({
       delivery_id: this.formData.delivery_id
      })
    },
    handleSelect() {
      this.$refs.popup.open();
    },
    handleClick({ selected, item, index }) {
      this.logisticsValue = selected;
      this.logisticsLabel = item.text || item.label  ;
      this.formData.delivery_name = item.value;
      // console.log(selected, item, index,this.logisticsLabel);
      // this.$emit("click-tabs-", { selected, item, index });
      this.chageValue({
        delivery_name: this.formData.delivery_name 
      })
    },
    chageValue(val){
      // console.log(this.formData)
      this.$emit("changeHandle",this.formData)

    }
  },
  computed: {
    logistics() {
      return this.logisticsLabel || "请选择物流公司";
    }
  }
};
</script>

<style lang="scss" scoped>
.logistics-information {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 26rpx 21rpx 0rpx 32rpx;
  display: flex;
  flex-direction: column;
  &__text {
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 10rpx;
    user-select: none;
  }
  &__form {
    .form_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100rpx;
      border-bottom: 2rpx solid #e5e5e5;
      &--left {
        width: 120rpx;
        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>
