<template>
  <ai-list class="ActiveList" isTabs>
    <template #content>
      <ai-search-bar>
        <template #left>
          <el-button class="btn" type="primary" icon="iconfont iconAdd" size="small" @click="AddActive(id)">发起活动
          </el-button>
          <ai-select v-model="search.actionStatus" placeholder="活动状态" clearable @change=";(page.current = 1), getList()"
                     :selectList="dict.getDict('partyReportActionStatus')"></ai-select>
          <ai-select v-model="search.signupStatus" placeholder="报名状态" clearable @change=";(page.current = 1), getList()"
                     :selectList="dict.getDict('partyReportSignupStatus')"></ai-select>
        </template>

        <template #right>
          <el-input v-model="search.title" size="small" placeholder="活动发布名称/发布地区" suffix-icon="iconfont iconSearch"
                    clearable @change="page.current=1, getList()"/>
        </template>
      </ai-search-bar>

      <ai-table class="ai-table" :tableData="tableData" :col-configs="colConfigs" :total="total"
                :current.sync="page.current" :size.sync="page.size" @getList="getList" :dict="dict">
        <el-table-column slot="signupStatus" label="报名状态">
          <template slot-scope="{ row }">
            <span style="color:green"
                  v-if="row.signupStatus == 0">{{ dict.getLabel('partyReportSignupStatus', row.signupStatus) }}</span>

            <span style="color:red"
                  v-if="row.signupStatus == 1">{{ dict.getLabel('partyReportSignupStatus', row.signupStatus) }}</span>
          </template>
        </el-table-column>

        <el-table-column slot="actionStatus" label="活动状态">
          <template slot-scope="{ row }">
            <span style="color:#FDB27B"
                  v-if="row.actionStatus == 0">{{ dict.getLabel('partyReportActionStatus', row.actionStatus) }}</span>

            <span style="color:#588BFB"
                  v-if="row.actionStatus == 1">{{ dict.getLabel('partyReportActionStatus', row.actionStatus) }}</span>

            <span style="color:#B0B0B0"
                  v-if="row.actionStatus == 2">{{ dict.getLabel('partyReportActionStatus', row.actionStatus) }}</span>
          </template>
        </el-table-column>

        <el-table-column slot="options" label="操作" fixed="right" align="center" width="180">
          <template slot-scope="{ row }">
            <el-button type="text" v-if="row.actionStatus!=2"  @click="toEdit(row.id)">编辑</el-button>
            <el-button type="text" @click="DetailActive(row.id)">详情</el-button>
            <el-button type="text" @click="toDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'ActiveList',
  components: {},
  props: {instance: Function, dict: Object, params: Object},
  data() {
    return {
      tableData: [],
      colConfigs: [
        {prop: 'title', label: '活动名称', width: '270'},
        {
          prop: 'areaName',
          label: '发布地区',
          width: '200',
        },
        {prop: 'beginTime', label: '活动时间', width: '300'},
        {prop: 'signupCount', label: '报名人数', align: 'center'},
        {
          slot: 'signupStatus',
          align: 'center',
        },
        {
          slot: 'actionStatus',
          align: 'center',
        },
        {
          slot: 'options',
        },
      ],
      id: '',
      page: {
        size: 10,
        current: 1,
      },
      total: 0,
      search: {
        actionStatus: '',
        signupStatus: '',
        title: '',
      },
    }
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
  created() {
    this.dict.load('partyReportActionStatus', 'partyReportSignupStatus').then(() => {
      this.getList()
    })
  },
  methods: {
    getList() {
      this.instance
      .post(`/app/apppartyreport/list`, null, {
        params: {
          ...this.page,
          ...this.search,
        },
      })
      .then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          res.data.records.map((item) => {
            if (item.beginTime && item.endTime) {
              item.beginTime = item.beginTime + '至' + item.endTime
            }
          })
        }
      })
    },

    // 编辑
    toEdit(id) {
      this.$emit('change', {
        type: 'ActiveEdit',
        params: {
          id: id || '',
        },
      })
    },

    // 发起活动
    AddActive(id) {
      this.$emit('change', {
        type: 'ActiveAdd',
        params: {
          id: id || '',
        },
      })
    },

    // 详情
    DetailActive(id) {
      this.$emit('change', {
        type: 'ActiveDetail',
        params: {
          id,
        },
      })
    },

    // 删除
    toDelete(id) {
      this.$confirm('删除后不可恢复，确定删除该数据？').then(() => {
        this.instance.post(`/app/apppartyreport/delete?ids=${id}`).then((res) => {
          if (res.code == 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      })
    },

    // 重置
    reset() {
      Object.keys(this.search).forEach((e) => {
        this.search[e] = ''
      })
      this.getList()
    },
  },
}
</script>

<style scoped lang="scss">
.ActiveList {
  height: 100%;
  overflow: auto;
}
</style>
