<template>
  <div class="chat-footer" :style="{ maxHeight }">
    <div class="input-con flex-default">
      <input
        ref="chatInput"
        class="chat-input"
        placeholder="请输入您的问题"
        confirm-type="send"
        enterkeyhint="send"
        confirm-hold
        autocomplete="off"
        @focus="handleFocus"
        @keyup.enter="handleConfirm"
        v-model="msgInput"
      />
      <div class="right-con" :style="{width:msgInput?'60px':'30px'}">
        <m-icon
          :class="optClass"
          icon="icon-chat-expand"
          :size="30"
          @click="handleClick"
        />
        <div class="send" v-show="msgInput"  @click="handleConfirm" style="width:60px">
          发送
        </div>
      </div>
    </div>
    <div class="opt-con flex-default">
      <div class="opt-item">
        <van-uploader
          :after-read="
            (file) => {
              uploadFile('image', file);
            }
          "
          :accept="fileAcceptMap.image"
          :max-size="maxSizeMap.image * 1024"
          @oversize="onOverSize('image')"
        >
          <m-icon icon="icon-upload-img" :size="30" />
        </van-uploader>
      </div>
      <div class="opt-item">
        <van-uploader
          :after-read="
            (file) => {
              uploadFile('video', file);
            }
          "
          :accept="fileAcceptMap.video"
          :max-size="maxSizeMap.video * 1024"
          @oversize="onOverSize('video')"
        >
          <m-icon icon="icon-upload-video" :size="30" />
        </van-uploader>
      </div>
    </div>
  </div>
</template>

<script>
import { ChatMsgStatus, ChatMsgType } from "@/enums";
export default {
  computed: {
    maxHeight() {
      return this.expand ? "200px" : "47px";
    },
    optClass() {
      return this.expand ? ["icon", "icon-rotate"] : ["icon"];
    },
  },
  data() {
    return {
      expand: false,
      msgInput: "",
      uploadApiMap: {
        image: "uploadImg",
        video: "uploadVideo",
      },
      fileAcceptMap: {
        image: "image/*",
        video: "video/*",
      },
      maxSizeMap: {
        image: 5 * 1024,
        video: 20 * 1024,
      },
    };
  },
  methods: {
    handleClick() {
      this.expand = !this.expand;
    },
    handleFocus() {
      this.expand = false;
    },
    handleConfirm() {
      if (this.msgInput.length == 0) {
        return;
      }
      this.$emit("confirm", {
        type: ChatMsgType.TEXT,
        content: this.msgInput,
        status: ChatMsgStatus.LOADING,
        isSelf: true,
        messageId: "text" + Math.random(),
        Listid: Math.random(),
      });
      this.msgInput = "";
    },
    handleOpt(type) {
      switch (type) {
        case "image":
          this.chooseImage(type);
          break;
        case "video":
          this.chooseVideo(type);
          break;
        default:
          this.chooseImage("image");
      }
    },
    uploadFile(type, file) {
      let _this = this;
      let item = {
        type: ChatMsgType[type.toUpperCase()],
        content: file,
        status: ChatMsgStatus.LOADING,
        uploadStatus: "loading",
        progress: 0,
        err: "",
        messageId: type + Math.random(),
        Listid: Math.random(),
        isSelf: true,
      };
      _this.$emit("chooseFile", item);
      this.$api({
        apiName: this.uploadApiMap[type],
        postData: file.file,
        onUploadProgress: (e) => {
          let per = ((e.loaded / e.total) * 100) | 0;
          this.uploadOnProgress(item, per);
        },
        success: (res) => {
          this.uploadSuccess(item, res);
        },
        fail: (err) => {
          this.uploadFail(item, err);
        },
        error: (err) => {
          this.uploadFail(item, err);
        },
      });
    },
    uploadSuccess(item, res) {
      item.uploadStatus = "success";
      item.content = res;
      this.$emit("uploadSuccess", item);
    },
    uploadFail(item, err) {
      item.uploadStatus = "fail";
      item.err = "上传失败！";
      this.$emit("uploadFail", item);
    },
    uploadOnProgress(item, progress) {
      item.progress = progress;
      this.$emit("on-progress", item);
    },
    onOverSize(type) {
      let maxSize = this.maxSizeMap[type];
      let label = "";
      if (maxSize < 1024) {
        label = `${maxSize}KB`;
      } else if (maxSize < 1024 * 1024) {
        label = `${(maxSize / 1024).toFixed(1)}MB`;
      } else {
        label = `${(maxSize / 1024 / 1024).toFixed(1)}MB`;
      }

      this.$toast(`文件大小不得超过${label}！`);
    },
  },
};
</script>

<style lang="less">
.chat-footer {
  width: 100%;
  padding: 6px 16px;
  background: #ffffff;
  overflow: hidden;
  transition: max-height 0.5s;

  > .input-con {
    align-items: center;

    > .chat-input {
      flex: 1;
      font-size: 14px;
      background: #f3f3f3;
      border-radius: 18px;
      height: 35px;
      padding: 0 15px;
      margin-right: 15px;
    }

    .icon {
      transition: transform 0.3s;
    }

    .icon-rotate {
      transform: rotate(180deg);
    }
    .right-con{
      position: relative;
      flex-shrink: 0;
      transition: all 0.3s ease;
      .send{
        width: 100%;
        position: absolute;
        color: #ffffff;
        background-color: @mall-primary-color;
        text-align: center;
        line-height: 30px;
        top: 0;
        left: 0;
        border-radius: 4px;
        height: 100%;
      }
    }
  }

  > .opt-con {
    height: 66px;
    align-items: center;
    justify-content: center;

    .opt-item {
      height: 48px;
      width: 48px;
      border-radius: 5px;
      background: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 40px;
    }

    .opt-item:nth-last-of-type(1) {
      margin-right: 0;
    }
  }
}
</style>
