<template>
  <ai-list class="partyList">
    <template slot="content">
      <ai-search-bar>
        <template #left>
          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd()">发起活动</el-button>
          <ai-select v-model="search.actionStatus" placeholder="请选择活动状态" :selectList="dict.getDict('partyReportActionStatus')"
            @change="getListInit"></ai-select>
          <ai-select v-model="search.signupStatus" placeholder="请选择报名状态" :selectList="dict.getDict('partyReportSignupStatus')"
            @change="getListInit"></ai-select>
        </template>
        <template slot="right">
          <el-input
            v-model="search.con"
            size="small"
            placeholder="请输入活动名称或发布地区"
            clearable
            @change="search.current=1,getList()"
            suffix-icon="iconfont iconSearch"/>
        </template>
      </ai-search-bar>
      <ai-table
        :dict="dict"
        :tableData="tableData"
        :col-configs="colConfigs"
        :total="total"
        v-loading="loading"
        style="margin-top: 6px;"
        :current.sync="search.current"
        :size.sync="search.size"
        @getList="getList">
        <el-table-column slot="activeTime" width="220px" label="活动时间" align="center">
          <template slot-scope="{ row }">
            <div class="table-options">{{row.beginTime.substring(0, 10)}}至{{row.endTime.substring(0, 10)}}</div>
          </template>
        </el-table-column>
        <el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'List',

  props: {
    instance: Function,
    permissions: Function,
    dict: Object,
    selected: Object,
    areaId: String
  },
  data() {
    return {
      search: {
        current: 1,
        size: 10,
        con: '',
        actionStatus: '',
        signupStatus: ''
      },
      orgName: '',
      loading: false,
      total: 0,
      colConfigs: [
        {prop: 'title', label: '活动名称', align: 'center'},
        {prop: 'areaName', label: '发布地区', align: 'center'},
        {slot: 'activeTime'},
        {prop: 'signupCount', label: '报名人数', align: 'center', width: 120},
        {prop: 'signupStatus', label: '报名状态', align: 'center', dict: 'partyReportSignupStatus', width: 120},
        {prop: 'actionStatus', label: '活动状态', align: 'center', dict: 'partyReportActionStatus', width: 120},
        {slot: 'option'},
      ],
      tableData: [],
      ids: '',
    }
  },
  computed: {
    ...mapState(['user']),
  },
  created() {
    this.dict.load('partyReportActionStatus', 'partyReportSignupStatus').then(() => {
      this.getList()
    })
    
  },
  methods: {
    getListInit() {
      this.current = 1
      this.getList()
    },
    getList() {
      this.instance.post(`/app/apppartyreport/list`, null, {
        params: {...this.search, areaId: this.areaId}
      }).then(res => {
        this.loading = false
        if (res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      }).catch(() => {
        this.loading = false
      })
    },
    
    toDetail(id) {
      this.$emit("showDetail", id)
    },
    toAdd() {
      this.$emit("showDetail")
    }
  }
}
</script>

<style lang="scss" scoped>
.partyList {
  .party-table__btns {
    display: flex;
    align-items: center;
  }

  ::v-deep .audit-0 {
    color: #FF8822 !important;
  }

  ::v-deep .audit-1 {
    color: #2EA222 !important;
  }

  ::v-deep .ai-list__content--right {
    flex: 1;
    min-width: 0;
    margin-left: 1px;
    box-shadow: none;

    .ai-list__content--right-wrapper {
      width: 100%;
    }
  }
  ::v-deep .is-current>.el-tree-node__content{
    width: 100%!important;
    padding-right: 16px!important;
  }
}
</style>
