<template>
  <!-- 学校信息（局端） -->
  <div class="schoolInfo-jd" v-loading="loading">
    <div class="searchDiv flex">
      <el-form ref="ruleFormRef" :inline="true" :model="ruleForm" class="demo-form-inline">
        <el-form-item label="学校名称：" prop="keyword">
          <el-input size="default" v-model="ruleForm.keyword" placeholder="" />
        </el-form-item>
        <el-form-item label="级别：" prop="sm_period">
          <el-select v-model="ruleForm.sm_period" placeholder=" " size="default">
            <el-option v-for="item in periodData" :key="item.v" :label="item.n" :value="item.v" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="default" type="primary" @click="initData">搜索</el-button>
          <el-button size="default" type="warning" @click="resetForm(ruleFormRef)">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="searchContent">
      <div class="searchBtn flex">
        <div class="flex">
          <el-button size="default" type="success" @click="handleDownload">导出</el-button>
          <import-button url="/school/main" @success="initData"></import-button>
          <el-button size="default" type="primary" @click="handleAddOrEdit()">添加</el-button>
          <el-button size="default" type="danger" @click="handleRemove()">删除</el-button>
        </div>
        <!-- <img src="/images/print.png" alt="" /> -->
      </div>
      <div class="tableList">
        <div class="tableDiv">
          <el-table ref="multipleTableRef" :data="tableData" height="100%" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="sm_name" width="200" label="学校名称" show-overflow-tooltip></el-table-column>

            <el-table-column property="sm_period" label="级别" />
            <el-table-column property="sm_lxr_contact" label="学校电话" />
            <el-table-column property="sm_address" label="学校地址" show-overflow-tooltip />
            <el-table-column label="学校风采" width="90">
              <template #default="scope">
                <el-button text size="default" type="primary" @click="lookDetail(scope.row.id)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="scope">
                <el-button text size="default" type="primary" @click="handleAddOrEdit(scope.row.id)">编辑</el-button>
                <span class="split">|</span>
                <el-button text size="default" type="primary" @click="handleRemove(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationDiv">
          <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :page-size="limit" :currentPage="currentPage"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog width="900px" v-model="dialogVisible" :title="dialogTitle" @close="handleClose" custom-class="commonDialog" :show-close="false" :close-on-click-modal="false">
      <add-and-edit v-if="dialogType==1" :periodData="periodData" :tinymceShow="dialogVisible" :current="currentSchoolId" @update="handleClose" @load="handleLoad"></add-and-edit>
      <detail v-if="dialogType==2" :current="currentSchoolId" @update="handleClose"></detail>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Request, { download } from "~/utils/request";
import type { FormInstance, UploadProps, UploadUserFile } from "element-plus";
import AddAndEdit from "./components/AddAndEdit.vue";
import Detail from "./components/Detail.vue";
import { schoolList, schoolDelete } from "./components/api.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { getFullUrl } from "~/utils/helper";
import { init } from "echarts";

const loading = ref(false);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  keyword: "",
  sm_period: "",
});

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  initData();
};

interface User {
  date: string;
  name: string;
  address: string;
}
const tableData = ref<User[]>([]);
const periodData = ref([]);

const total = ref(0);
const limit = ref(10);
const currentPage = ref(1);
function handleCurrentChange(val: number) {
  currentPage.value = val;
  initData();
}

initData("1");
async function initData(flag = "") {
  let obj = {
    limit: limit.value,
    page: currentPage.value,
    keyword: ruleForm.keyword,
    sm_period: ruleForm.sm_period,
  };
  loading.value = true;
  let data = await schoolList(obj);
  total.value = parseInt(data.total_rows);
  tableData.value = data.page_data;
  loading.value = false;

  if (flag == "1") {
    periodData.value = data.table_structure.field.sm_period.option;
  }
}

const dialogVisible = ref(false);
const dialogType = ref(0);
const dialogTitle = ref("");
const currentSchoolId = ref("");
function handleAddOrEdit(id: string) {
  dialogVisible.value = true;
  dialogType.value = 1;
  if (!id) {
    dialogTitle.value = "添加";
  } else {
    dialogTitle.value = "编辑";
    currentSchoolId.value = id;
  }
}

function lookDetail(id: string) {
  dialogVisible.value = true;
  dialogType.value = 2;
  currentSchoolId.value = id;
  dialogTitle.value = "查看";
}

function handleClose(type: number) {
  dialogVisible.value = false;
  currentSchoolId.value = "";
  if (type == 1) {
    initData();
  }
}

const handleRemove = async (id: string) => {
  if ((id == undefined || id == "") && multipleSelection.value.length == 0) {
    ElMessage.error("请选择要删除的数据！");
    return;
  }
  ElMessageBox.confirm("是否确定删除当前数据？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    buttonSize: "default",
  })
    .then(async () => {
      loading.value = true;
      if (id != undefined && id != "") {
        await schoolDelete({ id });
      } else {
        let arr: any[] = [];
        multipleSelection.value.map((item: any) => {
          arr.push(item.id);
        });
        await schoolDelete({ id: arr });
      }
      ElMessage.success("删除成功！");
      loading.value = false;
      initData();
    })
    .catch(() => {});
};

const multipleSelection = ref<User[]>([]);
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const handleDownload = () => {
  let arr: any = [];
  multipleSelection.value.map((value: any) => {
    arr.push(value.id);
  });
  let obj = {
    // limit: limit.value,
    // page: currentPage.value,
    keyword: ruleForm.keyword,
    sm_period: ruleForm.sm_period,
    checkedidstring: arr.join(","),
  };

  download("/school/main/index", obj);
};

const handleLoad = (val: boolean) => {
  loading.value = val;
};
</script>

<style lang="scss" scoped>
@import "~/styles/dialog.scss";
.schoolInfo-jd {
  height: calc(100vh - 50px - 2rem);
  .flex {
    display: flex;
    align-items: center;
  }
  .searchDiv {
    height: 62px;
    background: #fff;
    border-radius: 6px;
    // box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.1);
    // padding: 0 20px;
    .el-form-item::v-deep {
      margin-bottom: 0;
      .el-form-item__label {
        padding: 0;
      }
    }
  }
  .searchContent {
    margin-top: 12px;
    height: calc(100% - 62px - 12px);
    background: #fff;
    border-radius: 6px;
    // box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.1);
    // padding: 0 20px;
    .searchBtn {
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #e3e3e3;
      ::v-deep .el-button {
        height: 32px;
      }
    }
    .tableList {
      height: calc(100% - 52px - 10px);
      position: relative;
      .tableDiv {
        // background: #ddd;
        height: calc(100% - 42px);
        .el-button {
          padding: 0;
        }
        .split {
          color: #00a3ff;
          margin: 0 10px;
        }
      }
      .paginationDiv {
        position: absolute;
        bottom: -5px;
        padding: 3px;
        width: 100%;
        display: -webkit-box;
        -webkit-box-pack: end;
      }
    }
  }
}
</style>