<template>
	<uni-popup ref="popup" type="center" :animation="true" :is-mask-click="false" class="popup-conter">
	
	
	
		<view class="popup_data__user">
	
	
	
			<view class="popup_data__user__headers">
	
	
	
				<image src="/static/images/new_ui/delivery_man_dialog.png" mode="" class="image-box"></image>
	
	
	
				<view class="title">
	
	
	
					{{ title }}
	
	
	
				</view>
	
	
	
			</view>
	
	
	
			<view class="popup_data__user__content">
	
	
	
				<view class="form-list">
	
	
	
					<view class="form-list__item">
	
	
	
						<view class="form-list__item--label">姓 名 </view>
	
	
	
						<view class="form-list__item--value">
	
	
	
							<input placeholder="请输入送货人姓名" :class="['input__custom',isUserName?'ishasValue':'']" v-model="user_name"></input>
	
	
	
						</view>
	
	
	
					</view>
	
	
	
					<view class="form-list__item">
	
	
	
						<view class="form-list__item--label">手机号</view>
	
	
	
						<view class="form-list__item--value">
	
	
	
							<input placeholder="请输入11位手机号" type="tel" :class="['input__custom',isPhoneValue?'ishasValue':'']" v-model="user_phone"></input>
	
	
	
						</view>
	
	
	
					</view>
	
	
	
					<view class="form-list__item" :class="[(isPhoneValue && isUserName) ?'isActiveBtn':'']">
	
						<view class="form-list__item--btn">提交</view>
	
					</view>
	
					<view class="form-list__item no-bg" @click="handleClose">
	
						<view class="form-list__item--text">取消</view>
	
					</view>
	
				</view>
	
	
	
			</view>
	
	
	
		</view>
	
	
	
	</uni-popup>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "添加送货人",
    },
  },
  data() {
    return {
      user_name: "",
      user_phone: "",
    };
  },
  methods: {
    handleClose() {
      this.user_name = "";
      this.user_phone = "";
      this.close();
    },
    open(type = "center") {
      this.$refs.popup.open(type);
    },
    close() {
      this.$refs.popup.close();
    },
    setDataValue(val) {
      this.user_name = val.user_name;
      this.user_phone = val.user_phone;
    },
  },
  computed: {
    isPhoneValue() {
      const phone = this.user_phone || "";
      if (String(phone).trim()) {
        return true;
      }
      return false;
    },
    isUserName() {
      const phone = this.user_name || "";
      if (String(phone).trim()) {
        return true;
      }

      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-conter {
  width: 100%;
  /deep/.uni-popup__wrapper {
    width: 100% !important;
  }
}

.popup_data__user {
  height: 598rpx; // width: 616rpx;
  margin: 0 67rpx;
  background: #ffffff;
  border-radius: 16rpx;
  &__headers {
    position: relative;
    width: 100%;
    height: 136rpx;
    .image-box {
      width: 100%;
      height: 100%;
      border-radius: 16rpx 16rpx 0 0;
    }
    .title {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      top: 0;
      left: 0;
      color: #333333;
    }
  }
  &__content {
    padding: 24rpx 36rpx 35rpx 36rpx;
    height: calc(100% - 210rpx);
    .form-list {
      &__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 86rpx;
        background: #f5f7f9;
        border-radius: 12rpx;
        margin-bottom: 26rpx;
        &.isActiveBtn {
          background: #1f7cff !important;
          transition: all 600ms;
          .form-list__item--btn {
            color: #ffffff !important;
          }
        }
        &.no-bg {
          background: none !important;
          margin-bottom: 0 !important;
        }
        &--label {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 160rpx;
          height: 100%;
          font-weight: 400;
          font-size: 30rpx;
          color: #666666;
        }
        &--value {
          flex: 1;
          display: flex;
          align-items: center;
          height: 100%;
          .input__custom {
            height: 100%;
            width: 100%;
            font-weight: 400;
            font-size: 30rpx;
            color: #666666;
            padding: 0 16rpx;
          }
          .ishasValue {
            color: #333333;
          }
        }
        &--btn,
        &--text {
          user-select: none;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          font-weight: 400;
          font-size: 30rpx;
          color: #333333;
        }
      }
    }
  }
}
</style>
