<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="handleAddOrEdit()">添加</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="星级评价">
        <template v-slot="scope">
          <el-rate v-model="scope.row.xdh_xspj" disabled :colors="colors">
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleAddOrEdit(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="title" :visible.sync="editDialogShow">
      <el-form :model="newForm" ref="newForm" :rules="rules" label-width="100px">
        <el-form-item label="学生姓名" prop="xdh_xsxm">
          <el-input v-model="newForm.xdh_xsxm" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="学籍号" prop="xdh_xsxh">
          <el-input v-model="newForm.xdh_xsxh" />
        </el-form-item>
        <el-form-item label="手机号码" prop="xdh_sjhm">
          <el-input v-model="newForm.xdh_sjhm" type="number" />
        </el-form-item>
        <el-form-item label="学生得分" prop="xdh_xsdf">
          <el-input v-model="newForm.xdh_xsdf" type="number" />
        </el-form-item>
        <el-form-item label="活动名称" prop="xdb_id">
          <el-select v-model="newForm.xdb_id">
            <el-option v-for="item in hdData" :key="item.xdb_id" :label="item.xdb_hdmc"
              :value="{ value: item.xdb_id, label: item.xdb_hdmc }"></el-option>
          </el-select>
          <!-- <el-input v-model="newForm.xdb_hdmc" placeholder="请输入活动名称"></el-input> -->
        </el-form-item>
        <el-form-item label="学生评价" prop="xdh_xspj">
          <el-rate class="rate" v-model="newForm.xdh_xspj"></el-rate>
        </el-form-item>
      </el-form>
      <div slot="footer" class="text-center">
        <el-button @click="editDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="newFormSubmit('newForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { sign_list, sign_del, hd_list, bm_add, bm_edit } 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: [],
      rules: {
        xdh_xspj: [
          { required: true, message: "请打分评价", trigger: "submit" },
        ],
        xdh_xsxh: [
          { required: true, message: "请输入学籍号", trigger: "submit" },
        ],
        xdh_xsdf: [
          { required: true, message: "请输入学生分数", trigger: "submit" },
        ],
        xdh_xsxm: [
          { required: true, message: "请输入学生姓名", trigger: "submit" },
        ],
        xdh_sjhm: [
          { required: true, message: "请输入手机号码", trigger: "submit" },
        ],
        xdb_id: [
          { required: true, message: "请选择活动", trigger: "submit" },
        ],
      },
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      // 导入导出
      import_type_url:
        window.globalVariables.api +
        "/xddy/dygl_hdbm/import?issubmit=1&token=" +
        token,
      import_type_data: {},
      editDialogShow: false,
      newForm: {
        xdh_xspj: null,
        xdh_xsxh: '',
        xdh_xsdf: '',
        xdh_xsxm: '',
        xdh_sjhm: '',
        xdb_id: '',
      },
      hdData: [],
      title: '',
      isEdit: false,
      xdh_id:'',
    };
  },
  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_xspj = Number(this.signList[i].xdh_xspj);
          }
          this.cur_page = Number(res.data.page_now);
          this.total = Number(res.data.total_rows);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getHdList() {
      let data = {
        page: 1,
        limit: 999,
      };
      hd_list(data).then((res) => {
        if (res.code == 1) {
          this.hdData = res.data.page_data;
        }
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    handleAddOrEdit(item) {
      this.getHdList();
      this.editDialogShow = true;
      if (item) {
        this.isEdit = true;
        this.title = '编辑'
        this.xdh_id = item.xdh_id;
        Object.keys(this.newForm).forEach((key, i) => {
          this.newForm[key] = item[key];
        });
        this.newForm.xdb_id = {
          label: item.xdb_hdmc,
          value: item.xdb_id
        }
        console.log(this.newForm.xdb_id,'22222');
      } else {
         this.isEdit = false;
        this.title = '新增'
        Object.keys(this.newForm).forEach((key, item) => {
          this.newForm[key] = "";
        });
        this.newForm.xdh_xspj = null;

      }

    },
    newFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let data = {
            xddy_dygl_hdbm: {
              xdh_xspj: this.newForm.xdh_xspj,
              xdh_xsxh: this.newForm.xdh_xsxh,
              xdh_xsdf: this.newForm.xdh_xsdf,
              xdh_xsxm: this.newForm.xdh_xsxm,
              xdh_sjhm: this.newForm.xdh_sjhm,
              xdb_id: this.newForm.xdb_id.value,
              xdb_hdmc: this.newForm.xdb_id.label,
            }
          };
          console.log(data,'1111111');
          if (!this.isEdit) {
            bm_add(data).then((res) => {
              this.loading = false;
              if (res.code == 1) {
                this.$message({
                  message: "添加成功！",
                  type: "success",
                });
                this.editDialogShow = false;
                this.getListData();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          } else {
            data.xdh_id = this.xdh_id;
            bm_edit(data).then((res) => {
              this.loading = false;
              if (res.code == 1) {
                this.$message({
                  message: "编辑成功！",
                  type: "success",
                });
                this.editDialogShow = false;
                this.getListData();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          }
        }
      });
    },
    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 lang="scss">
::v-deep{
  .rate{
    line-height: 48px;
  }
}
</style>