<template>
  <view class="upload-wrapper" :style="{ paddingLeft: pdLeft }">
    <view
      class="upload-main"
      :style="{ padding: pd, borderColor: borderBg }"
      :class="[borderNone != undefined ? 'borderNone' : '']"
    >
      <view class="upload-title" :style="{ color: textColor, fontSize: fontSize }"><slot name="title">{{ name }}</slot> </view>
      <view class="upload-img">
        <JeepayUpLoad
          v-if="imgUrl == ''"
          @uploadSuccess="uploadSuccess"
          :imgUrl="value"
          @clear="clearImg"
        ></JeepayUpLoad>
        <image v-else :src="imgUrl" @tap="previewImage([imgUrl])" mode="aspectFill" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { watch, onBeforeUnmount, ref, onMounted } from "vue"
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad"
import { addRules, clearOneRule } from "@/hooks/rules"
import valid from "@/hooks/validate"
const props = defineProps({
  value: {
    type: String,
  },
  pd: {
    type: String,
    default: " 30rpx 30rpx 30rpx 0",
  },
  borderNone: {
    type: String,
  },
  pdLeft: {
    type: String,
    default: "30rpx",
  },
  imgUrl: {
    type: String,
    default: "",
  },
  borderBg: {
    type: String,
    default: "#f2f2f2",
  },
  fontSize: { type: String },
  textColor: {
    type: String,
    default: "#000",
  },
  name: { type: String },
  rules: { default: null },
})

onMounted(() => {
  if (props.rules !== null) {
    props.rules.Msg = "请上传" + props.name
    addRules(props.rules)
  }
})
const emits = defineEmits(["update:value"])
const uploadSuccess = (res) => {
  emits("update:value", res.data)
}
const previewImage = (v) => {
  if (!valid.httpOrHttps(v)) return false
  uni.previewImage({
    indicator: "number",
    loop: true,
    urls: v,
  })
}
const clearImg = () => {
  emits("update:value", "")
}
onBeforeUnmount(() => {
  if (props.rules !== null) {
    clearOneRule(props.rules)
  }
})
</script>

<style lang="scss" scoped>
.upload-wrapper {
  padding-left: 30rpx;
  font-size: 33rpx;
  .upload-main {
    display: flex;
    justify-content: space-between;
    border-top: 1rpx solid #f2f2f2;
    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 10rpx;
    }
  }
}
.borderNone {
  border: none !important;
}
</style>
