<template>
  <div class="more">
    <div class="list">
      <div class="item" v-if="channelInfo.isSendRed">
        <div class="box" @click="_sendRed">
          <div class="icon red"></div>
          <div class="title">红包</div>
        </div>
      </div>
      <div class="item" v-if="corpId != 1421 && !isDraw">
        <div class="box" @click="_personal">
          <div class="icon wallet"></div>
          <div class="title">提现</div>
        </div>
      </div>
      <div class="item">
        <div class="box" @click="_uplaod">
          <div class="icon upload">
            <input
              type="file"
              ref="file"
              @change="_uploadImg"
              accept="image/png,image/jpeg,image/jpg"
            />
          </div>
          <div class="title">图片</div>
        </div>
      </div>
      <div class="item" v-if="isQuestionnaire.isEnable">
        <div class="box" @click="_openQuestionnaire">
          <div class="icon questionnaire"></div>
          <div class="title">问卷报表</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const Uploader = process.client ? require('@gdyfe/uploader') : {};
import { sendPhoto, sendPhotoByWeixin } from '@/plugins/API/apiAll';
import UserAgent from '@/plugins/UserAgent/index';
import { mapGetters } from 'vuex';
export default {
  name: 'send-more',
  data() {
    return {
      swiper: null,
      corpId: this.$route.query.corpId
    };
  },
  computed: {
    ...mapGetters({
      type: 'type',
      channelInfo: 'channelInfo',
      channelConfig: 'channelConfig',
      userInfo: 'userInfo',
      jumpUrls: 'jumpUrls'
    }),
    isQuestionnaire() {
      const info = this.channelConfig.questionnaire || {};
      return info;
    },
    isDraw() {
      return this.channelInfo.drawStatus === 1;
    },
  },
  methods: {
    _sendRed() {
      if (!this.userInfo.id) {
        this.$layer.msg('请登录');
        this.$Bus.$emit('bus-showLogin', true);
      } else {
        this.$Bus.$emit('bus-remEnclosure');
        window.location.href = this.jumpUrls.pay_redPacket;
      }
    },
    _personal() {
      if (!this.userInfo.id) {
        this.$layer.msg('请登录');
        this.$Bus.$emit('bus-showLogin', true);
      } else {
        this.$Bus.$emit('bus-remEnclosure');
        window.location.href = this.jumpUrls.center_wallet;
      }
    },
    _uploadImg(e) {
      const self = this;
      const input = e.target;
      if (!input.value) {
        return false;
      }
      if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function() {
          self._createCanvas(reader.result);
          input.value = '';
        };
        reader.readAsDataURL(input.files[0]);
      }
    },
    _createCanvas(src) {
      const self = this;
      const canvas = document.createElement('canvas');
      const cxt = canvas.getContext('2d');
      const img = new Image();
      img.src = src;
      const maxW = window.innerWidth > 300 ? window.innerWidth : 300;
      const maxH = window.innerHeight > 300 ? window.innerHeight : 300;
      img.onload = function() {
        let w = img.width;
        let h = img.height;
        if (w > maxW || h > maxH) {
          const p = w / maxW > h / maxH ? w / maxW : h / maxH;
          w = img.width / p;
          h = img.height / p;
          img.width = w;
          img.height = h;
        }
        canvas.width = w;
        canvas.height = h;
        cxt.drawImage(img, 0, 0, w, h);
        const newsrc = canvas.toDataURL('image/jpeg', 0.9);
        self._sendPhoto(newsrc);
      };
    },
    async _uplaod() {
      const self = this;
      if (UserAgent.isWx()) {
        const wx = window.wx;
        wx.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success(res) {
            const localIds = res.localIds;
            wx.uploadImage({
              localId: localIds[0],
              success(e) {
                self._sendPhotoByWeixin(e);
              },
              fail() {
                self.$layer.msg('图片上传失败(╬￣皿￣)');
              }
            });
          }
        });
      } else {
        if (process.env.private === true) {
          const uploader = new Uploader.default(process.env.uploaderName, process.env.uploaderOptions)
          const res = await uploader.openUploader();
          this._sendPhoto(res);
        } else {
          this.$refs.file.click();
        }
      }
    },
    async _sendPhoto(src) {
      if (!src) {
        return false;
      }
      const res = await sendPhoto({
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id,
        img: src
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.$layer.msg('已提交审核，请耐心等待');
      }
    },
    async _sendPhotoByWeixin(e) {
      const res = await sendPhotoByWeixin({
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id,
        mediaId: e.serverId,
        cname: this.channelInfo.cname
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.$layer.msg('已提交审核，请耐心等待');
      }
    },
    _openQuestionnaire() {
      if (!this.userInfo.id) {
        this.$layer.msg('请登录');
        this.$Bus.$emit('bus-showLogin', true);
      } else {
        this.$Bus.$emit('bus-questionnaire');
      }
    }
  }
};
</script>

<style lang="less" scoped>
.more {
  padding: 0.05rem;
  height: 0.9rem;
  background: #fff;
  .list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
    .item {
      flex: 0 0 auto;
      width: 25%;
      .box {
        text-align: center;
        .icon {
          margin: auto;
          width: 0.45rem;
          height: 0.45rem;
          border-radius: 0.04rem;
          background-color: #f5f5f5;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: auto 50%;
          &.red {
            background-image: url(./img/icon-red.png);
          }
          &.wallet {
            background-image: url(./img/icon-wallet.png);
          }
          &.upload {
            background-image: url(./img/icon-upload.png);
            input {
              display: none;
            }
          }
          &.questionnaire {
            background-image: url(./img/icon-questionnaire.png);
          }
        }
        .title {
          line-height: 0.2rem;
          color: #8a8a8c;
          font-size: 0.1rem;
        }
      }
    }
  }
}
</style>
