<template>
  <div>
    <el-card shadow="never" style="margin-top: 20px">
      <template #header>
        <slot name="header">
          <vxe-toolbar :print="isHasAuth('print')" custom ref="toolbar">
            <template #toolSuffix>
              <vxe-button
                style="margin-right: 10px"
                v-if="isHasAuth('export')"
                icon="vxe-icon-download"
                circle
                @click="exportMethod"
              ></vxe-button>
            </template>
            <template #buttons>
              <el-button
                v-if="isHasAuth('create')"
                icon="el-icon-plus"
                type="primary"
                size="small"
                @click="isShowAdd = true"
                >新增</el-button
              >
              <el-button
                v-if="isHasAuth('search')"
                icon="el-icon-search"
                type="primary"
                plain
                size="small"
                @click="getList"
                >搜索</el-button
              >
            </template>
          </vxe-toolbar>
        </slot>
      </template>

      <vxe-table
        ref="table"
        stripe
        style="margin-top: 10px"
        :loading="loading"
        :height="tableHeight"
        keep-source
        show-overflow
        :menu-config="{
          className: 'my-menus',
          body: {
            options: [
              [
                {
                  code: 'copy',
                  name: '复制',
                  prefixConfig: { icon: 'vxe-icon-copy' },
                  suffixConfig: { content: 'Ctrl+C' },
                },
                {
                  code: 'remove',
                  name: '删除',
                  prefixConfig: {
                    icon: 'vxe-icon-delete-fill',
                    className: 'color-red',
                  },
                },
              ],
            ],
          },
        }"
        @menu-click="contextMenuClickEvent"
        :row-config="{ isCurrent: true, isHover: true }"
        :column-config="{ resizable: true }"
        :export-config="{}"
        :edit-rules="validRules"
        :edit-config="{
          trigger: 'manual',
          mode: 'row',
          showStatus: true,
          isHover: true,
          autoClear: false,
        }"
        :align="allAlign"
        :data="tableData"
      >
        <vxe-column type="checkbox" width="50" align="center" />
        <vxe-column type="seq" width="58" align="center" />

        <vxe-column
          header-align="center"
          field="white"
          width="140"
          align="center"
          title="是否填报白名单"
          :cell-render="{
            name: 'VxeSwitch',
            props: {
              'open-value': 1,
              'close-value': 0,
              'open-label': '是',
              'close-label': '否'
            },
            events: {
              change: ({ row }) => {
                saveRow(row)
              }
            }
          }"
        />

        <vxe-column
          header-align="center"
          field="nickname"
          width="160"
          title="昵称"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />

        <vxe-column
          header-align="center"
          field="openid"
          width="160"
          title="openid"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />

        <vxe-column
          header-align="center"
          field="headimgurl"
          width="160"
          title="头像地址"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />

        <vxe-column
          header-align="center"
          field="mobile"
          width="160"
          title="手机号"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />

        <vxe-column
          align="center"
          field="sex"
          width="180"
          title="性别"
          :edit-render="{
            name: 'VxeSelect',
            options: [
              { value: '男', label: '男' },
              { value: '女', label: '女' },
              { value: '保密', label: '保密' },
            ],
            props: { multiple: false },
            optionProps: { value: 'value', label: 'label' },
          }"
        />

        <vxe-column
          header-align="center"
          field="area"
          width="160"
          title="区县"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />

        <vxe-column
          header-align="center"
          field="province"
          width="160"
          title="省份"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />

        <vxe-column
          header-align="center"
          field="city"
          width="160"
          title="城市"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />

        <vxe-column
          header-align="center"
          field="name"
          width="160"
          title="学生姓名"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />

        <vxe-column
          header-align="center"
          field="grade"
          width="160"
          title="年级"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />

        <vxe-column
          align="center"
          field="middle_exam_year"
          width="180"
          title="中考年份"
          :edit-render="{}"
        >
          <template #edit="{ row }">
            <el-date-picker
              v-model="row['middle_exam_year']"
              style="width: 100%"
              size="small"
              type="year"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </template>
        </vxe-column>

        <vxe-column
          header-align="center"
          field="nationality"
          width="160"
          title="民族"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />

        <vxe-column
          header-align="center"
          field="school"
          width="160"
          title="学校"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />

        <vxe-column
          field="operate"
          header-align="center"
          title="操作"
          min-width="220"
          fixed="right"
        >
          <template #default="{ row }">
            <template v-if="isActiveStatus(row)">
              <el-button size="small" type="primary" @click="saveRowEvent(row)"
                >保存</el-button
              >
              <el-button
                size="small"
                type="primary"
                plain
                @click="cancelRowEvent(row)"
                >取消</el-button
              >
            </template>
            <template v-else>
              <el-button
                v-if="isHasAuth('detail')"
                size="small"
                type="primary"
                plain
                @click="detail(row)"
                >查看</el-button
              >
              <el-button
                v-if="isHasAuth('edit')"
                size="small"
                type="warning"
                @click="editRowEvent(row)"
                >编辑</el-button
              >
              <el-button
                v-if="isHasAuth('delete')"
                size="small"
                type="danger"
                @click="destroyRowEvent(row)"
                >删除</el-button
              >
            </template>
          </template>
        </vxe-column>
      </vxe-table>

      <el-pagination
        style="margin-top: 10px; display: flex; justify-content: flex-end"
        :current-page.sync="select.page"
        :page-sizes="[20, 30, 40, 50]"
        :page-size.sync="select.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="
          (e) => {
            select.page_size = e;
            select.page = 1;
            getList();
          }
        "
        @current-change="
          (e) => {
            select.page = e;
            getList();
          }
        "
      />
    </el-card>

    <AddUser ref="AddUser" :is-show.sync="isShowAdd" @refresh="getList" />
    <ShowUser ref="ShowUser" :is-show.sync="isShowDetail" />
  </div>
</template>

<script>
import VxeUI from "vxe-pc-ui";

import { authMixin } from "@/mixin/authMixin";
import { uploadSize } from "@/settings";
import { deepCopy } from "@/utils";
import { download } from "@/utils/downloadRequest";
import { destroy, index, save } from "@/api/user/user";
import AddUser from "./components/AddUser.vue";
import ShowUser from "./components/ShowUser.vue";
import axios from "axios";
import { getToken } from "@/utils/auth";

export default {
  name: "User",
  mixins: [authMixin],
  components: {
    AddUser,
    ShowUser,
  },
  data() {
    return {
      uploadSize,
      examineKey: 0,
      isShowAdd: false,
      isShowDetail: false,

      loading: false,
      tableHeight: 400,
      select: {
        page: 1,
        page_size: 20,
        keyword: "",
        show_relation: [],
      },
      total: 0,
      allAlign: null,
      tableData: [],
      form: {
        id: "",

        white: "",

        nickname: "",

        openid: "",

        headimgurl: "",

        mobile: "",

        sex: "",

        area: "",

        province: "",

        city: "",

        name: "",

        grade: "",

        middle_exam_year: "",

        nationality: "",

        school: "",
      },
      validRules: {
        mobile: [
          {
            required: true,
            message: "手机号" + "必填",
          },

          {
            pattern: /(^$)|(^1[3456789]\d{9})|(^(0\d{2,3}(-)*)?\d{7})$/,
            message: "手机号" + "验证失败",
          },
        ],
      },
    };
  },
  computed: {
    isActiveStatus() {
      return function (row) {
        if (this.$refs["table"]) {
          return this.$refs["table"].isEditByRow(row);
        }
      };
    },
    isHasAuth() {
      return function (auth) {
        return this.auths_auth_mixin.indexOf(auth) !== -1;
      };
    },
  },
  created() {
    this.getList();
  },
  mounted() {
    this.bindToolbar();
    this.calcTableHeight();
  },
  methods: {
    exportMethod() {
      this.$confirm("请选择导出方式", "提示", {
        confirmButtonText: "全量导出",
        cancelButtonText: "部分导出",
        distinguishCancelAndClose: true,
      })
        .then((_) => {
          download("/api/admin/school/index", "get", {
            ...this.select,
            page: 1,
            page_size: 9999,
            is_export: 1,
            export_fields: Object.keys(this.form),
          });
        })
        .catch((action) => {
          if (action === "cancel" && this.$refs["table"]) {
            this.$refs["table"].openExport();
          }
        });
    },
    calcTableHeight() {
      let clientHeight = document.documentElement.clientHeight;
      let cardTitle = document
        .querySelector(".el-card__header")
        ?.getBoundingClientRect()?.height;
      let search = document
        .querySelector(".vxe-toolbar")
        ?.getBoundingClientRect()?.height;
      let paginationHeight =
        (document.querySelector(".el-pagination")?.getBoundingClientRect()
          ?.height ?? 0) + 10; //分页的高度
      let topHeight = 50; //页面 头部
      let padding = 80;
      let margin = 20;
      this.tableHeight =
        clientHeight -
        cardTitle -
        search -
        paginationHeight -
        topHeight -
        padding -
        margin;
    },
    contextMenuClickEvent({ menu, row, column }) {
      switch (menu.code) {
        case "copy":
          // 示例
          if (row && column) {
            if (VxeUI.clipboard.copy(row[column.field])) {
              this.$message.success("已复制到剪贴板！");
            }
          }
          break;
        case "remove":
          if (row && column) {
            this.destroyRowEvent(row);
          }
        default:
      }
    },
    async detail(row) {
      await this.$refs["ShowUser"].getDetail(row.id);
      this.isShowDetail = true;
    },

    uploadMethod(file) {
      const formData = new FormData();
      formData.append("file", file);
      window.$_uploading = true;
      return axios
        .post(process.env.VUE_APP_UPLOAD_API, formData, {
          headers: {
            Authorization: `Bearer ${getToken()}`,
          },
        })
        .then((response) => {
          window.$_uploading = false;
          if (response.status === 200 && !response.data.code) {
            return {
              response: response.data,
              name: response.data.original_name,
              url: response.data.url,
            };
          } else {
            this.$message.error("上传失败");
          }
        })
        .catch((_) => {
          window.$_uploading = false;
        });
    },
    bindToolbar() {
      this.$nextTick(() => {
        if (this.$refs["table"] && this.$refs["toolbar"]) {
          this.$refs["table"].connect(this.$refs["toolbar"]);
        }
      });
    },

    editRowEvent(row) {
      if (this.$refs["table"]) {
        this.$refs["table"].setEditRow(row);
      }
    },
    cancelRowEvent(row) {
      if (this.$refs["table"]) {
        this.$refs["table"].clearEdit().then(() => {
          // 还原行数据
          this.$refs["table"].revertData(row);
        });
      }
    },

    async getList() {
      this.loading = true;
      try {
        const res = await index(this.select, false);
        this.tableData = res.data;
        this.total = res.total;
        this.loading = false;
      } catch (err) {
        console.error(err);
        this.loading = false;
      }
    },

    async saveRow(row) {
      try {
        const errMap = await this.$refs["table"].validate();
        if (errMap) {
          throw new Error(errMap);
        }
        await this.$refs["table"].clearEdit();
        let form = deepCopy(this.form);
        for (const key in form) {
          form[key] = row[key];
        }

        this.loading = true;
        await save(form, false);
        await this.getList();
        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    },
    async saveRowEvent(row) {
      if (window.$_uploading) {
        this.$message.warning("文件正在上传中");
        return;
      }
      try {
        const errMap = await this.$refs["table"].validate();
        if (errMap) {
          throw new Error(errMap);
        }
        await this.$confirm("确认保存？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
        });
        await this.$refs["table"].clearEdit();
        let form = deepCopy(this.form);
        for (const key in form) {
          form[key] = row[key];
        }

        this.loading = true;
        await save(form, false);
        await this.getList();
        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    },
    async destroyRowEvent(row) {
      try {
        await this.$confirm("确认删除？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
        });
        this.loading = true;
        if (row.id) {
          await destroy(
            {
              id: row.id,
            },
            false
          );
          await this.getList();
        } else {
          console.log(row);
          this.tableData.splice(
            this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
            1
          );
        }
        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-card__header {
  padding: 6px 20px;
}
::v-deep .el-tag + .el-tag {
  margin-left: 4px;
}
</style>
