<template>
  <div class="mainContainer">
    <div class="mainTableTools">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select v-model="selectedType" placeholder="项目类型" @change="getList()">
            <el-option
              v-for="(item, index) of types"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <div class="mainTableTagbox">
            <el-tag type="success">活动开启中：<b>{{counter.status_open}}</b></el-tag>
            <el-tag type="danger">活动已关闭：<b>{{counter.status_close}}</b></el-tag>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData" border >
      <el-table-column prop="obj_id" label="项目ID">
        <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" v-if="scope.row.type == 2" :href="scope.row.host+'/rooter/cloudjobitem/'+scope.row.obj_id">{{scope.row.obj_id}}</a>
            <a target="_blank" v-else :href="scope.row.host+'/rooter/outsourceitem/'+scope.row.obj_id">{{scope.row.obj_id}}</a>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="type_name" label="项目类型"></el-table-column>
      <el-table-column prop="obj_status_name" label="当前状态">
        <template slot-scope="scope">
          <span :class="'status-' + scope.row.obj_status">{{scope.row.obj_status_name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="max_num" label="需要人数"></el-table-column>
      <el-table-column prop="enroll_num" label="已报名"></el-table-column>
      <el-table-column prop="push_num" label="已推送"></el-table-column>
      <el-table-column prop="create_time" label="发布时间"></el-table-column>
      <el-table-column prop="obj_id" label="客户经理">
        <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.manager_uid">{{scope.row.manager_nickname}}</a>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <div class="mainPageBox">
      <el-pagination
        @current-change="changePagination"
        :page-size="20"
        :total="Number(total)"
        layout="total, prev, pager, next"
        background
      ></el-pagination>
    </div>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        page: 1,
        total: 0,
        tableData: [],
        counter: {status_open: 0, status_close: 0},
        selectedType: 0,
        types: ['全部', '整包', '云端']
      }
    },
    computed: {
      
    },
    mounted() {
      this.getList();
    },
    methods: {
      async getList() {
        const data = {
          page: this.page,
          type: this.selectedType
        };
        let res = await this.$post("/api/admin/huiyuanQuick/getQuickJob", data);
        if (res && res.status === 1) {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.counter = res.data.counter;
        }
      },

      changePagination(val) {
        this.page = val;
        this.getList();
      },

    }
  };
</script>

<style scoped>
  .status-1 {
    color:#67C23A;
  }
  .status-0 {
    color:#F56C6C;
  }
</style>