<template>
  <view class="upage">
    <z-paging
      ref="paging"
      inside-more
      loading-more-no-more-text="咱也是有底线的！"
      :auto-show-back-to-top="true"
      v-model="dataList"
      @query="queryList"
    >
      <template #top>
        <navBarSearch
          :navName="'肝胆相照精选病例交流'"
          @changeWord="changeWord"
        ></navBarSearch>
        <!-- <view class="bar"></view> -->
        <view class="detail" v-if="total > 0 && showNum">
          <view class="desc"
            >检索到：<text class="red">{{ total }}个病例</text></view
          >
          <view class="desc" v-if="keyWord"
            >检索词：<text class="red">{{ keyWord }}</text></view
          >
        </view>
        <view class="bar"></view>
        <view class="filterbox">
           <!-- <view class="type" @click="swicthType">{{!isArticle?'文章':'视频'}}<up--image :src="switchImg"  width="31rpx" height="31rpx"></up--image></view> -->
           <up-dropdown class="u-dropdown" ref="uDropdownRef">
            <up-dropdown-item
              v-model="order.push_date"
              title="发布时间"
			        @change="change"
              :options="options"
            ></up-dropdown-item>
			<up-dropdown-item
			  v-model="order.read_num"
			   title="阅读量"
			    @change="change"
			  :options="options"
			></up-dropdown-item>
          </up-dropdown>
		 
        </view>
      </template>
      <view class="box">
        <!-- <view class="bar"></view> -->
        <view class="record">
          <view class="list">
            <view
              class="cell"
              v-for="(item) in dataList"
              :key="item.exchange_id"
             

            >
              <view @click="goDetail(item.exchange_id)" class="title ellipsis-two-lines">{{
                item.exchange_title
              }}</view>
              <view class="doctor" @click="goDetail(item.exchange_id)">
                <up--image
                  :src="item.avatar ? item.avatar : headImg"
                  width="46rpx"
                  height="46rpx"
                  radius="50%"
                ></up--image>
                <view class="name"
                  >{{ item.user_name }}（{{ item.hospital_name }}）</view
                >
              </view>
              <view class="content" @click="goDetail(item.exchange_id)"> {{ item.exchange_content }} </view>
              <view
                class="imgbox"
                @click="goDetail(item.exchange_id)"
                v-if="
                  item.exchange_content_image &&
                  item.exchange_content_image.length > 0
                "
              >
                <view
                 
                  class="imgcell"
                  v-for="unit in item.exchange_content_image"
                >
                  <up--image
                    :src="unit"
                    radius="10"
                    width="220rpx"
                    height="220rpx"
                  >
                    <view slot="error" style="font-size: 24rpx">加载失败</view>
                  </up--image>
                </view>
              </view>
              <view class="videocon">
                <view
                  class="imgbox"
                  v-if="
                    item.exchange_content_video &&
                    item.exchange_content_video.length > 0
                  "
                >
                  <video
                   :key="index"
                    v-for="(videoCell, index) in item.exchange_content_video"
                    class="myVideo"
                    :src="videoCell"
                    @error="videoErrorCallback"
                    controls
                  ></video>
                </view>
              </view>
              <view class="tagbox" @click="goDetail(item.exchange_id)" v-if="item.label && item.label.length > 0">
                <view
                  class="tag"
                  v-for="cell in item.label"
                  :key="cell.exchange_label_id"
                  >{{ cell.label_name }}</view
                >
              </view>
              <view class="deal" @click="goDetail(item.exchange_id)">
                <view class="left">
                  <view class="eyebox item">
                    <up-icon name="eye" color="#4B5563" size="28rpx"></up-icon>
                    <view class="num">{{ item.read_num }}</view>
                  </view>
                  <view class="collect item">
                    <up-icon
                      name="heart"
                      color="#4B5563"
                      size="28rpx"
                    ></up-icon>
                    <view class="num">{{ item.collect_num }}</view>
                  </view>
                  <view class="chat item">
                    <up-icon name="chat" color="#4B5563" size="28rpx"></up-icon>
                    <view class="num">{{ item.comment_num }}</view>
                  </view>
                </view>
                <view class="time">
                  <up-icon name="clock" color="#4B5563" size="28rpx"></up-icon>
                  <view class="num">{{ formatdate(item.push_date)}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>

  <!-- <tabBar :value="2"></tabBar> -->
</template>

<script setup>
import { ref,reactive} from "vue";
import navBar from "@/components/navBar/navBar.vue";
import tabBar from "@/components/tabBar/tabBar.vue";
import headImg from "@/static/headImg.png";
import dayjs from "dayjs";
import api from "@/api/api";
import navTo  from "@/utils/navTo.js";
import { onLoad } from "@dcloudio/uni-app";
import list from "@/uni_modules/z-paging/components/z-paging/z-paging";
const user_id = ref("");
const is_selected = ref(0);
const paging = ref(null);
const dataList = ref([]);
const total = ref(0);
const keyWord = ref("");
const showNum = ref(false);
const options= ref([
  {
    label: "正序",
    value: 'asc',
  },
  {
    label: "倒序",
    value: 'desc',
  },
]);
const order=reactive({
	  read_num:'',
	  push_date:''
})

const formatdate = (date) => {
  return dayjs(date).format("YYYY-MM-DD");
};
onLoad((options) => {
  if (options.keyWord) {
    keyWord.value = options.keyWord;
  }
  if (options.userId) {
    user_id.value = options.userId;
  }
  if(options.is_selected){
    is_selected.value = options.is_selected;
  }
});
const videoErrorCallback = (e) => {
  uni.showModal({
    content: e.target.errMsg,
    showCancel: false,
  });
};
const changeWord = (val) => {
  if (!val) return false;
  showNum.value = true;
  keyWord.value = val;
  paging.value.reload();
};
const goDetail = (id) => {
  navTo({
    url: `/pages/detail/detail?id=${id}&type=exchange`,
  });
};
const queryList = (pageNo, pageSize) => {
  console.log(666666);
  const params = {
    page: pageNo,
    page_size: pageSize,
  };
  searchList(params);
};
const searchList = async (params) => {
  let searchForm = {
    keyword: keyWord.value,
    user_id: user_id.value,
  };
  if(Number(is_selected.value)){
    searchForm.is_selected=Number(is_selected.value)
  }
  if(!order.read_num){
  	delete order.read_num
  }
  if(!order.push_date){
  	   delete order.push_date
   }
   if(order.read_num || order.push_date){
      searchForm.order=order
   }
  api.searchExchage({
      ...searchForm,
      ...params,
    })
    .then((res) => {
      paging.value.complete(res.data.data.data);
      total.value = res.data.data.total;
    })
    .catch((err) => {
      paging.value.complete(false);
    });
};
</script>

<style lang='scss' scoped>
.filterbox{
	display: flex;
	height:128rpx;
	align-items: center;
   position: relative;
     border-bottom: 2rpx solid #f3f4f6;
    :deep(.u-dropdown__menu__item__text){
    font-size: 14px!important;
  }
  .type{
     color: #606266;
    font-size:14px;
    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;
  }
}
.detail {
  background: #f9f9f9;
  padding: 12rpx 30rpx;
  .desc {
    font-size: 26rpx;
    color: #4b5563;
    line-height: 40rpx;
  }
  .red {
    color: #ff0000;
  }
}
.upage {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100rpx);
   :deep(.u-flex) {
    display: flex;
    flex-direction:row;
	overflow: hidden;

  }
  :deep(.u-dropdown__menu){
	 	
    background: #fff;
    z-index:1;
    margin-left: 0rpx;

  }
  :deep(.u-dropdown__menu__item){
	 
        height:74rpx;
        padding:0 20rpx;
        background: #F3F4F6;
        border-radius: 15rpx;
	    flex:none;
		margin-left: 30rpx;
     
  }
}

.box {
  flex: 1;
  padding-bottom: 30rpx;
  overflow-y: scroll;
}

.myVideo {
  width: 100%;
  border-radius: 15rpx;
}

.deal {
  padding-top: 20rpx;
  display: flex;
  color: #4b5563;
  font-size: 24rpx;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;

    .item {
      width: 100rpx;
    }
  }

  .collect {
    display: flex;
    align-items: center;
  }

  .eyebox,
  .chat {
    display: flex;
    align-items: center;
  }

  .time {
    display: flex;
    align-items: center;
  }

  .num {
    margin-left: 8rpx;
  }
}

.tagbox {
  margin-top: 24rpx;
  display: flex;

  .tag {
    height: 54rpx;
    padding: 0 28rpx;
    background: #ecfaf9;
    border-radius: 30rpx;
    font-size: 27rpx;
    color: #3cc7c0;
    margin-right: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.doctor {
  display: flex;
  align-items: center;
}

.record {
  padding-top: 30rpx;

  .list {
    margin: 30rpx 30rpx;

    .name {
      padding: 20rpx 0 20rpx 15rpx;
      font-size: 27rpx;
      color: #333333;
    }

    .content {
      font-size: 27rpx;
      color: #666666;
      line-height: 38rpx;
    }

    .imgbox {
      display: flex;
      margin-top: 24rpx;

      .imgcell {
        width: 220rpx;
        height: 220rpx;
        margin-right: 20rpx;
      }

      .imgcell:last-child {
        margin-right: 0;
      }
    }
  }
}

.record {
  padding-top: 30rpx;

  .list {
    margin: 8rpx 0rpx 0;

    .cell {
      padding: 22rpx 30rpx;
      // display: flex;
      border-bottom: 2rpx solid #f3f4f6;
      .circle {
        margin-top: 15rpx;
        width: 15rpx;
        height: 15rpx;
        background: #3cc7c0;
        border-radius: 50%;
      }

      .title {
        margin-left: 10rpx;
        font-size: 32rpx;
        color: #000000;
        line-height: 46rpx;
      }
    }

    .cell:last-child {
      border-bottom: none;
    }
  }
}

.titlebox {
  margin: 0 30rpx;
  display: flex;
  justify-content: space-between;

  .more {
    display: flex;
    align-items: center;

    .morename {
      margin-right: 10rpx;
      font-size: 28rpx;
      color: #3cc7c0;
    }
  }
}

.bar {
  height: 16rpx;
  background: #f3f4f6;
}

.databox {
  height: 162rpx;
  background: #ffffff;
  display: flex;
  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;
    }
  }
}
</style>