<template>
  <xc-table :local-data="data" :height="400">

  </xc-table>

  <xc-dialog-v2 v-model="dialog"
                title="病历时效限制">
    <el-form :label-width="120">
      <el-form-item label="入参数据元：">
        <el-input v-model="ruleForm.ginseng"/>
      </el-form-item>
      <el-form-item label="病历编码：">
        <el-tree-select
            class="tree-select"
            style="width: 100%"
            :props="defaultProps"
            multiple
            node-key="_id"
            :render-after-expand="false"
            v-model="ruleForm.medicalRecordCode"
            :data="emrTree">
          <template #default="{ node, data }">
            <div style="display: flex;justify-content: space-between;align-items: center">
              <div>{{ data.name }}</div>
              <div>
                <el-button text type="primary">全选</el-button>
              </div>
            </div>
          </template>
        </el-tree-select>
      </el-form-item>
      <el-form-item label="时效(小时)：">
        <el-input v-model="ruleForm.prescription"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button>取消</el-button>
      <el-button>确认</el-button>
    </template>
  </xc-dialog-v2>

</template>

<script setup name='EmrControlRule' lang="ts">
import XcTable from "@/components/xiao-chan/xc-table/XcTable.vue";
import {onMounted, Ref, ref} from "vue";
import XcDialogV2 from "@/components/xiao-chan/dialog/XcDialogV2.vue";
import {
  getEmrTree,
} from "@/api/zhu-yuan-yi-sheng/emr-patient";

const data: Ref<Array<any>> = ref([])
const dialog: Ref<boolean> = ref(true)
const emrTree = ref([])

const defaultProps = {
  children: 'children',
  label: 'name',
  value: '_id'
}

interface ruleFormClass {
  // 入参
  ginseng: string,
  // 病历编码
  medicalRecordCode: Array<any>,
  // 时效
  prescription: string,

}

const ruleForm: Ref<ruleFormClass> = ref({
  ginseng: '',
  medicalRecordCode: [],
  prescription: '',
})


onMounted(() => {
  getEmrTree('hosp').then((res) => {
    console.log(res)
    emrTree.value = res.all
  })

  console.log(data.value);
})

</script>

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