<template>
  <view class="list-box" v-if="dataList && dataList.length > 0">
    <view class="item" v-for="(item, index) in dataList" :key="index" @click="goDetails(item)">

      <view class="item-content" @click.stop="goToDateil">
        <view style="display: flex;justify-content: space-between;">
          <view>
            <view class="title">{{ item.title }}</view>

          </view>
          <view v-if="item.auditStatus == 2" class="diamond-count">
            <text>已读{{ item.viewCount }}</text>
          </view>
          <view class="reserve-status" v-if="item.auditStatus == 1">审核中</view>

          <view class="moreClass" @click.stop="editFun(item.auditStatus)">

          </view>
        </view>
        <view class="service-info">
          <text class="service-time">{{ item.publishTime }}发布</text>
        </view>
        <view class="contentText">{{ item.content }}</view>
        <view class="item-image">
          <image :src="item.coverUrl" mode="aspectFill"></image>
        </view>


      </view>
    </view>

    <!-- 底部操作菜单 -->
    <u-action-sheet :show="sheetShow" :actions="actionList" cancel-text="取消" @select="selectItem" safe-area-bottom
      @close="closeSheetShow" />

    <u-popup :show="showModal" mode="center" border-radius="16rpx" :mask-close-able="false">
      <view class="modal-wrap">
        <!-- 标题居中 -->
        <view class="title">提示</view>
        <!-- 正文 -->
        <view class="content">
          确定要删除该动态吗
        </view>
        <!-- 底部双按钮（必显示） -->
        <view class="btn-box">
          <view class="btn left" @click="cancel">取消</view>
          <view class="btn right" @click="sure">确定</view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
export default {
  name: 'my-list',
  props: {
    type: {
      type: String,
      default: 'user',
    },
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showModal: false,
      sheetShow: false,
      actionList: [
        { name: '编辑' },
        { name: '删除', color: '#f56c6c' } // 删除红色字体
      ]
    }

  },
  mounted() {

  },
  methods: {
    goToDateil(){
      uni.navigateTo({
          url: `/pages/my/dynamic/dynamicDetail`,
        })
    },
    sure() {
      this.showModal = false
      uni.showToast({
        title: '动态删除成功',
        icon: 'none'
      })

    },
    //取消
    cancel() {
      this.showModal = false
    },
    closeSheetShow() {
      this.sheetShow = false
      uni.showTabBar()
    },
    selectItem(item) {
      console.log('8888')
      this.sheetShow = false
      uni.showTabBar()
      if (item.name === '编辑') {
        let str = uni.$u.queryParams({
          item: item,
        })
        uni.navigateTo({
          url: `/pages/my/dynamic/add_dynamic${str}`,
        })
      } else if (item.name === '删除') {

        if (this.currentAuditStatus == 1) {
          uni.showToast({
            title: '审核中的动态不支持删除',
            icon: 'none'
          })
          return
        }
        this.showModal = true
      }

    },
    editFun(auditStatus) {
      this.currentAuditStatus = auditStatus
      this.sheetShow = true
      //隐藏tabbar
      uni.hideTabBar()
      //uni.showTabBar()

    },
    goDetails(item) {
      return
      let str = uni.$u.queryParams({
        momentId: item.id,
      })
      uni.navigateTo({
        url: `/pages/discover/details${str}`,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.list-box {
  //display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 26rpx;
  font-family: PingFang SC, PingFang SC;

  .item {
    //width: calc(50% - 14rpx);
    margin-bottom: 28rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(88, 209, 187, 0.1);
    border-radius: 12rpx;
    overflow: hidden;

    .contentText {
      font-size: 28rpx;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* 控制行数：2行 */
      -webkit-box-orient: vertical;
    }

    .title {
      font-size: 28rpx;
      width: 520rpx;
      border: 1px solid red;
      white-space: nowrap;
      /* 禁止换行 单行 */
      overflow: hidden;
      /* 超出隐藏 */
      text-overflow: ellipsis;
      /* 末尾... */
    }

    .service-info {
      display: flex;
      flex: 1;

      .service-time {
        display: block;
        font-size: 24rpx;
        color: #999999;
      }
    }

    .item-image {
      width: 200rpx;
      height: 200rpx;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .service-status {
      font-size: 24rpx;
      color: #03c8be;
    }

    .reserve-status {
      font-size: 24rpx;
      color: #f16336;
    }

    .diamond-count {
      display: flex;
      align-items: center;

      image {
        width: 22rpx;
        height: 18rpx;
        margin-right: 8rpx;
      }

      text {
        font-size: 24rpx;
        color: #999999;
      }
    }

    .moreClass {
      background-color: #03c8be;
      height: 40rpx;
      width: 40rpx;
      border-radius: 50%;
    }


  }
}
</style>