<template>
  <el-dialog :title="title" v-model="open" :width="`${width}`">
    <!--  -->
    <el-row :gutter="40">
      <!-- 处方 的 列表 -->
      <el-col :span="10">
        <!-- 搜索 -->
        <el-form :model="queryParams" label-width="68px">
          <el-form-item label="处方名字" prop="prescriptionName">
            <el-input
              v-model="queryParams.prescriptionName"
              placeholder="请输入处方名字"
              clearable
              @keyup.enter="getQuery"
            />
          </el-form-item>
        </el-form>
        <!-- 列表 -->
        <el-table
          :data="conventionalPrescriptionList"
          height="250"
          border
          style="width: 100%"
        >
          <el-table-column prop="prescriptionName" label="处方名字" style="width: 100%">
            <template #default="scope">
              <div
                @click="
                  getDrugList(scope.$index, conventionalPrescriptionList[scope.$index].id)
                "
              >
                {{ conventionalPrescriptionList[scope.$index].prescriptionName }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" v-show="total > 0" :current-page.sync="queryParams.pageNum" :total="total" @current-change="getPageChange">
        </el-pagination>
      </el-col>
      <!-- 表格  -->
      <el-col :span="12">
        <!--  -->
        <h2>描述</h2>
        <h3>处方名字: {{ prescriptionsUser.prescriptionName }}</h3>
        <h3>功用: {{ prescriptionsUser.function }}</h3>
        <h3>主治: {{ prescriptionsUser.indication }}</h3>
        <h3>医嘱: {{ prescriptionsUser.medicalAdvice }}</h3>
      </el-col>
    </el-row>
    <!--药品 -->
    <el-row class="drugList">
      <PrescriptionList
        :controlButton="controlButtonPrescriptionList"
        :controlData="controlDataPrescriptionList"
        v-model:prescriptionData="drugList"
      />
    </el-row>
    <!-- 选择 取消  -->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="selectValue(drugList)">确 定</el-button>
        <el-button v-if="false" @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="ConventionalPrescription">
import {
  getConventionalPrescriptions,
  listConventionalPrescriptions,
} from "@/api/healthcare/outpatientService/conventionalPrescriptions";

// 请求 参数
const loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  prescriptionName: ""
});

const conventionalPrescriptionList = ref([]);

const total = ref(0);

// 搜索 方法
function getQuery() {
  getList();
}
// 处理 
function getPageChange(newPage) {
  queryParams.value.pageNum = newPage
  getList();
}

// 发送 请求
function getList() {
  loading.value = true;
  listConventionalPrescriptions(queryParams.value).then((response) => {
    conventionalPrescriptionList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 药品列表
const drugList = ref([]);
// 功能
const prescriptionsUser = ref({
  //
  prescriptionName: "",
  function: "",
  indication: "",
  medicalAdvice: "",
});

function getDrugList(index, id) {
  getConventionalPrescriptions(id).then((reponse) => {
    console.log("获取到的药品列表", reponse);
    prescriptionsUser.value.prescriptionName = reponse.data.prescriptionName;
    prescriptionsUser.value.function = reponse.data.function;
    prescriptionsUser.value.indication = reponse.data.indication;
    prescriptionsUser.value.medicalAdvice = reponse.data.medicalAdvice;
    drugList.value = reponse.data.drugUseList;
  });
}

//  组件 交互
const props = defineProps({
  medicineName: {
    type: String,
  },
  //
  width: {
    type: String,
    default: "80%",
  }
});

/** 事件 */
const emit = defineEmits(["select-value", "input-medicine-name"]);

// 监听 父组件传来的数值  DrugPrice
watch(
  () => queryParams.value.prescriptionName,
  (newValue, oldValue) => {
    console.log("获取到的药品名称", newValue);
    getList();
  }
);
//

// 更新 数据
const requestValueUpdate = () => {
  // 父 组件 的 方法
  props.onUpdate();
};

/** 选择按钮操作 传送 给 父组件 */
function selectValue(row) {
  if (row != null) {
    console.log("获取患者信息", row);
    emit("select-value", row);
    drugList.value = [];
  }
}

//  子组件 处方列表 使用
import PrescriptionList from "@/components/Healthcare/OutpatientService/PrescriptionList/index.vue";
import prescriptionListUse from "@/components/Healthcare/OutpatientService/PrescriptionList/use.ts";

let {
  controlButtonPrescriptionList,
  controlDataPrescriptionList,
  modifyWholeCheckProp,
  modifyWholeProhibit,
  modifyWholeButtonDisplay,
} = prescriptionListUse();

// 控制 width
controlDataPrescriptionList.value[1].width = "220";
controlDataPrescriptionList.value[2].width = "200";
controlDataPrescriptionList.value[10].width = "200";


controlDataPrescriptionList.value[8].display = false;
controlDataPrescriptionList.value[9].display = false;
controlDataPrescriptionList.value[11].display = false;
controlDataPrescriptionList.value[10].check[0].isCheck = false;
controlDataPrescriptionList.value[1].pattern[0].isUse = false;
controlDataPrescriptionList.value[1].pattern[2].isUse = true;
modifyWholeCheckProp(controlDataPrescriptionList.value, "drugUseList");

// console.log("修改 数据", controlDataPrescriptionList.value);
modifyWholeProhibit(controlDataPrescriptionList.value, true);
modifyWholeButtonDisplay(controlButtonPrescriptionList.value, false);
// console.log("修改 数据", controlButtonPrescriptionList.value);

// 数据 的 处理
const paginationDataFq = () => {
  //
  form.value.drugUseList = form.value.drugUseList;
};

getList();
</script>

<style>
.drugList {
  margin-top: 20px;
}
</style>
