<template>
    <div class="container">
      <div class="card">

        <div class="form">
          <div class="form-item">
            <div class="label">活动主题：</div>
            <div class="text"> {{form.title}}</div>
          </div>
          <div class="form-item" style="margin-bottom: 100px;">
            <div class="label">活动详情：</div>
            <div class="text"> {{form.content}}</div>
          </div>
          <div class="form-item">
            <div class="label">活动时间：</div>
            <div class="text">{{form.launchTime}} - {{form.deadline}}</div>
          </div>
        </div>



        <RxTable
            ref="rxTable"


            :data="listData.list"
            :blank-col="true"
            :loading="loading"
            :showPagination="false"
        >
          <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 == 'flag'" style="height: 36px;">
                <el-image fit="fill" :src="scope.row[item.prop]" style="height: 36px;width: 80px;"></el-image>
              </div>

              <div v-else-if="item.prop == 'tvCounts'">
                <el-tag size="small" style="width: 50px;text-align: center;" @click="goTvList(scope.row)">{{scope.row[item.prop]}}</el-tag>
              </div>
              <span v-else>{{ scope.row[item.prop] || scope.row[item.prop] == 0 ? scope.row[item.prop] : '-' }} </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="left" width="200">
            <template slot-scope="scope">
              <!--            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">查看</el-button>-->
              <el-button type="text" class="btn_text_edit" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
              </el-button>
              <!--            <el-button type="text" class="btn_text_edit" icon="el-icon-edit" @click="handleEdit(scope.row)">绑定微信-->
              <!--            </el-button>-->
              <el-button class="btn_text_danger" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </RxTable>
      </div>
    </div>
</template>

<script>
import RxTable from "@/components/RxTable";
export default {
  name: "voteActivityInfo",
  components:{
    RxTable
  },
  data(){
    return {

      searchParams: {},
      loading: false,
      dialogVisible: false,
      tableHeader: [
        {
          prop: "title",
          label: "活动主题",
          width: "300"
        },
        {
          prop: "content",
          label: "详情",
          width: "300"
        },
        {
          prop: "launchTime",
          label: "开始时间",
          width: "120"
        },
        {
          prop: "deadline",
          label: "截止时间",
          width: "120"
        },

      ],
      listData: {
        list: [],
        total: 0,
      },

        form:{}
    }
  },
  methods:{


  },
  mounted() {

     this.form = this.$route.params;
      let activityId = this.$route.params.id.toString();


      this.$api.votes({
        activityId,
      }).then(res => {
        console.log(res)
        this.loading = false;
        this.listData.list = res.content;
      })
  }
}
</script>

<style lang="less" scoped>
    .form{
      //display: flex;
      height: 200px;
      .form-item{
          //border:1px solid red;
        font-size: 14px;

        .label{
          //border:1px solid red;
          text-align: right;
          height: 30px;
          line-height: 30px;
        }
        .text{
          //border:1px solid black;
          height: 30px;
          line-height: 30px;
        }

      }
    }
</style>