<script setup>
import { ref, onMounted } from "vue";
import { raiInterface, raiSpecial } from "@/api/api.js";
import mPage from "@/components/mPage.vue";
import VoteDlg from "./components/ThemeSurvey/voteDlg.vue";
import VotingResultsDlg from "./components/ThemeSurvey/votingResultsDlg.vue";

const dataList = ref([]);
const page_no = ref(1);
const total = ref(0);

// 获取列表
async function getDataList() {
  const res = await raiInterface.questionnaireList({
    PageSize: 10,
    CurrentIndex: page_no.value,
  });
  if (res.Ret === 200) {
    dataList.value = res.Data.List || [];
    total.value = res.Data.Paging.Totals;
  }
}
//分页
function handleCurrentChange(page) {
  page_no.value = page;
  getDataList();
}

const initiateVotingDlg = ref(false); // 发起投票的弹框
const isVotinRgesultsDlg = ref(false); // 投票结果的弹框
const theRemainingThemeDlg = ref(false); // 其余主题的弹框
const rowForm = ref({});

// 查看投票结果
function lookResultHandler(item, type) {
  rowForm.value = item;
  if (type == "编辑") {
    initiateVotingDlg.value = true;
  } else if (type == "查看") {
    isVotinRgesultsDlg.value = true;
  } else {
    theRemainingThemeDlg.value = true;
  }
}
onMounted(() => {
  getDataList();
});
</script>

<template>
  <div class="container">
    <el-card>
      <div style="display: flex; justify-content: flex-end">
        <el-button type="primary" @click="initiateVotingDlg = true"> 发起投票 </el-button>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div>
        <el-table border :data="dataList">
          <el-table-column align="center" prop="PublishTime" key="name" label="发布时间"></el-table-column>
          <el-table-column align="center" prop="ActivityTypeName" key="name" label="活动类型"></el-table-column>
          <el-table-column align="center" prop="EndTime" key="EndTime" label="投票截止时间"></el-table-column>
          <el-table-column align="center" prop="ModifyTime" key="ModifyTime" label="更新时间"></el-table-column>
          <el-table-column align="center" prop="State" key="State" label="状态">
            <template #default="{ row }">
              <span :class="[row.State == '发布中' && 'editsty']">
                {{ row.State }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="RealName" key="name" label="投票结果">
            <template #default="{ row }">
              <span class="editsty" @click="lookResultHandler(row, '查看')"> 查看 </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="OtherThemeTotal" key="name" label="其余主题">
            <template #default="{ row }">
              <span class="editsty" @click="lookResultHandler(row, '其余')">
                {{ row.OtherThemeTotal }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="RealName" key="name" label="操作">
            <template #default="{ row }">
              <span v-if="row.State == '发布中'" class="editsty" @click="lookResultHandler(row, '编辑')"> 编辑 </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-card>
    <vote-dlg v-model:initiateVotingDlg="initiateVotingDlg" v-model:rowForm="rowForm"  @getDataList="getDataList"/>
    <voting-results-dlg v-model:isVotinRgesultsDlg="isVotinRgesultsDlg" v-model:theRemainingThemeDlg="theRemainingThemeDlg" v-model:rowForm="rowForm" />
  </div>
</template>
