<!-- components/ReplyModal.vue -->
<template>
  <uni-popup
    ref="popup"
    :animation="true"
    adjust-position="false"
    :is-mask-click="false"
  >
    <view class="content">
      <view class="popup_data__headers">
        <view class="popup_data__headers--title">回复评论</view>
        <uni-icons
          type="closeempty"
          class="custom_icons"
          size="30"
          @click="handleClose"
        ></uni-icons>
      </view>
      <view class="reply-modal">
        <textarea
          :adjust-position="false"
          v-model="replyContent"
          placeholder="输入回复内容"
          :maxlength="-1"
          :focus="true"
          cursor-color="#007aff"
        />
        <button @click="submit">提交</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import { reviewGoodsReplyApi } from "@/commit/product.js";
export default {
  data() {
    return {
      replyContent: "",
      keyboardHeight: "",
      popupStyle: "",
      isPopupShow: false,
      paramsData: {},
      resData: {},
    };
  },
  mounted() {
    // 监听键盘高度变化
    uni.onKeyboardHeightChange((res) => {
      this.keyboardHeight = res.height;
      // 动态调整弹窗底部内边距
      this.popupStyle = `padding-bottom: ${res.height}px`;
    });
  },
  methods: {
    handleClose() {
      this.$emit("close");
      this.close();
    },
    open(data, item) {
      this.paramsData = data;
      this.resData = item;
      this.$refs.popup.open();
    },
    close() {
      this.replyContent = "";
      this.$refs.popup.close();
    },
    //TODO: 提交回复

    async submit() {
      console.log(this.paramsData, "this.paramsData");
      console.log(this.resData, "this.resData");
      if (!this.replyContent) {
        uni.showToast({
          title: "请输入回复内容",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "回复中...",
        mask: true,
      });
      try {
        const res = await reviewGoodsReplyApi(this.paramsData.reply_id, {
          content: this.replyContent,
        });
        if (res.data.status == 200) {
          uni.showToast({
            title: "回复成功",
            icon: "none",
          });
          this.$emit("submit");
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
        uni.hideToast();
      }
      // this.$emit('submit', {
      //   content: this.replyContent,
      //   index: this.index,
      //   item: this.item
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  // width: 680rpx;
  width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx 40rpx 40rpx;
}
.reply-modal {
  textarea {
    width: calc(100% - 48rpx);
    min-height: 240rpx;
    max-height: 640rpx;
    background: #f8f8f8;
    border-radius: 12rpx;
    padding: 24rpx;
    font-size: 28rpx;
    margin-bottom: 40rpx;
  }

  button {
    background: #007aff;
    color: white;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
  }
}

/* 覆盖uni-popup默认样式 */
/deep/ .uni-popup__wrapper {
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup_data__headers {
  // height: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-bottom: 2rpx solid #e5e5e5;
  padding-bottom: 20rpx;
  &--title {
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    justify-content: space-between;
    padding-right: 60rpx;
    font-size: 32rpx;
    font-weight: 600;
  }
  .custom_icons {
    flex-shrink: 0;
  }
}
</style>