<!--  -->
<template>
  <div class="">
    <PUpLoadFile
      :showHelp="true"
      ref="UpLoadFile"
      :config="UpLoadFileConfig.config"
      v-model="UpLoadFileConfig.vmodel"
      :customRequestEvent="customRequestEvent"
      :extendedFileVerification="UpLoadFileConfig.extendedFileVerification"
      :isShowWatermark="true"
    ></PUpLoadFile>
  </div>
</template>

<script>
import OSS from "ali-oss";
export default {
  // import引入的组件需要注入到对象中才能使用
  name: "testUpLoadFile",
  components: {},
  props: {
    // handA: {
    //   type: String,
    //   required: true,
    //   default: '100'
    // }
  },
  data() {
    // 这里存放数据
    return {
      UpLoadFileConfig: {
        vmodel: {}, // v-model  的值  单文件：{card1:{name:'',url:''}}   多文件: {card3:[{name:'',url:''}]}   身份证:{card1:{name:'',url:''},card2:{name:'',url:''}}
        config: {
          // 此参数必填  上传路径
          dir: "",
          // 身份证  all   ；  单文件 对应 card1 ；   多文件 对应  card3 ； 身份证  对应  card1（身份证正面）、card2（身份证反面）
          model: "多文件",
          // 此参数选填   此属性只在 model= 身份证 时 启用   默认值文false
          showBG: false,
          // 此参数选填  表示是否可编辑
          readonly: false,
          // 提示信息
          tips: {
            card1: "这是提示信息",
            card2: "这是提示信息",
            card3: "这是提示信息",
          },
          // 此参数选填   文件上传必填校验 默认为false 不校验   当值为true时进行强制校验  需要配合【getDataCheckRes】方法使用；
          // 方法【getDataCheckRes】的具体用法如: this.$refs.UpLoadFile.getDataCheckRes({ card1: "请上传身份证正面",card2: "请上传身份证反面", card3: "请上传附件"});
          // 其中 【getDataCheckRes】的参数辨识检验不通过时对应的提示信息；card1、card2、card3均可缺省，也可选填对应的字段    此参数可空
          required: false,
          // 此参数选填   要回显的数据 card1 card2 的值的格式为：{name:'',url:''} ;  card3 的值的格式为 [{name:'',url:''}，{name:'',url:''}]
          defaultFileList: {
            card1: {},
            card2: {},
            card3: [],
          },
          // 此参数集必填
          fielConfig: {
            // 允许上传的文件类型 当为空时表示不限制  默认为空
            //    可供选择类型：
            //          图片('jpg', 'png', 'jpeg')
            //          文档('xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt')
            //          压缩包('zip', 'rar')  发票('pdf', 'jpg', 'png', 'jpeg', 'doc', 'docx', 'zip', 'rar')
            //          PDF(pdf)
            //          委托代征协议('pdf','jpg', 'png', 'jpeg')
            //          我的任务('jpg', 'png', 'jpeg','pdf','xlsx', 'xls', 'pdf', 'doc', 'docx','zip', 'rar' )
            // eg:
            //    当值为string类型时，对所有（card1,card2,card3）的有效；
            //    当值为对象（{"card1":'图片',"card2":'文档', "card3":'PDF'}）时，可指定每个（card1/card2/card3）所对应的类型
            type: "",
            // 允许上传的文件个数  默认值为1
            // eg: 1 表示只允许上传1个文件；
            //      当值为对象（{ "pdf":2, "png":1 }）时，可指定每个文件类型所对应的文件数量
            size: { "pdf":2, "png":1, "jpg": 1},
            // 上传的单个文件大小 单位为 MB  默认值为1
            //  eg: 当值为 number 时，对所有（card1,card2,card3）的有效；
            //        当值为对象（{"pdf":5,"xlsx":10, "zip":100}）时,可指定对应的文件类型的大小（单位：MB）
            singleFileSize: 1,
          },
        },
        // 扩展文件校验 { 'groupName':'文档', suffixArr:['xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt'],errorMsg:'只允许上传 PDF,DOC,DOCX,XLS,XLSX 类型文件' }
        extendedFileVerification: [
          {
            groupName: "文本",
            suffixArr: ["pdf", "png","jpg"],
            errorMsg: "只允许上传 PDF 和 PNG 类型文件",
          },
        ],
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    async customRequestEvent(action, dir_, that) {
      // https://webapitest.zxjztech.com/cloud/third/oss/getOssTemporaryToken?_t=1688552078
      const url = `https://adminapitest-k8s.zxjztech.com/cloud/third/oss/getOssTemporaryToken?_t=${Date.now()}`;
      const kk = () => {
        const date_ = new Date();
        const year = date_.getFullYear();
        let month = date_.getMonth() + 1;
        let day = date_.getDate();
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        let hours = date_.getHours();
        let mins = date_.getMinutes();
        let secs = date_.getSeconds();
        const msecs = date_.getMilliseconds();
        if (hours < 10) hours = "0" + hours;
        if (mins < 10) mins = "0" + mins;
        if (secs < 10) secs = "0" + secs;
        if (msecs < 10) secs = "0" + msecs;
        return (
          year + "" + month + "" + day + "" + hours + "" + mins + "" + secs
        );
      };
      let options = {
        method: "GET",
        headers: {
          "Content-Type": "application/json;charset=utf-8",
          "X-Access-Token":
          "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NDQ0MjgyNzIsInVzZXJuYW1lIjoiMTAwMDAwMDAwMSJ9.fvYuNLP0DWCB0pMdphOLtJMroSlQcP8UcF3MWcNZl8Y",
          "X-Sign": "E19D6243CB1945AB4F7202A1B00F77D5",
          "X-Timestamp": kk(),
        },
      };

      const file = action.file;
      let name =
        new Date().valueOf() +
        parseInt(Math.random() * 10000) +
        "_" +
        file.name;
      let dir = "/user/card/";
      const bucket = "zxcloud-test";
      // accessKeyId

    //   let progress = { percent: 1 };
      let speed = 100 / (action.file.size / 65000); //上传速度
    //   const intervalId = setInterval(() => {
    //     // 控制进度条防止在未上传成功时进度条达到100
    //     if (progress.percent < 99 && progress.percent + speed < 100) {
    //       progress.percent += speed; //控制进度条速度
    //       action.onProgress(progress); //onProgress接收一个对象{ percent: 进度 }在进度条上显示
    //     } else if ((progress.percent = 99)) {
    //       progress.percent++;
    //     } else if ((progress.percent = 100)) {
    //       clearInterval(intervalId);
    //     }
    //   }, 100);
      // console.log("stsInfo 1====>", url, options);
      const stsInfo = await fetch(url, options).then((res) => res.json());
      // console.log("stsInfo====>", stsInfo);
      const tempParam = {
        region: "oss-cn-hangzhou",
        accessKeyId: stsInfo.result.accessKeyId,
        accessKeySecret: stsInfo.result.accessKeySecret,
        bucket: bucket,
        stsToken: stsInfo.result.securityToken,
      };
      // console.log("+++++++++>", stsInfo, tempParam);
      const client = new OSS(tempParam);
      const resFile = await client.put(dir + name, file);
      // console.log("上传结果=======>", resFile);
      action.onSuccess(resFile, action.file);
      action.loading = false;
    //   progress.percent = 99;
      return { ...resFile, name: file.name };
    },
  },
};
</script>
<style lang="less" scoped></style>
