<template>
<div class="list">
        <div class="system-table-search">
      <div class="flex-h">
        <el-form :inline="true" :model="filterData" class="demo-form-inline">
            <el-form-item label="">
                <select-building v-model="filterData.buildingId"></select-building>
            </el-form-item>
            <el-form-item label="">
                <el-date-picker
                        v-model="filterData.time"
                        type="datetime"
                        placeholder="活动时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="">
                <el-select v-model="filterData.isEnlist" placeholder="是否报名">
                    <el-option
                            v-for="item in enlistOptions"
                            :key="item.enlist"
                            :label="item.label"
                            :value="item.enlist">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-button
                        size="mini"
                        type="primary" @click="search">查询</el-button>
            </el-form-item>

        </el-form>
      </div>
      <div class="flex-item flex-h">
         <el-button size="mini" type="success" @click='addDynamic'>新增</el-button>
      </div>
      <div class="moreFilter"></div>
    </div>
  <el-table
    :data="list || []"
    style="width: 100%">
    <el-table-column
      prop="title"
      label="活动标题">
    </el-table-column>
    <el-table-column
      prop="tel"
      label="活动时间"
      width="340">
     <template slot-scope="scope">
        <span>{{ formateDate(scope.row.startDate)}}——{{ formateDate(scope.row.endDate)}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="count"
      label="已参加人数">
        <template slot-scope="scope">{{ scope.row.count || 0 }}</template>
    </el-table-column>
    <el-table-column
      prop="pvNum"
      label="阅读量">
        <template slot-scope="scope">{{ scope.row.pvNum || 0 }}</template>
    </el-table-column>
    <el-table-column
      prop="shareNum"
      label="转发数">
        <template slot-scope="scope">{{ scope.row.shareNum || 0 }}</template>
    </el-table-column>
    <el-table-column
      prop="favorNum"
      label="点赞数">
        <template slot-scope="scope">{{ scope.row.favorNum || 0 }}</template>
    </el-table-column>
    <el-table-column
      prop="saveNum"
      label="收藏数">
        <template slot-scope="scope">{{ scope.row.saveNum || 0 }}</template>
    </el-table-column>
    <el-table-column   label="状态">
      <template slot-scope="scope">
      <span v-if="scope.row.isEnlist == '0'">未开始</span>
      <span v-if="scope.row.isEnlist == '1'">进行中</span>
      <span v-if="scope.row.isEnlist == '2'">已结束</span>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button type="text" @click="getSignList(scope.row.dynamicId)" size="small" v-if="scope.row.isEnlist == '1' || scope.row.isEnlist === '2'">报名记录</el-button>
        <el-button type="text" @click="toDetail(scope.row.dynamicId)" size="small">编辑</el-button>
        <el-button type="text" @click="finish(scope.row.dynamicId)" size="small">结束活动</el-button>
        <el-button type="text" @click="top(scope.row)" size="small">{{ scope.row.weight === 1 ? '取消置顶' : '置顶' }}</el-button>
        <el-button type="text" @click="sendOrPublicDynamic(scope.row)" size="small">{{ scope.row.status === 1 ? '取消发布' : '发布' }}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    small
    style="margin-top:10px;"
    layout="prev, pager, next"
    :current-page.sync="filterData.pageNum"
    :pageSize="filterData.pageSize"
    :total="filterData.total || 0"
    @current-change="getPageList"
  >
  </el-pagination>
</div>
</template>

<script>
import dayjs from 'dayjs'
import { createNamespacedHelpers } from "vuex";
const { mapState: mapBuildingState, mapActions: mapBuildingActions } = createNamespacedHelpers('building')
const { mapActions: mapActivity } = createNamespacedHelpers("activity");

export default {
  name: "consultant-list",
  data() {
    return {
      filterData: {
        dynamicId:'',
        name: "",
        phone: "",
        buildingId:'',
        pageNum:1,
        pageSize:10,
        total:0,
        top:'',
        time: '',
        isEnlist: ''
      },
      enlistOptions: [
          {
              label: '已报名',
              enlist: 1
          },
          {
              label: '未报名',
              enlist: 0
          }
      ],
      buildingForm: {
        pageNum: 1,
        pageSize: 100
      },
      list: [],
      buildings:[],
      pageNavi: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      searchName: ""
    };
  },
  computed: {},
  methods: {
        ...mapBuildingActions([
      'getBuildings'
    ]),
    ...mapActivity([
      "getActivityList",
      'finishActivity',
      'updateWeight',

      ]),
    getList() {
      this.getActivityList(this.filterData,this.filterData.pageSize,this.filterData.pageNum).then(res => {
          this.list = res.list;
          this.filterData.pageSize =res.pageSize 
          this.filterData.pageNum =res.pageNum
          this.filterData.total =res.total
        })
        .catch(err => {
          this.$notify.error(err.msg || err.message);
        });
    },
    // 结束活动
    finish(id){
        this.$confirm('结束以后将无法编辑, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.filterData.dynamicId = id
          this.finishActivity(
          JSON.stringify(this.filterData)
        ).then((res) => {
           this.getList();
          this.getBuildList()   
        })    
          this.$message({
            type: 'success',
            message: '成功!'
          });
        }).catch(() => {       
        });
    },
    top(row){
      const weight = Math.abs(row.weight - 1)

      this.updateWeight({ dynamicId: row.dynamicId, weight }).then(() => {
        this.list = this.list.map(x => x.dynamicId === row.dynamicId ? { ...x, weight } : x)

        if (weight) {
          this.$message.info('置顶成功')
        } else {
          this.$message.info('取消置顶成功')
        }
      }).catch((err) => {
          this.$message.error(err.message || err)
      })
    },
    addDynamic() {
      this.$router.push({ name: "activity-add" });
    },
    toDetail(row) {
      this.$router.push({ name: "activity-edit",query: { row }});
      console.log('row',row)
    },
    search() {
      this.filterData.current = 1;
      this.getList();
    },
     getBuildList() {
        this.$store.dispatch('building/getBuildings', this.buildingForm).then((res) => {
            this.buildings = res.records  
        }).catch(() => {
             console.log('building/getBuildings err')
        })
    },
    getPageList(){
       this.getList();
    },
    getSignList(id){
      this.$router.push({ name: "activity-signList",query: { id } }); 
    },
    formateDate(dt) {
      return !dt ? '' : dayjs(dt).format('YYYY-MM-DD HH:mm')
    },
    sendDynamic(row) { // 发布活动
       const data = { id: row.dynamicId }
       this.$store.dispatch('dynamic/publicDynamic', data).then((res) => {
           this.$notify.success('操作成功！')
           this.getList()
       }).catch((err) => {
           this.$notify.error(err.msg || err.message)
       })
    },
    cancelDynamic(row) { // 取消活动
       const data = { id: row.dynamicId }
       this.$store.dispatch('dynamic/cancelDynamic', data).then((res) => {
         this.$notify.success('操作成功！')
         this.getList()
        }).catch((err) => {
          this.$notify.error(err.msg || err.message)
       })
    },
    sendOrPublicDynamic(row) {
       if (row.status === 1) {
           this.cancelDynamic(row)
       } else {
           this.sendDynamic(row)
       }
    }
  },
  created() {
    this.pageNavi.current = this.$route.query.page || 1;
    this.getList();
    this.getBuildList()
  }
};
</script>

<style lang="scss" scoped>
.list {
  .header {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
.system-table-search {
  width: calc(100% - 40px);
  margin: 20px auto 0;
}

.system-table-search li {
  margin-right: 20px;
}

.system-table-search ul {
  font-size: 0;
  white-space: nowrap;
}

.system-table-search ul > li {
  display: inline-block;
}

.flex-h {
  display: flex;
  align-items: center;
}

.flex-item {
  flex: 1;
  -webkit-flex: 1;
  position: relative;
  overflow: hidden;
}
</style>
