
<template>
  <div id="root">
    <el-form :inline="true" :model="listQuery" label-width="80px" class="form-inline">
      <el-form-item label="活动编号">
        <el-input v-model="listQuery.id" placeholder="活动编号"/>
      </el-form-item>
      <el-form-item label="活动标题">
        <el-input v-model="listQuery.activityTitle" placeholder="活动标题"/>
      </el-form-item>
      <!--<el-form-item label="活动内容">-->
      <!--<el-input v-model="formInline.user" placeholder="活动内容"/>-->
      <!--</el-form-item>-->
      <el-form-item>
        <el-button type="info" @click="clearListQuery">清空</el-button>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="primary" @click="addActivity">添加</el-button>
      <el-button type="warning" @click="ediActivity">修改</el-button>
      <el-button type="danger" @click="invalidActivity">作废</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px;"
      border
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        align="center"/>
      <el-table-column
        label="编号"
        align="center">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column
        prop="activityTitle"
        label="标题"
        align="center">
        <template slot-scope="scope">
          <span style="color: #409EFF;cursor: pointer" @click="infoActivity(scope.row.id)" >{{ scope.row.activityTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="viewCount"
        label="阅读量"
        show-overflow-tooltip
        align="center"/>
      <el-table-column
        prop="signUpMax"
        label="报名上限"
        align="center"/>
      <el-table-column
        prop="signUpCount"
        label="已报名人数"
        align="center">
        <template slot-scope="scope">
          <span style="color: #409EFF;cursor: pointer" @click="selectSignUpActivity(scope.row.id)" >{{ scope.row.signUpCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="signInCount"
        label="签到人数"
        align="center">
        <template slot-scope="scope">
          <span style="color: #409EFF;cursor: pointer" @click="activitySignInIndex(scope.row.id)" >{{ scope.row.signInCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center">
        <template slot-scope="scope">{{ getStatus(scope.row) }}</template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="权重"
        align="center"/>
      <el-table-column
        prop="createDate"
        label="发布时间"
        align="center">
        <template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template>
      </el-table-column>
      <el-table-column
        prop="registrationEndTime"
        label="报名截止时间"
        align="center">
        <template slot-scope="scope">{{ formatDate(scope.row.registrationEndTime) }}</template>
      </el-table-column>
      <el-table-column
        prop="crateUserName"
        label="发布人"
        align="center"/>
      <el-table-column
        prop="updateDate"
        label="修改时间"
        align="center">
        <template slot-scope="scope">{{ formatDate(scope.row.updateDate) }}</template>
      </el-table-column>
      <el-table-column
        prop="updateUserName"
        label="修改人"
        align="center"/>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 40, 100]"
        :page-size.sync="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Index',
  data() {
    return {
      listQuery: {
        id: '',
        activityTitle: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0, // 数据总数
      list: [],
      deleteIds: [], // 选择的id集合
      selectDate: [], // 选择的数据集合
      listLoading: true // 表格加载框
    }
  },
  mounted() {
    this.activityList()
  },
  methods: {
    onSubmit() {
      this.listQuery.pageNum = 1
      this.activityList()
    },
    clearListQuery() {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.listQuery.id = ''
      this.listQuery.activityTitle = ''
      this.activityList()
    },
    handleSelectionChange(data) { // 表格选择
      // 设置为 空
      this.deleteIds = []
      for (let i = 0; i < data.length; i++) {
        this.deleteIds.push(data[i].id)
      }
      this.selectDate = data
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.activityList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      this.activityList()
    },
    activityList() { // 查询列表
      this.listLoading = true
      this.$store.dispatch('ActivityList', this.listQuery).then((res) => {
        const resData = res.data
        this.list = resData.list
        this.listQuery.pageNum = resData.pageNum
        this.listQuery.pageSize = resData.pageSize
        this.total = resData.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        console.log('error ActivityList get')
      })
    },
    formatDate(val) {
      if (val === null) {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      // var hour = value.getHours()
      // var minutes = value.getMinutes()
      // var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
      return year + '-' + month + '-' + day
    },
    getStatus(row) { // 获取状态
      let statusName = ''

      // 判断状态
      switch (row.status) {
        case '0':
          statusName = '已作废'
          break
        case '1':
          statusName = '已发布'
          break
        case '2':
          statusName = '草稿'
          break
        default:
          statusName = '状态异常'
      }

      // 如果修改时间和创建时间不一致, 就显示已修改
      if (row.status === '1' && (row.updateDate > row.createDate)) {
        statusName = '已修改'
      }

      return statusName
    },
    addActivity() { // 添加活动
      this.$router.push({ name: 'activity-add' })
    },
    ediActivity() { // 修改活动
      const ids = this.deleteIds
      if (ids.length > 1) {
        this.$message.error('只能选择一行数据进行修改!')
        return
      }
      if (ids < 1) {
        this.$message.error('请选择一行数据进行修改!')
        return
      }
      this.$store.dispatch('ActivityById', ids).then((res) => {
        if (res.data.info.status === '0') {
          this.$message.error('已作废活动无法修改')
          return
        }
        this.$router.push({ name: 'activity-edi', query: { id: ids[0] }})
      }).catch(() => {
        console.log('error InvalidActivity')
      })
    },
    infoActivity(id) { // 查看活动
      this.$router.push({ name: 'activity-info', query: { id: id }})
    },
    invalidActivity() { //  批量作废
      const ids = this.deleteIds
      if (ids < 1) {
        this.$message.error('请选择一行数据进行修改!')
        return
      }
      this.$store.dispatch('InvalidActivity', ids).then((res) => {
        if (res.code === '0') {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.activityList()
          return
        }
        this.$message.error(res.message)
      }).catch(() => {
        console.log('error InvalidActivity')
      })
    },
    selectSignUpActivity(id) {
      this.$router.push({ name: 'signUp-info', query: { id: id }})
    },
    activitySignInIndex(id) {
      this.$router.push({ name: 'activity-signIn-index', query: { id: id }})
    }
  }
}
</script>

<style scoped>
#root {
  margin-top: 20px;
}
.form-inline{
  margin-left: 20px;
}
.block {
  display: flex;
  justify-content: flex-end;
}
</style>
