<template>
  <view class="container">
    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
      <view class="search-view">
        <view class="search-input-wrapper" @click="handlePerson">
          <u--input 
            v-model="queryParams.personName" 
            border="surround"
            readonly
            placeholder="请选择人员" 
            placeholderStyle="color: #909399"
            color="#333333"
            customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
            class="search-input">
          </u--input>
          <uni-icons 
            type="search" 
            size="18" 
            color="#667eea" 
            class="search-icon">
          </uni-icons>
        </view>
      </view>
      <view class="search-view">
        <view class="search-input-wrapper" @click="handleHealthRecord">
          <u--input 
            v-model="queryParams.healthRecordName" 
            border="surround"
            readonly
            placeholder="请选择健康档案" 
            placeholderStyle="color: #909399"
            color="#333333"
            customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
            class="search-input">
          </u--input>
          <uni-icons 
            type="search" 
            size="18" 
            color="#667eea" 
            class="search-icon">
          </uni-icons>
        </view>
      </view>
      <view class="search-view">
        <view class="search-input-wrapper">
          <u--input 
            v-model="queryParams.time" 
            border="surround"
            readonly
            placeholder="请选择就医日期" 
            placeholderStyle="color: #909399"
            color="#333333"
            customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
            class="search-input">
          </u--input>
          <uni-icons 
            type="calendar" 
            size="18" 
            color="#667eea" 
            class="search-icon">
          </uni-icons>
        </view>
        <view class="filter-btn" @click="filterPanel = !filterPanel">
          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
          <text>筛选</text>
        </view>
      </view>
      
      <view class="app-container">
        <view class="header-con" ref="searchHeightRef">
    <view class="item">
      <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
        <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
      </view>
      <view class="info-sum">
        <view class="title">就医次数</view>
        <view class="num">{{ doctor.doctorCount }}<span>次</span></view>
      </view>
    </view>
    <view class="item">
      <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
        <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
      </view>
      <view class="info-sum">
        <view class="title">就医费用</view>
        <view class="num">{{ doctor.doctorCost }}<span>元</span></view>
      </view>
    </view>
  </view>
  <view class="header-con" ref="searchHeightRef">
    <view class="item">
      <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
        <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
      </view>
      <view class="info-sum">
        <view class="title">常去医院</view>
        <view class="num">{{ doctor.commonHospital }}<span></span></view>
      </view>
    </view>
    <view class="item">
      <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
        <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
      </view>
      <view class="info-sum">
        <view class="title">常去科室</view>
        <view class="num">{{ doctor.commonDepartments }}<span></span></view>
      </view>
    </view>
  </view>
      </view>
      
<!-- 视图切换 -->
  <view class="section-title" v-show="listData.length>0">
    <view class="title-decorator"></view>
    <text class="title-text">就医统计</text>
    <view class="view-switch">
      <view 
        :class="['switch-item', { 'active': viewMode === 'list' }]" 
        @click="viewMode = 'list'; btFirstClick()"
      >
        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
        <text>列表</text>
      </view>
      <view 
        :class="['switch-item', { 'active': viewMode === 'line' }]" 
        @click="viewMode = 'line'"
      >
        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
        <text>曲线图</text>
      </view>
      <view 
        :class="['switch-item', { 'active': viewMode === 'column' }]" 
        @click="viewMode = 'column'"
      >
        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
        <text>柱状图</text>
      </view>
    </view>
  </view>
    </u-sticky>
    
  <!-- 筛选面板 -->
  <u-transition :show="filterPanel" mode="fade">
    <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
      <view class="filter-panel-content">
        <view class="filter-title">就医日期</view>
        <view class="selcet-content" style="padding: 0 24rpx">
          <u-input
            :disabled="true"
            :disabledColor="'#fff'"
            class="dateInput"
            @click="openOrCloseDate(true)"
            border="surround"
            v-model="queryParams.startTime"
            placeholder="请选择开始时间"
          >
            <template v-slot:suffix>
              <u-icon name="calendar" @click.stop="openOrCloseDate(true)"></u-icon>
            </template>
          </u-input>
          <u-input
            :disabled="true"
            :disabledColor="'#fff'"
            class="dateInput"
            @click="openOrCloseDate(false)"
            border="surround"
            v-model="queryParams.endTime"
            placeholder="请选择结束时间"
          >
            <template v-slot:suffix>
              <u-icon name="calendar" @click.stop="openOrCloseDate(false)"></u-icon>
            </template>
          </u-input>
        </view>
      </view>
      <view class="btn-box">
        <view class="btn-reset" @click="resetQuery()">
          <uni-icons type="reload" size="16" color="#909399"></uni-icons>
          <text>重置</text>
        </view>
        <view class="btn-confirm" @click="searchSubmit()">
          <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
          <text>确定</text>
        </view>
      </view>
    </view>
  </u-transition>
  
  <!-- 日期选择器 -->
  <u-datetime-picker
    :closeOnClickOverlay="true"
    :show="timeShow"
    v-model="time"
    mode="date"
    :minDate="-2209017600000"
    @close="openOrCloseDate"
    @cancel="openOrCloseDate"
    @confirm="confirm"
  ></u-datetime-picker>
    
    <!-- <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
        <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
      </view>
      <div class="info-sum">
        <div class="title">常看大夫</div>
        <div class="num">{{ doctor.commonDoctor }}<span></span></div>
      </div>
    </div>
    <div class="item">
      <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #ec4899 100%);">
        <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
      </view>
      <div class="info-sum">
        <div class="title">门诊次数</div>
        <div class="num">{{ doctor.clinicCount }}<span>次</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
        <uni-icons type="fire-filled" size="20" color="#ffffff"></uni-icons>
      </view>
      <div class="info-sum">
        <div class="title">急诊次数</div>
        <div class="num">{{ doctor.emergencyCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item">
      <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
        <uni-icons type="plusempty" size="20" color="#ffffff"></uni-icons>
      </view>
      <div class="info-sum">
        <div class="title">输液次数</div>
        <div class="num">{{ doctor.infusionCount }}<span>次</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <view class="item-icon" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
        <uni-icons type="home" size="20" color="#ffffff"></uni-icons>
      </view>
      <div class="info-sum">
        <div class="title">住院次数</div>
        <div class="num">{{ doctor.hospitalizedCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item">
      <view class="item-icon" style="background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);">
        <uni-icons type="chat-filled" size="20" color="#ffffff"></uni-icons>
      </view>
      <div class="info-sum">
        <div class="title">线上问诊次数</div>
        <div class="num">{{ doctor.onlineCount }}<span>次</span></div>
      </div>
    </div>
  </div> -->
  
  <!-- 曲线图展示 -->
  <view class="chart-container" v-if="chartVisible && listData.length>0 && viewMode === 'line'">
    <qiun-data-charts 
      type="line"
      canvasId="doctorLineChart"
      :chartData="chartData"
      :opts="lineChartOpts"
      :loadingType="1"
      :ontouch="true"
      :inScrollView="true"
    />
  </view>
  
  <!-- 柱状图展示 -->
  <view class="chart-container" v-if="chartVisible && listData.length>0 && viewMode === 'column'">
    <qiun-data-charts 
      type="column"
      canvasId="doctorColumnChart"
      :chartData="chartData"
      :opts="columnChartOpts"
      :loadingType="1"
      :ontouch="true"
      :inScrollView="true"
    />
  </view>
  
  <!-- 列表展示 -->
  <view class="tab-switch" v-if="listData.length>0 && viewMode === 'list'">
    <view 
      :class="['tab-item', { 'active': firstTabShow }]" 
      @click="btFirstClick"
    >
      <uni-icons type="list" size="14" :color="firstTabShow ? '#667eea' : '#999'"></uni-icons>
      <text>明细</text>
    </view>
    <view 
      :class="['tab-item', { 'active': secondTabShow }]" 
      @click="btSecondClick"
    >
      <uni-icons type="home" size="14" :color="secondTabShow ? '#667eea' : '#999'"></uni-icons>
      <text>医院</text>
    </view>
    <view 
      :class="['tab-item', { 'active': thirdTabShow }]" 
      @click="btThirdClick"
    >
      <uni-icons type="flag" size="14" :color="thirdTabShow ? '#667eea' : '#999'"></uni-icons>
      <text>科室</text>
    </view>
    <view 
      :class="['tab-item', { 'active': fourTabShow }]" 
      @click="btFourClick"
    >
      <uni-icons type="person" size="14" :color="fourTabShow ? '#667eea' : '#999'"></uni-icons>
      <text>大夫</text>
    </view>
    <view 
      :class="['tab-item', { 'active': fiveTabShow }]" 
      @click="btFiveClick"
    >
      <uni-icons type="wallet" size="14" :color="fiveTabShow ? '#667eea' : '#999'"></uni-icons>
      <text>费用</text>
    </view>
  </view>
  
  <!-- 明细列表 -->
  <u-list v-if="firstTabShow && viewMode === 'list'" :spaceHeight="720" lowerThreshold="100">
    <u-list-item v-for="(item, index) in listData" :key="index">
      <view class="list-item">
        <view class="item-header">
          <view class="record-name-section">
            <view class="record-icon">
              <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
            </view>
            <view class="record-info">
              <text class="record-name">{{ item.hospitalName }}</text>
              <text class="record-code">{{ dictStr(item.type, typeList) }}</text>
            </view>
          </view>
          <view class="cost-section">
            <text class="cost-value"><text class="cost-label">费用</text>{{ item.totalCost }}元</text>
          </view>
        </view>
        
        <view class="card-body">
          <view class="info-row">
            <view class="info-item">
              <text class="info-label">就诊人</text>
              <text class="info-value">{{ item.personName || '--' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">大夫</text>
              <text class="info-value">{{ item.doctor || '--' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">就诊时间</text>
              <text class="info-value">{{ item.visitingTime || '--' }}</text>
            </view>
            <view class="info-item info-item-full">
              <text class="info-label">诊断结果</text>
              <text class="info-value">{{ item.diagnosis || '--' }}</text>
            </view>
            <view class="info-item info-item-full">
              <text class="info-label">处理及医嘱</text>
              <text class="info-value">{{ item.prescribe || '--' }}</text>
            </view>
          </view>
        </view>
      </view>
    </u-list-item>
    <view>
    </view>
  </u-list>
  
  <!-- 医院列表 -->
  <u-list v-if="secondTabShow && viewMode === 'list'" :spaceHeight="720" lowerThreshold="100">
    <u-list-item v-for="(item, index) in secondListData" :key="index">
      <view class="list-item">
        <view class="item-header">
          <view class="record-name-section">
            <view class="record-icon">
              <uni-icons type="home" size="20" color="#ffffff"></uni-icons>
            </view>
            <view class="record-info">
              <text class="record-name">{{ item.hospitalName }}</text>
            </view>
          </view>
          <view class="cost-section">
            <text class="cost-value"><text class="cost-label">次数</text>{{ item.count }}次</text>
          </view>
        </view>
      </view>
    </u-list-item>
    <view>
    </view>
  </u-list>
  
  <!-- 科室列表 -->
  <u-list v-if="thirdTabShow && viewMode === 'list'" :spaceHeight="720" lowerThreshold="100">
    <u-list-item v-for="(item, index) in thirdListData" :key="index">
      <view class="list-item">
        <view class="item-header">
          <view class="record-name-section">
            <view class="record-icon">
              <uni-icons type="flag" size="20" color="#ffffff"></uni-icons>
            </view>
            <view class="record-info">
              <text class="record-name">{{ item.departments }}</text>
            </view>
          </view>
          <view class="cost-section">
            <text class="cost-value"><text class="cost-label">次数</text>{{ item.count }}次</text>
          </view>
        </view>
      </view>
    </u-list-item>
    <view>
    </view>
  </u-list>
  
  <!-- 大夫列表 -->
  <u-list v-if="fourTabShow && viewMode === 'list'" :spaceHeight="720" lowerThreshold="100">
    <u-list-item v-for="(item, index) in fourListData" :key="index">
      <view class="list-item">
        <view class="item-header">
          <view class="record-name-section">
            <view class="record-icon">
              <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
            </view>
            <view class="record-info">
              <text class="record-name">{{ item.doctor }} - {{ item.hospitalName }}</text>
            </view>
          </view>
          <view class="cost-section">
            <text class="cost-value"><text class="cost-label">次数</text>{{ item.count }}次</text>
          </view>
        </view>
      </view>
    </u-list-item>
    <view>
    </view>
  </u-list>
  
  <!-- 费用列表 -->
  <u-list v-if="fiveTabShow && viewMode === 'list'" :spaceHeight="720" lowerThreshold="100">
    <u-list-item v-for="(item, index) in fiveListData" :key="index">
      <view class="list-item">
        <view class="item-header">
          <view class="record-name-section">
            <view class="record-icon">
              <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
            </view>
            <view class="record-info">
              <text class="record-name">{{ item.time }}</text>
            </view>
          </view>
          <view class="cost-section">
            <text class="cost-value"><text class="cost-label">费用</text>{{ item.value }}元</text>
          </view>
        </view>
      </view>
    </u-list-item>
    <view>
    </view>
  </u-list>
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
      <u-picker itemHeight="88" :show="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel"
        @confirm="handlePersonConfirm"></u-picker>
        <u-picker itemHeight="88" :show="showHealthRecord" :columns="healthRecordList" keyName="name" @cancel="handleHealthRecordCancel"
        @confirm="handleHealthRecordConfirm"></u-picker>
  </view>
  <!-- 悬停按钮返回工作台-->
  <suspend></suspend>
</template>

<script setup>
import { getDoctorAnalysis } from '@/api/health/statisticAnalysis'
import { listPerson } from '@/api/health/person'
import { listHealthRecord } from '@/api/health/healthRecord'
import { getDicts } from '@/api/system/dict/data.js'
  import dayjs from 'dayjs'
import { timeHandler } from '@/utils/common.ts'
import {onLoad,onShow} from "@dcloudio/uni-app";
    // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed }from "vue";
const pageNum = ref(1)
const listData = ref([])
const isShow = ref(false)
const personList = ref([])

const showHealthRecord = ref(false)
const healthRecordList = ref([])

const typeList = ref([])
const settingPickShow = ref(false)
const settingColumns = ref([])
const showPerson = ref(false)
const timeShow= ref(false)
const time =ref( Number(new Date()))
const  flag= ref(true)
const doctor = ref({})

const firstTabShow = ref(true)
const secondTabShow = ref(false)
const thirdTabShow = ref(false)
const fourTabShow = ref(false)
const fiveTabShow = ref(false)

const firstType = ref("primary")
const secondType = ref("default")
const thirdType = ref("default")
const fourType = ref("default")
const fiveType = ref("default")

const secondListData = ref([])
const thirdListData = ref([])
const fourListData = ref([])
const fiveListData = ref([])

const viewMode = ref('list') // 'list', 'line', 'column'

// 曲线图配置
const lineChartOpts = computed(() => {
  const dataCount = fiveListData.value ? fiveListData.value.length : 0
  const showXAxisLabel = dataCount <= 10
  
  return {
    color: ['#667eea'],
    padding: [15, 15, 30, 5],
    enableScroll: false,
    enableMarkLine: false,
    dataLabel: false,
    dataPointShape: true,
    legend: {
      show: false
    },
    xAxis: {
      disableGrid: true,
      boundaryGap: 'justify',
      axisLine: false,
      scrollShow: true,
      itemCount: 5,
      fontSize: showXAxisLabel ? 10 : 0,
      fontColor: showXAxisLabel ? '#999999' : 'transparent',
      rotateLabel: true,
      rotateAngle: 30,
      disabled: !showXAxisLabel
    },
    yAxis: {
      gridType: 'dash',
      dashLength: 4,
      gridColor: '#EEEEEE',
      splitNumber: 5,
      fontSize: 10,
      fontColor: '#999999',
      format: (val) => {
        if (val >= 10000) {
          return (val / 10000).toFixed(1) + 'w'
        }
        return val.toFixed(0)
      },
      data: [
        {
          min: 0
        }
      ]
    },
    extra: {
      line: {
        type: 'curve',
        width: 3,
        activeType: 'hollow',
        linearType: 'custom',
        linearOpacity: 0.2,
        onShadow: true,
        animation: true
      },
      tooltip: {
        showBox: true,
        showArrow: true,
        showCategory: false,
        bgColor: '#000000',
        bgOpacity: 0.7,
        gridType: 'dash',
        dashLength: 4,
        gridColor: '#CCCCCC',
        fontColor: '#FFFFFF',
        fontSize: 11,
        lineHeight: 16,
        borderRadius: 4,
        borderWidth: 0,
        borderColor: '#000000',
        padding: [8, 10, 8, 10],
        splitLine: false,
        horizentalLine: false,
        xAxisLabel: true,
        yAxisLabel: true,
        labelBgColor: '#000000',
        labelBgOpacity: 0.7,
        labelFontColor: '#FFFFFF'
      }
    }
  }
})

// 柱状图配置
const columnChartOpts = computed(() => {
  const dataCount = fiveListData.value ? fiveListData.value.length : 0
  const showXAxisLabel = dataCount <= 10
  
  return {
    color: ['#667eea'],
    padding: [15, 15, 30, 5],
    enableScroll: false,
    dataLabel: false,
    legend: {
      show: false
    },
    xAxis: {
      disableGrid: true,
      boundaryGap: 'center',
      axisLine: false,
      scrollShow: true,
      itemCount: 5,
      fontSize: showXAxisLabel ? 10 : 0,
      fontColor: showXAxisLabel ? '#999999' : 'transparent',
      rotateLabel: true,
      rotateAngle: 30,
      disabled: !showXAxisLabel
    },
    yAxis: {
      gridType: 'dash',
      dashLength: 4,
      gridColor: '#EEEEEE',
      splitNumber: 5,
      fontSize: 10,
      fontColor: '#999999',
      showTitle: false,
      disabled: false,
      format: (val) => {
        if (val >= 10000) {
          return (val / 10000).toFixed(1) + 'w'
        }
        return val.toFixed(0)
      }
    },
    extra: {
      column: {
        type: 'group',
        width: 20,
        activeBgColor: '#764ba2',
        activeBgOpacity: 0.08,
        linearType: 'none',
        barBorderCircle: true,
        seriesGap: 2
      },
      tooltip: {
        showBox: true,
        showArrow: true,
        showCategory: false,
        bgColor: '#000000',
        bgOpacity: 0.7,
        gridType: 'dash',
        dashLength: 4,
        gridColor: '#CCCCCC',
        fontColor: '#FFFFFF',
        fontSize: 11,
        lineHeight: 16,
        borderRadius: 4,
        borderWidth: 0,
        borderColor: '#000000',
        padding: [8, 10, 8, 10],
        splitLine: false,
        horizentalLine: false,
        xAxisLabel: true,
        yAxisLabel: true,
        labelBgColor: '#000000',
        labelBgOpacity: 0.7,
        labelFontColor: '#FFFFFF'
      }
    }
  }
})

// 图表数据
const chartData = computed(() => {
  if (!fiveListData.value || fiveListData.value.length === 0) {
    return {
      categories: [],
      series: []
    }
  }
  
  const reversedData = [...fiveListData.value].reverse()
  return {
    categories: reversedData.map(item => item.time || ''),
    series: [
      {
        name: '费用',
        data: reversedData.map(item => {
          const value = parseFloat(item.value)
          return isNaN(value) ? 0 : value
        })
      }
    ]
  }
})

function   btFirstClick() {
        firstType.value="primary"
        secondType.value="default"
        thirdType.value="default"
        fourType.value="default"
        fiveType.value="default"

         firstTabShow.value=true
         secondTabShow.value=false
         thirdTabShow.value=false
         fourTabShow.value=false
         fiveTabShow.value=false

      }
      function  btSecondClick() {
        
        firstType.value="default"
        secondType.value="primary"
        thirdType.value="default"
        fourType.value="default"
        fiveType.value="default"

         firstTabShow.value=false
         secondTabShow.value=true
         thirdTabShow.value=false
         fourTabShow.value=false
         fiveTabShow.value=false
    }
    function  btThirdClick() {
      firstType.value="default"
        secondType.value="default"
        thirdType.value="primary"
        fourType.value="default"
        fiveType.value="default"

         firstTabShow.value=false
         secondTabShow.value=false
         thirdTabShow.value=true
         fourTabShow.value=false
         fiveTabShow.value=false
        
    }
    function  btFourClick() {
      firstType.value="default"
        secondType.value="default"
        thirdType.value="default"
        fourType.value="primary"
        fiveType.value="default"

         firstTabShow.value=false
         secondTabShow.value=false
         thirdTabShow.value=false
         fourTabShow.value=true
         fiveTabShow.value=false
        
    }
    function  btFiveClick() {
      firstType.value="default"
        secondType.value="default"
        thirdType.value="default"
        fourType.value="default"
        fiveType.value="primary"

         firstTabShow.value=false
         secondTabShow.value=false
         thirdTabShow.value=false
         fourTabShow.value=false
         fiveTabShow.value=true
        
    }

const data = reactive({
  filterPanel: false,
  queryPersonParams: {
  pageNum: 1,
  pageSize: 100
},
  queryParams: {
  type: 1,
  time: null,
  dataType: null,
  recordId: null,
  id: null
   } ,
   queryHealthRecordParams: {
  pageNum: 1,
  personId:null,
  pageSize: 1000
}
})

const { filterPanel, queryPersonParams, queryHealthRecordParams, queryParams} = toRefs(data)
const windowHeight = computed(() => {
            uni.getSystemInfoSync().windowHeight - 50
        })	
const chartVisible = computed(() => !filterPanel.value && !timeShow.value && !settingPickShow.value && !showPerson.value && !showHealthRecord.value)
onLoad(() => {
    getDict()
    // getList()
  });

 onShow(() => {
    if (isShow.value) {
    listData.value=[]
      getList()
      isShow.value = false
    }
  });

  function formatMultiLineData(data) {
if (data != null) {
  return data.replace(/<br\/>/g, '\n')
}
}
function dictStr(val, arr) {
      let str = ''
      arr.map(item => {
        if (item.dictValue === val) {
          str = item.dictLabel
        }
      })
      return str
    }
function  openOrCloseDate(data) {
  if (typeof data === 'boolean') {
    flag.value = data
    timeShow.value = true
  } else {
    timeShow.value = false
  }
}
  function confirm(e) {
    const date = timeHandler(new Date(e.value), '-', ':')
          let formatValue = 'YYYY-MM-DD'
          dayjs(date).format(formatValue)
    if (flag.value) {
      queryParams.value.startTime =  dayjs(date).format(formatValue)
    } else {
      queryParams.value.endTime =  dayjs(date).format(formatValue)
    }
    timeShow.value = false
  }
function searchSubmit() {
  if(queryParams.value.startTime!=''&&queryParams.value.startTime!=undefined&&queryParams.value.endTime!=''&&queryParams.value.endTime!=undefined){
        queryParams.value.time = queryParams.value.startTime+'-'+queryParams.value.endTime 
      } 
    pageNum.value = 1
    listData.value = []
    getList()
    filterPanel.value = false
  }
  function resetQuery() {
      queryParams.value.type = '1'
     queryParams.value.startTime =  ''
    queryParams.value.endTime =  ''
    queryParams.value.time = ''
    

  }
  function resetListData() {
    secondListData.value = []
    thirdListData.value =  []
    listData.value =  []
    fourListData.value =[]
    fiveListData.value = []
    

  }
function getList() {
   // 使用状态
   getDicts('doctor_type').then(res => {
        typeList.value = res.data
      })
  getDoctorAnalysis({...queryParams.value }).then(res => {
          doctor.value = { ...res.data }
          resetListData() 
        listData.value = listData.value.concat(res.data.doctorTableList)
        secondListData.value = secondListData.value.concat(res.data.hospitalStaticList)
        thirdListData.value = thirdListData.value.concat(res.data.departStaticList)
        fourListData.value = fourListData.value.concat(res.data.doctorStaticList)
        fiveListData.value = fiveListData.value.concat(res.data.doctorCostList)
      }).catch(() => {
      })
    }
function   getDict() {
  listPerson(queryPersonParams.value).then((response) => {
      personList.value = [response.rows]
      if(response.rows.length>0){
        queryParams.value.personName= response.rows[0].name
      queryParams.value.id = response.rows[0].id
      queryHealthRecordParams.value.personId=response.rows[0].id
      listHealthRecord(queryHealthRecordParams.value).then((response) => {  
        healthRecordList.value = [response.rows] 
        if(response.rows.length>0){
          queryParams.value.healthRecordName= response.rows[0].name
          queryParams.value.recordId = response.rows[0].id
       }
       getDoctorAnalysis({...queryParams.value }).then(res => {
        doctor.value = { ...res.data }
        listData.value = listData.value.concat(res.data.doctorTableList)
        secondListData.value = secondListData.value.concat(res.data.hospitalStaticList)
        thirdListData.value = thirdListData.value.concat(res.data.departStaticList)
        fourListData.value = fourListData.value.concat(res.data.doctorStaticList)
        fiveListData.value = fiveListData.value.concat(res.data.doctorCostList)
      }).catch(() => {
      })


      })
     } 
    })
        
    }
function settingConfirm(e) {
      queryParams.value.settingId = e.value[0].settingId
      queryParams.value.settingName = e.value[0].settingName
      settingPickShow.value = false
    }
function settingCancel() {
      settingPickShow.value = false
    }
    function handlePerson() {
        if (personList.value[0].length === 0) {
          proxy.$refs['uToast'].show({
            message: '人员为空  ', type: 'warning'
          })
        } else {
          showPerson.value = true
        }
     }
  function   handlePersonConfirm(e) {
    queryParams.value.personName = e.value[0].name
    queryParams.value.id= e.value[0].id
    queryParams.value.healthRecordName = ''
    queryParams.value.recordId = ''
      queryHealthRecordParams.value.personId=e.value[0].id
      listHealthRecord(queryHealthRecordParams.value).then((response) => {  
        healthRecordList.value = [response.rows] 
        if(response.rows.length>0){
          queryParams.value.healthRecordName= response.rows[0].name
          queryParams.value.recordId = response.rows[0].id
    }
    showPerson.value = false
        pageNum.value = 1
      listData.value = []
      getList()
})
  }
 function handlePersonCancel() {
       showPerson.value = false
       listData.value = []
      getList()
      filterPanel.value = false
  }
  
  function handleHealthRecord() {
        if (healthRecordList.value[0].length === 0) {
          proxy.$refs['uToast'].show({
            message: '健康档案为空  ', type: 'warning'
          })
        } else {
          showHealthRecord.value = true
        }
     }
  function   handleHealthRecordConfirm(e) {
    queryParams.value.healthRecordName = e.value[0].name
    queryParams.value.recordId =  e.value[0].id
    showHealthRecord.value = false
        pageNum.value = 1
      listData.value = []
      getList()
  }
 function handleHealthRecordCancel() {
  queryParams.value.healthRecordName= ""
  queryParams.value.recordId = null
       showHealthRecord.value = false
       listData.value = []
      getList()
      filterPanel.value = false
  }
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: auto;
}
.app-container {
  background-color: #f5f7fa;
  padding: 0;
  overflow: visible;

  .header-con {
    width: calc(100% - 32rpx);
    margin: 0 16rpx 8rpx 16rpx;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
    gap: 12rpx;
    
    .item {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 20rpx 16rpx;
      transition: all 0.3s ease;
      border: 2rpx solid #e8edf3;
      border-radius: 16rpx;
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
      
      &:active {
        transform: scale(0.98);
        opacity: 0.9;
      }
      
      .item-icon {
        width: 72rpx;
        height: 72rpx;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
      }
      
      .info-sum {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        .title {
          color: #7f8c8d;
          margin-bottom: 8rpx;
          font-size: 24rpx;
        }
        
        .num {
          color: #2c3e50;
          font-size: 32rpx;
          font-weight: 600;
          
          span {
            font-size: 20rpx;
            color: #95a5a6;
            margin-left: 4rpx;
          }
        }
      }
    }
  }
.header-title {
  width: 100%;
  height: 30px;
  background-color: #ffffff;
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
}
.btnAdd {
      width: 146rpx;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 8rpx;
      display:float;
      text-align: center;
    }

.search-view {
  padding: 12rpx 32rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 100;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    
    .search-icon {
      position: absolute;
      right: 20rpx;
      z-index: 10;
      cursor: pointer;
    }
  }

  .search-input {
    background: rgba(102, 126, 234, 0.08);
    color: #333333;
    width: 100%;
    margin-right: 0;
    border-radius: 24rpx;
    border: 2rpx solid rgba(102, 126, 234, 0.3);
    height: 66rpx !important;
    display: flex;
    align-items: center;
    
    /* H5端placeholder样式 */
    :deep(input::placeholder) {
      color: #909399 !important;
      font-size: 14px !important;
    }
    
    :deep(input::-webkit-input-placeholder) {
      color: #909399 !important;
      font-size: 14px !important;
    }
    
    :deep(input::-moz-placeholder) {
      color: #909399 !important;
      font-size: 14px !important;
    }
    
    /* 输入文字颜色 */
    :deep(.u-input__content__field-wrapper__field) {
      color: #333333 !important;
    }
    
    :deep(input) {
      color: #333333 !important;
    }
  }
  
  .filter-btn {
    display: flex;
    align-items: center;
    gap: 6rpx;
    padding: 12rpx 24rpx;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 24rpx;
    border: 2rpx solid rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    flex-shrink: 0;
    
    &:active {
      transform: scale(0.95);
      background: rgba(102, 126, 234, 0.12);
    }
    
    text {
      color: #667eea;
      font-size: 28rpx;
      font-weight: 600;
    }
    
    uni-icons {
      color: #667eea;
    }
  }
}

.filter-panel {
  width: 100%;
  position: absolute;
  left: 0;
  top: 270rpx;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;

  .filter-panel-content {
    background-color: #ffffff;
    padding: 0 30rpx 30rpx;
    border-radius: 16rpx 16rpx 0 0;

    .select-header {
      color: #2c3e50;
      font-size: 32rpx;
      font-weight: 600;
      padding: 32rpx 0 24rpx 20rpx;
      position: relative;
      display: flex;
      align-items: center;
      
      &::before {
        content: '';
        width: 6rpx;
        height: 32rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 3rpx;
        margin-right: 12rpx;
        flex-shrink: 0;
      }
    }

    .filter-title {
      color: #2c3e50;
      font-size: 32rpx;
      font-weight: 600;
      padding: 32rpx 0 24rpx 20rpx;
      position: relative;
      display: flex;
      align-items: center;
      
      &::before {
        content: '';
        width: 6rpx;
        height: 32rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 3rpx;
        margin-right: 12rpx;
        flex-shrink: 0;
      }
    }

    .state-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .state-item {
        width: 210rpx;
        height: 72rpx;
        border: 1rpx solid rgba(0, 0, 0, 0.25);
        border-radius: 72rpx;
        text-align: center;
        line-height: 72rpx;
        margin: 0 20rpx 20rpx 0;
        font-size: 28rpx;
        color: #000000;
      }

      .active {
        background-color: rgba(222, 241, 255, 1);
        border: 1rpx solid rgba(22, 119, 255, 1);
      }
    }
  }

  .btn-box {
    display: flex;
    gap: 20rpx;
    padding: 24rpx 30rpx;
    background-color: #fff;
    box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
    
    .btn-reset,
    .btn-confirm {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      height: 88rpx;
      border-radius: 12rpx;
      font-size: 30rpx;
      font-weight: 600;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
        opacity: 0.9;
      }
      
      text {
        line-height: 1;
      }
    }
    
    .btn-reset {
      flex: 1;
      background: #f5f7fa;
      border: 2rpx solid #dcdfe6;
      
      text {
        color: #606266;
      }
    }
    
    .btn-confirm {
      flex: 1;
      background: #667eea;
      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
      border: none;
      
      text {
        color: #ffffff;
      }
    }
  }
}

.section-title {
  display: flex;
  margin-top: -10rpx;
  align-items: center;
  padding: 24rpx 32rpx 16rpx;
  background-color: #f5f7fa;
  
  .title-decorator {
    width: 6rpx;
    height: 32rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 3rpx;
    margin-right: 12rpx;
  }
  
  .title-text {
    font-size: 28rpx;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1;
    flex: 1;
  }
  
  .view-switch {
    display: flex;
    align-items: center;
    gap: 4rpx;
    background: #ffffff;
    border-radius: 12rpx;
    padding: 4rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
    
    .switch-item {
      display: flex;
      align-items: center;
      gap: 4rpx;
      padding: 6rpx 12rpx;
      border-radius: 8rpx;
      transition: all 0.3s ease;
      cursor: pointer;
      
      text {
        font-size: 22rpx;
        color: #999999;
        line-height: 1;
      }
      
      &.active {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        
        text {
          color: #667eea;
          font-weight: 600;
        }
      }
      
      &:active {
        transform: scale(0.95);
      }
    }
  }
}

.chart-container {
  margin: 16rpx 24rpx 30rpx;
  padding: 16rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  width: calc(100% - 48rpx);
  height: 750rpx;
  overflow: visible;
  position: relative;
}

.tab-switch {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 16rpx;
  background-color: #f5f7fa;
  overflow-x: auto;
  
  &::-webkit-scrollbar {
    display: none;
  }
  
  .tab-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rpx;
    padding: 12rpx 20rpx;
    background: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: fit-content;
    
    text {
      font-size: 24rpx;
      color: #999999;
      font-weight: 500;
      line-height: 1;
      white-space: nowrap;
    }
    
    &.active {
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
      border: 2rpx solid rgba(102, 126, 234, 0.3);
      box-shadow: 0 2rpx 12rpx rgba(102, 126, 234, 0.2);
      
      text {
        color: #667eea;
        font-weight: 600;
      }
    }
    
    &:active {
      transform: scale(0.96);
    }
  }
}

.list-item {
  margin: 10rpx 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
  }

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 24rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    .record-name-section {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
      margin-right: 16rpx;
    }
    
    .record-icon {
      width: 40rpx;
      height: 40rpx;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12rpx;
      flex-shrink: 0;
    }
    
    .record-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4rpx;
      
      .record-name {
        color: #ffffff;
        font-size: 28rpx;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .record-code {
        color: rgba(255, 255, 255, 0.85);
        font-size: 22rpx;
        font-weight: 400;
        line-height: 1;
      }
    }
    
    .cost-section {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      white-space: nowrap;
      
      .cost-value {
        color: #fa8c16;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        
        .cost-label {
          color: rgba(255, 255, 255, 0.85);
          font-size: 22rpx;
          font-weight: 400;
          margin-right: 8rpx;
        }
      }
    }
  }
  
  .card-body {
    padding: 24rpx;
    background: #fafbfc;
    border: 2rpx solid #f0f2f5;
    margin: 15rpx 16rpx 15rpx;
    border-radius: 12rpx;
  }

  .info-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12rpx;

    .info-item {
      width: 50%;
      padding: 0 12rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      margin-bottom: 20rpx;
      
      &.info-item-full {
        width: 100%;
      }

      .info-label {
        font-size: 24rpx;
        color: #667eea;
        font-weight: 500;
        background: rgba(102, 126, 234, 0.08);
        padding: 6rpx 12rpx;
        border-radius: 8rpx;
        align-self: flex-start;
        margin-bottom: 8rpx;
      }

      .info-value {
        font-size: 26rpx;
        color: #333;
        font-weight: 500;
        flex: 1;
        line-height: 1.5;
        word-break: break-all;
      }
      
      &:not(.info-item-full) .info-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>