<template>
  <div class="app-container">
    <div style="padding-bottom: 20px; color: red; font-size: 18px">备注：上传组件支持插槽： 默认, tip</div>
    <div class="app-container__item">
      <div class="app-container__item-h1">使用素材库</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-json-view :data="xdCustomOneUploadValue"></xd-json-view>
        </div>
        <xd-upload
          v-model="xdCustomOneUploadValue"
          action="aliyun"
          :disabled="false"
          :size=".5"
          :type="['Jpeg','jPG','gIF']"
          style-type="one"
          :showtype="true"
          :is-material="true"
          :is-show-del='true'
          material-btn-name="使用素材库"
          @success="handleSuccess"
          @onApiSuccessUrl="handleApiSuccessUrl"
          @onGetParamsAndHeader="handleGetParamsAndHeader"
        >
          <template slot-scope="scope">
            <div class="app-container__upload" :class="{has:scope.image.url}" :style="{height: '333.5px', width: '164.5px'}">
              <xd-font-icon
                class="app-container__upload-icon"
                icon="iconjia"
                size="50"
                :color="!scope.image.url?'#999': 'rgba(0,0,0,0)'"
              ></xd-font-icon>
              <img :src="scope.image.url" />
            </div>
          </template>
        </xd-upload>
      </div>
    </div>
    <div class="app-container__item" v-if="1">
      <div class="app-container__item-h1">多文件上传(按字母数字排序)</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-json-view :data="xdListOneUploadValue"></xd-json-view>
        </div>
        <xd-upload
          v-model="xdListOneUploadValue"
          :default-value="authDefaultValue"
          :action="qiniuUrl"
          :qiniu-cdn="qiniuCdn"
          :size="5"
          :is-material="true"
          material-btn-name="使用素材库"
          :type="['jpg','jpeg','png','gif']"
          style-type="list"
          upload-type="aliyun"
          :sort="true"
          :showtype="true"
          :disabled="false"
          :maxlen="5"
          @success="handleSuccess"
          @onApiSuccessUrl="handleApiSuccessUrl"
          @onGetParamsAndHeader="handleGetParamsAndHeader"
        >
        </xd-upload>
      </div>
    </div>
    <template v-if="1">
      <div class="app-container__item">
        <div class="app-container__item-h1">证件照上传</div>
        <div class="app-container__item-body">
          <div class="app-container__item-body-value">
            <xd-json-view :data="xdAuthOneUploadValue"></xd-json-view>
          </div>
          <xd-upload
            :disabled="false"
            v-model="xdAuthOneUploadValue"
            :default-value="authDefaultValue"
            :action="apiUrl"
            :size="5"
            :is-material="true"
            :type="['jpg','jpeg','png']"
            style-type="auth"
            :showtype="true"
            @success="handleSuccess"
            @onApiSuccessUrl="handleApiSuccessUrl"
            @onGetParamsAndHeader="handleAPIGetParamsAndHeader"
          >
          </xd-upload>
        </div>
      </div>
      <div class="app-container__item">
        <div class="app-container__item-h1">自定义上传按钮样式(默认插槽)</div>
        <div class="app-container__item-body">
          <div class="app-container__item-body-value">
            <xd-json-view :data="xdCustomOneUploadValue"></xd-json-view>
          </div>
          <xd-upload
            v-model="xdCustomOneUploadValue"
            :action="apiUrl"
            :disabled="true"
            :size="5"
            :type="['jpg','jpeg','png']"
            style-type="one"
            :showtype="true"
            @success="handleSuccess"
            @onApiSuccessUrl="handleApiSuccessUrl"
            @onGetParamsAndHeader="handleAPIGetParamsAndHeader"
          >
            <template slot-scope="scope">
              <div class="app-container__upload" :class="{has:scope.image.url}">
                <xd-font-icon
                  class="app-container__upload-icon"
                  icon="iconjia"
                  size="50"
                  :color="!scope.image.url?'#999': 'rgba(0,0,0,0)'"
                ></xd-font-icon>
                <img :src="scope.image.url" />
              </div>
            </template>
            <div slot="tip">只能上传JPG/JPEG/PNG文件，且不超过500kb</div>
          </xd-upload>
        </div>
      </div>
      <div class="app-container__item">
        <div class="app-container__item-h1">七牛OSS单文件上传</div>
        <div class="app-container__item-body">
          <div class="app-container__item-body-value">
            <xd-json-view :data="xdQiniuOneUploadValue"></xd-json-view>
          </div>
          <xd-upload
            v-model="xdQiniuOneUploadValue"
            :action="qiniuUrl"
            :qiniu-cdn="qiniuCdn"
            :size="5"
            :type="['jpg','jpeg','png','docx', 'doc', 'xlsx', 'xls', 'pdf']"
            style-type="one"
            upload-type="qiniu"
            :showtype="true"
            @success="handleSuccess"
            @onGetParamsAndHeader="handleQiniuGetParamsAndHeader"
          >
          </xd-upload>
        </div>
      </div>
      <div class="app-container__item">
        <div class="app-container__item-h1">服务器单文件上传</div>
        <div class="app-container__item-body">
          <div class="app-container__item-body-value">
            <xd-json-view :data="xdAPIOneUploadValue"></xd-json-view>
          </div>
          <xd-upload
            v-model="xdAPIOneUploadValue"
            :action="apiUrl"
            :size="5"
            :type="['jpg','jpeg','png']"
            style-type="one"
            :showtype="true"
            @success="handleSuccess"
            @onApiSuccessUrl="handleApiSuccessUrl"
            @onGetParamsAndHeader="handleAPIGetParamsAndHeader"
          >
          </xd-upload>
        </div>
      </div>
      <div class="app-container__item">
        <div class="app-container__item-h1">阿里云OSS单文件上传</div>
        <div class="app-container__item-body">
          <div class="app-container__item-body-value">
            <xd-json-view :data="xdAliyunOneUploadValue"></xd-json-view>
          </div>
          <xd-upload
            :disabled="true"
            v-model="xdAliyunOneUploadValue"
            :action="qiniuUrl"
            :size="5"
            :type="['jpg','jpeg','png','docx', 'doc', 'xlsx', 'xls', 'pdf']"
            :radius="5"
            style-type="one"
            upload-type="qiniu"
            :showtype="true"
            @success="handleSuccess"
            @onGetParamsAndHeader="handleQiniuGetParamsAndHeader"
          >
          </xd-upload>
        </div>
      </div>
      <div class="app-container__item">
        <div class="app-container__item-h1">无数据插件</div>
        <div class="app-container__item-body">
          <xd-no-data></xd-no-data>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import XdNoData from "@/components/XdNoData";
import XdUpload from "@/components/XdUpload";
import XdJsonView from "@/components/XdJsonView";
import XdFontIcon from "@/components/XdFontIcon";
import {genUpToken} from './../scripts/qiniu'
import handleUpdate from "@/mixins/handleUpdate";
import axios from 'axios';


export default {
  name: 'index',
  components: {
    XdFontIcon,
    XdJsonView,
    XdNoData,
    XdUpload,
    handleUpdate
  },
  data() {
    return {
      xdListOneUploadValue: [], //多文件上传
      xdAuthOneUploadValue:[], //证件照
      xdCustomOneUploadValue: {}, //单文件上传自定义插槽
      xdQiniuOneUploadValue: {}, //单文件上传七牛OSS
      xdAPIOneUploadValue: {}, //单文件上传服务器
      xdAliyunOneUploadValue: {}, //单文件阿里云上传
      authDefaultValue: [
        {
          url: "https://sandbox-jfb-public-images-common.oss-cn-qingdao.aliyuncs.com/admin-upload/202112050002576511.jpg",
          name: "行驶证.jpg",
          uid: 1638633777497
        },
        {
          url: "https://sandbox-jfb-public-images-common.oss-cn-qingdao.aliyuncs.com/admin-upload/202112042216579840.jpeg",
          name: "1_1529482069846fe671088-731b-43ca-883a-5b6a0117a726.jpeg",
          uid: 1638627417514
        },
        {
          url: "https://sandbox-jfb-public-images-common.oss-cn-qingdao.aliyuncs.com/admin-upload/202112042218575661.jpeg",
          name: "1_1529482049654c8715a20-aafa-4a86-919e-9ec37af1eb3c.jpeg",
          uid: 1638627536883
        },
        {
          url: "https://sandbox-jfb-public-images-common.oss-cn-qingdao.aliyuncs.com/admin-upload/202112050002571369.jpeg",
          name: "1_1530071843959ce495f4b-d14d-4c7a-96c8-d026bfb7f326.jpeg",
          uid: 1638633777504
        }
      ],

      //qiniu
      qiniuUrl: 'https://up-z1.qiniup.com',//七牛API上传地址
      qiniuCdn: 'http://static.e56buy.com', //七牛静态资源访问地址
      qiniuOptions: {
        accoutKey: 'Ue_RwG8cW3HESqdOa77k0REef8zphb8g-kNn-N5P', //七牛AK(天宫云)
        serviceKey: 'ITdGHHdXeCle1T_zQ37FXYtB5YdvswA1vDwtT_DW', //七牛SK(天宫云)
        webSiteName: 'tiangongyun-test', //七牛桶名称(天宫云)
        staticUrl: 'https://testimg.tiangongy.com' //静态域名访问地址(天宫云)
      }, //七牛配置

      //api
      apiUrl: 'https://sandbox-c.jufubao.cn/api/admin/common/upload', //本地上传图片

      //oss
      aliyunOss: 'https://sandbox-c.jufubao.cn/api/admin/common/create-upload-sign',
      token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9zYW5kYm94LWMuanVmdWJhby5jbiIsImlhdCI6MTYzODY3NDIzMywiZXhwIjoxNjM4NzYwNjMzLCJhY2NvdW50X2lkIjoxLCJtZXJjaGFudF9pZCI6MTYxLCJwbGF0Zm9ybV9jb2RlIjoiIiwiaXAiOiIxMC4wLjIuNCIsImNoZWNrc3VtIjoiNzQ5N2EyZDMxNWQ5OGExOWJmYWUyMmFkM2NjMTU4NTcifQ.WdGZ5iB_mQmdppCTDSscdAsFvexYJ6xKLm85WrNZ3bg',
    }
  },

  methods:{

    /**
     * @description 上传到本地服务器成功返回值时刻触发，设置url字段
     */
    handleApiSuccessUrl(result, resolve){
      resolve(result.data['ObjectURL'])
    },
    /**
     * @description 七牛OSS上传参数设置
     * @param file
     * @param resolve
     */
    handleQiniuGetParamsAndHeader(file, resolve){
      resolve({
        params: {
          token: genUpToken({
            accoutKey: 'bP3Ca5dtSJBNaWwMkihfhuE30CbAZnYrNzQm6eMN',
            serviceKey: 'pPNgWwRL3_Jlj7cPtpYbkhXn01EOZTtUhOs3NqZM',
            webSiteName: 'e56buystatic',
            staticUrl: 'http://static.e56buy.com',
          }),
          key: 'Xd' + this.$xdHelper.randomChar(30) +'.'+ file.name
        }
      });
    },

    /**
     * @description 本地服务器上传参数设置
     * @param file
     * @param resolve
     */
    handleAPIGetParamsAndHeader(file, resolve){
      resolve({
        params: {
          token: this.token
        }
      })
    },

    /**
     * @description 阿里云OSS单文件上传参数设置
     * @param file
     * @param resolve
     */
    handleAliyunGetParamsAndHeader(file, resolve) {
      axios({
        url: this.aliyunOss,
        method: 'get',
        params: {
          name: file['name'],
          token: this.token
        },
      })
        .then(res => {
          resolve({
            params: {
              token: this.token,
              ...res.data.data
            }
          })
        });
    },

    handleSuccess(res){
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  &__upload {
    height: 100px;
    width: 100px;
    border: #999 dashed 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 6px;

    &-icon {
      position: absolute;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
    }

    & > img {
      max-width: 100%;
      max-height: 100%;
    }

    &:hover, &:hover.has {
      border: #42B983 dashed 2px;
    }

    &:hover.has &-icon {
      color: rgba(255, 255, 255, .7)!important;
      background: rgba(0,0,0,.05);
    }
  }

  &__item {
    margin-bottom: 20px;

    &-h1 {
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      font-weight: bold;
      background: #efefef;
      font-size: 16px;
      text-align: left;
      margin-bottom: 30px;
    }

    &-body {
      padding: 0 20px;

      &-value {
        padding-bottom: 20px;
      }
    }
  }
}
</style>
