<script setup>
import {
  showConfirmDialog,
  showSuccessToast,
  showFailToast,
  showToast,
} from "vant";
const router = useRouter();
import { user } from "~/store";
const { currentRoute } = useRouter();
const route = currentRoute.value;

 let user_role_id=user.value.user_role_id
const onClickLeft = () => history.back();
let loading = $ref(false);
let detailData = $ref({});
// 添加
let officeData = $ref([
  {
    grade_id: "",
    grade_name: "",
    class_id: "",
    class_name: "",
    xueke_id: "",
    xueke_name: "",
  },
]);
const onLoad = async (data) => {
  loading = true;
  let res = await request({
    url: "/user/main/user_info",
    data: {
      user_id: user.value.user_id,
    },
  });
  if (res.code === "1") {
    let m = res.data.ext.ue_jbxx_tea_rzxx;
    if (m != "" && m != null && m != undefined) {
      officeData = JSON.parse(m);
    }
    loading = false;
  }
};
onLoad();

//年级列表
let tableGradeData = $ref([]);
const initGradeData = async (data) => {
  loading = true;
  let res = await request({
    url: "/txwx/jcxxgl_zyflgl_nj/index",
    data: { limit: 100 },
  });
  if (res.code == 1) {
    tableGradeData = [];
    res.data.page_data.map((item) => {
      tableGradeData.push({ text: item.tjzn_njmc, value: item.tjzn_id });
    });
    loading = false;
  }
};

//班级列表
let tableClassData = $ref([]);
const initClassData = async (data) => {
  loading = true;
  let res = await request({
    url: "/txwx/jcxxgl_zyflgl_bj/index",
    data: { limit: 100 },
  });
  if (res.code == 1) {
    tableClassData = [];
    res.data.page_data.map((item) => {
      tableClassData.push({ text: item.tjzb_bjmc, value: item.tjzb_id });
    });
    loading = false;
  }
};

//学科列表
let tableSubjectData = $ref([]);
const initSubjectData = async (data) => {
  loading = true;
  let res = await request({
    url: "/txwx/jcxxgl_zyflgl_xk/index",
    data: { limit: 300 },
  });
  if (res.code == 1) {
    tableSubjectData = [];
    res.data.page_data.map((item) => {
      tableSubjectData.push({ text: item.tjzx_xkmc, value: item.tjzx_id });
    });
    loading = false;
  }
};

await initGradeData();
await initClassData();
await initSubjectData();
let columns = [tableGradeData, tableClassData, tableSubjectData];
const showPicker = ref(false);
const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  officeData.push({
    grade_id: selectedOptions[0].value,
    grade_name: selectedOptions[0].text,
    class_id: selectedOptions[1].value,
    class_name: selectedOptions[1].text,
    xueke_id: selectedOptions[2].value,
    xueke_name: selectedOptions[2].text,
  });
  let a = [];
  officeData.forEach((item) => {
    let b = {};
    if (!item.grade_id || !item.class_id || !item.xueke_id) {
      flag = true;
    } else {
      b = {
        grade_id: item.grade_id,
        grade_name: item.grade_name,
        class_id: item.class_id,
        class_name: item.class_name,
        xueke_id: item.xueke_id,
        xueke_name: item.xueke_name,
      };
    }
    a.push(b);
  });
  request({
    url: "/user/main/edit",
    data: {
      user_id: user.value.user_id,
      user_main: {
        ue_jbxx_tea_rzxx: JSON.stringify(a),
      },
    },
  }).then((res) => {
    if (res.code == 1) {
      showSuccessToast("操作成功");
      onLoad();
    } else {
      showFailToast(res.msg);
    }
  });
};
// 单个删除
function deleteOffice(index) {
  officeData.splice(index, 1);
  let a = [];
  officeData.forEach((item) => {
    let b = {};
    if (!item.grade_id || !item.class_id || !item.xueke_id) {
      flag = true;
    } else {
      b = {
        grade_id: item.grade_id,
        grade_name: item.grade_name,
        class_id: item.class_id,
        class_name: item.class_name,
        xueke_id: item.xueke_id,
        xueke_name: item.xueke_name,
      };
    }
    a.push(b);
  });
  request({
    url: "/user/main/edit",
    data: {
      user_id: user.value.user_id,
      user_main: {
        ue_jbxx_tea_rzxx: JSON.stringify(a),
      },
    },
  }).then((res) => {
    if (res.code == 1) {
      showSuccessToast("操作成功");
      onLoad();
    } else {
      showFailToast(res.msg);
    }
  });
}
let checked = $ref([]);
let newData = $ref([]);
function handleChange(val, i) {
  newData = officeData.filter(
    (a) =>
      !checked.some(
        (b) =>
          a.grade_id == b.grade_id &&
          a.class_id == b.class_id &&
          a.xueke_id == b.xueke_id
      )
  );
}
// 批量删除
function handleMulDelete() {
  if (checked.length == 0) {
    showToast("请先选择数据！");
    return;
  }
  let a = [];
  newData.forEach((item) => {
    let b = {};
    if (!item.grade_id || !item.class_id || !item.xueke_id) {
      flag = true;
    } else {
      b = {
        grade_id: item.grade_id,
        grade_name: item.grade_name,
        class_id: item.class_id,
        class_name: item.class_name,
        xueke_id: item.xueke_id,
        xueke_name: item.xueke_name,
      };
    }
    a.push(b);
  });
  showConfirmDialog({
    title: "提示",
    message: "确认删除这些任教信息?",
  }).then(() => {
    request({
      url: "/user/main/edit",
      data: {
        user_id: user.value.user_id,
        user_main: {
          ue_jbxx_tea_rzxx: JSON.stringify(a),
        },
      },
    }).then((res) => {
      if (res.code == 1) {
        showSuccessToast("操作成功");
        onLoad();
      } else {
        showFailToast(res.msg);
      }
    });
  });
}
</script>

<template>
  <div>
    <van-nav-bar title="任教信息" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" color="#323233" size="20px"></van-icon>
      </template>
      <template #right>
        <span class="text-hex-154A9A" @click="showPicker = true">添加</span>
        <span class="ml-30px text-hex-E63333" @click="handleMulDelete"
          >删除</span
        >
      </template>
    </van-nav-bar>
    <van-checkbox-group class="pl-20px" v-model="checked" v-if="officeData.length>0">
      <van-checkbox
        v-for="(item, i) in officeData"
        :key="i"
        :name="item"
        @click="handleChange(item, i)"
      >
        <van-swipe-cell>
          <van-cell is-link>
            <div class="flex justify-between">
              <div class="text-left text-hex-333">任教信息</div>
              <div class="w-max-2/3 text-hex-333 truncate">
                {{ item.grade_name }} {{ item.class_name }} {{
                  item.xueke_name
                }}
              </div>
            </div>
          </van-cell>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="deleteOffice(i)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>
     <van-empty v-else image-size="100" description="暂无数据" />
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
        title="任教信息"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<style lang="scss" scoped>
.delete-button {
  height: 100%;
}
:deep(.van-checkbox__label) {
  width: 100%;
}
:deep(.van-cell) {
  padding: 18.5px 20px 14px 0;
}
</style>
