<template>
  <view class="container">
    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
       
      <view class="search-view">
        <u-input v-model="queryParams.personName" border="false" type="select"  @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
        suffixIconStyle="color: #909399" class="search-input">
        </u-input>  
    </view>
    <view class="search-view">
          <u-input v-model="queryParams.healthRecordName" border="false" type="select"  @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
	    suffixIconStyle="color: #909399" class="search-input">
        </u-input>
       </view>
    </u-sticky>
      <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
      <view class="search-view">
        <u-input v-model="queryParams.time" placeholder="请选择用药日期" border="false" type="select" readonly suffixIcon="calendar"
        suffixIconStyle="color: #909399" class="search-input">
        </u-input>
        <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
        labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
      <u-transition :show="filterPanel" mode="fade">
        <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
          <view class="filter-panel-content">
           
            <view class="select-header">用药日期</view>
          <view class="selcet-content" style="padding: 0 24rpx">
            <u-input
              :disabled="true"
              :disabledColor="'#fff'"
              class="dateInput"
              border="surround"
              v-model="queryParams.startTime"
              placeholder="请选择开始时间"
            >
              <template v-slot:suffix>
                <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
              </template>
            </u-input>
            <u-input
              :disabled="true"
              :disabledColor="'#fff'"
              class="dateInput"
              border="surround"
              v-model="queryParams.endTime"
              placeholder="请选择结束时间"
            >
              <template v-slot:suffix>
                <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
              </template>
            </u-input>
          </view>
          </view>
          <view class="btn-box">
            <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
            <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
          </view>
          <u-datetime-picker
            :closeOnClickOverlay="true"
            :show="timeShow"
            v-model="time"
            mode="date"
            @close="openOrCloseDate"
            @cancel="openOrCloseDate"
            @confirm="confirm"
          ></u-datetime-picker>
        </view>
      </u-transition>
    </view>
    </u-sticky>
      <div class="app-container" style="overflow: auto">
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">用药天数</div>
        <div class="num">{{ mar.marDays }}<span>天</span></div>
      </div>
    </div>
    <div class="item">
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">用药种类</div>
        <div class="num">{{ mar.marCategoryCount }}<span>种</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef">
    <div class="item">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">用药次数</div>
        <div class="num">{{ mar.marCount }}<span>次</span></div>
      </div>
    </div>
    <div class="item" v-show="mar.top1Name != null">
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top1Name }}</div>
        <div class="num">{{ mar.top1 }}<span>次</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef" v-show="mar.top2Name != null">
    <div class="item" v-show="mar.top2Name != null">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top2Name }}</div>
        <div class="num">{{ mar.top2 }}<span>次</span></div>
      </div>
    </div>
    <div class="item" v-show="mar.top3Name != null">
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top3Name }}</div>
        <div class="num">{{ mar.top3 }}<span>次</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef" v-show="mar.top4Name != null">
    <div class="item" v-show="mar.top4Name != null">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top4Name }}</div>
        <div class="num">{{ mar.top4 }}<span>次</span></div>
      </div>
    </div>
    <div class="item" v-show="mar.top5Name != null">
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top5Name }}</div>
        <div class="num">{{ mar.top5 }}<span>次</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef" v-show="mar.top6Name != null">
    <div class="item" v-show="mar.top6Name != null">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top6Name }}</div>
        <div class="num">{{ mar.top6 }}<span>次</span></div>
      </div>
    </div>
    <div class="item" v-show="mar.top7Name != null">
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top7Name }}</div>
        <div class="num">{{ mar.top7 }}<span>次</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef" v-show="mar.top8Name != null">
    <div class="item" v-show="mar.top8Name != null">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top8Name }}</div>
        <div class="num">{{ mar.top8 }}<span>次</span></div>
      </div>
    </div>
    <div class="item" v-show="mar.top9Name != null">
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top9Name }}</div>
        <div class="num">{{ mar.top9 }}<span>次</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef" v-show="mar.top10Name != null">
    <div class="item" v-show="mar.top10Name != null">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top10Name }}</div>
        <div class="num">{{ mar.top10 }}<span>次</span></div>
      </div>
    </div>
    <div class="item" v-show="mar.top11Name != null">
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top11Name }}</div>
        <div class="num">{{ mar.top11 }}<span>次</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef" v-show="mar.top12Name != null">
    <div class="item" v-show="mar.top12Name != null">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top12Name }}</div>
        <div class="num">{{ mar.top12 }}<span>次</span></div>
      </div>
    </div>
    <div class="item" v-show="mar.top13Name != null">
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top13Name }}</div>
        <div class="num">{{ mar.top13 }}<span>次</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef" v-show="mar.top14Name != null">
    <div class="item" v-show="mar.top14Name != null">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top14Name }}</div>
        <div class="num">{{ mar.top14 }}<span>次</span></div>
      </div>
    </div>
    <div class="item" v-show="mar.top15Name != null">
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top15Name }}</div>
        <div class="num">{{ mar.top15 }}<span>次</span></div>
      </div>
    </div>
  </div>
  <div class="header-con" ref="searchHeightRef" v-show="mar.top16Name != null">
    <div class="item" v-show="mar.top16Name != null">
      <img src="@/static/images/one.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top16Name }}</div>
        <div class="num">{{ mar.top16 }}<span>次</span></div>
      </div>
    </div>
    <div class="item" v-show="mar.top17Name != null">
      <img src="@/static/images/ticketSum.png" alt="" />
      <div class="info-sum">
        <div class="title">{{ mar.top17Name }}</div>
        <div class="num">{{ mar.top17 }}<span>次</span></div>
      </div>
    </div>
  </div>

  <div></div>
</div>
    <u-list  :spaceHeight="116" lowerThreshold="100">
      <u-list-item v-for="(item, index) in listData" :key="index">
        <view class="list-item">
          <view class="item-header">
            <u--text  lines="2" 
              :text="item.medicalName" size="30rpx" color="#333333" ></u--text>
          </view>
        <view class="item-row">
          <text class="row-label">用药天数：</text>
          <text class="row-value">{{ item.useDays+" 天"}}</text>
        </view>
        <view class="item-row">
          <text class="row-label">用药次数：</text>
          <text class="row-value">{{item.count+" 次"}}</text>
        </view>
        <view class="item-row">
          <text class="row-label">用药总量：</text>
          <text class="row-value">{{ item.dosage+item.unit}}</text>
        </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 { getMarAnalysis } 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 personTypeList = 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 mar = ref({})
const data = reactive({
  filterPanel: false,
  queryPersonParams: {
  pageNum: 1,
  pageSize: 100
},
  queryParams: {
  type: 1,
  time: null,
  recordId: null,
  dataType: null,
  id: null
   } ,
   queryHealthRecordParams: {
  pageNum: 1,
  personId:null,
  pageSize: 1000
}
})

const { filterPanel, queryPersonParams,queryHealthRecordParams, queryParams} = toRefs(data)
const windowHeight = computed(() => {
            uni.getSystemInfoSync().windowHeight - 50
        })	
onLoad(() => {
    getDict()
    getList()
  });

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

  function formatMultiLineData(data) {
if (data != null) {
  return data.replace(/<br\/>/g, '')
}
}
function  openOrCloseDate(data) {
    timeShow.value = !timeShow.value
    flag.value = data
  }
  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.id = ''
      queryParams.value.recordId = ''
      queryParams.value.type = '1'
     queryParams.value.startTime =  ''
    queryParams.value.endTime =  ''
    queryParams.value.time = ''
  }
function getList() {
  
  getMarAnalysis({...queryParams.value }).then(res => {
          mar.value = { ...res.data }
        listData.value = listData.value.concat(res.data.marMapList)
      }).catch(() => {
      })
    }
function   getDict() {
  listPerson(queryPersonParams.value).then((response) => {
      personList.value = [response.rows] 
    })
    listHealthRecord(queryHealthRecordParams.value).then((response) => {  
        healthRecordList.value = [response.rows] 
      })
      
    }
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] 
    showPerson.value = false
        pageNum.value = 1
      listData.value = []
      getList()
})
  }
 function handlePersonCancel() {
  queryParams.value.personName = ''
    queryParams.value.id=''

       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 = ''
       showHealthRecord.value = false
       listData.value = []
      getList()
      filterPanel.value = false
  }

</script>

<style lang="scss" scoped>

.app-container {
.header-con {
  width: 100%;
  height: 100px;
  background-color: #ffffff;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item {
    width: 50%;
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
    margin: 5px 10px 5px 10px;
    .title {
      margin-left: 5px;
      color: rgb(133, 133, 148);
      margin-bottom: 5px;
      font-size: 14px;
    }
    .num {
      margin-left: 5px;
      font-weight: bold;
      font-size: 14px;
    }
  }
  img {
    height: 30px;
    width: 30px;
  }
}
.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;
  align-items: center;
  position: relative;


  .search-input {
    background: #F5F5F5;
    color: #333333;
    margin-right: 36rpx;
  }

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

    .filter-panel-content {
      background-color: #ffff;
      padding: 0 30rpx 30rpx;

      .filter-title {
        color: #000000;
        font-size: 30rpx;
        font-weight: 500;
        padding: 30rpx 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;
      padding: 24rpx 30rpx;
      background-color: #fff;
      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
    }
  }
}

.list-item {
  margin: 0 24rpx 24rpx;
  padding: 32rpx;
  background-color: #fff;

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16rpx;

    .status {
      .status-item {
        width: 120rpx;
        height: 44rpx;
        text-align: center;
        line-height: 44rpx;
        border-radius: 4rpx;
        font-size: 24rpx;
      }

      .status1 {
        background: #F0F0F0;
        color: #8C8C8C;
      }

      .status2 {
        background: rgba(38, 129, 255, 0.2);
        color: #2681FF;
      }

      .status3 {
        background: #F7F7F7;
        color: #2681FF;
      }

      .status4 {
        background: rgba(255, 85, 51, 0.2);
        color: #FF5533;
      }

      .status5 {
        background: #F7F7F7;
        color: rgba(0, 0, 0, 0.85);
      }

      .status7 {
        background: rgba(255, 129, 51, 0.2);
        color: #FF8133;
      }

      .status8 {
        background: rgba(65, 217, 165, 0.2);
        color: #41D9A5;
      }
    }
  }

  .item-row {
    padding: 16rpx 0;

    .row-label {
      color: rgba(0, 0, 0, 0.55);
    }

    .row-value {
      color: rgba(0, 0, 0, 0.85)
    }
  }

  .operate {
    display: flex;
    justify-content: flex-end;

    .btn {
      width: 146rpx;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 8rpx;
      margin-left: 5rpx;
      text-align: center;
    }

    .circulation {
      background: rgba(0, 0, 0, 0.04);
      margin-right: 24rpx;
      color: rgba(0, 0, 0, 0.85);
    }

    .filling {
      background: #2681FF;
      border-radius: 8rpx;
      color: #FFFFFF;
    }
  }
}
</style>