<template>
    <div class="voteResult container">
      <div class="card">
        <voteChart ref="voteChart"></voteChart>
          <div class="rxtable">
             <div class="operator" style="justify-content: space-between;width: 100%;display: flex;box-sizing: border-box;padding:0px 15px;align-items: center">
                 <el-switch
                         active-text="已投票"
                         inactive-text=未投票

                         v-model="state"
                         @change="changeState"
                         active-color="#13ce66"
                         inactive-color="#ff4949"
                         :active-value="1"
                         :inactive-value="2">
                 </el-switch>

                 <download-excel
                         :data="listData.list"
                         :fields="json_fields"
                         name = "用户统计列表.xls">
                     <el-button type="success" icon="el-icon-s-order" size="mini" >导出</el-button>
                 </download-excel>


             </div>

              <RxTable
                      ref="rxTable"


                      :data="listData.list"
                      :blank-col="true"
                      :loading="loading"
                      :page-count="listData.pageQuantity"
                      :currentPage="pageInfo.page"
              >


                  <el-table-column
                          :align="item.align || 'left'"
                          :prop="item.prop"

                          :label="item.label"
                          :key="item.id"
                          v-for="(item) in tableHeader"
                          :show-overflow-tooltip="true"
                          :width="item.width"
                          :min-width="item.minWidth"
                  >
                      <template slot-scope="scope">
                          <div v-if="item.prop == 'state'">
                              <el-tag size="small" style="width: 50px;text-align: center;" type="success" v-if="scope.row[item.prop] == 1">已投票</el-tag>
                              <el-tag size="small" style="width: 50px;text-align: center;" v-else type="danger">未投票</el-tag>
                          </div>
                          <span v-else>{{ scope.row[item.prop] || scope.row[item.prop] == 0 ? scope.row[item.prop] : '-' }} </span>
                      </template>
                  </el-table-column>

              </RxTable>
          </div>

      </div>

    </div>
</template>

<script>
import voteChart from "@/views/vote/module/voteChart";
import RxTable from "@/components/RxTable";
export default {
  name: "voteResult",
  components:{
    voteChart,RxTable
  },
  data(){
    return {
      // voteId
      pageInfo: {
        page: 1,
        pageCapacity: 10,
      },
      listData:{
        list:[]
      },
      tableHeader: [
        {
          prop: "houseName",
          label: "房屋",
          width: "200"
        },

        {
          prop: "activityTitle",
          label: "活动名称",
          width: "120"
        },
          {
          prop: "voteTitle",
          label: "投票主题",
          width: "120"
        },
          {
          prop: "state",
          label: "投票状态",
          width: "120"
        },

      ],
      state:1,
      pageInfo:{
          page:1,
          pageCapacity:10
      },
        json_fields:{
            "序号":"index",
            "房屋":"houseName",
            "活动名称":"activityTitle",
            "投票主题":"voteTitle",
            "投票状态":"state_",
        }
    }
  },
  methods:{
    init(){
      let voteId = this.$route.query.voteId
      this.$api.choices({
        voteId
      }).then(res => {
        console.log(res)
        res.content.options.forEach(tar => {
            tar.flag = false;
        })
        this.$refs.voteChart.chartData = {
          ...res.content,
        }
      })
      this.houseState()


    },
      exportExcel(){

      },
      houseState(){
          let voteId = this.$route.query.voteId
          this.$api.houseState({
              voteId,
              ...this.pageInfo,
              state:this.state
          }).then(res => {
              console.log(res);
              let voteTitle = res.content.voteTitle;
              let activityTitle = res.content.activityTitle;
              this.listData.list = res.content.houseNames.map(item => {
                  return {
                      houseName:item,
                      voteTitle,
                      activityTitle,
                      state:this.state,
                      state_: this.state == '1'?"已投票":"未投票"
                  }
              })
              this.listData.pageQuantity = res.content.pageQuantity;

          })
      },
      changeState(v){
        this.state = v;
        this.houseState()
      },
    changePage(page) {

      this.pageInfo.page = page
      this.voteList()
    },
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>

</style>
