<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>
            <el-button style="position: absolute;right: 10px;" type="primary" icon="el-icon-plus" plain size="small" @click="addVote" >新增</el-button>
          </div>
        </div>



        <RxTable
            ref="rxTable"


            :data="listData.list"
            :blank-col="true"
            :loading="loading"
            :showPagination="false"
        >


          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="选项：" v-for="item in props.row.options" >
                  <span>{{ item.value }}</span>
                </el-form-item>

              </el-form>
            </template>
          </el-table-column>

          <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;"  :preview-src-list="[scope.row[item.prop]]"></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-search" @click="handleChart(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>


      <el-dialog
              title="添加投票"
              :visible.sync="dialogVisible"
              width="600px"
              :lock-scroll="false">
        <voteForm ref="voteForm"></voteForm>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit('add')">确 定</el-button>
                </span>
      </el-dialog>
      <el-dialog
              title="编辑投票活动"
              :visible.sync="dialogVisibleUpdate"
              width="600px"
              :lock-scroll="false">
        <voteForm ref="voteForm"></voteForm>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit('edit')">确 定</el-button>
                </span>
      </el-dialog>
      <el-dialog
              title="投票结果"
              :visible.sync="dialogVisibleChart"
              width="600px"
              :lock-scroll="false">
        <voteChart ref="voteChart"></voteChart>
        <span slot="footer" class="dialog-footer">

                </span>
      </el-dialog>

    </div>
</template>

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

      searchParams: {},
      loading: false,
      dialogVisible: false,
      dialogVisibleUpdate:false,
      dialogVisibleChart:false,
      tableHeader: [
        {
          prop:"sequence",
          label:"序列",
          width: 100
        },
        {
          prop: "title",
          label: "表决主题",
          width: "300"
        },
        {
          prop: "content",
          label: "表决详情",
          width: "300"
        },
        {
          prop: "launchTime",
          label: "开始时间",
          width: "120"
        },

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

        form:{},
      activityId:"",

    }
  },
  methods:{
    handleEdit(row){
      console.log(row)

      this.dialogVisibleUpdate = true;
      this.$nextTick(() => {
          this.$refs.voteForm.form = JSON.parse(JSON.stringify(row));
      })
    },
    handleChart(row){

      let voteId = row.id;
      console.log(row)
      this.$router_({
        name:"voteResult",
        title:"表决结果",
        canClose:true,
        query:{
          voteId
        }
      })
      // let title = row.title
      // let content = row.content
      // this.$api.voteStatis({
      //   voteId
      // }).then(res => {
      //    this.$refs.voteChart.chartData = {
      //      ...res.content,
      //      title,content
      //    }
      // })
    },
    addVote(){
        this.dialogVisible = true;

    },
    onSubmit(type="add"){

      let form = JSON.parse(JSON.stringify(this.$refs.voteForm.form));



      let arr = form.options.map(item =>{
        return item.value;
      });

      form.options = arr;

      if(type == "add"){
         form.activityId = this.activityId;
          this.$api.addVote(form).then(res => {
            console.log(res);
            this.$message.success("增加成功！");
            this.dialogVisible = false;
            this.handleSearch();
          })
      }else{
        delete form.activityId;
        this.$api.editVote(form).then(res => {
          console.log(res);
          this.$message.success("增加成功！");
          this.dialogVisible = false;
          this.handleSearch();
        })
      }
    },
    handleSearch(){
      let activityId = this.activityId;
      this.$api.votes({
        activityId,
      }).then(res => {
        console.log(res)
        this.loading = false;
        this.listData.list = res.content;
      })
    }

  },
  mounted() {

     this.form = this.$route.query;
    this.activityId= this.$route.query.id.toString();
    this.handleSearch()



  }
}
</script>

<style lang="less" scoped>
    .form{
      //display: flex;
      height: 200px;
      .form-item{
        position: relative;

        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>
