<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      v-show=""
      :inline="true"
      @submit.native.prevent
    >
      <el-form-item label="姓名/单位" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入关键字"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="small"
          @click="handleAdd()"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row> -->

    <el-table v-loading="loading" :data="dataList">
      <el-table-column
        label="活动id"
        prop="activityId"
        align="center"
        width="80"
      />
      <el-table-column
        label="活动报名id"
        prop="id"
        align="center"
        width="100"
      />
      <el-table-column label="姓名" prop="name" align="center" />
      <!-- <el-table-column label="分类" prop="name" align="center" /> -->
      <!-- <el-table-column label="所属领域" prop="name" align="center" /> -->
      <el-table-column label="手机号" prop="phone" align="center" />
      <el-table-column label="报名时间" align="center" prop="createTime">
        <!-- <template #default="{ row }">
          <span>{{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="操作" align="center">
        <!-- class-name="small-padding fixed-width" -->
        <template #default="{ row }">
          <el-button
            round
            size="small"
            type="primary"
            @click="handleUpdate(row)"
            >修改</el-button
          >
          <el-button round size="small" type="danger" @click="handleDelete(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page_num"
      :limit.sync="queryParams.page_size"
      @pagination="getList"
    />

    <el-dialog title="活动报名" v-model="showSignUp">
      <el-form
        :model="activityEnrollForm"
        :rules="signUpRules"
        ref="activityEnrollFormRef"
        labelWidth="100px"
      >
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input
                placeholder="请输入姓名"
                v-model="activityEnrollForm.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input
                placeholder="请输入手机号"
                maxlength="11"
                v-model="activityEnrollForm.phone"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input-number
                placeholder="请输入年龄"
                v-model="activityEnrollForm.age"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="activityEnrollForm.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-row justify="end">
          <el-button @click="showSignUp = false">取消</el-button>
          <el-button @click="submitSignUp" type="primary">报名</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="SignUpList">
import {
  activityEnrollList,
  activityEnrollDelete,
  activityEnrollUpdate,
} from "@/api/website/activity";
import { ElMessage, ElMessageBox } from "element-plus";
import { cloneDeep } from "lodash";

// import dayjs from "dayjs";
import { reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const data = reactive({
  queryParams: {
    activityId: route.query.id,
  },
  activityEnrollForm: {},
  signUpRules: {
    name: [
      {
        required: true,
        message: "请输入姓名！",
        trigger: "blur",
      },
    ],
    age: [
      {
        required: true,
        message: "请输入年龄！",
        trigger: "blur",
      },
    ],
    gender: [
      {
        required: true,
        message: "请选择性别！",
        trigger: "change",
      },
    ],
    phone: [
      {
        required: true,
        message: "请输入手机号！",
        trigger: "blur",
      },
    ],
  },
});
const { queryParams, activityEnrollForm, signUpRules } = toRefs(data);
const dataList = ref([]);
const total = ref(0);
const loading = ref(true);
const queryForm = ref();
const showSignUp = ref(false);

const getList = async () => {
  const resp = await activityEnrollList(queryParams.value);
  dataList.value = resp.rows;
  total.value = resp.total;
  loading.value = false;
};

const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
const resetQuery = () => {
  queryForm.value.resetFields();
  handleQuery();
};
getList();

const handleDelete = async (row) => {
  await ElMessageBox.confirm(
    `是否确认删除${row.name}的活动报名`,
    "删除活动报名"
  );
  await activityEnrollDelete([row.id]);
  ElMessage.success("删除成功");
  getList();
};
const activityEnrollFormRef = ref();
const handleUpdate = (row) => {
  activityEnrollForm.value = cloneDeep(row);
  activityEnrollForm.value.age = parseInt(activityEnrollForm.value.age);
  if (activityEnrollFormRef.value) {
    activityEnrollFormRef.value.resetFields();
  }
  showSignUp.value = true;
};

const submitSignUp = async () => {
  await activityEnrollUpdate(activityEnrollForm.value);
  ElMessage.success("修改成功");
  showSignUp.value = false;
  getList();
};
</script>

<!-- <script>
import { signUpList } from "@/api/website/activity";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      dataList: [],
      queryParams: {
        activity_id: undefined,
        name: undefined,
        page_num: 1,
        page_size: 10,
      },
    };
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page_num = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList() {
      this.loading = true;
      signUpList(this.queryParams).then((response) => {
        this.dataList = response.data.data;
        this.total = response.data.count;
        this.loading = false;
      });
    },
  },
  created() {
    let { id } = this.$route.query;
    if (!id) {
      this.$message.error("无ID");
      this.$router.go(-1);
      return;
    }
    this.queryParams.activity_id = id;
    // this.getList();
  },
};
</script> -->
