<template>
  <view class="u-page">
    <z-paging
      ref="paging"
      inside-more
      loading-more-no-more-text="咱也是有底线的！"
      :auto-show-back-to-top="true"
      v-model="dataList"
      @query="queryList"
    >
      <template #top>
        <backLogoNav :searchWord="keyWord" :navName="navName"></backLogoNav>
        <view class="tabcon">
          <up-tabs
            :activeStyle="{
              color: '#3CC7C0',
            }"
            :inactiveStyle="{
              color: '#4B5563',
            }"
            lineColor="#3CC7C0"
            lineWidth="155rpx"
            lineHeight="2"
            :list="tabList"
            @click="switchTab"
          ></up-tabs>
        </view>
      </template>
      <view
        class="item"
        v-for="(item, index) in dataList"
        :key="index"
       
      >
        <view class="title">{{item.content}}</view>
       
        <view class="deal">
          <view class="time">
            <up-icon name="clock" color="#6B7280" size="28rpx"></up-icon>
            <view class="num">{{ formatdate(item.created_at) }}</view>
          </view>
          <view class="dot" @click="isDel(item.comment_id)">...</view>
        </view>
        <view class="casecontent">
           <view class="author" v-if="tab==0">{{item.author_name}}({{item.author_hospital_name}})</view>
             <view class="content" v-if="tab==0">{{ item.exchange_title }}</view>
           <view class="content" v-else-if="tab==1">{{ item.article_title }}</view>
            <view class="content" v-else-if="tab==2">{{ item.video_title }}</view>
        </view>
      </view>
    </z-paging>
  </view>
  <!-- 底部操作 -->
  <up-popup
    :zIndex="10"
    :overlayStyle="{ zIndex: 9 }"
    :closeOnClickOverlay="false"
    :show="showDeal"
    :round="10"
    mode="bottom"
    @close="closeDeal"
    @open="openDeal"
  >
    <view class="dealbox">
      <!-- <view class="dealcell">收藏</view> -->
      <view class="dealcell" @click="alertPop">删除</view>
      <view class="bar"></view>
      <view class="dealcell" @click="closeDeal">取消</view>
    </view>
  </up-popup>
  <up-overlay :show="showModal" mask-click-able>
    <view class="zanboxpop">
      <view class="zanwraper">
        <view class="title">提示</view>
        <view class="content">
            是否删除该评论？
        </view>
        
        <view class="btnbox">
          <view class="cancle" @click="showModal=false">取消</view>
          <view class="ok" @click="confirmDel">确定</view>
        </view>
      </view>
    </view>
  </up-overlay>
</template>

<script setup>
import { ref, reactive } from "vue";
import backLogoNav from "@/components/backLogoNav/backLogoNav.vue";
import list from "@/uni_modules/z-paging/components/z-paging/z-paging";
import api from "@/api/api";
import { onLoad } from "@dcloudio/uni-app";
import dayjs from "dayjs";
import switchImg from "@/static/switch.png";
import certImg from "@/static/cert.png";
import navTo  from "@/utils/navTo.js";
const paging = ref(null);
const uDropdownRef = ref(null);
const dataList = ref([]);
const total = ref(0);
const delId = ref("");
const keyWord = ref("");
const isArticle = ref(true);
const navName = ref("肝胆相照临床病例库");
const showDeal = ref(false);
const showModal = ref(false);

const tab=ref(0);
const closeDeal=()=>{
  showDeal.value = false;
};
const alertPop=()=>{
  showModal.value = true;
   showDeal.value = false;
};
const confirmDel=()=>{
  if(tab.value==0){
    delExchangeComment(delId.value);
  }else if(tab.value==1){
    delArticleComment(delId.value);
  }else if(tab.value==2){
    delVideoComment(delId.value);
  }
 
  showModal.value = false;
};
const openDeal=()=>{
  showDeal.value = true;
};
const isDel=(id)=>{
  delId.value=id;
  showDeal.value = true;
};

const options = ref([
  {
    label: "正序",
    value: "asc",
  },
  {
    label: "倒序",
    value: "desc",
  },
]);
const tabList = ref([
  {
    name: "病例交流",
  },
  {
    name: "文章病例库",
  },
  {
    name: "视频病例库",
  },
]);

const delArticleComment = (id) => {
  api.delArticleComment(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "删除成功",
    });
    paging.value.refresh();
  
  });
};
const delVideoComment = (id) => {
  api.delVideoComment(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "删除成功",
    });
    paging.value.refresh();
  
  });
};
const delExchangeComment = (id) => {
  api.delExchangeComment(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "删除成功",
    });
    paging.value.refresh();
  
  });
};

const switchTab = (item) => {
  tab.value=item.index;
  paging.value.reload();
};
onLoad((options) => {
 
});

const formatdate = (date) => {
  return dayjs(date).format("YYYY-MM-DD");
};
const goDetail = (id) => {
  let type = isArticle.value ? "article" : "video";
  navTo({
    url: `/pages/detail/detail?id=${id}&type=${type}`,
  });
};

const getExchangeCommentUser = async (params) => {
  api.getExchangeCommentUser({
      ...params,
    })
    .then((res) => {
      paging.value.complete(res.data.data.data);
      total.value = res.data.data.total;
    })
    .catch((err) => {
      paging.value.complete(false);
    });
};
const getArticleCommentUser = async (params) => {
  api.getArticleCommentUser({
      ...params,
    })
    .then((res) => {
      paging.value.complete(res.data.data.data);
      total.value = res.data.data.total;
    })
    .catch((err) => {
      paging.value.complete(false);
    });
};
const getVideoCommentUser = async (params) => {
  api.getVideoCommentUser({
      ...params,
    })
    .then((res) => {
      paging.value.complete(res.data.data.data);
      total.value = res.data.data.total;
    })
    .catch((err) => {
      paging.value.complete(false);
    });
};

const queryList = (pageNo, pageSize) => {
  const params = {
    page: pageNo,
    page_size: pageSize,
  };
  if(tab.value==0){
     getExchangeCommentUser(params);
   }else if(tab.value==1){
       getArticleCommentUser(params);
   }else{
    getVideoCommentUser(params);
   }
 
};
</script>

<style lang="scss" scoped>
.zanboxpop {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .zanwraper {
    width: 630rpx;
    margin: 0 auto;
    padding-bottom: 50rpx;
    background: #f5f6f9;
    border-radius: 16rpx;
    .title {
      margin-top: 48rpx;
      text-align: center;
      font-weight: 500;
      font-size: 36rpx;
      color: rgba(0, 0, 0, 0.85);
    }
    .content{
      padding:30rpx 0 ;
       background: #f5f6f9;
       text-align: center;
    }
    .count {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.65);
      .num {
        color: #ff0000;
        font-size: 32rpx;
      }
      .earn {
        font-size: 32rpx;
        color: #3cc7c0;
      }
    }
    .countbox {
      display: flex;
      width: 100%;
      margin: 30rpx 0px 40rpx;
      padding: 0 40rpx;
      justify-content: center;
      box-sizing: border-box;
      .minus {
        flex-shrink: 0;
        margin-left: 10rp;
        width: 90rpx;
        height: 90rpx;
        font-size: 60rpx;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        border-radius: 12rpx;
        border: 2rpx solid #e9e9e9;
      }
      .add {
        flex-shrink: 0;
        width: 90rpx;
        margin-left: 10rpx;
        height: 90rpx;
        font-size: 60rpx;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: #3cc7c0;
        border-radius: 12rpx;
        border: 2rpx solid #3cc7c0;
      }
      :deep(.u-input__content__field-wrapper__field) {
        height: 60rpx;
       
        font-size: 34rpx!important;
        text-align: center!important;
      }
      :deep(.u-input) {
        background: #f2f2f2;
         width: 200rpx!important;
         flex:none;
      }
      :deep(.u-input--radius) {
        border-radius: 24rrpx;
      }
    }
    .btnbox {
      margin: 0px 40rpx 0px;
      display: flex;
      justify-content: space-between;
      .cancle {
        color: rgba(0, 0, 0, 0.3);
        width: 256rpx;
        height: 88rpx;
        background: #f5f6f9;
        border-radius: 25px;
        border: 2rpx solid rgba(0, 0, 0, 0.15);
        font-weight: 500;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.85);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .ok{
        color:#fff;
        width: 256rpx;
        height: 88rpx;
       background: #3cc7c0;
        border-radius: 25px;
        border: 2rpx solid #3cc7c0;
        font-weight: 500;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.bar {
  width: 100%;
  background: #f9fafb;
  height: 20rpx;
}
.dealbox {
  .dealcell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 112rpx;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
    border-bottom: 2rpx solid #efefef;
  }
}
.tabcon {
  margin: -20rpx 20rpx 0;
}
.databox {
  height: 162rpx;
  background: #ffffff;
  display: flex;
  margin-bottom: 20rpx;
  // padding: 0 30rpx;
  justify-content: space-between;
  .cell {
    flex: 1;
    padding: 35rpx 0;

    text-align: center;

    .num {
      font-size: 38rpx;
      color: #3cc7c0;
    }
    .name {
      margin-top: 18rpx;
      font-size: 28rpx;
      color: #4b5563;
    }
  }
}
.filterbox {
  display: flex;
  height: 128rpx;
  align-items: center;
  position: relative;
  .type {
    position: absolute;
    left: 30rpx;
    top: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f3f4f6;
    border-radius: 15rpx;
    height: 74rpx;
    padding: 0 25rpx;
    z-index: 2;
  }
}
.u-page {
  :deep(.u-flex) {
    display: flex;
    flex-direction: row;
    overflow: hidden;
  }
  :deep(.u-dropdown__menu) {
    background: #fff;
    z-index: 1;
    margin-left: 180rpx;
  }
  :deep(.u-dropdown__menu__item) {
    height: 74rpx;
    padding: 0 20rpx;
    background: #f3f4f6;
    border-radius: 15rpx;
    flex: none;
    margin-left: 60rpx;
  }
  .casecontent{
    margin-top: 16rpx;
    padding:24rpx 30rpx;
     border-radius: 16rpx;
    border: 2rpx solid #E5E7EB;
    .author{
      font-size: 26rpx;
      color: #666666;
    }
    .content{
      margin-top: 10rpx;
      font-size: 30rpx;
      color: #333333;
      line-height: 46rpx;
    }
  }
  .deal {
    margin-top: 20rpx;
    display: flex;
    color: #6b7280;
    font-size: 24rpx;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
    }
    .recored {
      display: flex;
      align-items: center;
      font-size: 31rpx;
      color: #3cc7c0;
    }
    .collect {
      display: flex;
      align-items: center;
    }
    .eyebox {
      width: 160rpx;
      display: flex;
      align-items: center;
    }
    .dot{
      font-size: 34rpx;
    }
    .time {
      display: flex;
      align-items: center;
    }
    .num {
      margin-left: 8rpx;
    }
  }
  .item {
    border-bottom: 1rpx solid #f3f4f6;
    padding: 30rpx;
    .title {
      font-size: 30rpx;
      color: #111827;
      line-height: 46rpx;
    }
  }
  .tagsbox {
    margin-top: 20rpx;
    display: flex;
    .tag {
      padding: 0 10rpx;
      margin-right: 16rpx;
      height: 46rpx;
      line-height: 46rpx;
      text-align: center;
      background: rgba(60, 199, 192, 0.1);
      border-radius: 8rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #3cc7c0;
    }
  }
}
.detail {
  background: #f9f9f9;
  padding: 12rpx 30rpx;
  .desc {
    font-size: 26rpx;
    color: #4b5563;
    line-height: 40rpx;
  }
  .red {
    color: #ff0000;
  }
}
</style>