<template>
  <div class="school-manage pg-main">
    <div class="pg-title">
      <span>学校管理</span>
    </div>
    <div class="pg-select-infos">
      <Form ref="user_query_form" :label-width="80" inline>
        <Row :gutter="20">
          <Col span="8">
            <FormItem label="学校" style="width: 100%">
              <Select v-model="query.schoolId" filterable clearable>
                <Option v-for="item in schools" :value="item.id" :key="item.id"
                  >{{ item.name }}
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <Button
              style="min-left: 10px"
              type="primary"
              icon="md-search"
              @click="filterSchool"
              >查询</Button
            >
            <Button
              type="primary"
              icon="md-refresh"
              :loading="loading"
              @click="toSyncSchool"
              >机构同步</Button
            >
          </Col>
        </Row>
      </Form>
    </div>
    <div class="pg-body">
      <Table
        ref="user_table"
        :columns="columns"
        :data="list"
        :stripe="true"
        :disabled-hover="true"
      ></Table>
    </div>

    <!-- SchoolSetDialog -->
    <school-set-dialog
      ref="SchoolSetDialog"
      :school="curRow"
    ></school-set-dialog>
  </div>
</template>

<script>
import { axios } from "../../libs/http";
import SchoolSetDialog from "./components/school-set-dialog.vue";

export default {
  name: "school-manage",
  components: { SchoolSetDialog },
  data() {
    return {
      query: {
        schoolId: null,
      },
      columns: [
        {
          type: "index",
          title: "序号",
          width: 80,
        },
        {
          title: "学校名称",
          key: "name",
          minWidth: 200,
        },
        {
          title: "学校code",
          key: "code",
          minWidth: 100,
        },
        {
          title: "accessKey",
          key: "accessKey",
          minWidth: 300,
        },
        {
          title: "accessSecret",
          key: "accessSecret",
          minWidth: 300,
        },
        {
          title: "操作",
          key: "show_more",
          align: "center",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    content: "配置",
                    placement: "top",
                  },
                },
                [
                  h(
                    "span",
                    {
                      style: {
                        cursor: "pointer",
                        padding: "0 10px",
                      },
                      on: {
                        click: () => {
                          this.toSet(params.row);
                        },
                      },
                    },
                    [
                      h(
                        "Icon",
                        {
                          props: {
                            size: "22",
                            type: "ios-settings",
                          },
                        },
                        ""
                      ),
                    ]
                  ),
                ]
              ),
            ]);
          },
        },
      ],
      schools: [],
      list: [],
      curRow: {},
      loading: false,
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      axios.post("/system/common/school/list", {}).then((response) => {
        let data = response.data.data;
        this.schools = data || [];
        this.list = this.schools;
      });
    },
    filterSchool() {
      if (!this.query.schoolId) {
        this.list = this.schools;
        return;
      }
      this.list = this.schools.filter(
        (item) => item.id === this.query.schoolId
      );
    },
    toSet(row) {
      this.curRow = row;
      this.$refs.SchoolSetDialog.open();
    },
    async toSyncSchool() {
      if (this.loading) return;
      this.loading = true;

      const res = await axios.post("/system/auth/sync/org").catch(() => {});
      this.loading = false;

      if (!res) return;

      this.$Message.success("同步成功");
      this.load();
    },
  },
};
</script>
