<template>
  <div class="main_box">
    <!-- <navbar title="商户门头照"></navbar> -->

    <div class="wrapper">
      <van-form>
        <van-field name="headerFilesList" label="商户门头照">
          <template #input>
            <van-uploader
              v-model="headerFilesList"
              :deletable="false"
              preview-image
              multiple
            ></van-uploader>
          </template>
        </van-field>
      </van-form>
    </div>
  </div>
</template>

<script>
import navbar from "../../components/navbar/navbar.vue";
import { getImage } from "@/service/api/visiting";
import { Uploader, Form, Field } from "vant";
export default {
  data() {
    return {
      headerFilesList: [],
      custId: "",
    };
  },
  components: {
    navbar: navbar,
    VanUploader: Uploader,
    VanForm: Form,
    VanField: Field,
  },
  mounted() {
    this.custId = sessionStorage.getItem("custId");
    this.getCommericalImage();
  },
  methods: {
    getCommericalImage() {
      getImage({ custId: this.custId }).then((res) => {
        this.headerFilesList = res.data.map((item, index) => {
          const typeMatch = item.match(/data:([^;]+);base64/);
          const fileType = typeMatch ? typeMatch[1] : "image/jpeg";

          const fileName = `image_${index + 1}.${fileType.split("/")[1]}`;

          return {
            // url: this.base64ToBlobUrl(`data:image/jpg;base64,${item}`),
            file: this.base64ToFile(`data:image/jpg;base64,${item}`, fileName),
            status: "done",
            content: `data:image/jpg;base64,${item}`,
          };
        });
      });
    },
    base64ToFile(base64String, filename) {
      const arr = base64String.split(",");
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  // padding-top: 46px;
  // min-height: 100vh;
  font-size: 16px;
  // padding-bottom: 60px;
}

::v-deep .van-uploader__upload {
    display: none;
}
/deep/ .van-field__label {
    color: rgb(22, 13, 13);
  }
</style>
