<template>
  <div class="container">

    <div class="card">

      <searchForm :keys="['key','optime']" ref="searchForm"
                  @on-search="handleSearch">
        <el-button type="primary" icon="el-icon-plus" plain size="small" @click="addVoteActivity" >新增</el-button>
      </searchForm>

      <RxTable
          ref="rxTable"
          @sizeChange="changePageSize"
          @pageChange="changePage"

          :currentPage="pageInfo.page"
          :pageSize="pageInfo.pageSize"
          :page-count="listData.pageQuantity"
          :data="listData.list"
          :blank-col="true"
          :loading="loading"
      >
        <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-search" @click="handleInfo(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">
          <activityForm ref="activityForm"></activityForm>
          <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">
          <activityForm ref="activityForm"></activityForm>
          <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>
  </div>
</template>

<script>
import searchForm from "@/components/searchForm";
import RxTable from "@/components/RxTable";
import activityForm from "./module/activityForm";


export default {
  name: "index",
  components: {
    searchForm,
    RxTable,
    activityForm
  },
  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: [],
        pageQuantity:0,
      },
      pageInfo: {
        pageNum: 1,
        pageCapacity: 10,
      },
      addVisible: false,
      dialogVisibleUpdate: false,
    }
  },
  methods: {
    addVoteActivity(){
      this.dialogVisible = true;
    },
    handleInfo(row){
      console.log(row)
      this.$router_({
        name:"voteActivityInfo",
        title:"活动详情",
        canClose:true,
        query:{
            ...row
        }
      })

    },
    handleEdit(row) {
        console.log(row)
        this.dialogVisibleUpdate = true;
        this.$nextTick(() => {
            this.$refs.activityForm.form = JSON.parse(JSON.stringify(row));
        })

    },

    handleDelete(row){
      this.$confirm('确认刪除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      })

    },

    onSubmit(type="add") {
      let form = this.$refs.activityForm.form;

      console.log(type)


      if(type =="add"){
          this.$api.addVoteActivity(form).then(res => {
              this.$message.success("新增成功！");
              this.dialogVisible = false;
              this.handleSearch();
          })
      }else{
           this.$api.editVoteActivity(form).then(res => {
               this.$message.success("编辑成功！");
               this.dialogVisibleUpdate = false;
               this.handleSearch();
           })
      }

    },

    goDeleteSelect() {

    },
    //搜索
    handleSearch() {
      this.pageInfo.pageNum = 1




      this.voteList()
    },


    voteList() {
        let optime = this.$refs.searchForm.time1;

        let startTime,
            key,
            endTime;
        key = this.$refs.searchForm.form.key;

        if(optime.length){
            startTime = optime[0];
            endTime = optime[1];
        }

        this.searchParams = {
            startTime,
            endTime,
            key,
            ...this.pageInfo
        }




      this.loading = true;

      this.$api.voteList(this.searchParams).then(res => {
        this.loading = false;
        console.log(res)
        this.listData.list = res.content.voteActivityViewDtos;

        this.listData.pageQuantity = res.content.pageQuantity;

      })
    },


    changePageSize() {

    },
    changePage(page) {

      this.pageInfo.pageNum = page
      this.voteList()
    },

  },
  mounted() {
    this.handleSearch()
  }
}
</script>

<style lang="less" scoped>
.container {
  /*position: relative;*/

  .btnBox {
    margin-left: 20px;
  }
}
</style>
