<script setup>
import { ref, onMounted, nextTick } from "vue";

import { raiInterface, raiSpecial } from "@/api/api.js";

const props = defineProps({
  isVotinRgesultsDlg: {
    type: Boolean,
    default: false,
  },
  theRemainingThemeDlg: {
    type: Boolean,
    default: false,
  },
  rowForm: {
    type: Object,
    default: {},
  },
});

const $emit = defineEmits();

const isVoteDetails = ref(false);
const voteDetailList = ref([]); //投票结果
const voteNumDetailList = ref([]); //查看票数详情
const voteOtherList = ref([]); //查看其余主题

watch(
  () => props.isVotinRgesultsDlg,
  (newValue) => {
    newValue && getVoteDetail();
  }
);
watch(
  () => props.theRemainingThemeDlg,
  (newValue) => {
    newValue && lookVoteOther();
  }
);

// 关闭弹框事件
function closeHandler(type) {
  $emit("update:isVotinRgesultsDlg", false);
  $emit("update:rowForm", {});
}
function closeHandlerTwo() {
  isVoteDetails.value = false;
}
function closeHandlerThree() {
  $emit("update:theRemainingThemeDlg", false);
  $emit("update:rowForm", {});
}
// 投票结果
async function getVoteDetail() {
  const res = await raiInterface.questionnaireVote_detail({
    QuestionnaireId: props.rowForm.QuestionnaireId,
  });
  if (res.Ret === 200) {
    nextTick(() => {
      voteDetailList.value = res.Data.List || [];
    });
  }
}
// 查看票数详情
async function lookVoteDetailsHandler(item) {
  const res = await raiInterface.questionnaireVote_list({
    QuestionnaireThemeId: item.QuestionnaireThemeId,
  });

  if (res.Ret === 200) {
    isVoteDetails.value = true;
    nextTick(() => {
      voteNumDetailList.value = res.Data.List || [];
    });
  }
}
// 查看其余主题
async function lookVoteOther() {
  const res = await raiInterface.questionnaireVote_other({
    QuestionnaireId: props.rowForm.QuestionnaireId,
  });

  if (res.Ret === 200) {
    nextTick(() => {
      voteOtherList.value = res.Data.List || [];
    });
  }
}
</script>

<template>
  <div class="container vote-dlg-container">
    <!-- 投票结果 -->
    <el-dialog
      draggable
      :close-on-click-modal="false"
      title="投票结果"
      :modal-append-to-body="false"
      center
      :append-to-body="true"
      v-model="props.isVotinRgesultsDlg"
      :before-close="closeHandler"
      width="500px"
    >
      <el-table border :data="voteDetailList" style="margin-bottom: 20px" height="350">
        <el-table-column align="center" prop="ActivityTheme" key="name" label="主题"></el-table-column>
        <el-table-column width="100" align="center" prop="VoteTotal" key="name" label="票数">
          <template #default="{ row }">
            <span class="editsty" @click="lookVoteDetailsHandler(row)"> {{ row.VoteTotal }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 票数明细 -->
    <el-dialog
      draggable
      :close-on-click-modal="false"
      title="票数明细"
      :modal-append-to-body="false"
      center
      :append-to-body="true"
      v-model="isVoteDetails"
      :before-close="closeHandlerTwo"
      width="600px"
    >
      <el-table border :data="voteNumDetailList" style="margin-bottom: 20px" height="350">
        <el-table-column align="center" prop="RealName" key="name" label="投票人姓名"></el-table-column>
        <el-table-column align="center" prop="CompanyName" key="name" label="公司名"></el-table-column>
        <el-table-column align="center" prop="SellerName" key="name" label="所属销售"></el-table-column>
        <el-table-column width="160" align="center" prop="CreateTime" key="name" label="投票时间"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 其余主题 -->
    <el-dialog
      draggable
      :close-on-click-modal="false"
      title="其余主题"
      :modal-append-to-body="false"
      center
      :append-to-body="true"
      v-model="props.theRemainingThemeDlg"
      :before-close="closeHandlerThree"
      width="600px"
    >
      <el-table border :data="voteOtherList" style="margin-bottom: 20px" height="350">
        <el-table-column align="center" prop="Content" key="name" label="主题内容"></el-table-column>
        <el-table-column align="center" prop="RealName" key="name" label="提交人姓名"></el-table-column>
        <el-table-column align="center" prop="CompanyName" key="name" label="公司名"></el-table-column>
        <el-table-column align="center" prop="SellerName" key="name" label="所属销售"></el-table-column>
        <el-table-column width="160" align="center" prop="CreateTime" key="name" label="提交时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.vote-dlg-container-theme-survey {
  .add-theme-content {
    display: flex;
    align-items: center;
  }
  .delete-item-icon {
    display: flex;
    align-items: center;
    margin-left: 20px;
    cursor: pointer;
    img {
      width: 15px;
      height: 15px;
    }
  }
  .add-theme-box {
    display: flex;
    align-items: center;
  }
}

.fr-wrapper-content-vote-dlg-container {
  border-top: 1px solid #cccccc !important;
  border-bottom: 1px solid #cccccc !important;
}
</style>
