<template>
  <div class="surveydetailpage" style="padding: 30px">
    <!-- 面包屑导航 -->
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <div class="crumb">
        <div>{{ pName }}</div>
        <div style="margin-left: 6px; margin-right: 6px">/</div>
        <div>{{ sName }}</div>
        <div style="margin-left: 6px; margin-right: 6px">/</div>
        <div style="font-weight: 700; font-size: 16px">讨论详情</div>
      </div>  
      <!--
      <div class="prevnext">
        <div class="prev">
          <img
            style="width: 23px; height: 23px"
            src="../../assets/image/prev.png"
          />
          <div style="margin-left: 7px">上一个</div>
        </div>
        <div class="prev" style="margin-left: 31px">
          <div style="margin-right: 7px">下一个</div>
          <img
            style="width: 23px; height: 23px"
            src="../../assets/image/next.png"
          />
        </div>
      </div>-->

      <div class="return">
      <div style="display: flex" @click="returnclick">
                  <img
                    class="img2" style="margin-right:22px;"
                    src="../../assets/image/return.png"
                  />
                  <div class="text">返回</div>
        </div>
    </div>
    </div> 
    <!-- 面包屑导航 -->
    <!-- 标题 -->
    <div class="title">【调研】管理者进阶腾飞班 - 班内成员讨论</div>
    <!-- 标题 -->
    <!-- 详细内容 -->
    <div class="bascinfo clearfix">
      <!-- 中间部分 -->
      <div class="middletitle">
        <div class="title">
          {{ disDetail.projectName }}
        </div>
        <!--        <button class="btn">回复</button>-->
      </div>

      <div class="line clearfix">
        <div class="linetitle">{{ disDetail.stageName }}</div>
        <div class="radi"></div>
        <div class="intime">进行中</div>
      </div>
      <div class="discusscontent clearfix">
        <div class="contenttop clearfix">
          <div class="contenttitle">{{ disDetail.discussName }}</div>
          <div
            @click="like()"
            style="
              display: flex;
              cursor: pointer;
              align-items: baseline;
              margin-left: 20px;
            "
          >
            <span
              class="iconfont icon-dianzan"
              :style="{
                color: disDetail.praised ? 'red' : '#b3bdc4',
                marginLeft: '19px',
              }"
            ></span>
            <div class="count">{{ disDetail.praiseNum || 0 }}</div>
          </div>
          <div
            @click="collection()"
            style="
              display: flex;
              cursor: pointer;
              align-items: baseline;
              margin-left: 20px;
            "
          >
            <span
              class="iconfont icon-shoucang"
              :style="{
                color: disDetail.collected ? 'red' : '#b3bdc4',
                marginLeft: '19px',
              }"
            ></span>
            <div class="count">{{ disDetail.collectionNum || 0 }}</div>
          </div>
        </div>
        <div class="contentmid">
          {{ disDetail.discussExplain }}
        </div>
      </div>
    </div>

    <div class="bascinfor">
      <div class="inputone">
        <el-input
          v-model="disComment.content"
          :autosize="{ minRows: 5, maxRows: 5 }"
          resize="none"
          maxlength="100"
          type="textarea"
          placeholder="写评论~"
        />
        <div class="words">{{ disComment.content.length }}/100</div>
        <div class="upload">
          <div style="display: flex">
            <div
              class="allimg"
              v-for="(img, i) in commentSubmitFileList"
              :key="i"
            >
              <div
                class="imgone"
                :style="{
                  backgroundImage: `url('${img.url}')`,
                  marginLeft: '15px',
                }"
              ></div>
              <div class="cha" @click="removeCommentImg(i)"></div>
            </div>
          </div>
          <div class="uploadAnd">
            <div class="btnone clearfix">
              <UploadImg v-model="commentSubmitFileList">
                <button class="btwwo">
                  <img class="image" src="../../assets/image/uploadimg.png" />
                  <div class="shangchuan">上传图片</div>
                </button>
              </UploadImg>
            </div>

            <button class="btntwo" @click="submitComment">发表</button>
          </div>
        </div>

        <div class="thinline"></div>
        <div class="bottom">
          <div v-for="(row, i) in commontList" :key="i">
            <div class="header">
              <div class="avator"></div>
              <div class="id">{{ row.userName }}</div>
              <div class="showCareer">(显示事业)</div>
              <div class="idThink">理性思考，崇尚科学</div>
            </div>
            <div class="discuss clearfix">
              <div class="discussmain clearfix">
                <div class="talkmain">
                  {{ row.content }}
                </div>
              </div>
              <div class="intime">{{ row.ctime }}</div>
              <div class="likeYou">
                <div
                  @click="commentComment(row)"
                  style="display: flex; cursor: pointer; align-items: baseline"
                >
                  <span
                    class="iconfont icon-pinglun"
                    :style="{ color: '#b3bdc4' }"
                  ></span>
                  <!--                  <div class="count"> {{ row.praiseNum || 0 }}</div>-->
                </div>
                <div
                  @click="commentLike(row)"
                  style="
                    display: flex;
                    cursor: pointer;
                    align-items: baseline;
                    margin-left: 19px;
                  "
                >
                  <span
                    class="iconfont icon-dianzan"
                    :style="{ color: row.praised ? 'red' : '#b3bdc4' }"
                  ></span>
                  <div class="count">{{ row.praiseNum || 0 }}</div>
                </div>
              </div>
              <div v-for="(replay, j) in row.children" :key="j">
                <div class="reply">
                  <div class="sameava avaone"></div>
                  <div class="sameuser">{{ replay.userName }}</div>
                  <div class="centerreply">回复</div>
                  <div class="sameava avatwo"></div>
                  <div class="sameuser">{{ row.userName }}</div>
                  <div class="replytime">{{ replay.ctime }}</div>
                </div>
                <div class="allreplyimg">
                  <div class="singleimg"></div>
                </div>
                <div class="mainreply">
                  <div class="replydetail">
                    {{ replay.content }}
                  </div>
                  <!-- <div class="talk"></div> -->
                </div>
                <div class="likeYou">
                  <div
                    @click="commentComment(replay)"
                    style="
                      display: flex;
                      cursor: pointer;
                      align-items: baseline;
                    "
                  >
                    <span
                      class="iconfont icon-pinglun"
                      :style="{ color: '#b3bdc4' }"
                    ></span>
                    <!--                    <div class="count"> {{ replay.commentNum }}</div>-->
                  </div>
                  <div
                    @click="commentLike(replay)"
                    style="
                      display: flex;
                      cursor: pointer;
                      align-items: baseline;
                      margin-left: 19px;
                    "
                  >
                    <span
                      class="iconfont icon-dianzan"
                      :style="{ color: replay.praised ? 'red' : '#b3bdc4' }"
                    ></span>
                    <div class="count">{{ replay.praiseNum || 0 }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="discuss clearfix"
            v-if="commontList && commontList.length"
          >
            <div class="inreply">
              <el-input
                v-model="replayComment.content"
                :autosize="{ minRows: 5, maxRows: 5 }"
                resize="none"
                maxlength="100"
                type="textarea"
                :placeholder="replayComment.placeholder"
              />
              <div class="words">{{ replayComment.content.length }}/100</div>
              <div class="upload">
                <div style="display: flex">
                  <div class="allimg" v-for="(img, i) in fileList" :key="i">
                    <div
                      class="imgone"
                      :style="{
                        backgroundImage: `url('${img.url}')`,
                        marginLeft: '15px',
                      }"
                    ></div>
                    <div class="cha" @click="removeImg(i)"></div>
                  </div>
                </div>
                <datagrid class="uploadAnd">
                  <UploadImg v-model="fileList">
                    <button class="btnone clearfix">
                      <img
                        class="image"
                        src="../../assets/image/uploadimg.png"
                      />
                      <div class="shangchuan">上传图片</div>
                    </button>
                  </UploadImg>
                  <button class="btntwo" @click="submitReplayComment">
                    发表
                  </button>
                </datagrid>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 详细内容 -->
  </div>
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
import { useRoute } from "vue-router/dist/vue-router";
import { request, usePage, useRequest } from "@/api/request";
import {
  COMMENT_ADD,
  COMMENT_COLLECTION,
  COMMENT_LIST,
  COMMENT_PRAISE,
  DISCUSS_DETAIL,
  FILE_UPLOAD,
} from "@/api/api";
import UploadImg from "@/components/img/UploadImg.vue";

const {
  query: { id, discussSubmitId, type, pName, sName },
} = useRoute();

const { data: commontList, fetchData: commonFetch } = usePage(COMMENT_LIST, {
  id,
  type: 1,
});

const { data: disDetail } = useRequest(DISCUSS_DETAIL, { id, type });

const fileList = ref([]);
const commentSubmitFileList = ref([]);

const disComment = ref({
  content: "",
});
const replayComment = ref({
  placeholder: "",
  content: "",
  pid: "",
});

function removeImg(i) {
  fileList.value.splice(i, 1);
}

function removeCommentImg() {
  commentSubmitFileList.value.splice(i, 1);
}

function like() {
  disDetail.value.praised
    ? (disDetail.value.praiseNum -= 1)
    : (disDetail.value.praiseNum += 1);
  disDetail.value.praised = !disDetail.value.praised;
  request(COMMENT_PRAISE, { targetId: disDetail.value.discussId, type: 5 });
}

function collection() {
  disDetail.value.collected
    ? (disDetail.value.collectionNum -= 1)
    : (disDetail.value.collectionNum += 1);
  disDetail.value.collected = !disDetail.value.collected;
  request(COMMENT_COLLECTION, { targetId: disDetail.value.discussId, type: 6 });
}

function commentLike(obj) {
  obj.praised ? (obj.praiseNum -= 1) : (obj.praiseNum += 1);
  obj.praised = !obj.praised;
  request(COMMENT_PRAISE, { targetId: obj.id, type: 5 });
}

function commentComment(obj) {
  replayComment.value.placeholder = "@ " + obj.userName;
  replayComment.value.pid = obj.id;
}

function submitComment() {
  request(COMMENT_ADD, {
    targetId: disDetail.value.discussId,
    content: disComment.value.content,
    type: 1,
  }).then(() => {
    commonFetch();
  });
}

function submitReplayComment() {
  request(COMMENT_ADD, {
    targetId: disDetail.value.discussId,
    content: replayComment.value.content,
    type: 2,
    pid: replayComment.value.pid,
  }).then(() => {
    commonFetch();
  });
}
</script>

<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.surveydetailpage {
  .crumb {
    color: #fff;
    display: flex;
    font-size: 14px;
    line-height: 24px;
  }
  .return{
    position: absolute;
    right: 10%;
    .text{
      text-align: center;
     display: flex;
     flex-direction: row;
     align-items: center;
    }
  }
  .prevnext {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;

    .prev {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }

  .title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    line-height: 24px;
    margin-top: 17px;
    margin-left: -11px;
  }

  .bascinfo {
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 24px;

    .middletitle {
      display: flex;
      margin-top: 64px;
      position: relative;

      .title {
        font-size: 24px;
        font-weight: 800;
        color: #4a9cf8;
        margin-left: 79px;
        margin-right: 210px;
      }

      @media screen and (max-width: 1574px) {
        .title {
          margin-bottom: -24px;
        }
      }

      .btn {
        cursor: pointer;
        position: absolute;
        width: 146px;
        height: 46px;
        background: #2478ff;
        box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
        border-radius: 4px;
        border: 0;
        font-size: 16px;
        font-weight: 800;
        color: #ffffff;
        right: 45px;
        top: 5px;
      }
    }

    .line {
      display: flex;
      margin: 47px 45px 0 75px;
      height: 50px;
      background: #f9f9f9;
      position: relative;

      .linetitle {
        margin: 14px 0 17px 28px;
        font-size: 16px;
        font-weight: 800;
        color: #333333;
      }

      .radi {
        position: absolute;
        width: 11px;
        height: 11px;
        border: 2px solid #0060ff;
        border-radius: 50%;
        margin-top: 19px;
        right: 91px;
      }

      .intime {
        position: absolute;
        margin-top: 15px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #0060ff;
        right: 36px;
      }
    }

    .discusscontent {
      margin-left: 105px;
      margin-top: 35px;

      .contenttop {
        display: flex;

        .contenttitle {
          font-size: 16px;
          font-weight: 500;
          color: #333333;
        }

        .same {
          width: 14px;
          height: 14px;
          margin-top: 4px;
          margin-left: 20px;
        }

        .count {
          font-size: 14px;
          font-weight: 500;
          color: #b3bdc4;
          margin-top: 4px;
          margin-left: 7px;
        }

        .dianzan {
          background-image: url(../../assets/image/dianzan2.png);
          // background-size: 100%;
        }

        .shoucang {
          background-image: url(../../assets/image/shoucang.png);
          // background-size: 100%;
        }
      }

      .contentmid {
        margin: 15px 47px 30px 0;
        font-size: 14px;
        font-weight: 500;
        color: #666666;
        line-height: 24px;
      }
    }
  }

  .bascinfor {
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 24px;
    // position: relative;
    .inputone {
      margin-right: 44px;
      position: relative;
      max-width: 1069px;
      // max-height: 110px;
      margin-left: 88px;
      margin-top: 44px;

      .words {
        position: absolute;
        right: 15px;
        // bottom: 5px;
        top: 130px;
        font-size: 14px;
        font-weight: 500;
        color: #333330;
      }

      .el-textarea__inner {
        font-size: 14px;
        font-weight: 500;
        color: #666666;
        margin-top: 44px;
        // margin: 23px 50px;
        border-radius: 8px;
        background-color: rgba(245, 246, 247, 1);
        padding: 11px 25px;
      }

      .el-textarea__inner::placeholder {
        font-size: 14px;
        font-weight: 500;
        color: #666666;
        line-height: 24px;
      }

      // .el-input__inner {
      //   &::-webkit-input-placeholder {
      //     /* WebKit browsers 适配谷歌 */
      //     color: red;
      //   }
      // }
      .upload {
        display: flex;
        // background-color: red;
        .allimg {
          position: relative;
          display: flex;

          .imgone {
            margin-top: 24px;
            width: 55px;
            height: 55px;
            border-radius: 8px;
            background-image: url(../../assets/image/px.png);
            background-size: 100%;
          }

          .cha {
            cursor: pointer;
            top: 15px;
            right: -9px;
            // right: 0;
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-image: url(../../assets/image/X.png);
            background-size: 100%;
          }
        }

        .uploadAnd {
          margin-top: 21px;

          .btwwo {
            cursor: pointer;

            .image {
              padding-top: 8px;
              width: 18px;
              height: 17px;
              // margin-top: 10px;
              margin-left: -60px;
            }

            .shangchuan {
              position: absolute;
              right: 20px;
              top: 7px;
              display: inline-block;
              margin-left: 10px;
              font-size: 14px;
              font-weight: 500;
              color: #2478ff;
              line-height: 24px;
            }

            width: 126px;
            height: 36px;
            border: none;
            background-color: #fff;
          }

          .btnone {
            cursor: pointer;
            position: absolute;
            right: 140px;

            .image {
              padding-top: 8px;
              width: 18px;
              height: 17px;
              // margin-top: 10px;
              margin-left: -60px;
            }

            .shangchuan {
              position: absolute;
              right: 20px;
              top: 7px;
              display: inline-block;
              margin-left: 10px;
              font-size: 14px;
              font-weight: 500;
              color: #2478ff;
              line-height: 24px;
            }

            width: 126px;
            height: 36px;
            border: 1px solid #2478ff;
            border-radius: 4px;
            background-color: #fff;
          }

          .btntwo {
            cursor: pointer;
            position: absolute;
            width: 126px;
            height: 36px;
            background: #2478ff;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            color: #ffffff;
            border: 0;
            right: 0;
          }
        }
      }

      .thinline {
        margin-top: 66px;
        // width: 1635px;
        border-top: 1px solid #878b92;
        margin-left: -50px;
        opacity: 0.2;
      }

      .bottom {
        margin-top: 31px;
        // width: 100px;
        // height: 100px;
        // background-color: #bfa;
        .header {
          display: flex;

          .avator {
            width: 41px;
            height: 41px;
            border-radius: 50%;
            background-image: url(../../assets/image/px.png);
            background-size: 100%;
          }

          .id {
            margin-left: 8px;
            font-size: 14px;
            height: 41px;
            font-weight: bold;
            color: #333333;
            line-height: 41px;
          }

          .showCareer {
            margin-left: 7px;
            height: 41px;
            font-size: 12px;
            font-weight: 500;
            color: #666666;
            line-height: 41px;
          }

          .idThink {
            margin-left: 17px;
            height: 41px;
            font-size: 14px;
            font-weight: 500;
            color: #666666;
            line-height: 41px;
          }
        }

        .discuss {
          margin-left: 48px;
          margin-top: 23px;
          // width: 100px;
          width: 100%;
          // height: 100px;
          // background-color: orange;
          .discussmain {
            // background-color: red;
            width: 100%;
            display: flex;
            position: relative;

            .talkmain {
              margin-right: 25px;
              margin-top: 2px;
              font-size: 14px;
              font-weight: 500;
              color: #666666;
            }

            // .talk {
            //   position: absolute;
            //   right: 0;
            //   width: 23px;
            //   height: 23px;
            //   background-image: url(../../assets/image/talk.png);
            //   background-size: 100%;
            // }
          }

          .intime {
            margin-top: 11px;
            font-size: 14px;
            font-weight: 500;
            color: #999999;
          }

          .likeYou {
            margin-top: 15px;
            display: flex;

            .same {
              width: 14px;
              height: 14px;
            }

            .pinglun {
              background-image: url(../../assets/image/pinglun.png);
              background-size: 100%;
            }

            .dianzan {
              background-image: url(../../assets/image/dianzan2.png);
              background-size: 100%;
            }

            .count {
              margin-left: 7px;
              margin-top: -1px;
              font-size: 14px;
              font-weight: 500;
              color: #b3bdc4;
            }
          }

          .reply {
            display: flex;
            margin-top: 32px;
            // height: 100px;
            width: 100%;
            // background-color: lightpink;
            .sameava {
              width: 29px;
              height: 29px;
              border-radius: 50%;
            }

            .sameuser {
              margin-left: 14px;
              line-height: 29px;
              height: 29px;
              font-weight: bold;
              color: #333333;
              font-size: 14px;
            }

            .centerreply {
              height: 29px;
              font-size: 14px;
              font-weight: 500;
              color: #4a9cf8;
              line-height: 29px;
              margin-left: 23px;
              margin-right: 17px;
            }

            .avaone {
              background-image: url(../../assets/image/px.png);
              background-size: 100%;
            }

            .avatwo {
              background-image: url(../../assets/image/px.png);
              background-size: 100%;
            }

            .replytime {
              margin-left: 17px;
              height: 29px;
              font-size: 14px;
              font-weight: 500;
              color: #999999;
              line-height: 29px;
            }
          }

          .allreplyimg {
            display: flex;
            margin-top: 21px;

            .singleimg {
              margin-right: 7px;
              width: 65px;
              height: 65px;
              border-radius: 8px;
              background-image: url(../../assets/image/px.png);
              background-size: 100%;
            }
          }

          .mainreply {
            display: flex;
            margin-top: 16px;

            .replydetail {
              // width: 462px;
              height: 23px;
              font-size: 14px;
              font-weight: 500;
              color: #666666;
              line-height: 23px;
              margin-right: 11px;
            }

            // .talk {
            //   width: 23px;
            //   height: 23px;
            //   background-image: url(../../assets/image/talk.png);
            //   background-size: 100%;
            // }
          }

          .inreply {
            position: relative;
            margin-top: -22px;
            margin-bottom: 20px;
            // .words {
            //   position: absolute;
            //   bottom: 5px;
            //   font-size: 14px;
            //   font-weight: 500;
            //   color: #333330;
            // }
            // .el-textarea__inner {
            //   font-size: 14px;
            //   font-weight: 500;
            //   color: #666666;
            //   margin-top: 44px;
            //   // margin: 23px 50px;
            //   border-radius: 8px;
            //   // height: 1000px;
            //   background-color: rgba(245, 246, 247, 1);
            // }
            // .upload {
            //   display: flex;
            //   // z-index: 999;
            //   .allimg {
            //     margin-bottom: 30px;
            //     position: relative;
            //     display: flex;
            //     .imgone {
            //       margin-top: 24px;
            //       width: 55px;
            //       height: 55px;
            //       border-radius: 8px;
            //       background-image: url(../../assets/image/px.png);
            // background-size: 100%;
            //     }
            //     .cha {
            //       cursor: pointer;
            //       top: 15px;
            //       right: -9px;
            //       // right: 0;
            //       position: absolute;
            //       width: 18px;
            //       height: 18px;
            //       border-radius: 50%;
            //       background-image: url(../../assets/image/X.png);
            // background-size: 100%;
            //     }
            //   }
            //   .uploadAnd {
            //     margin-top: 21px;
            //     .btnone {
            //       cursor: pointer;
            //       position: absolute;
            //       right: 140px;
            //       .image {
            //         padding-top: 8px;
            //         width: 18px;
            //         height: 17px;
            //         // margin-top: 10px;
            //         margin-left: -60px;
            //       }
            //       .shangchuan {
            //         position: absolute;
            //         right: 20px;
            //         top: 7px;
            //         display: inline-block;
            //         margin-left: 10px;
            //         font-size: 14px;
            //         font-weight: 500;
            //         color: #2478ff;
            //         line-height: 24px;
            //       }
            //       width: 126px;
            //       height: 36px;
            //       border: 1px solid #2478ff;
            //       border-radius: 4px;
            //       background-color: #fff;
            //     }
            //     .btntwo {
            //       cursor: pointer;
            //       position: absolute;
            //       width: 126px;
            //       height: 36px;
            //       background: #2478ff;
            //       border-radius: 4px;
            //       font-size: 14px;
            //       font-weight: 500;
            //       color: #ffffff;
            //       border: 0;
            //       right: 0;
            //     }
            //   }
            // }
          }
        }
      }
    }
  }
}
</style>
