<template>
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="78%" append-to-body style="height: 750px;">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <span
          class="diagnosis-tag"
          :class="{ 'diagnosisActive': diseaseLabelQuery.category == item.value }"
          v-for="item in diseaseLabelListDict"
          :key="item.value"
          @click="changeTag(item.value)"
        >{{ item.label }}</span>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <el-col :span="12">
        <el-form-item prop="labelCode">
          <el-input v-model="diseaseLabelQuery.labelCode" placeholder="疾病名称/疾病编码" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12" align="left">
        <el-button type="primary" @click="getDiseaseLabelList">查询</el-button>
        <el-button type="primary" @click="addDiseaseLabelDialog">新增疾病标签</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <el-col :span="12">
        <div style="height: 400px;overflow-y: scroll;">
          <el-table
            border
            stripe
            :data="diseaseLabelList"
            @select-all="handleSelectAllChange"
            @select="handleSelectChange"
            ref="diseaseLabelRef"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="疾病/部位名称" align="center" prop="labelName" />
            <el-table-column label="疾病/部位编码" align="center" prop="labelCode" />
            <el-table-column label="所属分类" align="center" prop="categoryName" />
          </el-table>
        </div>
        <div style="margin-left: 10px;width: 100%;">
          <pagination
            v-show="total > -1"
            :total="total"
            v-model:page="diseaseLabelQuery.pageNum"
            layout="total, sizes, prev, pager, next"
            v-model:limit="diseaseLabelQuery.pageSize"
            @pagination="getDiseaseLabelList"
            size="small"
          />
        </div>
      </el-col>
      <el-col :span="12" align="right">
        <div style="height: 400px;overflow-y: scroll;">
          <el-table border :data="selecteddiseaseLabelList">
            <el-table-column label="疾病/部位名称" align="center" prop="labelName" />
            <el-table-column label="疾病/部位编码" align="center" prop="labelCode" />
            <el-table-column label="所属分类" align="center" prop="categoryName" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
              <template #default="scope">
                <el-tooltip content="删除" placement="top">
                  <el-button link type="danger" icon="Delete" @click="handleSelectedDelete(scope.row)">删除</el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-left: 10px;margin-top:36px;width: 100%;text-align: left;">
          <span style="color: rgb(118, 180, 244);">已选：{{ selecteddiseaseLabelList.length }}项</span>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <el-col :span="24" align="center">
        <el-button type="primary" @click="onConfirm">&nbsp;&nbsp;&nbsp;确定&nbsp;&nbsp;&nbsp;</el-button>
        <el-button @click="onCancel">&nbsp;&nbsp;&nbsp;取消&nbsp;&nbsp;&nbsp;</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  dialog: { type: Object, required: true }, // { visible, title }
  diseaseLabelQuery: { type: Object, required: true },
  diseaseLabelListDict: { type: Array as () => any[], required: true },
  diseaseLabelList: { type: Array as () => any[], required: true },
  selecteddiseaseLabelList: { type: Array as () => any[], required: true },
  total: { type: Number, required: true },
  getDiseaseLabelList: { type: Function as unknown as () => (...args: any[]) => any, required: true },
  changeTag: { type: Function as unknown as () => (...args: any[]) => any, required: true },
  handleSelectAllChange: { type: Function as unknown as () => (...args: any[]) => any, required: true },
  handleSelectChange: { type: Function as unknown as () => (...args: any[]) => any, required: true },
  handleSelectionChange: { type: Function as unknown as () => (...args: any[]) => any, required: true },
  handleSelectedDelete: { type: Function as unknown as () => (...args: any[]) => any, required: true },
  addDiseaseLabelDialog: { type: Function as unknown as () => (...args: any[]) => any, required: true },
});

const emit = defineEmits(['confirm', 'cancel']);

const onConfirm = () => emit('confirm');
const onCancel = () => emit('cancel');
</script>

<style scoped>
.diagnosis-tag {
  border-left: 1px solid #409EFF;
  border-top: 1px solid #409EFF;
  border-bottom: 1px solid #409EFF;
  padding: 8px 8px;
  color: #409EFF;
  background: #f4f8ff;
  display: inline-block;
  width: 33.3%;
  margin-bottom: 10px;
  text-align: center;
  vertical-align: middle;
}
.diagnosis-tag:last-child {
  border-right: 1px solid #409EFF;
}
.diagnosisActive {
  background: #409EFF;
  color: #fff;
}
</style>
