<template>
  <div>
    <div class="d-flex flex-between">
      <div>
        <el-button type="primary" size="medium" @click="exportAll" :disabled="multipleSelection.length == 0">
          <span class="d-in-block v-mid font-size-16">导出</span>
        </el-button>
        <!-- <el-button type="primary" size="medium" disabled>
          <span class="d-in-block v-mid font-size-16">打印</span>
        </el-button> -->
      </div>
      <el-form label-width="100px" :inline="true">
        <el-form-item prop="bs_type">
          <el-select class="mr10" v-model="bs_type" placeholder="全部" @change="getListData">
            <el-option v-for="(item,index) in typeData" :key='index' :value="item">
              {{item}}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="keyword">
          <el-input placeholder="请输入搜索关键字" v-model="keyword" clearable @clear="getListData">
          </el-input>
        </el-form-item>
        <el-button type="primary" class="ml5" @click="getListData">搜索
        </el-button>
      </el-form>
    </div>
    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>
      <el-table-column label="序号" align="center" type="index" width="50">
      </el-table-column>
      <el-table-column label="学生姓名" show-overflow-tooltip prop="xs_name" width="auto">
      </el-table-column>
      <el-table-column label="性别" width="" prop="xs_sex"></el-table-column>
      <el-table-column label="学校" width="" prop="xs_school_name"></el-table-column>
      <el-table-column label="年级" width="" prop="xs_grade"></el-table-column>
      <el-table-column label="身份证" width="220" prop="xs_sfz_code"></el-table-column>
      <el-table-column label="比赛类型" width="" prop="bs_type"></el-table-column>
      <el-table-column label="项目名称" width="" prop="bs_name"></el-table-column>
      <el-table-column label="荣誉等级" width="" prop="ry_name"></el-table-column>
      <el-table-column label="操作" width="">
        <template slot-scope="scope">
          <el-button type="text" @click="detailData(scope.row.xs_id)">查看
          </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="dialogFormVisible" width="850px">
      <div class="zs" id="printBox">
        <img src="@/assets/images/zs.jpg" alt="">
        <div class="zs-content">
          <div class="xs-box">
            <p class="xs-name">{{detailInfo.xs_name}}:</p>
          </div>
          <div class="xs-box">
            <p class="hj-content">在{{detailInfo.year}}年{{detailInfo.bs_type}}“{{detailInfo.bs_name}}”现场比赛中被评为</p>
          </div>

          <div class="text-center" style="padding-top: 30px;">
            <div class="ry-name">{{detailInfo.ry_name}}</div>
          </div>

          <div>
            <span class="date">{{detailInfo.month}}</span>
            <img class="seal-img" src="@/assets/images/officialSeal.png" alt="">
          </div>
        </div>

      </div>
      <div class="mt30 text-center">
        <el-button type="primary" @click="printHTML">打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { xsxq_list, type_list, xsxq_detail } from "./api";
import { useUserStore } from "@/stores/user";
const { token } = useUserStore();
export default {
  name: "index",
  data() {
    return {
      keyword: "",
      bs_type: "",
      tableData: [],
      typeData: {},
      limit: 10,
      total: 0,
      cur_page: 1,
      dialogFormVisible: false,
      dialogForm: {
        content: "",
      },
      detailInfo: {},
      multipleSelection: [],
    };
  },
  methods: {
    printHTML() {
      this.$print({
        printable: 'printBox',
        type: 'html',
        header: '',
        targetStyles: ['*'], // 打印内容使用所有HTML样式，没有设置这个属性/值，设置分页打印没有效果
      })
    },
    getListData() {
      let data = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
        bs_type: this.bs_type
      };

      xsxq_list(data).then((res) => {
        this.tableData = res.data.page_data;
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    typeListData() {
      type_list().then((res) => {
        this.typeData = res.data;
        console.log(this.typeData);
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (let i in val) {
        this.multipleSelection.push(val[i].xs_id);
      }
      console.log(this.multipleSelection, 11111);
    },
    exportAll() {
      let ids = this.multipleSelection.join(",");
      let link =
        window.globalVariables.api +
        "/jdbg/xsjs_xsgl/index?api=xls&page=1&limit=10000&token=" +
        token +
        "&ids=" + ids
      window.open(link, "_blank");
    },

    detailData(id) {
      let data = {
        xs_id: id
      };
      this.dialogFormVisible = true;
      xsxq_detail(data).then((res) => {
        if (res.code == 1) {
          this.detailInfo = res.data.one_info;
        }
      });
    },

  },
  mounted() {
    this.getListData();
    this.typeListData();
  },
};
</script>
<style scoped>
::v-deep .el-dialog__body {
  border-top: 1px solid #f0f3f8;
}
.zs {
  width: 820px;
  height: 580px;
  margin: 0 auto;
  position: relative;
}
.zs > img{
  display: block;
  max-width: 100%;
}
.zs-content {
  position: absolute;
  z-index: 30;
  left: 0;
  top:0;
  padding-top: 170px;
  padding-left: 136px;
  width: 100%;
  height: 100%;
  padding-right: 136px;
  overflow: hidden;
}
.xs-box{

}
.xs-name {

  font-size:13px;
  letter-spacing:2px;
  transform: scale(1.5);
  -webkit-transform:scale(1.5);
  margin: 15px 0 0 0;
  padding-left: 90px;
}
.hj-content {
  margin-top: 30px;
  font-size:13px;
  letter-spacing:2px;
  transform: scale(1.5);
  -webkit-transform:scale(1.5);
  line-height: 25px;
  text-indent: 2em;
  padding-left: 91px;
  padding-right: 90px;
}
.ry-name {
  display: inline-block;
  min-width: 200px;
  margin-top: 30px;
  font-size: 10px;
  letter-spacing:2px;
  transform: scale(4);
  -webkit-transform:scale(4);
  font-weight: bold!important;
  text-align: center;
  font-family: 'Xingkai SC';
}
.date {
  position: absolute;
  bottom: 70px;
  right: 100px;
  font-size: 16px!important;
}
.seal-img {
  position: absolute;
  bottom: 50px;
  right: 85px;
}
</style>