<template>
  <div class="information">
    <div class="content">
      <div class="title">疫情信息:</div>
      <div class="img">
        <van-uploader
          :after-read="afterRead"
          v-model="fileList"
          :max-count="10"
        />
      </div>
    </div>
    <div class="btn">
      <van-button
        class="box-van-btn"
        round
        type="info"
        size="large"
        @click="submit"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button, Uploader,Toast,Dialog } from "vant";
// import { fileUpload } from "@/api/epidemic";
import { epidemicUpload, fileUpload } from "@/api/epidemic";

Vue.use(Uploader).use(Button).use(Toast).use(Dialog);

export default {
  data() {
    return {
      userInfo: {},
      message: "",
      fileList: [],
      list: [],
      appId: "",
      areaCode: "",
      pictureList: [],
      userId: "",
      userName: "",
    };
  },
  methods: {
    submit() {
      for (let i = 0; i < this.fileList.length; i++) {
        const element = this.fileList[i];
        if(!element.url){
          this.list = []
          return Toast.fail('请重新上传失败的图片'); 
        }
        this.list.push(element.url)
      }
      this.list.forEach((item) => {
        if (!item && item==null) {
          Toast.fail('请重新上传失败的图片!');
        }else{
          Dialog.confirm({
              message: "确定提交吗？",
          }).then(() => {
            let params = {
              userId: this.userInfo.userId,
              userName: this.userInfo.realName,
              appId: "1234",
              areaCode: this.$route.query.code,
              pictureList: this.list,
            };
            epidemicUpload(params).then(() => {
              this.$toast.clear();
              this.$toast("提交成功");
              this.message = "";
              this.fileList = [];
              this.list = []; //清空数据
            });
          })
        }
      })
      
    },
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      let param = new FormData();
      param.append("file", file.file);
      fileUpload(param)
        .then((res) => {
          // this.$toast.clear();
          file.status = "done";
          file.message = "上传成功";
          file.url = res.data;
        })
        .catch(() => {
          file.status = "failed";
          file.message = "上传失败";
        });
    },
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    if (window.android !== undefined) {
      const res = window.android.getUserInfo(); // 这是一个json字符串
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
    } else if (window.webkit) {
      window.webkit &&
        window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
    } else {
      this.$toast("请先登录镇合意app");
    }
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res);
    console.log(this.userInfo);
    console.log('000',this.$route);
  },
};
</script>

<style lang="stylus" scoped>
/deep/.van-uploader__preview-image {
  padding: 20px 20px;
}

.information {
  .content {
    display: flex;
    flex-direction: column;
    padding: 20px;

    .title {
      padding: 20px;
      font-size: 40px;
      font-weight: 500;
      color: #333;
    }

    .img {
      padding: 20px;
    }
  }

  .btn {
    padding: 0 30px;
  }
}
</style>