<template>
    <page-layer>
        <template #header>
            入院区间：
            <el-date-picker
                    :shortcuts="shortcuts"
                    style="width: 220px"
                    type="daterange"
                    v-model="intervalPatients"/>
            <el-button type="primary" @click="queryQualityControlData">查询质控数据</el-button>
        </template>

        <template #main>
            <el-tabs v-model="tabsModel">
                <el-tab-pane label="质控数量" name="质控数量">
                    <rule-total/>
                </el-tab-pane>

                <el-tab-pane label="详情" name="详情">
                    <rule-sift :data="ruleReturnData.details"/>
                </el-tab-pane>

                <template v-for="(val, key) in siftData">
                    <el-tab-pane :label="key" :name="key">
                        <rule-sift :data="val"/>
                    </el-tab-pane>
                </template>
            </el-tabs>
        </template>
    </page-layer>

</template>

<script setup name='EmrControlRule'>
import {onMounted} from "vue";
import {
    specifyAdmissionQualityControl
} from '@/api/zhu-yuan-yi-sheng/emr-control-rule'
import {getDateRangeFormatDate} from "@/utils/date";
import PageLayer from "@/layout/PageLayer.vue";
import {shortcuts} from "@/data/shortcuts";
import RuleTotal
    from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr_control_rule/RuleTotal.vue";
import {
    numberToArray,
    ruleReturnData, siftData, tabsModel
} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr_control_rule/rule-store";
import RuleSift
    from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr_control_rule/RuleSift.vue";

const intervalPatients = ref([])
const dialog = ref(false)

const queryQualityControlData = () => {
    let {startTime, endTime} = getDateRangeFormatDate(intervalPatients.value)

    specifyAdmissionQualityControl(startTime, endTime).then(res => {
        siftData.value = {}
        ruleReturnData.value = res
        numberToArrayFunc()
        console.log(res)
        dialog.value = false
    })
}

const numberToArrayFunc = () => {
    numberToArray.value = []
    for (let key in ruleReturnData.value.numberOfQuestions) {
        numberToArray.value.push({
            name: key,
            total: ruleReturnData.value.numberOfQuestions[key]
        })
    }
}

onMounted(() => {
    intervalPatients.value = shortcuts[2].value
})

</script>

<style lang="scss">
.tree-select {
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #f5f7fa !important;
    color: black;
  }
}

.select_div {
  min-height: 20px;
  width: 100%;
  border: 1px solid;
  border-radius: 4px;

  table-layout: fixed;
  word-break: break-all;
  overflow: hidden;

  .select_input {
    margin-left: 3px;
  }

  span {
    border-radius: 2px;
    background-color: #f0f2f5;
    padding: 0 5px;
    margin: 4px;

    i {
      cursor: pointer;
      font-size: 12px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }
  }
}
</style>
