<template>
  <a-drawer
    :visible="addStemVisible"
    placement="right"
    class="custom-class"
    @after-visible-change="afterVisibleChange"
    @close="closeDrawer"
    width="60%"
  >
    <div>
      <h2 style="text-align: center">投票查看</h2>
      <div v-for="(item, index) in form" :key="item.voteStemId">
        <div class="title">{{ index + 1 }}. {{ item.voteStemName }}</div>
        <a-radio-group v-model:value="item.voteStemId">
          <a-radio :value="3" :style="radioStyle">
            {{ item.optionDetailList[0].optionName }}</a-radio
          >
          <br />
          <a-radio :value="2" :style="radioStyle">
            {{ item.optionDetailList[1].optionName }}</a-radio
          >
        </a-radio-group>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import { message } from "ant-design-vue";
import * as api from "@/api/indexVote";

export default {
  name: "queryStem",
  props: {
    addStemVisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, ctx) {
    const value = ref(1);
    const state = reactive({
      form: [],
    });
    const radioStyle = reactive({
      display: "flex",
      height: "30px",
      lineHeight: "30px",
    });
    const afterVisibleChange = (bool) => {
      if (bool === true) {
        getStem();
      }
    };
    const getStem = () => {
      let obj = {
        stemId: 0,
        ballotId: 2,
      };
      api
        .queryStemByStemId(obj)
        .then((res) => {
          state.form = res.data.data;
          console.log(JSON.stringify(res.data) + "***");
          message.success("投票获取成功");
          console.log(res);
        })
        .catch((err) => {
          message.error("投票获取失败" + err);
          console.log(err);
        });
    };
    const closeDrawer = () => {
      ctx.emit("closeDrawer");
    };
    return {
      ...toRefs(state),
      afterVisibleChange,
      closeDrawer,
      radioStyle,
      value,
    };
  },
};
</script>

<style>
.title {
  font-size: 17px;
}
</style>