<template>
  <div class="comemntcell">
    <van-image
      round
      width="49"
      height="49"
      :src="avatar"
    />
    <div class="descbox">
      <div class="namebox">
        <div class="name">{{ formatName(item.user_name) }}</div>
        <div
          class="zanbox"
          @click="toggleLike(item.comment_id, item.is_like, index)"
        >
          <img src="../assets/nozan.png" alt="" v-if="!item.is_like" />
          <img src="../assets/zan.png" alt="" v-else />
          <div class="num" v-if="item.like_num > 0">{{ formatNumber(item.like_num) }}</div>
        </div>
      </div>
      <div class="depart">{{ item.department_name }}</div>
      <div class="hospital">{{ item.hospital_name }}</div>
      <div class="date">{{ formateDate(item.created_at) }}</div>
      <div class="tag" v-if="item.is_high_quality == 1">
        <span>优质解答</span>
      </div>
      <div class="comment">
        <div class="text">
          {{ item.content }}
        </div>
        <div class="reply" @click="openConmment(item.level, item.user_name)">
          {{ item.level == 1 ? "回复" : "评论" }}
        </div>
      </div>
      <!-- <reply  ref="replyRef" :parentIndex="parentIndex" :parent_id='item.comment_id' :root_id="''" :case_id="case_id" :project_id="project_id"></reply>  -->
      <div class="talkbox" v-show="showReply">
        <div class="textbox">
          <van-field
            :autosize="{ minHeight: 120 }"
            v-model="content"
            rows="2"
            autosize
            type="textarea"
            maxlength="200"
            placeholder="请输入评论内容"
            show-word-limit
          />
        </div>
        <div class="toolbox">
          <div class="cancel" @click="showReply = false">取消</div>
          <button class="ok" @click="handleAdd" :disabled="isLock">提交</button>
        </div>
      </div>
      <div class="sondiv">
        <comment-list
          v-if="item.case_comment && item.case_comment.length > 0"
          :childList="item.case_comment"
          :parentIndex="index"
          @freshLike="freshLike"
          :root_id="parent_id"
          :replyName="item.user_name"
          :case_id="case_id"
          :project_id="project_id"
          @freshSecComment="freshSecComment"
          @handleFreshList="handleFreshList"
        ></comment-list>
      </div>
    </div>
  </div>
</template>

<script setup>
import { showToast } from "vant";
import { ref } from "vue";
import api from "../api/user.js";
import dayjs from "dayjs";
import avatar from "../assets/doctor_avatar.png";

const replyRef = ref(null);
const showReply = ref(false);
const content = ref("");
const level = ref(2);
const writer = ref("");
const isLock = ref(false);
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
  parent_id: {
    type: String,
    default: "",
  },
  root_id: {
    type: String,
    default: "",
  },
  replyName: {
    type: String,
    default: "",
  },
  index: {
    type: Number,
    default: 0,
  },
  childList: {
    type: Array,
    default: () => [],
  },
  project_id: {
    type: String,
    default: "",
  },
  case_id: {
    type: String,
    default: "",
  },

  parentIndex: {
    type: Number,
    default: -1,
  },
});

const emit = defineEmits([
  "freshLike",
  "freshList",
  "freshSecComment",
  "handleFreshList",
]);

const formateDate = (val) => {
  return dayjs(val).format("YYYY-MM-DD HH:mm");
};

/**
 * 显示回复框的处理函数
 *
 * 该函数用于设置 showReply 的值为 true，从而显示回复框。
 */
const handleReply = () => {
  replyRef.value[0].openReply();
};

const handleLike = async (id, index) => {
  const { code } = await api.like(id);
  if (code == 200) {
    showToast("点赞成功");
    emit("freshLike", {
      parentIndex: props.parentIndex,
      index: index,
      likeNum: 1,
    });
  }
};
const freshLike = (data) => {
  emit("freshLike", data);
};
const freshSecComment = (data) => {
  emit("freshSecComment", data);
};
const handleCancleLike = async (id, index) => {
  const { code } = await api.cancleLike(id);
  if (code == 200) {
    showToast("取消点赞成功");
    emit("freshLike", {
      parentIndex: props.parentIndex,
      index: index,
      likeNum: -1,
    });
  }
};
const toggleLike = (id, flag, index) => {
  console.log(id, flag, props.parentIndex, index);
  if (flag) {
    handleCancleLike(id, index);
  } else {
    handleLike(id, index);
  }
};
const formatNumber = (value) => {
  if (value > 9999) {
    return (value / 10000).toFixed(1) + "w";
  } else {
    return value;
  }
};
const formatName=(val)=>{
   if(!val) return '医生'
   return val.slice(0,1)+'医生'

}
const openConmment = (flag, name) => {
  showReply.value = true;
  if (flag == 2 || flag == 3) {
    content.value = "@" + formatName(name) + "：";
    writer.value = "@" + formatName(name) + "：";
    level.value = 3;
  } else {
    content.value = "";
    writer.value = "";
    level.value = 2;
  }
};
const handleAdd = async () => {
  if (content.value == "" || content.value == writer.value) {
    showToast("请输入内容");
    return false;
  }
  showReply.value = false;
  isLock.value = true;
  const { code, data } = await api.addComment({
    case_id: props.case_id,
    project_id: props.project_id,
    content: content.value,
    level: level.value,
    root_id: level.value == 2 ? props.parent_id : props.root_id,
    parent_id: props.parent_id,
  });
  isLock.value = false;
  if (code == 200) {
    emit("freshList");
    content.value = "";
  }
};
const handleFreshList = () => {
  emit("freshList");
};
</script>

<style lang='scss' scoped>
.sondiv {
  margin-top: 15px;
  :deep() .cellbox {
    padding-top: 15px;
  }
}

.cellbox {
  padding-top: 15px;
}

.active {
  border-bottom: 1px solid #e5e5e5;
}

.comemntcell {
  display: flex;

  .descbox {
    margin-left: 12px;
    flex: 1;
    // border-bottom: 1px solid #E5E5E5;

    .depart {
      margin-top: 10px;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }

    .hospital {
      margin-top: 5px;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }

    .date {
      margin-top: 5px;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }

    .comemntcell {
      border-bottom: 1px solid #e5e5e5;

      .descbox {
        border: none;
        padding-bottom: 15px;
      }
    }

    .comment {
      margin-top: 5px;
      display: flex;

      .text {
        font-size: 14px;
        color: #333333;
        line-height: 17px;
        flex: 1;
        white-space: pre-wrap;
        word-wrap: break-word;
        word-break: break-all;
      }

      .reply {
        margin-left: 30px;
        width: 50px;
        height: 25px;
        background: #43c9c3;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #ffffff;
      }
    }

    .tag {
      margin-top: 2px;
      font-size: 12px;
      color: #ffffff;
      height: 15px;
      background: #43c9c3;
      border-radius: 10px;
      display: flex;
      padding: 0 4px;
      width: 54px;

      justify-content: center;
      align-items: center;

      span {
        transform: scale(0.9);
      }
    }

    .namebox {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name {
        font-size: 16px;
        color: #333333;
      }

      .zanbox {
        display: flex;
        font-size: 15px;
        justify-content: flex-end;
        color: #333333;
        align-items: center;
        margin-right: 40px;

        img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
.expand {
  width: 240px;
  height: 19px;
  margin: 12px auto 12px;
  background: #43c9c3;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: #ffffff;
}
.talkbox {
  margin: 12px 30px 0px 0;
}
.textbox {
  border-radius: 5px;
  border: 0.5px solid #43c9c3;

  :deep() .van-cell {
    background: none;
  }

  :deep() .van-field__word-limit {
    color: #999999;
  }
}
.toolbox {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;

  .cancel {
    height: 38px;
    background: #ffffff;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #737478;
    flex: 1;
  }

  .ok {
    margin-left: 12px;
    flex: 1;
    border-radius: 4px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #43c9c3;
    border: 1px solid #43c9c3;
    font-size: 14px;
    color: #fff;
  }
}
</style>
