<script setup>
import { reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { class_edit, class_list, grade_edit, grade_list, subject_edit, subject_list } from './api'
const loading = ref(false)
const tabPosition = ref('left')
const dialogForm = reactive({
  grade_name: '',
},

)
const subjectColumnData = ref([
  {
    name: '编号',
    key: 'id',
  },
  {
    name: '学科名称',
    key: 'name',
  },
  {
    name: '所属年级',
    key: 'address',
  },
])
const gradeColumnData = ref([
  {
    name: '编号',
    key: 'id',
  },
  {
    name: '年级名称',
    key: 'name',
  },
])
const classColumnData = ref([
  {
    name: '编号',
    key: 'id',
  },
  {
    name: '班级名称',
    key: 'name',
  },
  {
    name: '所属年级',
    key: 'address',
  },
])
const subjectTableData = ref([
  {
    id: '1',
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: '2',
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const gradeTableData = ref([
  {
    id: '1',
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: '2',
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const classTableData = ref([
  {
    id: '1',
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: '2',
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const checkGrades = ref([

])
const grades = ref([
  {
    grade_id: '1',
    grade_name: '小班',
  },
  {
    grade_id: '2',
    grade_name: '中班',
  },
  {
    grade_id: '3',
    grade_name: '大班',
  },
  {
    grade_id: '4',
    grade_name: '一年级',
  },
  {
    grade_id: '5',
    grade_name: '二年级',
  },
  {
    grade_id: '6',
    grade_name: '三年级',
  },
  {
    grade_id: '7',
    grade_name: '四年级',
  },
  {
    grade_id: '8',
    grade_name: '五年级',
  },
  {
    grade_id: '9',
    grade_name: '六年级',
  }, {
    grade_id: '10',
    grade_name: '初一',
  }, {
    grade_id: '11',
    grade_name: '初二',
  },
  {
    grade_id: '12',
    grade_name: '初三',
  },
  {
    grade_id: '13',
    grade_name: '高一',
  }, {
    grade_id: '14',
    grade_name: '高二',
  }, {
    grade_id: '15',
    grade_name: '高三',
  },
])
const labelPosition = ref('top')
const title = ref('')
const keyword = ref('')
const dialogVisible = ref(false)
const tinymceShow = ref(false)
const total = ref(0)
const limit = ref(10)
const currentPage = ref(1)
initData(1)
function initData() {
  const data = {
    limit: limit.value,
    page: currentPage.value,
    site: 'tyyx',
  }
  loading.value = true
  subject_list(data).then((res) => {
    total.value = parseInt(data.total_rows)
    subjectTableData.value = data.page_data
    loading.value = false
  })
}
function handleAdd(data) {
  dialogVisible.value = true
}
function handleEdit(row) {
  dialogVisible.value = true
}
function handleDelete(row) {
  ElMessageBox.confirm(
    '是否删除该信息？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      center: true,
      customClass: '_',
      buttonSize: 'large',
    },
  )
    .then(() => {

    })
    .catch(() => {

    })
}
function upload() {

}
function handleFormCancel() {
  dialogVisible.value = false
}
function handleFormSubmit() {
  handleFormCancel()
}
const tabType = ref('first')
const checkAll = ref(false)
const isIndeterminate = ref(true)
const grageIds = ref([])
grades.value.map((item) => {
  grageIds.value.push(item.grade_id)
})
const handleCheckAllChange = (val) => {
  console.log(val, checkGrades.value, grades.value, 123)
  checkGrades.value = val ? grageIds.value : []
  isIndeterminate.value = false
}
const handleCheckedGradesChange = (value) => {
  console.log(value, checkAll.value, grades.value.length, isIndeterminate.value)
  const checkedCount = value.length
  checkAll.value = checkedCount === grades.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < grades.value.length
}
</script>

<template>
  <div class=" mt-7">
    <el-tabs v-model="tabType" :tab-position="tabPosition" class="demo-tabs">
      <div class="card h-full">
        <div class="flex justify-between mt-5 mb-7">
          <div>
            <el-button class="_" type="primary">
              批量导入
            </el-button>
            <!-- <el-button class="_" type="primary" @click="handleAdd">
              新增
            </el-button> -->
          </div>
          <div class="flex">
            <el-button class="_" type="danger">
              删除
            </el-button>
          </div>
        </div>
        <el-tab-pane label="学科设置" name="first">
          <table-column :column-data="subjectColumnData" :detail-btn="false" :delete-btn="false" :table-data="subjectTableData" @select="handleSelect" @edit="handleEdit" />
          <div class="paginationDiv mt-40px">
            <el-pagination background layout="total, prev, pager, next" :total="total" :page-size="limit" :current-page="currentPage" @current-change="handleCurrentChange" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="年级设置" name="second">
          <table-column :column-data="gradeColumnData" :detail-btn="false" :delete-btn="false" :table-data="gradeTableData" @select="handleSelect" @edit="handleEdit" />
          <div class="paginationDiv mt-40px">
            <el-pagination background layout="total, prev, pager, next" :total="total" :page-size="limit" :current-page="currentPage" @current-change="handleCurrentChange" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="班级设置" name="third">
          <table-column :column-data="classColumnData" :detail-btn="false" :delete-btn="false" :table-data="classTableData" @select="handleSelect" @edit="handleEdit(row)" />
          <div class="paginationDiv mt-40px">
            <el-pagination background layout="total, prev, pager, next" :total="total" :page-size="limit" :current-page="currentPage" @current-change="handleCurrentChange" />
          </div>
        </el-tab-pane>
      </div>
    </el-tabs>
    <el-dialog v-model="dialogVisible" class="_" width="680" title="新增/编辑">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
        <el-form-item v-if="tabType == 'first'" label="学科名称" prop="">
          <el-input v-model="keyword" type="text" />
        </el-form-item>

        <el-form-item v-if="tabType == 'second'" label="年级名称" prop="">
          <el-input v-model="keyword" type="text" />
        </el-form-item>
        <el-form-item v-if="tabType == 'third'" label="班级名称" prop="">
          <el-input v-model="keyword" type="text" />
        </el-form-item>
        <el-form-item v-if="tabType != 'second'" label="所属年级" prop="">
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
            全部
          </el-checkbox>
          <el-checkbox-group v-model="checkGrades" class="grid grid-cols-3" @change="handleCheckedGradesChange">
            <el-checkbox v-for="item in grades" :key="item.grade_id" :label="item.grade_id">
              {{ item.grade_name }}
            </el-checkbox>
          </el-checkbox-group>
        </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="handleFormSubmit">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
@use "~/styles/button.scss";
@use "~/styles/input-search.scss";
@use "~/styles/table.scss";
@use "~/styles/message-box.scss";
@use "~/styles/dialog.scss";
:deep() .el-dialog__body {
  padding: 30px 200px;
}
:deep() .el-form-item__content {
  display: block;
  width: 290px;
}
:deep() .el-input {
  width: 240px;
}
:deep() .el-input__wrapper {
  width: 240px;
  height: 40px;
  box-shadow: none;
  background: #f7f7f7;
  border-radius: 8px;
}
:deep() .el-checkbox__label,
:deep() .el-form-item__label {
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #3f3f44;
}
:deep() .el-tabs {
  margin-top: 25px;
}
:deep() .el-input .el-input__count .el-input__count-inner {
  background: none;
}
:deep() .el-tabs--left .el-tabs__header.is-left {
  width: 158px;
  height: 785px;
  background: #ffffff;
  border-radius: 13px 13px 13px 34px;
  border: none;
}
:deep() .el-tabs__content {
  background: #ffffff;
  border-radius: 13px 13px 13px 34px;
  padding: 0 12px;
}
:deep() .el-tabs--left .el-tabs__item.is-left {
  text-align: center;
}
:deep() .el-tabs--left .el-tabs__header.is-left {
  margin-right: 25px;
}
:deep() .el-tabs__active-bar {
  background: none;
}
:deep() .el-tabs--left .el-tabs__nav-wrap.is-left::after {
  display: none;
}
:deep() .el-tabs__item.is-active {
  color: #3f8cff;
}
:deep() .el-checkbox.el-checkbox--large .el-checkbox__inner,
:deep() .el-checkbox__inner {
  width: 20px;
  height: 20px;
  border: 1px solid #8f95b2;
  border-radius: 4px;
}
:deep() .el-checkbox__inner::after {
  box-sizing: content-box;
  content: "";
  border: 2px solid var(--el-checkbox-checked-icon-color);
  border-left: 0;
  border-top: 0;
  height: 10px;
  left: 7px;
  position: absolute;
  top: 2px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 50ms;
  transform-origin: center;
}
:deep() .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  top: 8px;
}
</style>
