<template>

  <div class=" rounded-md mt-4   divide-y" v-loading="loading">
    <el-tabs v-model="tabType" :tab-position="tabPosition" class="demo-tabs">
      <div class=" h-full px-23px ">

        <el-tab-pane label="年级" name="first">
          <!-- <div class="btn pb-11px pt-23px mb-20px">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-button type="primary" @click="exportAll">导出</el-button>
            <import-button url="/txwx/jcxxgl_zyflgl_nj" @success="initGradeData">
              <template #text>批量导入</template>
            </import-button>
            <el-button type="danger" :disabled="multipleSelection1.length == 0" @click="handleMulRemove()">删除</el-button>
          </div> -->
          <el-table ref="ruleFormRef" :data="tableGradeData" @selection-change="handleSelectionChange1">
            <!-- <el-table-column type="selection" width="55" /> -->

            <el-table-column type="index" label="序号" width="400"></el-table-column>
            <el-table-column prop="tjzn_njmc" label="年级名称" width="auto" show-overflow-tooltip></el-table-column>

            <!-- <el-table-column label="操作" width="245">
              <template #default="scope">

                <el-button type="text" @click="handleDetail(scope.row.tjzn_id)">详情 |</el-button>
                <el-button type="text" @click="handleEdit(scope.row)">编辑 |</el-button>
                <el-button type="text" @click="handleRemove(scope.row.tjzn_id)">删除 </el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <div class="flex justify-end my-10">
            <el-pagination v-model:current-page="form_query.page" v-model:page-size="form_query.limit" layout="total,sizes, prev, pager, next, jumper" :total="totalGrade" :background="true" @current-change="initGradeData" :hide-on-single-page="false" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="班级" name="second">
          <!-- <div class="btn pb-11px pt-23px mb-20px">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-button type="primary" @click="exportAll">导出</el-button>
            <import-button url="/txwx/jcxxgl_zyflgl_bj" @success="initClassData">
              <template #text>批量导入</template>
            </import-button>
            <el-button type="danger" :disabled="multipleSelection2.length == 0" @click="handleMulRemove()">删除</el-button>
          </div> -->
          <el-table ref="ruleFormRef" :data="tableClassData" @selection-change="handleSelectionChange2">
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column type="index" label="序号" width="400"></el-table-column>
            <el-table-column prop="tjzb_bjmc" label="班级名称" width="auto" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="tjzn_njmc" label="所属年级" width="auto"></el-table-column> -->
            <!-- <el-table-column label="操作" width="245">
              <template #default="scope">
                <el-button type="text" @click="handleDetail(scope.row.tjzb_id)">详情 |</el-button>
                <el-button type="text" @click="handleEdit(scope.row)">编辑 |</el-button>
                <el-button type="text" @click="handleRemove(scope.row.tjzb_id)">删除 </el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <div class="flex justify-end my-10">
            <el-pagination v-model:current-page="form_query.page" v-model:page-size="form_query.limit" layout="total,sizes, prev, pager, next, jumper" :total="totalClass" :background="true" @current-change="initClassData" :hide-on-single-page="false" />
          </div>

        </el-tab-pane>
        <el-tab-pane label="学科" name="third">
          <div class="btn pb-11px pt-23px mb-20px">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-button type="primary" @click="exportAll">导出</el-button>
            <import-button url="/txwx/jcxxgl_zyflgl_xk" @success="initSubjectData">
              <template #text>批量导入</template>
            </import-button>
            <el-button type="danger" :disabled="multipleSelection3.length == 0" @click="handleMulRemove()">删除</el-button>
          </div>
          <el-table ref="ruleFormRef" :data="tableSubjectData" @selection-change="handleSelectionChange3">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="200"></el-table-column>
            <el-table-column prop="tjzx_xkmc" label="学科名称" width="auto" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="tjzn_njmc" label="所属年级" width="auto"></el-table-column> -->
            <el-table-column label="操作" width="245">
              <template #default="scope">

                <el-button type="text" @click="handleDetail(scope.row.tjzx_id)">详情 |</el-button>
                <el-button type="text" @click="handleEdit(scope.row)">编辑 |</el-button>
                <el-button type="text" @click="handleRemove(scope.row.tjzx_id)">删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="flex justify-end my-10">

            <el-pagination v-model:current-page="form_query.page" v-model:page-size="form_query.limit" layout="total,sizes, prev, pager, next, jumper" :total="totalSubject" :background="true" @current-change="initSubjectData" :hide-on-single-page="false" />
          </div>
        </el-tab-pane>
      </div>
    </el-tabs>
    <el-dialog v-model="dialogVisible" class="_" width="381" :title="title">
      <el-form class="table" ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
        <el-form-item v-if="tabType == 'first'" label="" prop="">
          <span>年级名称：</span>
          <el-input v-model="ruleForm.tjzn_njmc" type="text" />
        </el-form-item>
        <el-form-item v-if="tabType == 'second'" label="" prop="">
          <span>班级名称：</span>
          <el-input v-model="ruleForm.tjzb_bjmc" type="text" />
        </el-form-item>
        <el-form-item v-if="tabType == 'third'" label="" prop="">
          <span>学科名称：</span>
          <el-input v-model="ruleForm.tjzx_xkmc" type="text" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="flex_center space-x-12">
          <el-button size="large" @click="handleFormCancel">取消</el-button>
          <el-button size="large" type="primary" @click="handleSubmit(ruleFormRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="detailDialogVisible" class="_" width="381" title="详情">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right">

        <div v-if="tabType=='first'">
          <el-form-item label="年级名称：" prop="">
            <span>{{detailInfo1.tjzn_njmc}}</span>
          </el-form-item>
          <el-form-item label="创建时间：" prop="">
            <span>{{detailInfo1.create_dateline}}</span>
          </el-form-item>
          <el-form-item label="创建人：" prop="">
            <span>{{detailInfo1.tjzn_cjr}}</span>
          </el-form-item>
          <el-form-item label="创建人ID：" prop="">
            <span>{{detailInfo1.create_user_id}}</span>
          </el-form-item>
          <el-form-item label="创建人账号：" prop="">
            <span>{{detailInfo1.tjzn_cjrzh}}</span>
          </el-form-item>
        </div>
        <div v-if="tabType=='second'">
          <el-form-item label="班级名称：" prop="">
            <span>{{detailInfo2.tjzb_bjmc}}</span>
          </el-form-item>
          <el-form-item label="创建时间：" prop="">
            <span>{{detailInfo2.create_dateline}}</span>
          </el-form-item>
          <el-form-item label="创建人：" prop="">
            <span>{{detailInfo2.tjzb_cjr}}</span>
          </el-form-item>
          <el-form-item label="创建人ID：" prop="">
            <span>{{detailInfo2.create_user_id}}</span>
          </el-form-item>
          <el-form-item label="创建人账号：" prop="">
            <span>{{detailInfo2.tjzb_cjrzh}}</span>
          </el-form-item>
        </div>
        <div v-if="tabType=='third'">
          <el-form-item label="学科名称：" prop="">
            <span>{{detailInfo3.tjzx_xkmc}}</span>
          </el-form-item>
          <el-form-item label="创建时间：" prop="">
            <span>{{detailInfo3.create_dateline}}</span>
          </el-form-item>
          <el-form-item label="创建人：" prop="">
            <span>{{detailInfo3.tjzx_cjr}}</span>
          </el-form-item>
          <el-form-item label="创建人ID：" prop="">
            <span>{{detailInfo3.create_user_id}}</span>
          </el-form-item>
          <el-form-item label="创建人账号：" prop="">
            <span>{{detailInfo3.tjzx_cjrzh}}</span>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="flex_center space-x-12">
          <el-button size="large" type="primary" @click="handleFormCancel">返回</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { user } from '@/store/index'
import { grade_list, class_list, subject_list, grade_add, class_add, subject_add, grade_edit, class_edit, subject_edit, grade_del, class_del, subject_del, grade_detail, class_detail, subject_detail } from './api'
let tabType = $ref('first')
const ruleFormRef = ref(null);
const loading = ref(false);


let form_query = $ref({
  page: 1,
  limit: 6,
});

let tableGradeData = $ref([]);
let tableClassData = $ref([]);
let tableSubjectData = $ref([]);
//勾选
let multipleSelection1 = $ref([])
let multipleSelection2 = $ref([])
let multipleSelection3 = $ref([])

let handleSelectionChange1 = (val) => {
  multipleSelection1 = [];
  val.forEach((i) => {
    multipleSelection1.push(i.tjzn_id);
  });
};
let handleSelectionChange2 = (val) => {
  multipleSelection2 = [];
  val.forEach((i) => {
    multipleSelection2.push(i.tjzb_id);
  });
};
let handleSelectionChange3 = (val) => {
  multipleSelection3 = [];
  val.forEach((i) => {
    multipleSelection3.push(i.tjzx_id);
  });
};
let dialogVisible = ref(false)
let detailDialogVisible = ref(false)
//列表
let totalGrade = $ref()
function initGradeData() {
  let data = {
    ...form_query,
  };
  loading.value = true;
  grade_list(data).then((res) => {
    if (res.code === '1') {
      tableGradeData = res.data.page_data
      totalGrade = res.data.total_rows * 1
      page = Number(res.data.page_now);
      loading.value = false;
    }
  })
}
initGradeData()
let totalClass = $ref()
let page = $ref()
function initClassData() {
  let data = {
    ...form_query,
  };
  loading.value = true;
  class_list(data).then((res) => {
    if (res.code === '1') {
      tableClassData = res.data.page_data
      totalClass = res.data.total_rows * 1
      page = Number(res.data.page_now);
      loading.value = false;
    }
  })
}
initClassData()
let totalSubject = $ref()
function initSubjectData() {
  let data = {
    ...form_query,
  };
  loading.value = true;
  subject_list(data).then((res) => {
    if (res.code === '1') {
      tableSubjectData = res.data.page_data
      totalSubject = res.data.total_rows * 1
      page = Number(res.data.page_now);
      loading.value = false;
    }
  })
}
initSubjectData()
function handleFormCancel() {
  dialogVisible.value = false
  detailDialogVisible.value = false
}
const currentId1 = $ref("");
const currentId2 = $ref("");
const currentId3 = $ref("");
const ruleForm = $ref({});
const title = $ref("");
const isEdit = ref(false);

function handleAdd() {
  title = "新增"
  isEdit.value = false
  ruleForm = {
    grade_id: "",
    tjzn_njmc: "",
    class_id: "",
    tjzb_bjmc: "",
    subject_id: "",
    tjzx_xkmc: "",

  }
  dialogVisible.value = true
}
function handleEdit(row) {
  console.log(row, 122222222222222222222222);
  dialogVisible.value = true
  title = "编辑";
  isEdit.value = true;
  currentId1 = row.tjzn_id;
  currentId2 = row.tjzb_id;
  currentId3 = row.tjzx_id;
  ruleForm.grade_id = row.grade_id;
  ruleForm.tjzn_njmc = row.tjzn_njmc;
  ruleForm.class_id = row.class_id;
  ruleForm.tjzb_bjmc = row.tjzb_bjmc;
  ruleForm.subject_id = row.subject_id;
  ruleForm.tjzx_xkmc = row.tjzx_xkmc;


}
let detailInfo1 = $ref({})
let detailInfo2 = $ref({})
let detailInfo3 = $ref({})
function handleDetail(id) {
  detailDialogVisible.value = true
  if (tabType == "first") {
    let data1 = {
      tjzn_id: id
    };
    grade_detail(data1).then((res) => {
      if (res.code == 1) {
        detailInfo1 = res.data.one_info;

      }
    });
  } else if (tabType == "second") {
    let data2 = {
      tjzb_id: id
    };
    class_detail(data2).then((res) => {
      if (res.code == 1) {
        detailInfo2 = res.data.one_info;

      }
    });
  } else {
    let data3 = {
      tjzx_id: id
    };
    subject_detail(data3).then((res) => {
      if (res.code == 1) {
        detailInfo3 = res.data.one_info;


      }
    });
  }
}
let importVisible = $ref(false);

// 批量删除
function handleMulRemove() {
  ElMessageBox.confirm("确认删除这些数据?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      if (tabType == "first") {
        let data1 = { tjzn_id: multipleSelection1 }
        grade_del(data1).then((res) => {
          loading.value = false;
          if (res.code == 1) {
            ElMessage({
              message: "删除成功",
              type: "success",
            });

            initGradeData();
          } else {
            ElMessage({
              message: res.msg,
              type: "error",
            });
          }
        });
      }
      else if (tabType == "second") {
        let data2 = { tjzb_id: multipleSelection2 }
        class_del(data2).then((res) => {
          loading.value = false;
          if (res.code == 1) {
            ElMessage({
              message: "删除成功",
              type: "success",
            });

            initClassData();
          } else {
            ElMessage({
              message: res.msg,
              type: "error",
            });
          }
        });
      } else {
        let data3 = { tjzx_id: multipleSelection3 }
        subject_del(data3).then((res) => {
          loading.value = false;
          if (res.code == 1) {
            ElMessage({
              message: "删除成功",
              type: "success",
            });
            initSubjectData();
          } else {
            ElMessage({
              message: res.msg,
              type: "error",
            });
          }
        });
      }
    })
    .catch(() => {

    });
}
// 单个删除
function handleRemove(id) {
  ElMessageBox.confirm("是否确定删除当前数据？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",

  }).then(() => {
    if (tabType == "first") {
      let data1 = { tjzn_id: id }
      grade_del(data1).then((res) => {
        loading.value = false;
        if (res.code == 1) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });

          initGradeData();
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    }
    else if (tabType == "second") {
      let data2 = { tjzb_id: id }
      class_del(data2).then((res) => {
        loading.value = false;
        if (res.code == 1) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });

          initClassData();
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    } else {
      let data3 = { tjzx_id: id }
      subject_del(data3).then((res) => {
        loading.value = false;
        if (res.code == 1) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });

          initSubjectData();
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    }
  })
    .catch(() => { });
}
//
function exportAll() {
  if (tabType == "first") {
    let ids = multipleSelection1.join(",");
    let link =
      window.GLOBAL_CONFIG.api +
      "/txwx/jcxxgl_zyflgl_nj/index?api=xls&page=1&limit=10000&token=" +
      user.value.token +
      "&tjzn_id=" + ids;

    window.open(link, "_blank");
  } else if (tabType == "second") {
    let ids = multipleSelection2.join(",");
    let link =
      window.GLOBAL_CONFIG.api +
      "/txwx/jcxxgl_zyflgl_bj/index?api=xls&page=1&limit=10000&token=" +
      user.value.token +
      "&tjzb_id=" + ids;

    window.open(link, "_blank");
  } else {
    let ids = multipleSelection3.join(",");
    let link =
      window.GLOBAL_CONFIG.api +
      "/txwx/jcxxgl_zyflgl_xk/index?api=xls&page=1&limit=10000&token=" +
      user.value.token +
      "&tjzx_id=" + ids;

    window.open(link, "_blank");
  }

}
//提交
const handleSubmit = async (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      //年级
      let obj1 = {

        grade_id: ruleForm.grade_id,
        tjzn_njmc: ruleForm.tjzn_njmc,
        tjzn_cjr: user.value.user_realname,
        tjzn_cjrzh: user.value.user_name
      };
      const data1 = {
        txwx_jcxxgl_zyflgl_nj: obj1,
      };
      //班级
      let obj2 = {
        class_id: ruleForm.class_id,
        tjzb_bjmc: ruleForm.tjzb_bjmc,
        tjzb_cjr: user.value.user_realname,
        tjzb_cjrzh: user.value.user_name
      };
      const data2 = {
        txwx_jcxxgl_zyflgl_bj: obj2,
      };
      //学科
      let obj3 = {
        subject_id: ruleForm.subject_id,
        tjzx_xkmc: ruleForm.tjzx_xkmc,
        tjzx_cjr: user.value.user_realname,
        tjzx_cjrzh: user.value.user_name
      };
      const data3 = {
        txwx_jcxxgl_zyflgl_xk: obj3,
      };
      if (!isEdit.value) {
        if (tabType == "first") {
          grade_add(data1).then((res) => {
            loading.value = false;
            if (res.code == 1) {
              ElMessage({
                message: "添加成功",
                type: "success",
              });
              dialogVisible.value = false;
              initGradeData();
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
        else if (tabType == "second") {
          class_add(data2).then((res) => {
            loading.value = false;
            if (res.code == 1) {
              ElMessage({
                message: "添加成功",
                type: "success",
              });
              dialogVisible.value = false;
              initClassData();
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
              });
            }
          });
        } else {
          subject_add(data3).then((res) => {
            loading.value = false;
            if (res.code == 1) {
              ElMessage({
                message: "添加成功",
                type: "success",
              });
              dialogVisible.value = false;
              initSubjectData();
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      } else {
        if (tabType == "first") {
          data1.tjzn_id = currentId1;

          grade_edit(data1).then((res) => {
            loading.value = false;
            if (res.code == 1) {
              ElMessage({
                message: "编辑成功",
                type: "success",
              });
              dialogVisible.value = false;
              initGradeData();
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
        else if (tabType == "second") {
          data2.tjzb_id = currentId2;

          class_edit(data2).then((res) => {
            loading.value = false;
            if (res.code == 1) {
              ElMessage({
                message: "编辑成功",
                type: "success",
              });
              dialogVisible.value = false;
              initClassData();
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
              });
            }
          });
        } else {
          data3.tjzx_id = currentId3;

          subject_edit(data3).then((res) => {
            loading.value = false;
            if (res.code == 1) {
              ElMessage({
                message: "编辑成功",
                type: "success",
              });
              dialogVisible.value = false;
              initSubjectData();
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      }




    } else {
      console.log("error submit!", fields);
    }
  });
}
</script>
<style lang="scss" scoped>
.btn {
  border-bottom: 1px solid #e3e3e3;
}
:deep() .el-tabs__header {
  height: 51px;
  background: #ffffff;
  border-radius: 6px;
  padding: 0 23px;
}
:deep() .el-tabs__content {
  background: #ffffff;
  border-radius: 6px;
}
:deep() .el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #f3f3f3;
  z-index: var(--el-index-normal);
}
.search {
  height: 72px;
  line-height: 85px;
  padding: 0 29px;
}
:deep() .el-tabs__item.is-active {
  color: #00a3ff;
}

.table {
  :deep() .el-input {
    width: 160px;
  }
}
:deep() .el-dialog__body {
  padding-left: 60px;
  border-top: 1px solid #f3f3f3;
}
</style>