<template>
  <div>
    <el-form :inline="true" :model="firstForm">
      <el-form-item label="年级：">
        <el-select clearable v-model="firstForm.grade" placeholder="请选择年级" @change="switchGrade">
          <el-option v-for="item in gradeList" :label="item.grade_name" :value="item.grade_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级：">
        <el-select v-model="firstForm.class" placeholder="请选择班级" clearable @change="getListData">
          <el-option v-for="item in classList" :label="item.class_name" :value="item.class_num"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="mr10" label="学生姓名：">
        <el-input v-model="firstForm.xsxm" placeholder="输入学生姓名" @change="getListData" clearable></el-input>
      </el-form-item>
      <el-form-item class="mr10" label="学籍号：">
        <el-input v-model="firstForm.xsxh" placeholder="输入学籍号" @change="getListData" clearable></el-input>
      </el-form-item>
      <el-button type="primary" @change="getListData">搜索</el-button>
    </el-form>
    <el-button type="primary" @click="exportAll" :disabled="tableData.length === 0">导出</el-button>
    <el-table :data="tableData" tooltip-effect="dark" class="mt20" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>

      <el-table-column label="年级" prop="grade_name" width="100">
      </el-table-column>
      <el-table-column label="班级" prop="class_name" width="100">
      </el-table-column>
      <el-table-column label="学生姓名" prop="xdx_xsxm" width="120">
      </el-table-column>
      <el-table-column label="学籍号" prop="xdx_xsxh" align="center" width="220">
      </el-table-column>
      <el-table-column label="性别" prop="xdx_xb" width="120">
      </el-table-column>
      <el-table-column label="二维码">
        <template slot-scope="scope">
          <h3 class="qr-code hand" @click="showQr(scope.row)"></h3>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleWatch(scope.row)">查看评分</el-button>
        </template>
      </el-table-column>
    </el-table>
    <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
      <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total"
        :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
    </footer>
    <el-dialog title="二维码详情" :visible.sync="dialogVisible" width="300px">
      <div class="text-center">
        <vue-qr :size="200" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc" colorDark="white"
          colorLight="black" />
      </div>

      <div slot="footer" class="text-center">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="评分详情" :visible.sync="watchVisible" width="850px">
      <div class="flex justify-between px-10px">
        <div> 学生姓名: {{ stuData.xdx_xsxm }}</div>
        <div> 学生学籍号: {{ stuData.xdx_xsxh }}</div>
      </div>
      <el-table :data="pfData">
        <el-table-column prop="xdww_name" label="维度名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="xdwwp_name" label="评分项名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="wdwp_xs_df" label="得分" width="80"></el-table-column>
        <el-table-column prop="wdwp_pfyhlx" label="评分用户类型" width="110"></el-table-column>
        <el-table-column prop="wdwp_pfyh_xm" label="评分用户姓名" width="120"></el-table-column>
        <el-table-column label="评分时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.wdwp_pfyh_sj != '0000-00-00 00:00:00'">{{ scope.row.wdwp_pfyh_sj }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end">
        <el-pagination background layout="total,prev, pager, next" :page-size="query.limit" :total="pfTotal"
          :current-page.sync="query.page" @current-change="handleTableChange"></el-pagination>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { xsewm_list, xsewm_export, grade_search, class_search, wypj_pf } from "./api";
import { useUserStore } from "@/stores/user";
const { token } = useUserStore();
import VueQr from "vue-qr";
import { xqgl_list } from '../../xsxjk/xjk/api';
export default {
  name: "index",
  components: {
    VueQr,
  },
  data() {
    return {
      limit: 10,
      total: 12,
      cur_page: 1,
      grade_name: "",
      class_name: "",
      grade_id: "",
      class_id: "",
      tableData: [],
      gradeList: [],
      classList: [],
      firstForm: {
        grade: "",
        class: "",
        xsxh: "",
        xsxm: "",
      },
      loading: false,
      logoSrc: "",
      appSrc: "",
      dialogVisible: false,
      multipleSelection: [],
      teamList: [],
      team_id: '',
      watchVisible: false,
      pfData: [],
      stuData: {},
      query: {
        page: 1,
        limit: 6,
      },
      pfTotal: 100,
      stu_id: '',
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    handleTableChange(val) {
      this.query.page = val;
      this.getPfList();
    },
    getListData() {
      this.loading = true;
      xqgl_list({ limit: 999 }).then((res) => {
        if (res.code == 1) {
          this.teamList = res.data.page_data;
          this.teamList.map((item) => {
            if (item.team_current_option_k == "1") {
              this.team_id = item.team_id;
              let data = {
                page: this.cur_page,
                limit: this.limit,
                keyword: this.firstForm.xsxm,
                grade_id: this.firstForm.grade,
                class_id: this.firstForm.class,
                xdx_xsxh: this.firstForm.xsxh,
                team_id: this.team_id,
              };
              xsewm_list(data).then((res) => {
                this.loading = false;
                this.tableData = res.data.page_data;
                this.cur_page = Number(res.data.page_now);
                this.total = Number(res.data.total_rows);
              });
            }
          });
        }
      });
    },
    gradeListData() {
      let data = {
        page: 1,
        limit: 9999,
      };
      grade_search(data).then((res) => {
        if (res.code == 1) {
          this.gradeList = res.data.page_data;
          let obj = {
            grade_id: "",
            grade_name: "全部",
          };
          this.gradeList.unshift(obj);
        }
      });
    },
    classListData() {
      let data = {
        grade_id: this.firstForm.grade,
        page: 1,
        limit: 9999,
      };
      class_search(data).then((res) => {
        if (res.code == 1) {
          this.classList = res.data.page_data;
          let obj = {
            class_id: "",
            class_name: "全部",
          };
          this.classList.unshift(obj);
        }
      });
    },
    exportAll() {
      let link = "";
      if (this.multipleSelection.length === 0) {
        link =
          window.globalVariables.api +
          "/xddy/dygl_xsxjk/index?api=xls&page=1&limit=10000&token=" +
          token;
      } else {
        link =
          window.globalVariables.api +
          "/xddy/dygl_xsxjk/index?api=xls&page=1&limit=10000&token=" +
          token +
          "&xdx_id=" +
          this.multipleSelection.join(",");
      }

      window.open(link, "_self");
    },
    clearData() {
      this.firstForm.grade = "";
      this.firstForm.class = "";
    },
    showQr(item) {
      this.appSrc =
        "http://60.188.226.44:8000/app/xddy/#/scanCode?xsxm=" +
        item.xdx_xsxm +
        "&xsxh=" +
        item.xdx_xsxh +
        "&sm_id=" +
        item.sm_id +
        "&token=" +
        token +
        "&xdx_id=" +
        item.xdx_id;

      this.dialogVisible = true;
    },
    getPfList() {
      wypj_pf({ wdwp_xs_xjh: this.stuData?.xdx_xsxh, ...this.query }).then(res => {
        if (res.code == '1') {
          this.pfData = res.data.page_data;
          this.query.page = Number(res.data.page_now);
          this.pfTotal = Number(res.data.total_rows);
        }
      })
    },
    handleWatch(item) {
      this.watchVisible = true;
      this.stuData = item;
      this.getPfList();
    },
    switchGrade() {
      this.firstForm.class = "";
      this.classListData();
      this.getListData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (let i in val) {
        this.multipleSelection.push(val[i].xdx_id);

      }
    },
  },
  mounted() {
    this.gradeListData();
    this.getListData();
    // this.classListData();
  },
};
</script>

<style scoped lang="scss">
.qr-code {
  width: 28px;
  height: 28px;
  background: url("@/assets/images/a-2.png") center no-repeat;
  background-size: 28px 28px;
}
</style>