<template>
  <div>
    <el-row :gutter="10" style="height: 90vh">
      <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 w-2/3">
                <el-input
                  v-model.trim="query.title"
                  clearable
                  placeholder="输入标题名称进行搜索"
                />
                <el-button
                  type="primary"
                  class="ml-2"
                  @click="onSearch"
                  :icon="Search"
                  >搜索</el-button
                >
              </div>
              <el-button
                type="primary"
                :icon="Plus"
                class="ml-2"
                @click="
                  state.visible = true;
                  state.rowData = {
                    id: undefined
                  };
                "
                >新增</el-button
              >
            </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="Edit" link @click="handleEdit"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="确定要删除这个模板吗？"
                  width="300"
                  @confirm="handleDelete"
                >
                  <template #reference>
                    <el-button type="danger" :icon="Delete" link
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </template>
          <div>
            <el-radio-group v-model="state.type" size="large">
              <el-radio-button
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.value"
              >
                {{ item.key }}</el-radio-button
              >
            </el-radio-group>
            <el-divider />
            <template v-if="state.type == 0">
              <div class="text-center">
                <el-empty
                  description="创建随访问卷，可对用户情况进行标准化信息回收，方便后期对比查看管理效果"
                />
                <el-button type="primary" @click="handleEditQuestion"
                  >立即创建</el-button
                >
              </div>
            </template>
            <template v-else-if="state.type == 1">
              <div class="text-center">
                <el-empty
                  description="设置健康指导内容，方便用户了解在不同时期如何进行自我管理，以及健康注意事项"
                />
                <el-button type="primary">立即创建</el-button>
              </div>
            </template>
            <template v-else>
              <div class="text-center">
                <el-empty
                  description="设置随访人员指导内容，指导随访人员如何进行随访"
                />
                <el-button type="primary">立即创建</el-button>
              </div>
            </template>
          </div>
        </el-card>
        <el-card shadow="never" class="h-full" v-else>
          <div>
            <el-empty />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <DialogEditSuggestion
      v-model:show="state.visible"
      @success="onSearch"
      :rowData="state.rowData"
    />
    <DialogEditQuestion
      v-model:show="state.visibleQuestion"
      :surveyId="state.currentValue.id"
      :submit-questions="saveQuestions"
      :submit-logic="saveLogicCode"
    />
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { Search, Plus, Edit, Delete } from "@element-plus/icons-vue";
import DialogEditSuggestion from "./components/DialogEditSuggestion.vue";
import DialogEditQuestion from "@/components/Survey/DialogEditQuestion.vue";

import { request } from "@/utils";
import { ElMessage } from "element-plus";
const typeList = ref([
  {
    key: "随访问卷",
    value: 0
  },
  {
    key: "随访健康指导",
    value: 1
  },
  {
    key: "随访人员指导",
    value: 2
  }
]);
const state = reactive({
  visible: false,
  list: [],
  total: 0,
  type: 0, // 问卷
  visibleQuestion: false,
  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 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
        );
      }
    });
};
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();
    });
};
const handleEditQuestion = () => {
  state.visibleQuestion = true;
};
const saveQuestions = async questions => {
  await request.post(`/surveyService/mechanism/customSurvey/updateContent`, {
    content: JSON.stringify(questions)
  });
  ElMessage.success("保存成功");
};
const saveLogicCode = async rules => {
  await request.post(`/surveyService/mechanism/customSurvey/updateLogicCode`, {
    logicCode: JSON.stringify(rules)
  });
  ElMessage.success("保存成功");
};
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>
