<template>
  <div class="pb_content2" style="background: #fff">
    <div class="pb_head">
      <van-icon
        name="arrow-left"
        color="#fff"
        class="pb_back"
        size="1.2rem"
        @click="goBack"
      />
      <span>发布内容</span>
      <div class="pb_left">
        <span style="font-size: 0.8rem">发布</span>
      </div>
    </div>
    <div class="pb_content_body">
      <input type="text" placeholder="请输入标题哦..." class="r_input" />
      <textarea placeholder="请输入内容" class="r_textarea"></textarea>
      <div class="r_uploadbox">
        <van-uploader
          v-model="fileList"
          :after-read="afterRead"
          preview-size="5rem"
          accept="image/*"
          v-loading="photoLoading"
        >
          <img src="../../assets/icon/photo.png" alt="" style="width: 5rem;" />
          <template #preview-cover>
            <div class=""></div>
          </template>
        </van-uploader>
      </div>
    </div>
  </div>
</template>

<script>
import "../../common/aws-sdk-2.235.1.min";

export default {
  data() {
    return {
      fileList: [],
      error: "",
      photoLoading: false,
    };
  },
  methods: {
    goBack() {
      this.$router.isBack = true;
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    //上传图片
    afterRead(file) {
      this.photoLoading = true;

      var _file = file.file;
      file.status = "uploading";
      file.message = "上传中...";

      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;

      var mediaFormatList = ["png", "jpg", "jpeg"];

      if (
        mediaFormatList.indexOf(
          _file.name
            .split(".")
            [_file.name.split(".").length - 1].toLocaleLowerCase()
        ) == "-1"
      ) {
        _this.$toast.fail("请上传jpg或者png的图片格式文件");
        _this.fileList = _this.fileList.filter((fileA) => {
          return fileA.file.lastModified != file.file.lastModified;
        });
        file.status = "failed";
        file.message = "上传失败";
        this.photoLoading = false;

        return;
      }

      if (_file) {
        var params = {
          Key:
            _file.name.replace(
              "." + _file.name.split(".")[_file.name.split(".").length - 1],
              ""
            ) +
            Date.parse(new Date()) +
            "." +
            _file.name.split(".")[_file.name.split(".").length - 1],
          ContentType: _file.type,
          Body: _file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
          })
          .send(function (err, data) {
            _this.photoLoading = false;
            if (err) {
              _this.error = err;
              _this.$toast.fail("上传失败");
              file.status = "failed";
              file.message = "上传失败";
              //上传错误处理
              _this.fileList = _this.fileList.filter((fileA) => {
                return fileA.file.lastModified != _file.lastModified;
              });
            } else {
              //上传成功处理
              file.status = "success";
              _this.fileList = _this.fileList.filter((fileA) => {
                if (fileA.file.lastModified == _file.lastModified) {
                  fileA.url = data.Location;
                  return fileA;
                } else {
                  return fileA;
                }
              });
              console.log(data.Location);
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.r_input {
  width: 93%;
  margin: 0.5rem auto;
  display: block;
  border: none;
  padding: 5px 2px;
  border-bottom: 1px solid #adadad;
  box-sizing: border-box;
  font-size: 0.9rem;
}
.r_textarea {
  width: 93%;
  margin: 0.5rem auto;
  display: block;
  border: none;
  padding: 5px 2px;
  box-sizing: border-box;
  font-size: 0.85rem;
  resize: none;
  height: 8rem;
}
.r_uploadbox {
  width: 93%;
  margin: 0.5rem auto;
}
</style>
