<template>
  <view>
    <z-paging ref="paging" v-model="list" @query="queryList" :default-page-size="detaultPageSize"
      :show-scrollbar="false" :auto-show-back-to-top="true">
      <view style="margin:10rpx">
        <uni-list :border="true">
          <uni-list-item v-for="(item, index) in list" :key="index">
            <template v-slot:header>
              <view class="slot-box">
                <view class="img-container">
                  <image src="@img/log-bell.png"></image>
                </view>
              </view>
            </template>
            <template v-slot:body>
              <view class="slot-content">
                <view class="slot-panel">
                  <view class="slot-title">{{ item.creator_name }}
                  </view>
                  <view class="slot-subtitle">
                    <rich-text :nodes="parseHTML(item.content)"></rich-text>
                  </view>
                  <view class="slot-subtitle" style="color: #3b4144">{{ item.ts }}</view>
                </view>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
      </view>

    </z-paging>
  </view>
</template>
<script lang="ts" setup>
import { getProjectLogs } from '@/api/project-center/info';
import { getPlanLogs } from '@/api/project-center/plan-task';
import { ProjectLog } from '@/types/project';
import { parseHTML } from '@/utils'

const paging = ref()
const detaultPageSize = 10;
const list = ref<ProjectLog[]>([])
const prj_id = ref()
const task_id = ref()

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = async (pageNo: number, pageSize: number) => {
  try {
    const list = await getList(pageNo, pageSize)
    nextTick(() => {
      paging.value?.complete(list);
    })
  } catch (e) {
    paging.value?.complete(false);
  }
}

// 获取动态日志
const getList = async (pageNo: number, pageSize: number) => {
  if (task_id.value) {
    const params = { page_no: pageNo, page_size: pageSize, task_id: task_id.value, prj_id: prj_id.value }
    const { list } = await getPlanLogs(params)
    return list;
  } else {
    const params = { page_no: pageNo, page_size: pageSize, id: prj_id.value }
    const { list } = await getProjectLogs(params)
    return list;
  }
}

onLoad((options) => {
  prj_id.value = options?.prj_id;
  task_id.value = options?.task_id;
  uni.setNavigationBarTitle({
    title: `${options?.name}-动态`,
  })
})

</script>

<script lang="ts">
export default {
  options: {
    styleIsolation: 'apply-shared', //解除样式隔离
  }

}
</script>
<style scoped lang="less">
.slot-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  margin-right: 10px;

  .img-container {
    display: flex;
    background: #14C9C9;
    justify-content: center;
    align-items: center;
    padding: 10rpx;
    border-radius: 10rpx;
  }

  image {
    width: 60rpx;
    height: 60rpx;
  }
}


.slot-content {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
  /* height: 45px; */
}

.slot-panel {
  display: flex;
  padding-right: 8px;
  flex: 1;
  color: #3b4144;
  flex-direction: column;
  justify-content: space-around;
  overflow: hidden;
}

.slot-title {
  font-size: 14px;
  color: #3b4144;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.slot-subtitle {
  display: flex;
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 5px;
  overflow: hidden;
}

.slot-desc {
  color: #999;
  font-size: 13px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-left: 5px;

  .slot-desc-text {
    color: #999;
    font-size: 12px;
    font-weight: 400;
  }

}

.chat-custom-text {
  font-size: 12px;
  color: #999;
}
</style>