<template>
  <el-dialog title="" v-model="dialogVisible" width="80%">
    <div>
      <el-row :gutter="10" style="height: 70vh">
        <el-col :span="6">
          <el-card shadow="never" class="h-full">
            <template #header>
              <div class="flex items-center justify-between">
                <div class="flex items-center">
                  <el-input
                    v-model.trim="query.title"
                    clearable
                    placeholder="输入标题名称进行搜索"
                  />
                  <el-button
                    type="primary"
                    class="ml-2"
                    @click="onSearch"
                    :icon="Search"
                    >搜索</el-button
                  >
                </div>
              </div>
            </template>
            <div>
              <el-table
                :data="state.list"
                style="width: 100%"
                :show-header="false"
                max-height="85vh"
                @row-click="
                  row => {
                    state.currentValue = row;
                  }
                "
              >
                <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>
                      <el-text>适用范围：{{ row.scope }}</el-text> <br />
                      <el-text>最后更新时间：{{ row.updatedAt }}</el-text>
                    </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-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>
                  <h4>{{ state.currentValue.title }}</h4>
                  <el-text>使用范围：{{ state.currentValue.scope }}</el-text>
                </div>
                <div class="ml-8">
                  <el-button type="primary" :icon="Plus" @click="handleAdd"
                    >一键添加</el-button
                  >
                </div>
              </div>
            </template>
            <div>
              <div v-html="state.currentValue.content" />
            </div>
          </el-card>
          <el-card shadow="never" class="h-full" v-else>
            <div class="text-center">
              <el-empty />
              <el-button
                plain
                type="primary"
                @click="router.push({ name: 'schemeLibraryIndex' })"
                >去健康方案库添加</el-button
              >
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { Search, Plus, Edit, Delete, Close } from "@element-plus/icons-vue";
import { request } from "@/utils";
import { ElMessage } from "element-plus";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:show", "success", "onAdd"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
    } else {
    }
  }
);
const router = useRouter();

const state = reactive({
  visible: false,
  list: [],
  total: 0,
  currentValue: {
    id: undefined,
    name: ""
  },
  rowData: {}
});
const query = reactive({
  title: "",
  page: 1
});
const initcurrentValue = () => {
  state.currentValue.id = "";
  state.currentValue.name = "";
};
const onSearch = () => {
  query.page = 1;
  getList();
};
const handleAdd = () => {
  emits("onAdd", state.currentValue.content);
  dialogVisible.value = false;
};
const getList = () => {
  request
    .get("dataService/schemeManage/healthAdvise/paginate", { params: query })
    .then(resp => {
      state.list = resp.data.list;
      state.total = resp.data.total;
      if (state.currentValue.id) {
        state.currentValue = state.list.find(
          v => v.id == state.currentValue.id
        );
      }
      if (state.list.length) {
        state.currentValue = state.list[0];
      }
    });
};
const handleCurrentChange = page => {
  query.page = page;
  getList();
};
const handleEdit = () => {
  state.rowData = state.currentValue;
  state.visible = true;
};
const handleDelete = () => {
  request
    .post(`dataService/schemeManage/healthAdvise/delete`, {
      id: state.currentValue.id
    })
    .then(resp => {
      ElMessage.success(resp.message);
      initcurrentValue();
      getList();
    });
};
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-card__header {
    height: 74px;
  }
  .el-table .el-table__body tr:hover > td {
    background-color: transparent;
  }
}
.left-wrapper:hover {
  background-color: #f5f7fa;
}
</style>
