<template>

  <div class="bg-white border-l border-gray-100">
    <div class="mb-4">
      <el-input v-model="form.name" placeholder="请输入客户姓名" @keyup.enter="handleKeyUpEnter" class="w-full">
        <template #prefix>
          <el-icon class="text-gray-400">
            <Search />
          </el-icon>
        </template>
      </el-input>
    </div>
    <div class="flex items-center gap-4 bg-blue-50 p-3 rounded-lg mb-4">
      <div class="flex-1 flex items-center justify-between text-blue-600">
        <div>参与人：<span class="text-lg font-semibold">{{ userCount || 0 }}</span></div>
        <div class="h-4 w-[1px] bg-blue-200"></div>
        <div>总份数：<span class="text-lg font-semibold">{{ totalCount || 0 }}</span></div>
      </div>
    </div>
    <div class="space-y-4  overflow-y-auto" style="max-height: calc(100vh - 120px)" ref="userRef" @scroll="doScroll">
      <div v-for="user in userData" :key="user" class="p-4 bg-white rounded-lg border border-gray-200">
        <div class="flex justify-between items-center mb-2" @click="handleViewQues(user)">
          <span class="font-medium">客户姓名：{{ user.entername }}</span>
          <!-- <el-tag :type="getScoreType(user.score)">{{ getScoreLabel(user.score) }} {{ user.score }}分</el-tag> -->
        </div>
        <div class="text-sm text-gray-500">手机号/微信号：{{ userDecryptToAsterisk(user.enterphone) }}</div>
        <div class="text-sm text-gray-500">提交时间：{{ user.starttime }}</div>
      </div>
    </div>
    <el-dialog v-model="fillOutDialog" title="问卷信息" width="70%" @close="fillOutClose">
      <fill-out :surveyId="surveyId" :sheetId="sheetId"></fill-out>
    </el-dialog>
  </div>
</template>

<script setup name="QuesPatient">
import { onMounted, ref } from 'vue';
import fillOut from '../../fill';
import { Search } from '@element-plus/icons-vue'
import { getPageListData } from '@/api/main/system/system';
import { userDecryptToAsterisk } from '@/utils/aes'
const props = defineProps({
  surveyId: {
    type: Number,
  }
});
watch(props, (nweProps) => {
  init();
  getUserData()
  getTotalData()
});
const form = ref({
  name: '',
  pageNum: 1,
  pageSize: 6
})
const userCount = ref(0)
const totalCount = ref(0)
const userData = ref([])
const fillOutDialog = ref(false)
// const surveyIdQues = ref()
const sheetId = ref()

function fillOutClose () {
  console.log('总数')
}
function handleViewQues (data) {
  sheetId.value = data.answersheetId
  fillOutDialog.value = true
}
function handleKeyUpEnter () {
  console.log('回车');
  form.value.pageNum = 1
  getUserData()
  getTotalData()
}
const init = () => {
  userData.value = []
  userCount.value = 0
  totalCount.value = 0
  form.value.name = '';
  form.value.pageNum = 1;
}
// 获取用户数据
function getUserData () {

  // surveyIdQues.value = props.surveyId
  const params = {
    surveyid: props.surveyId,
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize
  }

  if (!props.surveyId) return;

  if (form.value.name) {
    // 如果是数字就查手机号，如果是字母或按照就查姓名
    if (!isNaN(form.value.name)) {
      params.phone = form.value.name
    } else {
      params.entername = form.value.name
    }
  }

  getPageListData('/survey/answersheet', params).then(({ data, total }) => {
    if (data.length > 0) {
      userData.value = userData.value.concat(data)
      // userCount.value = total
    }
  })
}
function getTotalData () {
  const params = {
    surveyId: props.surveyId
  }
  if (!props.surveyId) return;
  getPageListData('/survey/answersheet/getcount', params).then(({ data }) => {
      totalCount.value = data.zongshu;
      userCount.value = data.youxiao;
  })
}

const userRef = ref(null);
const doScroll = () => {
  console.log('滚动')
  const scrollwrapper = userRef.value
  const { scrollTop, clientHeight, scrollHeight } = scrollwrapper // 获职滚动数据
  // 判断是否滚动到底部
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    console.log('123123');
    if (totalCount.value > userData.value.length) {
      form.value.pageNum++
      getUserData()
    }

  }
}
</script>

<style scoped lang="scss">
.quesBox {
  height: calc(100vh - 225px);
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  .cardQues {

    margin-top: 15px;
    position: relative;
    line-height: 30px;
    font-size: 14px;

    .iconSearch {
      position: absolute;
      right: 15px;
      top: 15px;
    }
  }
}
</style>