<template>
  <div class="message-send">
    <div class="msg-content">
      <el-input
        v-model="content"
        type="textarea"
        rows="5"
        :placeholder="placeholder"
      />
      <el-upload
        class="avatar-uploader"
        :headers="headers"
        action="/admin/common/file/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </div>
    <div class="msg-opt">
      <el-checkbox
        v-model="isRecommend"
        :false-label="2"
        :true-label="1"
      >设为精选</el-checkbox>
      <el-dropdown
        split-button
        type="primary"
        :disabled="!content"
        @click="sendAdvisorMessage(1)"
      >
        发送并推送
        <!-- <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>仅发送</el-dropdown-item>
          <el-dropdown-item>定时发送</el-dropdown-item>
        </el-dropdown-menu> -->
      </el-dropdown>
      <el-button
        type="primary"
        :disabled="!imageUrl"
        @click="sendAdvisorMessage(2)"
      >发送图片</el-button>
    </div>
  </div>
</template>
<script>
import { sendAdvisorMessage } from "@/api/circle.js";
import { getToken } from "@/utils/auth";
export default {
  props: {
    interactiveType: {
      type: Number // 	交互类型:1群聊;2私聊
    },
    groupId: {
      type: Number
    },
    replyId: {
      type: Number
    },
    privateUserInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
        "X-File-Size": 0
      },
      imageUrl: "",
      content: "",
      isRecommend: 2
    };
  },
  computed: {
    placeholder() {
      return this.interactiveType === 1
        ? "请输入您想发送的互动内容"
        : "请输入您想发送的私聊内容";
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data.url;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传只支持jpeg格式和png格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return flase;
      }
      return true;
    },
    async sendAdvisorMessage(contentType) {
      const ret = await sendAdvisorMessage({
        content: contentType === 1 ? this.content : this.imageUrl,
        groupId: this.groupId,
        isRecommend: this.isRecommend,
        interactiveType: this.interactiveType,
        replyId: this.replyId,
        contentType,
        toUserId: this.privateUserInfo.privateUserId,
        toUserName: this.privateUserInfo.privateUserName
      });
      if (ret && ret.code === 0) {
        this.$message({
          message: "发送成功",
          type: "success"
        });
        if (contentType === 1) {
          this.content = "";
        } else {
          this.imageUrl = "";
        }
        this.$emit("sendCallBack", {});
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.message-send {
  padding-top: 10px;
}
.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 108px;
  height: 108px;
  line-height: 108px;
  text-align: center;
}
.avatar {
  width: 108px;
  height: 108px;
  display: block;
}
.msg-content {
  display: flex;
  ::v-deep .el-upload--picture-card {
    width: 108px;
    height: 108px;
    line-height: 108px;
  }
}
.msg-opt {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-top: 10px;
  ::v-deep .el-checkbox {
    margin-right: 16px;
  }
  ::v-deep .el-dropdown {
    margin-right: 16px;
  }
}
</style>
