<template>
	<div class="home" style="padding: 0;">
        <el-input v-model="form.name" placeholder="请输入客户姓名" @keyup.enter="handleKeyUpEnter"></el-input>
        <div style="margin-top: 15px;">
            <el-tag type="primary" style="margin-right: 15px;">使用答卷{{totalCount}}份</el-tag> 
            <el-tag type="primary">有效答卷{{userCount}}份</el-tag>
            <div class="quesBox">
                <el-card class="cardQues" v-for="o in userData" :key="o">
                    <div class="iconSearch">
                        <el-button type="primary" :icon="Search" circle size="small" @click="handleViewQues(o)" />
                    </div>
                    <div>客户姓名：{{o.entername}}</div>
                    <div>手机号/微信号：{{ userDecryptToAsterisk(o.enterphone) }}</div>
                    <div>提交时间:{{o.starttime}}</div>
                </el-card>
            </div>
        </div>
        <el-dialog v-model="fillOutDialog" title="问卷信息" width="70%" @close="fillOutClose">
			<fill-out :surveyId="surveyId" :userId="userIdQues"></fill-out>
		</el-dialog>
    </div>
  </template>
  
  <script setup name="QuesPatient">
	import { onMounted, ref } from 'vue';
    import fillOut from '../../fillOut';
    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) => {
		getUserData()
        getTotalData()
	});
    const form = ref({
        name:''
    })
    const userCount =ref(0)
    const totalCount =ref(0)
    const userData = ref([])
    const fillOutDialog = ref(false)
    const surveyIdQues = ref()
    const userIdQues = ref()

    function fillOutClose() {
        console.log('总数')
    }
    function handleViewQues(data) {
        userIdQues.value = data.answeruser
        fillOutDialog.value = true
    }
    function handleKeyUpEnter() {
	  console.log('回车');
	  getUserData()
      getTotalData()
	}
    // 获取用户数据
	function getUserData() {
        surveyIdQues.value = props.surveyId
        const params = {
            surveyid:props.surveyId
        }
		getPageListData('/survey/answersheet', params).then(({ data }) => {
            if (data.length>0) {
                userData.value = data
                userCount.value = data.length
                console.log(userDecryptToAsterisk('4jFRoWg+v94mzVz0DXzQfA=='))
            }
		})
	}
    function getTotalData() {
        const params = {
            surveyid:props.surveyId
        }
		getPageListData('/survey/answersheet/getusecount', params).then(({ data }) => {
            totalCount.value = data?data:0
		})
	}
  </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>