<template>
  <div class="app-container">
    <div class="app-container__item">
      <div class="app-container__item-h1">Tinymce 编辑器</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          {{tinymceContent}}
        </div>
        <xd-tinymce
          v-model="tinymceContent"
          :image-config="imageConfig"
          :height="400"
          @success="handleSuccess"
          @onApiSuccessUrl="handleApiSuccessUrl"
          @onGetParamsAndHeader="handleGetParamsAndHeader"
        ></xd-tinymce>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">本地直传到阿里云API</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          {{alyunWangContent}}
        </div>
        <xd-wang-editor
          action="aliyun"
          type="aliyun"
          :height="400"
          :z-index="10000"
          v-model="alyunWangContent"
          @onOssParams="handleOssParams"
        ></xd-wang-editor>
      </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">
          {{apiWangContent}}
        </div>
        <xd-wang-editor
          action="https://sandbox-c.jufubao.cn/api/admin/common/upload"
          :height="400"
          :z-index="10000"
          v-model="apiWangContent"
          @onAllParams="handleAllParams"
          @onSuccess="handleAllSuccess"
        ></xd-wang-editor>
      </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">
          {{qiniuWangContent}}
        </div>
        <xd-wang-editor
          action="https://up-z1.qiniup.com"
          qiniu-cdn-url="http://static.e56buy.com"
          :height="400"
          :z-index="10000"
          v-model="qiniuWangContent"
          @onQiniuToken="handleQiniuToken"
        ></xd-wang-editor>
      </div>
    </div>
  </div>
</template>

<script>
  import XdWangEditor from "@/components/XdWangEditor";
  import {genUpToken} from './../scripts/qiniu'
  import axios from 'axios';
  import XdTinymce from "@/components/XdTinymce";
  import handleUpdate from "@/mixins/handleUpdate";

  export default {
    name: 'PagesEditor',
    components: {
      XdTinymce,
      XdWangEditor,
      handleUpdate
    },
    data() {
      return {
        imageConfig: {
          sort: true,
          maxlen: 100,
          action: 'aliyun',
          size: 5,
          uploadType: 'aliyun', //aliyun , qiniu
          type: ['jpg', 'png', 'jpeg']
        },
        qiniuWangContent: '<p>测试数据</p>',
        apiWangContent: '<p>本地API上传</p>',
        alyunWangContent: '<p>直传到阿里云API</p>',
        tinymceContent: '<p>直传到阿里云API</p>',

        aliyunOss: 'https://sandbox-c.jufubao.cn/api/admin/common/create-upload-sign',
        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9zYW5kYm94LWMuanVmdWJhby5jbiIsImlhdCI6MTYzODQyNzA3MCwiZXhwIjoxNjM4NTEzNDcwLCJhY2NvdW50X2lkIjoxLCJtZXJjaGFudF9pZCI6MTYxLCJwbGF0Zm9ybV9jb2RlIjoiIiwiaXAiOiIxMC4wLjIuNCIsImNoZWNrc3VtIjoiNzQ5N2EyZDMxNWQ5OGExOWJmYWUyMmFkM2NjMTU4NTcifQ.6egK7LFR86JVxDQ2InreCm3KzJS5xwKdnG71Z6wVt3I',
      };
    },
    created() {

    },

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




      /**
       * @description 七牛上传需要实现接口
       * @param resolve
       */
      handleQiniuToken(resolve){
        resolve(genUpToken({
          accoutKey: 'bP3Ca5dtSJBNaWwMkihfhuE30CbAZnYrNzQm6eMN',
          serviceKey: 'pPNgWwRL3_Jlj7cPtpYbkhXn01EOZTtUhOs3NqZM',
          webSiteName:'e56buystatic',
          staticUrl: 'http://static.e56buy.com',
        }))
      },

      /**==API=========================*/
      /**
       * @description 本地API服务器上传之前设置参数接口
       * @param resolve
       */
      handleAllParams(resolve){
        resolve({
          token: this.token
        })
      },

      /**
       * @description 本地API服务器上传成功之后返回值
       * @param resolve
       * @param response
       */
      handleAllSuccess(response, resolve){
        resolve(response.data['data']['ObjectURL']);
      },
      /**==API 结束=========================*/

      /**==aliyun =========================*/
      /**
       * @description aliyunOSS上传之前设置参数接口
       * @param resolve
       * @param file
       */
      handleOssParams(file, resolve){
        axios({
          url: this.aliyunOss,
          method: 'get',
          params: {
            name: file['name'],
            token: this.token
          },
        })
          .then(res=>{
            resolve(res.data.data)
          })
          .catch(res=>{})
      },
      /**==aliyun 结束=========================*/

    }
  }
</script>

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

    &__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 {

        &-value {
          padding-bottom: 10px;
        }
      }
    }

  }
</style>
