<template>
  <view class="page-container">
    <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">
          <view class="item-title">
            <text>{{ item.title }}</text>
            <view class="status" @click="onEdit(item)">
              <view
                :class="{
                  'publish-status': item.auditStatus != 3,
                  'edit-status': item.auditStatus == 3,
                }"
                >{{ item.auditStatus == 3 ? '重新编辑' : '立即发布' }}</view
              >
            </view>
          </view>
          <u-tooltip :text="item.content" :showCopy="false"></u-tooltip>
          <view class="item-time">
            <text>{{ item.publishTime }}</text>
          </view>
          <view v-if="item.auditStatus == 3" class="item-tip">
            <text>{{ item.rejectReason }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'draft-list',
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    onEdit(item) {
      let str = uni.$u.queryParams({
        momentId: item.id,
        type: 'edit',
      })
      uni.navigateTo({
        url: `/pages/my/dynamic/add_dynamic${str}`,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.list-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 32rpx;

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

    .item-content {
      padding: 32rpx 28rpx 32rpx;
      font-weight: 500;
      font-size: 24rpx;

      .item-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;

        text:first-child {
          font-size: 32rpx;
          color: #333333;
        }

        .status {
          .publish-status {
            color: #fff;
            background: linear-gradient(80deg, #02f6c1 0%, #07cdc4 100%);
            font-size: 28rpx;
            padding: 0 25rpx;
            border-radius: 98rpx;
            width: 165rpx;
            height: 56rpx;
            line-height: 56rpx;
            text-align: center;
          }

          .edit-status {
            color: #999999;
            background-color: #fff;
            font-size: 28rpx;
            padding: 0 25rpx;
            border-radius: 98rpx;
            border: 2rpx solid #999999;
            width: 165rpx;
            height: 56rpx;
            line-height: 50rpx;
            text-align: center;
          }
        }
      }

      .item-time {
        display: block;
        color: #999999;
        margin-bottom: 16rpx;
      }

      .item-tip {
        font-size: 24rpx;
        color: #ff2f2f;
      }
    }
  }
}

::v-deep {
  .u-tooltip__wrapper__text {
    width: 454rpx;
    font-weight: 500;
    font-size: 24rpx !important;
    overflow: hidden; /* 隐藏超出容器的内容 */
    text-overflow: ellipsis; /* 显示省略号 */
    margin-bottom: 16rpx;
  }
}
</style>