<template>
  <div class="">
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >{{ schoolName }}</el-checkbox
    >
    <div style="margin: 15px 0"></div>
    <el-checkbox-group v-model="isCheckedIds" @change="handleCheckedIdsChange">
      <el-checkbox
        v-for="item in listData"
        :label="item.grade_id"
        :key="item.grade_id"
        >{{ item.grade_name }}</el-checkbox
      >
    </el-checkbox-group>
    <div class="fixed">
      <el-button type="primary" @click="formSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { njgl_list, njgl_save } from "./api";
import { useUserStore } from "@/stores/user";
const { token, user_org } = useUserStore();

export default {
  data() {
    return {
      checkAll: false,

      isIndeterminate: true,
      schoolId: "",
      schoolName: "",
      listData: [],
      isCheckedIds: [],
    };
  },
  methods: {
    getListData() {
      let data = {};
      njgl_list(data).then((res) => {
        if (res.code == 1) {
          this.listData = res.data.grade;
          this.isCheckedIds = [];
          this.listData.map((item) => {
            if (item.is_set == "1") {
              this.isCheckedIds.push(item.grade_id);
            }
          });
       
        }
      });
    },

    handleCheckAllChange(val) {
      console.log(val, "handleCheckAllChange");
      this.isCheckedIds = val
        ? this.listData.map(({ grade_id }) => grade_id)
        : [];
      console.log(this.isCheckedIds, val);
      this.isIndeterminate = false;
    },
    handleCheckedIdsChange(value) {
      console.log(value, "handleCheckedIdsChange", this.isCheckedIds);
      let checkedCount = value.length;
      console.log(checkedCount, 222);
      this.checkAll = checkedCount === this.listData.length;
      console.log(this.checkAll, 5555);
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.listData.length;
      console.log(this.isIndeterminate, 35555);
    },
    formSubmit() {
      let data = {
        site: "jnmf",
        issubmit: "1",
        dept_id: this.schoolId,
        grade_ids: this.isCheckedIds.join(","),
      };
      console.log(data, 444444444);
      njgl_save(data).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: "保存成功成功！",
            type: "success",
          });
        }
        this.getListData();
      });
    },
  },
  mounted() {
    if (user_org) {
      user_org.map((item) => {
        if (item.uo_type === "2") {
          this.schoolId = item.uo_id;
          this.schoolName = item.uo_name;
        }
      });
    }
    this.getListData();
  },
};
</script>

<style scoped>
div.fixed {
  position: fixed;
  bottom: 80px;
  left: 50%;
}

::v-deep .el-checkbox {
  width: 100%;
  height: 25px;

  /* margin-left: 0px; */
}
::v-deep.el-checkbox-group {
  margin-left: 20px;
}
</style>