<template>
  <div>
    <el-row>
      <el-card shadow="never" class="w-full">
        <template #header>
          <h3>小程序政策内容</h3>
        </template>
        <div>
          <el-button
            plain
            @click="
              () => {
                state.policyContent.visible = true;
                state.policyContent.rowData = {};
              }
            "
            >新建政策类别</el-button
          >
          <div class="pt-4">
            <el-table :data="state.policyContent.tableData" style="width: 100%">
              <el-table-column prop="name" label="类别名称"> </el-table-column>
              <el-table-column prop="name" label="是否启用">
                <template #default="{ row }">
                  <el-switch
                    v-model="row.status"
                    :active-value="1"
                    :inactive-value="0"
                    @change="onChangeStatus(row)"
                  >
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="sort" label="排序(数字越大越排在前)">
                <template #default="{ row }">
                  <el-input
                    v-model.number="row.sort"
                    type="number"
                    @blur="updateSort(row)"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作">
                <template #default="{ row }">
                  <el-button type="primary" link @click="handleEdit(row)"
                    >编辑</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="mt-4 justify-end"
              background
              layout="prev, pager, next"
              :total="state.pagination.total"
              @current-change="changePage"
            />
          </div>
        </div>
      </el-card>
      <el-card class="mt-4 w-full" shadow="never">
        <template #header>
          <h3>小程序健康知识管理</h3>
        </template>
        <div>
          <el-form-item label="" prop="">
            <el-select
              v-model="moduleList[0].moduleId"
              placeholder="请选择板块"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in articleList"
                :key="item.sn"
              ></el-option>
            </el-select>
            <el-button
              class="ml-2"
              plain
              type="primary"
              @click="handleSaveModuleId(1)"
              >保 存</el-button
            >
          </el-form-item>
        </div>
      </el-card>
      <el-card class="mt-4 w-full" shadow="never">
        <template #header>
          <h3>大屏健康互动管理</h3>
        </template>
        <div>
          <el-form label-position="left">
            <el-form-item label="医疗小常识" label-width="100">
              <el-select
                v-model="moduleList[1].moduleId"
                placeholder="请选择知识库板块"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in articleList"
                  :key="item.sn"
                ></el-option>
              </el-select>
              <el-button
                class="ml-2"
                plain
                type="primary"
                @click="handleSaveModuleId(2)"
                >保 存</el-button
              >
            </el-form-item>

            <el-form-item label="医康养工作" label-width="100">
              <el-select
                v-model="moduleList[2].moduleId"
                placeholder="请选择知识库板块"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in articleList"
                  :key="item.sn"
                ></el-option>
              </el-select>
              <el-button
                class="ml-2"
                plain
                type="primary"
                @click="handleSaveModuleId(3)"
                >保 存</el-button
              >
            </el-form-item>

            <el-form-item label="健康互动" label-width="100">
              <el-select
                v-model="moduleList[3].moduleId"
                placeholder="请选择知识库板块"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in articleList"
                  :key="item.sn"
                ></el-option>
              </el-select>
              <el-button
                class="ml-2"
                plain
                type="primary"
                @click="handleSaveModuleId(4)"
                >保 存</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-row>

    <ComponentUpdateCategory
      v-model:show="state.policyContent.visible"
      :rowData="state.policyContent.rowData"
      @success="changePage(1)"
    ></ComponentUpdateCategory>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { log } from "console";
import { resolve } from "dns";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";
import ComponentUpdateCategory from "./components/UpdateCategory.vue";
import { useUserStoreHook } from "@/store/modules/user";

const state = reactive({
  policyContent: {
    tableData: [],
    visible: false,
    rowData: {}
  },
  query: {
    page: 1,
    pageSize: 15
  },
  pagination: {
    total: 0
  },
  moduleId: null
});
const moduleList = ref([
  {
    moduleId: null,
    key: "小程序健康知识",
    type: 1
  },
  {
    moduleId: null,
    key: "医疗小常识",
    type: 2
  },
  {
    moduleId: null,
    key: "医康养工作",
    type: 3
  },
  {
    moduleId: null,
    key: "医康养工作",
    type: 4
  }
]);
const articleList = ref([]);
const mechanismId = useUserStoreHook()?.profile.id;

const getPolicyContentTable = () => {
  request.get("/articleService/policy/category/paginate", {}).then(resp => {
    state.policyContent.tableData = resp?.data.list;
    state.pagination.total = resp.data.total;
  });
};

const getArticleList = () => {
  // articleService/module/paginate
  return new Promise(resolve => {
    request
      .get("articleService/module/paginate", {
        params: {
          page: 1,
          pageSize: 1000
        }
      })
      .then(resp => {
        articleList.value = resp.data.list;
        resolve();
      });
  });
};
const onChangeStatus = row => {
  ElMessageBox.confirm(
    row.status ? "确定要启用此类别吗？" : "确定要关闭此类别吗？",
    "",
    {
      distinguishCancelAndClose: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消"
    }
  )
    .then(async () => {
      await request.post("/articleService/policy/category/status", row);
      ElMessage.success("操作成功");
      getPolicyContentTable();
    })
    .catch(err => {
      row.status = row.status ? 0 : 1;
    });
};
const handleEdit = rowData => {
  state.policyContent.rowData = rowData;
  state.policyContent.visible = true;
};
const initData = async () => {
  getPolicyContentTable();
  await getArticleList();
  Promise.all([
    getModuleList(1),
    getModuleList(2),
    getModuleList(3),
    getModuleList(4)
  ]).then(resp => {
    resp.map((v, i) => {
      moduleList.value[i] = { ...moduleList.value[i], ...v[0] };
    });
  });
};
const changePage = page => {
  state.query.page = page;
  getPolicyContentTable();
};
const handleSaveModuleId = (type: number) => {
  if (!moduleList.value[type - 1].moduleId) {
    return ElMessage.error("请选择板块");
  }
  request
    .post("articleService/policy/domain/module", {
      type: type,
      moduleId: moduleList.value[type - 1].moduleId
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getModuleList(type);
    });
};

const updateSort = async row => {
  let resp = await request.post("/articleService/policy/category/sort", {
    id: row.id,
    sort: row.sort
  });
  ElMessage.success(resp.message);
  getPolicyContentTable();
};

const getModuleList = typeIds => {
  return new Promise(resolve => {
    request
      .get("articleService/open/domain/list", {
        params: {
          mechanismId: mechanismId,
          typeIds: typeIds
        },
        headers: { token: "debug" }
      })
      .then(resp => {
        resolve(resp.data);
      });
  });
};
initData();
</script>
<style scoped lang="scss"></style>
