<template>
  <view>
    <navbar-back :autoBack="false" title="分析记录" @leftClick="customBack"></navbar-back>
    <u-row>
      <u-col span="4">
        <view class="content-title-name">
          <text>任务列表</text>
        </view>
        <u-gap height="5" bg-color="#0055A2"></u-gap>
        <scroll-view
          style="height: 82vh"
          scroll-y
          scroll-with-animation
          class="content-main-left"
          :scroll-top="scrollTop"
          @scrolltolower="handleScrolltolower"
        >
          <TaskItem
            v-for="(task, index) in listData"
            :key="index"
            :task="task"
            :seq="index + 1"
            :active="selectedIndex === index"
            @click="switchTask(index)"
          >
            <template #tag="{ task }">
              <u-icon v-if="task.flowStatus === 'completed'" name="/static/images/status/completed.png" size="45" />
              <u-icon v-else name="/static/images/status/wait_for_audit.png" size="45" />
            </template>
          </TaskItem>
          <up-loadmore :status="loadStatus" />
        </scroll-view>
      </u-col>
      <u-col span="8">
        <view class="pl16">
          <view class="content-title-name">
            <text>样品列表</text>
          </view>
          <u-gap height="5" bg-color="#0055A2"></u-gap>
          <scroll-view scroll-y scroll-with-animation style="height: calc(82vh - 60px)">
            <block v-for="(sample, index) in sampleList" :key="index">
              <view class="sample-item">
                <u-row @click="showSampleDetail(sample, index)">
                  <u-col span="2" class="text-center">
                    <view>
                      <text>【{{ index + 1 }}】</text>
                    </view>
                  </u-col>
                  <u-col span="4">
                    <view>
                      <text class="pl5">{{ sample.sampleAssayCode }}</text>
                    </view>
                    <view class="mt10">
                      <text class="pl5">
                        {{ sample.sampleName }}
                      </text>
                    </view>
                  </u-col>
                  <u-col span="4">
                    <view>
                      <rich-text :nodes="sample.assayProject"> </rich-text>
                    </view>
                  </u-col>
				  <!-- <u-col span="2">
				    <view class="remark-text">
				      {{sample.remark}}
				    </view>
				  </u-col> -->
                </u-row>
                <u-icon
                  v-if="sample.rollbackStatus"
                  class="sample-status"
                  :name="`/static/images/status/${sampleReturnIcon(sample.rollbackStatus)}.png`"
                  size="45"
                />
              </view>
            </block>
          </scroll-view>
          <view class="content-main-right-operation">
            <u-row>
              <u-col span="3"></u-col>
              <u-col span="6">
                <u-button class="btn-operation" type="primary" @click="previewPDF" v-if="currentTask.id">
                  任务单预览
                </u-button>
              </u-col>
              <u-col span="3"> </u-col>
            </u-row>
          </view>
        </view>
      </u-col>
    </u-row>

    <sample-detail-popup
      ref="sampleDetailPopup"
      v-model:showPopup="showDetailPopup"
      :detailId="detailId"
    ></sample-detail-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad, onBackPress, onPullDownRefresh } from '@dcloudio/uni-app'
import SampleDetailPopup from '@/components/sample/sample-detail-popup.vue'
import TaskItem from './components/task-item.vue'
import nx from '@/nx'
import { useListData } from '@/nx/hooks/usePageListData'

// 响应式数据
const scrollTop = ref(0)
const selectedIndex = ref(0)
const sampleList = ref([])
const showDetailPopup = ref(false)
const detailId = ref('')

// 计算属性
const userInfo = computed(() => nx.$store('user').userInfo)

// 方法
const customBack = () => {
  uni.reLaunch({ url: '/pages/analysis/index/index' })
}

function handleScrolltolower() {
  scrollToLower()
}

const sampleReturnIcon = rollbackStatus => {
  switch (rollbackStatus) {
    case 'returned':
      return 'return_returned'
    case 'rejected':
      return 'return_rejected'
    case 'in_progress':
      return 'return_in_progress'
    default:
      return ''
  }
}
const currentTask = computed(() => {
  if (listData.value.length > 0) {
    return listData.value[selectedIndex.value]
  } else {
    return {}
  }
})
const switchTask = async index => {
  if (index === selectedIndex.value) return
  selectedIndex.value = index
  getAssayTaskDetail(currentTask.value.id)
}

const showSampleDetail = (sample, index) => {
	if(sample.rollbackStatus === 'returned') return
  detailId.value = sample.businessAssayTaskDataId
  showDetailPopup.value = true
}
const searchParams = computed(() => ({
  taskAssignStatus: 'submitted',
  taskAssayStatus: 'submitted',
  assayOperator: userInfo.value.nickname
}))

const { listData, scrollToLower, loadStatus, getInitData } = useListData({
  searchParams,
  api: nx.$api.assayTask.getAssayTaskPage
})

const getAssayTaskDetail = async businessAssayTaskId => {
  const res = await nx.$api.assayTask.getAssayTaskDetailList({ businessAssayTaskId })
  sampleList.value = res || []
}

const previewPDF = () => {
  const { id, configReportTemplateKey } = currentTask.value
  const url = `/pages/analysis/sample/pdf-preview?businessAssayTaskId=${id}&reportKey=${configReportTemplateKey}`
  uni.navigateTo({ url })
}

// 生命周期
onMounted(async () => {
  await getInitData()
  if (listData.value.length > 0) {
    getAssayTaskDetail(currentTask.value.id)
  }
})

onBackPress(() => {
  customBack()
  return true
})
</script>

<style lang="scss" scoped>
.content-title-name {
  height: 60px;
  box-sizing: border-box;
  font-size: 20px;
  padding: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sample-item {
  position: relative;
  border-bottom: 1px solid #eee;
  padding: 4px;
  .sample-status {
    position: absolute;
    top: 0;
    right: 0;
  }
}
.content-main-left {
  background-color: #f6f6f6;
}
.content-main-right-operation {
  height: 50px;
  padding-top: 10px;
  padding-right: 10px;
}
.btn-operation {
  font-size: 18px;
  width: 95%;
}
.selected_Sample {
  background-color: #d7e9fa;
}
.remark-text{
	font-size: 12px;
}
</style>
