<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 slot-scope="{ row }">
              <span :class="[row.State == '发布中' && 'editsty']">{{ row.State }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="RealName" key="name" label="投票结果">
            <template slot-scope="{ row }">
              <span class="editsty" @click="lookResultHandler(row, '查看')">查看</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="OtherThemeTotal" key="name" label="其余主题">
            <template slot-scope="{ 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 slot-scope="{ 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 :initiateVotingDlg.sync="initiateVotingDlg" :rowForm.sync="rowForm" />
    <voting-results-dlg :isVotinRgesultsDlg.sync="isVotinRgesultsDlg" :theRemainingThemeDlg.sync="theRemainingThemeDlg" :rowForm.sync="rowForm" />
  </div>
</template>

<script>
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";
export default {
  name: "",
  components: { VoteDlg, VotingResultsDlg, mPage },
  props: {},
  data() {
    return {
      dataList: [],
      page_no: 1,
      total: 0,
      initiateVotingDlg: false, // 发起投票的弹框
      isVotinRgesultsDlg: false, // 投票结果的弹框
      theRemainingThemeDlg: false, // 其余主题的弹框
      rowForm: {},
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getDataList();
  },
  methods: {
    // 查看投票结果
    lookResultHandler(item, type) {
      this.rowForm = item;
      console.log(this.rowForm, " this.rowForm");
      if (type == "编辑") {
        this.initiateVotingDlg = true;
      } else if (type == "查看") {
        this.isVotinRgesultsDlg = true;
      } else {
        this.theRemainingThemeDlg = true;
      }
    },
    // 获取列表
    async getDataList() {
      const res = await raiInterface.questionnaireList({
        PageSize: 10,
        CurrentIndex: this.page_no,
      });
      if (res.Ret === 200) {
        this.dataList = res.Data.List || [];
        this.total = res.Data.Paging.Totals;
      }
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getDataList();
    },
  },
};
</script>
<style scoped lang="scss"></style>
