<template>
  <view @touchmove.stop.prevent>
    <view
      :class="{ 'tui-reply-tabbar': !showVoiceMask }"
      :style="{ paddingBottom: `${keyboardHeight}px` }"
    >
      <view :class="['tui-chat-tabbar', { isIos: 'tui-chat-ios-tabbar' }]">
        <!-- v-show="showIndex != 2" -->
        <!-- <view class="tui-icon tui-icon-im_keyboard" @tap="showKeyBoard(1)" v-show="showIndex == 2"></view> -->

        <!-- <editor
          id="editor"
          class="tui-chat-input"
          @input="inputReply"
          @click.stop="showKeyBoard(1)"
          :html="editorContent"
          @ready="onEditorReady"
          v-show="!isVoice"
        >
        </editor> -->

        <view class="tui-send-box" v-show="!showVoiceMask">
          <view
            class="tui-icon tui-icon-im_voice"
            v-if="!isVoice"
            @tap="switchVoice"
          ></view>
          <view
            class="tui-icon tui-icon-im_keyboard"
            v-if="isVoice"
            @tap="switchInput"
          ></view>
        </view>

        <textarea
          hold-keyboard
          auto-height
          class="tui-chat-input"
          @input="inputReply"
          :fixed="true"
          :adjust-position="false"
          maxlength="300"
          :value="content"
          :show-confirm-bar="false"
          placeholder-class="tui-phcolor"
          @tap.stop="showKeyBoard(1)"
          ref="textarea"
          v-show="!isVoice && !showVoiceMask"
          placeholder="一起畅聊解决问题吧~"
        ></textarea>

         <view
          :class="[
            showVoiceMask ? 'mask-bottom' : 'tui-chat-voice_btn',
            { 'no-area': needCancel },
          ]"
          hover-class="tui-opcity"
          :hover-stay-time="150"
          v-if="isVoice"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
        >
          <text v-if="!showVoiceMask">
            {{ isVoice ? "按住 说话" : "松开 发送" }}
          </text>

          <image
            v-if="showVoiceMask"
            :src="
              needCancel
                ? '../../static/images/chat/voice2.png'
                : '../../static/images/chat/voice.png'
            "
          ></image>
        </view>

        <view
          v-show="!showVoiceMask"
          class="tui-icon tui-icon-im_face"
          @tap="showKeyBoard(2)"
        ></view>

        <view
          v-show="!showVoiceMask && !content"
          class="tui-icon tui-icon-im_more"
          @tap="showKeyBoard(3)"
        ></view>

        <view
            class="tui-btn-send"
            v-if="content"
            :style="{ color: color }"
            hover-class="tui-opcity"
            :hover-stay-time="150"
            @tap="hideKeyboard"
          >
            {{ sendText }}
          </view>
      </view>

      <view class="tui-reply-more">
        <view class="tui-face-box" v-if="showIndex == 2">
          <scroll-view scroll-y :style="{ height: replyContainerH + 'px' }">
            <view class="tui-face-scroll">
              <view
                class="tui-face-img_box"
                v-for="(item, index) in faceList"
                :key="index"
                @tap="inputFace(index)"
              >
                <image
                  :src="
                    'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/' +
                    item.url
                  "
                  class="tui-face-img"
                ></image>
              </view>
            </view>
          </scroll-view>
          <view class="tui-delete-face_box">
            <view
              class="tui-delete-keybord"
              :class="{ 'tui-opcity': !content }"
            >
              <text class="tui-icon tui-icon-delete_keybord"></text>
            </view>
          </view>
        </view>
        <view
          class="tui-more-box"
          style="height:110px"
          v-if="showIndex == 3"
        >
          <view
            class="tui-more-item"
            hover-class="tui-opcity"
            :hover-stay-time="150"
            @click="uploadPictures"
          >
            <view class="tui-more-icon">
              <view class="tui-icon tui-icon-photo"></view>
            </view>
            <text class="tui-more-text">照片</text>
          </view>
          <view
            class="tui-more-item"
            hover-class="tui-opcity"
            :hover-stay-time="150"
            @click="photograph"
          >
            <view class="tui-more-icon">
              <view class="custom-icon tui-icon-paishe"></view>
            </view>
            <text class="tui-more-text">拍摄</text>
          </view>
          <view
            class="tui-more-item"
            hover-class="tui-opcity"
            :hover-stay-time="150"
            @click="uploadVideo"
          >
            <view class="tui-more-icon">
              <view class="tui-icon tui-icon-video"></view>
            </view>
            <text class="tui-more-text">视频</text>
          </view>
        </view>
      </view>
      <view class="tui-inner-mask" v-if="isLocked"></view>
    </view>
    <view
      class="tui-reply-mask"
      v-if="mask && showVoiceMask"
      :class="{
        'tui-box-show': showIndex,
        'tui-mask-show': showIndex && !maskOpacity,
      }"
      @touchmove.stop.prevent
      @tap="hideKeyboard"
    ></view>
    <view class="voice-mask" v-show="showVoiceMask">
      <!--语音条 -->
      <view
        class="voice-bar voice-del"
        :class="{ voiceDel: needCancel }"
        :style="{ width: getVoiceBarWidth }"
      >
        <image
          src="../../static/images/chat/yinping.png"
          class="voice-volume"
        ></image>
        <view class="trangle-bottom" :class="{ trangleDel: needCancel }"></view>
      </view>
      <view class="voice-send">
        <!-- 取消和转文字图标 -->
        <view class="voice-middle-wrapper">
          <!-- 取消 -->
          <view class="voice-left-wrapper">
            <view class="cancel-del" :class="{ delTip: needCancel }">
              松开 取消
            </view>
            <view
              class="voice-middle-inner close"
              :class="{ bigger: needCancel }"
            >
              <u-icon name="close" color="#fff" size="24"></u-icon>
            </view>
          </view>
          <!-- 转文字 -->
          <view class="send-tip" :class="{ sendTipNone: needCancel }">
            松开 发送
          </view>
        </view>
        <!-- 底部语音按钮 -->
      </view>
    </view>
  </view>
</template>

<script>
//聊天栏 回复栏
// import emoji from "@/utils/emoji.js";
import emoji from "../../static/im/emojiData.js";
import uParse from "../../uni_modules/uview-ui/components/u-parse/u-parse.vue";
const recorderManager = uni.getRecorderManager();
export default {
  components: { uParse },
  name: "tChatBar",
  props: {
    //禁用聊天栏
    isLocked: {
      type: Boolean,
      default: false,
    },
    //是否显示遮罩
    mask: {
      type: Boolean,
      default: true,
    },
    //true表示遮罩透明
    maskOpacity: {
      type: Boolean,
      default: true,
    },
    sendText: {
      type: String,
      default: "发送",
    },
    color: {
      type: String,
      default: "#5677fc",
    },
    isHideKeyBoard: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    //键盘高度监听

    this.faceList = emoji.imgArr[1].emojiList
      .reduce((acc, curr) => acc.concat(curr), [])
      .filter((item) => item.alt != "[删除]");

    let safeH = this.tui.isPhoneX() ? 34 : 0;
    uni.onKeyboardHeightChange((res) => {
      let h = res.height - safeH;
      this.keyboardHeight = h > 0 ? h : 0;
      //去除 完成那一栏高度影响
      setTimeout(() => {
        if (this.showIndex == 1 && this.keyboardHeight != 0) {
          this.replyContainerH = this.keyboardHeight;
        }
      }, 100);
    });

    // #ifdef APP-PLUS
    const platform = uni.getSystemInfoSync().platform;
    if (platform == "ios") {
      this.isIos = true;
    }
    // #endif
  },
  data() {
    return {
      showIndex: 0, //1-键盘 2-表情 3-其他
      keyboardHeight: 0,
      replyContainerH: uni.upx2px(500),
      faceList: [],
      content: "",
      isVoice: false,
      isEmoji: false,
      editorContent: "",
      isIos: false,
      showVoiceMask: false,
      voicePopupTouches: {},
      voicelength: 0,
      needCancel: false,
      startX: 0,
      startY: 0,
      timer: 0,
      maskBottomRect: null,
      isRecording: false,
      isOutside: false,
      tempFilePath: null,
      startTime: 0,
    };
  },
  computed: {
    // 计算语音条宽度
    getVoiceBarWidth() {
      return 230 + this.voicelength * 4 + "rpx";
    },
  },
  watch: {
    isHideKeyBoard: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.showIndex = 0;
        }
      },
    },
  },
  methods: {
    onEditorReady() {
      uni
        .createSelectorQuery()
        .select("#editor")
        .context((res) => {
          this.content = res.context;
        })
        .exec();
    },
    hideKeyboard() {
      //隐藏键盘
      this.showIndex = 0;
      // uni.hideKeyboard();

      this.$emit("sendMsg", this.content);
      this.isEmoji = true;
      this.content = "";
    },
    showKeyBoard(index) {
      if (this.showIndex == index) return;
      this.showIndex = index;
      this.isVoice = false;
      // if(index==1){
      // 	this.$refs.textarea.focus();
      // }
      // setTimeout(function() {
      // 	if(index==1){
      // 		this.$refs.textarea.focus();
      // 	}
      // }, 150);
    },
    // inputReply(e) {
    //   this.editorContent = e.detail.html;
    // },
    inputReply(e) {
      this.content = e.detail.value;
    },
    getEmojiUrl(emojiPath) {
      return `https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${emojiPath}`;
    },
    // async inputFace(index) {
    //   // if (!this.content) {
    //   //   uni.showToast({
    //   //     title: "编辑器未准备好",
    //   //     icon: "none",
    //   //   });
    //   //   return;
    //   // }

    //   const emojiUrl = this.getEmojiUrl(this.faceList[index].url);

    //   try {
    //     await this.content.insertImage({
    //       src: emojiUrl,
    //       width: "24px",
    //       height: "24px",
    //       alt: this.faceList.find((e) => e.url === emojiUrl),
    //     });

    //     console.log("表情插入成功");
    //   } catch (error) {
    //     console.error("插入表情失败:", error);
    //     uni.showToast({
    //       title: "插入表情失败",
    //       icon: "none",
    //     });
    //   }
    // },
    inputFace(index) {
      let face = this.faceList[index].alt;
      this.content = this.content + face;
    },
    parsedContent(content) {
      return content.replace(
        /\[img\](.*?)\[img\]/g,
        '<img src="$1" width="25" height="25" />'
      );
    },
    switchVoice() {
      this.isVoice = true;
      this.showIndex = 0;
    },
    switchInput() {
      this.isVoice = false;
    },
    uploadPictures() {
      this.$emit("uploadPictures");
    },
    photograph() {
      this.$emit("photograph");
    },
    uploadVideo() {
      this.$emit("uploadVideo");
    },
    async getMaskBottomRect() {
      return new Promise((resolve) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select(".mask-bottom")
          .boundingClientRect((data) => {
            this.maskBottomRect = data;
            console.log("元素位置信息:", data); // 调试用
            resolve(data);
          })
          .exec();
      });
    },

    async handleTouchStart(e) {
      console.log("handleTouchStart", e);
      this.$emit("showVoicePopup");
      this.showVoiceMask = true;

      // 等待 DOM 更新
      await this.$nextTick();

      if (!this.maskBottomRect) {
        await this.getMaskBottomRect();
      }

      recorderManager.start({
        format: "mp3",
      });

      this.voicelength = 1;
      this.startX = e.touches[0].pageX;
      this.startY = e.touches[0].pageY;
      this.timer = setInterval(() => {
        this.voicelength += 1;
        if (this.voicelength >= 60) {
          clearInterval(this.timer);
          this.handleTouchEnd();
        }
      }, 1000);
      this.isRecording = true;
      this.isOutside = false;
    },

    handleTouchMove(e) {
      // 检查是否在mask-bottom区域外
      if (!this.maskBottomRect) return;

      const touchX = e.touches[0].pageX;
      const touchY = e.touches[0].pageY;

      // 检查是否在mask-bottom区域外
      // 更精确的边界检查
      const SAFE_MARGIN = 5; // 像素单位
      const isNowOutside =
        touchX < this.maskBottomRect.left - SAFE_MARGIN ||
        touchX >
          this.maskBottomRect.left + this.maskBottomRect.width + SAFE_MARGIN ||
        touchY < this.maskBottomRect.top - SAFE_MARGIN ||
        touchY >
          this.maskBottomRect.top + this.maskBottomRect.height + SAFE_MARGIN;

      // 调试输出
      console.log(
        `触摸点: (${touchX}, ${touchY})`,
        `元素区域: [${this.maskBottomRect.left}, ${this.maskBottomRect.top}, ${this.maskBottomRect.width}, ${this.maskBottomRect.height}]`,
        `是否在外: ${isNowOutside}`
      );

      // 如果状态发生变化（进入或离开区域）
      if (isNowOutside !== this.isOutside) {
        this.isOutside = isNowOutside;

        if (this.isOutside) {
          // 离开区域，暂停录制
          recorderManager.pause();
          console.log("已离开区域，暂停录制");
          this.needCancel = true;
        } else {
          // 回到区域，继续录制
          recorderManager.resume();
          console.log("已回到区域，继续录制");
          this.needCancel = false;
        }
      }
    },

    async handleTouchEnd(e) {
      clearInterval(this.timer);
      recorderManager.stop();

      console.log("松开");

      if (!this.needCancel) {
        recorderManager.onStop((res) => {
          const message = {
            voice: res.tempFilePath,
            length: this.voicelength,
          };
          console.log("recorderManager", res);
          this.inputSubmit(message, 2);
        });
      } else {
        this.inputSubmit();
      }
      this.showVoiceMask = false;
      this.needCancel = false;
    },

    inputSubmit(msg = {}, types = "") {
      if (msg && types) {
        this.$emit("voiceEnd", msg);
      } else {
        this.$emit("voiceEnd");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "ticons";
  src: url(data:application/font-woff;charset=utf-8;base64,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)
    format("woff");
  font-weight: normal;
  font-style: normal;
}

.tui-icon {
  font-family: ticons;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  color: #222;
  background: #fff;
}

.tui-icon-at:before {
  content: "\eb90";
}

.tui-icon-location:before {
  content: "\eb95";
}

.tui-icon-im_more {
  &:before {
    content: "\eb96";
  }
}

.tui-icon-im_face {
  margin-left: 28rpx;
  margin-right: 28rpx;
  content: "\eb97";
  &:before {
    content: "\eb97";
  }
}

.tui-icon-link:before {
  content: "\eb98";
}

.tui-icon-im_voice:before {
  content: "\eb99";
}

.tui-icon-photo:before {
  content: "\eb9a";
}

.tui-icon-redpacket:before {
  content: "\eb9b";
}

.tui-icon-im_keyboard:before {
  content: "\eb9c";
}

.tui-icon-principal:before {
  content: "\eb9d";
}

.tui-icon-video:before {
  content: "\eba2";
}

.tui-icon-delete_keybord:before {
  content: "\e7b8";
}

.tui-icon-paishe::before {
  content: "\e604";
}

.tui-reply-tabbar {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  z-index: 1;

  .tui-chat-tabbar {
    width: 100%;
    background-color: $uni-bg-color-grey;
    display: flex;
    align-items: center;
    padding: 16rpx 24rpx;

    box-sizing: border-box;

    &::after {
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      border-top: 1rpx solid $uni-border-color;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }

    .tui-phcolor{
      color: #666;
      font-size: 24rpx;
    }

    .tui-chat-input {
      flex: 1;
      // min-height: 80rpx;
      min-height: rpx;
      padding: $uni-spacing-col-base 10rpx;
      background-color: $uni-bg-color;
      margin: 0;
      border-radius: 8rpx;
    }

    .tui-chat-voice_btn {
      flex: 1;
      height: 68rpx;
      border-radius: 12rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
    }

    .tui-icon-ml {
      margin-left: 28rpx;
    }

    // .tui-icon {
    //   margin-bottom: 13rpx;
    // }

    .tui-send-box {
      width: 80rpx;
      display: flex;
      align-items: center;
    }

    .tui-btn-send {
      flex-shrink: 0;
      padding: 6rpx 24rpx;
      font-size: 30rpx;
      border-radius: 100rpx;
      color: #fff !important;
      background: #fe411b;
    }
  }

  .tui-chat-ios-tabbar {
    padding-bottom: 80rpx;
  }

  .tui-reply-more {
    width: 100%;
    position: relative;

    &::after {
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      border-top: 1rpx solid $uni-border-color;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }

    .tui-face-box {
      width: 100%;
      position: relative;
      background-color: $uni-bg-color-hover;

      .tui-face-scroll {
        width: 100%;
        padding: $uni-spacing-row-lg 24rpx 80rpx;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;

        .tui-face-img_box {
          width: 14.2857%;
          height: 100rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .tui-face-img {
            width: 60rpx;
            height: 60rpx;
          }
        }
      }

      .tui-delete-face_box {
        position: absolute;
        background-color: #fff;
        // width: 108rpx;
        // height: 92rpx;
        padding: 6rpx 20rpx;
        border-top-left-radius: 12rpx;
        right: 30rpx;
        bottom: 30rpx;
        z-index: 10;

        .tui-delete-keybord {
          background-color: $uni-bg-color;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: $uni-border-radius-lg;

          .tui-icon {
            font-size: 48rpx;
          }
        }
      }
    }

    .tui-more-box {
      width: 100%;
      padding: $uni-spacing-row-lg;
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      background-color: $uni-bg-color-grey;
      justify-content: space-evenly;

      .tui-more-item {
        width: 126rpx;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        // margin-right: 40rpx;

        &:active {
          opacity: 0.6;
        }
      }

      .tui-more-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        height: 108rpx;
        width: 108rpx;
        border-radius: 20rpx;

        .tui-icon {
          font-size: 48rpx;
        }
      }

      .tui-more-text {
        font-size: 24rpx;
        line-height: 24rpx;
        color: #7e7e7e;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
      }
    }
  }

  .tui-inner-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(248, 248, 248, 0.6);
  }
}

.tui-reply-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: $uni-bg-color-mask;
  visibility: hidden;
  transition: all 0.3s ease;
  opacity: 0;
}

.tui-box-show {
  visibility: visible !important;
}

.tui-mask-show {
  opacity: 1;
}

.tui-icon-paishe {
  font-size: 60rpx;
}

.ql-container {
  height: 100% !important;
}

.tui-chat-input {
  ::v-deep {
    .ql-editor {
      min-height: 56rpx;
    }
  }
}

.voice-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 200; /* 确保足够高 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.voice-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -30%);
  height: 150rpx;
  background-color: #51ff50;
  border-radius: 26rpx;
  margin-bottom: 220rpx;
  z-index: 200;
}
.voiceDel {
  left: 80rpx;
  top: 50%;
  width: 170rpx !important;
  transform: translateX(0%);
  transform: translateY(-30%);
  background-color: red;
}
.voice-volume {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160rpx;
  height: 36rpx;
}
.volumeDel {
  width: 80rpx;
}
.trangle-bottom {
  position: absolute;
  bottom: -38rpx;
  left: 50%;
  transform: translateX(-50%);
  border-width: 20rpx;
  border-style: solid;
  border-color: #51ff50 transparent transparent transparent;
  z-index: 9999;
}
.trangleDel {
  border-color: red transparent transparent transparent;
}
.voice-send {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.voice-middle-wrapper {
  width: 100%;
  display: flex;
  position: absolute;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40rpx;
  bottom: 15%;
}
.voice-left-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.cancel-del {
  display: none;
}
.delTip {
  display: block;
  color: #bfbfbf;
  margin: 0 22rpx 18rpx 0;
}
.voice-middle-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #595959;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}
.close {
  transform: rotate(350deg);
  margin-left: 80rpx;
}
.bigger {
  width: 170rpx;
  height: 170rpx;
  background: #ececec;
}
.to-text {
  transform: rotate(10deg);
  margin-right: 80rpx;
}
.close-icon {
  width: 80rpx;
  height: 80rpx;
  color: #fff;
}
.wen {
  font-size: 40rpx;
  color: #bfbfbf;
}
.send-tip {
  position: absolute;
  left: 50%;
  bottom: 0rpx;
  transform: translate(-50%, 36%);
  color: #bfbfbf;
}
.sendTipNone {
  display: none;
}
.mask-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 180rpx;
  border-top: #bababb 8rpx solid;
  border-radius: 50% 50% 0 0;
  background-image: linear-gradient(#949794, #e1e3e1);
  z-index: 9999;
}
.mask-bottom image {
  position: absolute;
  width: 60rpx;
  height: 60rpx;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.no-area {
  border-color: #595959;
  background-image: linear-gradient(#595959, #595959);
}
</style>
