<template>
  <div>
    <el-form :model="signForm" label-width="90px" :inline="true">
      <el-form-item label="学生姓名：" prop="xsxm">
        <el-input v-model="signForm.xsxm" clearable @clear="getListData">
        </el-input>
      </el-form-item>
      <el-form-item label="学籍号：" prop="xsxh">
        <el-input v-model="signForm.xsxh" clearable @clear="getListData">
        </el-input>
      </el-form-item>
      <el-form-item label="手机号码：" prop="sjhm">
        <el-input v-model="signForm.sjhm" clearable @clear="getListData">
        </el-input>
      </el-form-item>
      <el-form-item label="活动名称：" prop="hdmc">
        <el-input v-model="signForm.hdmc" clearable @clear="getListData">
        </el-input>
      </el-form-item>
      <el-button type="primary" class="ml5" @click="getListData"
        >搜索</el-button
      >
    </el-form>
    <div>
      <!-- <el-upload
        class="upload-demo"
        :action="import_type_url"
        :show-file-list="false"
        :data="import_type_data"
        :on-success="import_success"
        style="display: inline-block; margin: 0 10px"
      >
        <el-button type="primary">导入</el-button>
      </el-upload> -->
      <!-- <el-button type="primary" @click="exportSign">导入模板下载</el-button> -->
      <el-button type="primary" @click="exportSign">导出</el-button>
      <el-button
        type="danger"
        :disabled="multipleSelection.length == 0"
        @click="delSign"
        >删除</el-button
      >
    </div>
    <el-table
      :data="signList"
      v-loading="loading"
      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="活动名称"
        align="left"
        prop="xdb_hdmc"
      ></el-table-column>
      <el-table-column
        label="学生姓名"
        align="left"
        prop="xdh_xsxm"
      ></el-table-column>
      <el-table-column label="学籍号" prop="xdh_xsxh" width="auto">
      </el-table-column>
      <el-table-column label="手机号码" prop="xdh_sjhm"></el-table-column>
      <el-table-column label="活动得分" prop="xdh_xsdf"></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="commentDialogVisible"
      width="550px"
      v-loading="loading"
    >
      <el-form
        :model="commentForm"
        ref="commentForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="星级评价：" prop="xdh_xsdf">
          <el-rate class="mt10" v-model="commentForm.xdh_xsdf" :colors="colors">
          </el-rate>
        </el-form-item>
        <el-form-item label="评价描述：" prop="xdh_xspj">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入评论"
            v-model="commentForm.xdh_xspj"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="commentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commentFormSubmit('commentForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { sign_list, sign_del } from "./api";
import { useUserStore } from "@/stores/user";
const { token, real_name } = useUserStore();
export default {
  name: "index",
  data() {
    return {
      xdb_id: "",
      limit: 10,
      total: 0,
      loading: false,
      cur_page: 1,
      signForm: {
        xsxm: "",
        xsxh: "",
        sjhm: "",
        hdmc: "",
      },
      signList: [],
      multipleSelection: [],
      commentDialogVisible: false,
      commentForm: {
        xdh_id: "",
        xdh_xsxm: "",
        xdh_xsxh: "",
        xdh_sjhm: "",
        xdb_id: "",
        xdh_xsdf: "",
        xdh_xspj: "",
      },
      rules: {
        xdh_xsdf: [
          { required: true, message: "请打分评价", trigger: "change" },
        ],
        xdh_xspj: [
          { required: true, message: "请输入评价描述", trigger: "blur" },
        ],
      },
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      // 导入导出
      import_type_url:
        window.globalVariables.api +
        "/xddy/dygl_hdbm/import?issubmit=1&token=" +
        token,
      import_type_data: {},
    };
  },
  methods: {
    getListData() {
      this.loading = true;
      let data = {
        xdb_id: this.xdb_id,
        page: this.cur_page,
        limit: this.limit,
        xdh_xsxm: this.signForm.xsxm,
        xdh_xsxh: this.signForm.xsxh,
        xdh_sjhm: this.signForm.sjhm,
        xdb_hdmc: this.signForm.hdmc,
      };
      sign_list(data).then((res) => {
        this.loading = false;
        if (res.code == 1) {
          this.signList = res.data.page_data;
          for (let i in this.signList) {
            this.signList[i].xdh_xsdf = Number(this.signList[i].xdh_xsdf);
          }
          this.cur_page = Number(res.data.page_now);
          this.total = Number(res.data.total_rows);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    exportSign() {
      let link =
        window.globalVariables.api +
        "/xddy/dygl_hdbm/index?api=xls&page=1&limit=10000&token=" +
        token +
        "&xdb_id=" +
        this.xdb_id;
      window.open(link, "_self");
    },
    import_success(res) {
      if (res.code == 1) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: res.msg,
          type: "success",
        });
        this.getListData();
      } else {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    delSign() {
      let del_arr = [];
      for (let i in this.multipleSelection) {
        del_arr.push(this.multipleSelection[i].xdh_id);
      }
      this.$confirm("确定要删除这些报名?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            xdh_id: del_arr,
          };
          sign_del(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "报名删除成功！",
                type: "success",
              });
              this.getListData();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        })
        .catch(() => {});
    },
  },
  mounted() {
    if (this.$route.params.id != "") {
      this.xdb_id = this.$route.params.id;
      this.getListData();
    }
  },
};
</script>

<style scoped>
</style>