<template>
  <div class="page-channel">
    <el-row :gutter="10" style="height: 90vh">
      <el-col :span="6">
        <el-card shadow="never" class="h-full">
          <template #header>
            <h3 class="text-center">慢病管理级别</h3>
          </template>
          <div>
            <el-table
              :data="state.list"
              style="width: 100%"
              :show-header="false"
              max-height="85vh"
              @row-click="
                row => {
                  state.currentValue = row;
                  getGroupList();
                }
              "
            >
              <el-table-column prop="name" label="姓名">
                <template #default="{ row }">
                  <div
                    :class="state.currentValue.id == row.id && 'active'"
                    class="p-2 left-wrapper cursor-pointer"
                  >
                    <h3>{{ row.title }}</h3>
                    <span class="text-sm text-yellow-600"
                      >适用人群：{{ row.scope }}</span
                    >
                    <br />
                    <el-text class="text-sm">{{ row.content }}</el-text>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card shadow="never" v-if="state.currentValue.id" class="h-full">
          <template #header>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <h4 class="mr-4">{{ state.currentValue.title }}</h4>
                <Auth value="healthManage:group:edit">
                  <el-button
                    type="primary"
                    :icon="Edit"
                    link
                    @click="handleEdit"
                    >编辑</el-button
                  >
                </Auth>
              </div>
              <div class="ml-8">
                <div class="flex items-center">
                  <el-input
                    v-model.trim="query.name"
                    clearable
                    placeholder="输入分组名称进行搜索"
                  />
                  <el-button
                    type="primary"
                    class="ml-2"
                    @click="onSearch"
                    :icon="Search"
                    >搜索</el-button
                  >
                  <Auth value="healthManage:group:edit">
                    <el-button
                      type="primary"
                      :icon="Plus"
                      class="ml-2"
                      @click="
                        state.visibleGroup = true;
                        state.rowDataOfGroup = {
                          id: undefined
                        };
                      "
                      >新增管理分组</el-button
                    >
                  </Auth>
                </div>
              </div>
            </div>
          </template>
          <div>
            <el-table
              :data="state.groupList"
              style="width: 100%"
              max-height="85vh"
            >
              <el-table-column prop="name" label="分组名称" />
              <el-table-column prop="scope" label="使用人群" />
              <el-table-column prop="scope" label="对应疾病">
                <template #default="{ row }">
                  <div v-if="row.diseases?.length">
                    <span v-for="(item, index) in row.diseases" :key="item.id">
                      <el-text>{{ item.properties?.name }}</el-text>
                      <el-divider
                        direction="vertical"
                        v-if="index != row.diseases.length - 1"
                      />
                    </span>
                  </div>
                  <div v-else>-</div>
                </template>
              </el-table-column>
              <el-table-column prop="scope" label="操作">
                <template #default="{ row }">
                  <div>
                    <Auth value="healthManage:group:edit">
                      <el-button
                        type="primary"
                        link
                        @click="handleEditGroup(row)"
                        >编辑</el-button
                      >
                      <el-divider direction="vertical" />
                      <el-popconfirm
                        title="确定要删除这个分组吗？"
                        width="300"
                        @confirm="handleDelete(row.id)"
                      >
                        <template #reference>
                          <el-button type="danger" link>删除</el-button>
                        </template>
                      </el-popconfirm>
                    </Auth>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              class="justify-end mt-4"
              layout="total, prev, pager, next"
              :page-size="10"
              :total="state.total"
              @change="handleCurrentChange"
            />
          </div>
        </el-card>
        <el-card shadow="never" class="h-full" v-else>
          <div>
            <el-empty />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <DialogEditDiseaseGrade
      v-model:show="state.visible"
      :rowData="state.rowData"
      @success="getList"
    />
    <DialogEditDiseaseManageGroup
      v-model:show="state.visibleGroup"
      :levelId="state.currentValue.id"
      @success="getGroupList"
      :rowData="state.rowDataOfGroup"
    />
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { Search, Plus, Edit, Delete } from "@element-plus/icons-vue";
import DialogEditDiseaseGrade from "./components/DialogEditDiseaseGrade.vue";
import DialogEditDiseaseManageGroup from "./components/DialogEditDiseaseManageGroup.vue";

import { request } from "@/utils";
import { ElMessage } from "element-plus";

const state = reactive({
  visible: false,
  visibleGroup: false,
  list: [],
  groupList: [],
  total: 0,
  currentValue: {
    id: undefined,
    name: ""
  },
  rowData: {},
  rowDataOfGroup: {}
});

const query = reactive({
  name: "",
  levelId: undefined,
  page: 1
});

const initcurrentValue = () => {
  state.currentValue.id = "";
  state.currentValue.name = "";
};
const getList = () => {
  request.get("dataService/schemeManage/diseaseManageLevels").then(resp => {
    state.list = resp.data;
    if (state.currentValue.id) {
      state.currentValue = state.list.find(v => v.id == state.currentValue.id);
    }
  });
};

const getGroupList = () => {
  request
    .get("dataService/schemeManage/diseaseManageGroup/paginate", {
      params: { ...query, levelId: state.currentValue.id }
    })
    .then(resp => {
      state.groupList = resp.data.list;
      state.total = resp.data.total;
    });
};
const onSearch = () => {
  query.page = 1;
  getGroupList();
};
const handleCurrentChange = page => {
  query.page = page;
  getGroupList();
};
const handleEdit = () => {
  state.rowData = state.currentValue;
  state.visible = true;
};
const handleEditGroup = row => {
  state.rowDataOfGroup = row;
  state.visibleGroup = true;
};

const handleDelete = id => {
  request
    .post(`dataService/schemeManage/diseaseManageGroup/delete`, {
      id
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getGroupList();
    });
};
getList();
</script>
<style lang="scss" scoped>
.active {
  // color: var(--el-color-primary);
  background-color: #f5f7fa;
  border-right: 6px solid var(--el-color-primary);
}
::v-deep {
  .el-table .el-table__body tr:hover > td {
    background-color: transparent;
  }
}
.left-wrapper:hover {
  background-color: #f5f7fa;
}
</style>
