<template>
  <div class="school-menu-manage">
    <div class="part-box part-box-filter part-box-flex">
      <el-form ref="FilterForm" label-position="left" inline>
        <el-form-item label="学校：">
          <school-select
            v-model="schoolId"
            placeholder="请选择学校"
            :clearable="false"
            style="width: 100%"
            @change="search"
          ></school-select>
        </el-form-item>
      </el-form>
      <div class="part-box-action">
        <el-button
          type="primary"
          :disabled="fetching"
          :loading="loading"
          @click="save"
          >保存</el-button
        >
      </div>
    </div>

    <div class="part-box part-box-pad">
      <el-form class="mb-2" label-width="80px">
        <el-form-item label="用户/密码模式是否开启短信验证" label-width="225px">
          <el-switch v-model="modalForm.accountSmsVerify"> </el-switch>
        </el-form-item>
        <el-form-item label="PDF格式">
          <el-select
            v-model="modalForm.pdfSize"
            placeholder="请选择"
            multiple
            style="width: 100%"
          >
            <el-option
              v-for="item in sysPdfSize"
              :key="item"
              :value="item"
              :label="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <privilege-set
        v-if="menus && menus.length"
        ref="PrivilegeSet"
        :menus="menus"
      ></privilege-set>
    </div>
  </div>
</template>

<script>
import {
  schoolMenuTree,
  schoolSelectedMenuTree,
  updateSchoolMenu,
} from "../api";
import PrivilegeSet from "../../base/components/PrivilegeSet";

export default {
  name: "school-menu-manage",
  components: { PrivilegeSet },
  data() {
    return {
      schoolId: "",
      menus: [],
      loading: false,
      fetching: false,
      sysPdfSize: [],
      modalForm: {
        pdfSize: [],
        accountSmsVerify: false,
      },
      defaultProps: {
        label: "name",
      },
    };
  },
  mounted() {
    this.getPrivileges();
  },
  methods: {
    async getPrivileges() {
      const needHideModules = ["common", "customer"];
      const data = await schoolMenuTree();
      const menus = data.customPrivilegeList || [];
      this.sysPdfSize = data.sysPdfSize || [];

      this.menus = menus
        .filter((item) => !needHideModules.includes(item.url))
        .map((item) => {
          item.parentId = null;
          return item;
        });

      this.$nextTick(() => {
        this.$refs.PrivilegeSet.buildTableData([]);
      });
    },
    async search() {
      if (!this.schoolId) return;
      this.fetching = true;
      const data = await schoolSelectedMenuTree(this.schoolId).catch(() => {});
      this.fetching = false;

      this.modalForm.pdfSize = data.pdfSize || [...this.sysPdfSize];
      this.modalForm.accountSmsVerify = data.accountSmsVerify;
      const privilegeIds = data.privilegeIdList || [];
      const dataPermissionInfo = data.dataPermissionInfo || [];
      this.$refs.PrivilegeSet.buildTableData(privilegeIds, dataPermissionInfo);
    },
    async save() {
      if (!this.schoolId) {
        this.$message.error("学校必须选择！");
        return;
      }
      if (!this.modalForm.pdfSize.length) {
        this.$message.error("PDF格式必须选择！");
        return;
      }
      if (this.loading) return;

      this.loading = true;
      const { privilegeIds, dataPermissionInfo } =
        this.$refs.PrivilegeSet.getSelectedPrivileges();
      const res = await updateSchoolMenu({
        schoolId: this.schoolId,
        privilegeIds,
        dataPermissionInfo,
        ...this.modalForm,
      }).catch(() => {});
      this.loading = false;
      if (!res) return;

      this.$message.success("修改成功！");
    },
  },
};
</script>
