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

      <view class="item-content" @click.stop="goToDateil(item)">
        <view style="display: flex;justify-content: space-between;align-items: center;">
          <view style="display: flex;align-items: center;">
            <view class="reserve-status" v-if="item.auditStatus == 0">草稿箱</view>
            <view class="reserve-status1" v-if="item.auditStatus == 1">审核中</view>
            <view class="reserve-status2" v-if="item.auditStatus == 3">审核驳回</view>
            <view class="title">{{ item.title }}</view>

          </view>
          <view class="moreClass" @click.stop="editFun(item)">
            <image src="/static/workbench/moreIcon.png" style="width: 32rpx;height: 32rpx;" />

          </view>
        </view>
        <view class="service-info">
          <!--  //0-草稿 1-待审核 2-审核通过 3-审核拒绝 -->
          <text v-if="item.publishTime" class="service-time">{{ item.publishTime }}发布</text>
          <view v-if="item.auditStatus == 2" class="diamond-count">
            <image src="/static/workbench/eyeIcon.png" style="width: 32rpx;height: 32rpx;" />
            <text>已读{{ item.viewCount }}</text>
          </view>
        </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>

    <!-- 未入驻提示 -->
    <u-popup :show="showModal1" mode="center" :round="16" :mask-close-able="false">
      <view class="modal-wrap">
        <!-- 标题居中 -->
        <view class="title">{{ auditStatus == 0 ? '提示' : '入驻审核驳回' }}</view>
        <!-- 正文 -->
        <view class="content">
          请提交入驻资料并由后台人员审核通过后,即可开通操作权限
        </view>
        <!-- 底部双按钮（必显示） -->
        <view class="btn-box">
          <view v-if="auditStatus == 3" class="btn">修改入驻信息</view>
          <view v-if="auditStatus == 0" class="btn left" @click="cancel">我在想想</view>
          <view v-if="auditStatus == 0" class="btn right" @click="goEnter">立即入驻</view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import { dynamicDelete } from '@/api/dynamic.js'

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

    }

  },
  mounted() {

  },
  methods: {
    goToDateil(item) {
      if (this.auditStatus == 0 || this.auditStatus == 3) {
        this.showModal1 = true
        return
      }
      if (this.auditStatus == 1) {
        uni.showToast({
          title: '入驻审核中，暂无操作权限',
          icon: 'none'
        })
        return

      }
      uni.navigateTo({
        url: `/pages/my/dynamic/dynamicDetail?momentId=${item.id}`,
      })
    },
    //删除
    sure() {
      this.showModal = false
      dynamicDelete({
        momentId: this.currentObj.id,
      }).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
          this.$emit('refreshList')
        }
      })

    },
    // 我在想想：关闭弹窗
    cancel() {
      this.showModal1 = false
    },
    // 立即入驻：跳转入驻页
    goEnter() {
      this.showModal1 = false
      uni.navigateTo({
        url: '/pages/join/applyJoin' // 替换你的入驻页面路径
      })
    },
    //取消
    cancel() {
      this.showModal = false
    },
    closeSheetShow() {
      this.sheetShow = false
      uni.showTabBar()
    },
    selectItem(item) {
      this.sheetShow = false
      uni.showTabBar()
      if (item.name === '编辑') {
        if (this.currentAuditStatus == 1 || this.currentAuditStatus == 2) {
          uni.showToast({
            title: this.currentAuditStatus == 1 ? '审核中' : '已发布' + '的动态不支持编辑',
            icon: 'none'
          })
          return
        }
        let str = uni.$u.queryParams({
          momentId: this.currentObj.id,
          type: 'edit',
        })
        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(item) {
      if (this.auditStatus == 0 || this.auditStatus == 3) {
        this.showModal1 = true
        return
      }
      if (this.auditStatus == 1) {
        uni.showToast({
          title: '入驻审核中，暂无操作权限',
          icon: 'none'
        })
        return

      }
      this.currentObj = item
      this.currentAuditStatus = item.auditStatus
      this.sheetShow = true
      //隐藏tabbar
      uni.hideTabBar()
      //uni.showTabBar()

    },
  },
}
</script>

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

  .item {
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 32rpx;

    margin-bottom: 24rpx;
    box-sizing: border-box;
    background: #ffffff;
    overflow: hidden;

    .contentText {
      margin: 20rpx 0;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #1D2129;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* 控制行数：2行 */
      -webkit-box-orient: vertical;
    }

    .title {
      width: 480rpx;
      height: 32rpx;
      line-height: 32rpx;
      //border: 1px solid red;
      white-space: nowrap;
      /* 禁止换行 单行 */
      overflow: hidden;
      /* 超出隐藏 */
      text-overflow: ellipsis;
      /* 末尾... */
      font-weight: 500;
      font-size: 30rpx;
      color: #1D2129;
      text-align: left;
      margin-left: 8rpx;
    }

    .service-info {
      margin-top: 8rpx;
      display: flex;

      .service-time {
        display: block;
        font-weight: 400;
        font-size: 22rpx;
        color: #86909C;
        text-align: left;
      }
    }

    .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;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }
    }

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

    .reserve-status {
      width: 84rpx;
      height: 32rpx;
      background: #86909C;
      border-radius: 4rpx 4rpx 4rpx 4rpx;

      font-weight: 400;
      font-size: 20rpx;
      color: #FFFFFF;
      line-height: 32rpx;
      text-align: center;
    }

    .reserve-status1 {

      width: 84rpx;
      height: 32rpx;
      background: #FF7D00;
      border-radius: 4rpx 4rpx 4rpx 4rpx;

      font-weight: 400;
      font-size: 20rpx;
      color: #FFFFFF;
      line-height: 32rpx;
      text-align: center;
    }

    .reserve-status2 {

      font-size: 24rpx;
      color: #03c8be;
    }

    .diamond-count {
      margin-left: 48rpx;
      display: flex;
      align-items: center;

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

      text {
        font-weight: 400;
        font-size: 22rpx;
        color: #86909C;
        line-height: 32rpx;
      }
    }

    .moreClass {
      height: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;


    }


  }
}
</style>