<template>
  <div>
    <el-tabs type="border-card" style="min-height: 600px;" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="myClaim" label="我接收的任务" v-if="myClaimShow">
        <span slot="label"><i class="el-icon-s-claim"></i>我应征成功的任务</span>
        <crowdsource-list type="myClaim" v-if="activeName=='myClaim'" ref="myClaim"></crowdsource-list>
      </el-tab-pane>
      <el-tab-pane name="myPublish" label="我发布的任务" v-if="companyStatus==2">
        <span slot="label"><i class="el-icon-s-shop"></i>我发布的任务</span>
        <crowdsource-list type="myPublish" v-if="activeName=='myPublish'" ref="myPublish"></crowdsource-list>
      </el-tab-pane>
      <el-tab-pane name="myApply" v-if="companyStatus==2">
        <span slot="label"><i class="el-icon-s-grid"></i> 众包发布申请</span>
        <crowdsource-list type="myApply" v-if="activeName=='myApply'" ref="myApply"></crowdsource-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import CrowdsourceAudit from "@/views/components/CrowdsourceAudit";
  import CrowdsourceList from "@/views/components/CrowdsourceList";
  import store from "@/store";

  export default {
    name: "MyCrowdsource",
    components: {CrowdsourceAudit, CrowdsourceList},
    data() {
      return {
        // 遮罩层
        loading: true,
        applyId: 0,
        activeName: 'myClaim',
        publishList: [],
        myClaimShow: true,
        taskList: [],
        applyList: [],
        // 总条数
        total: 0,
        companyStatus: 0,
        testerStatus: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    methods: {
      /** 查询列表 */
      getList() {
      },

      handleClick() {

      }
    },
    watch: {
      activeName(newVal, oldVal) {
        store.commit('SET_ACTIVENAME', newVal);
      },
    },
    computed: {},
    created() {
      this.companyStatus = store.getters.companyStatus;
      this.testerStatus = store.getters.testerStatus;
      if (this.companyStatus == 2 && this.testerStatus !=2) {
        this.myClaimShow = false;
        if (store.getters.activeName == 'myPublish' || store.getters.activeName == 'myClaim' || store.getters.activeName == 'myApply')
           this.activeName = store.getters.activeName;
        else
          this.activeName = 'myPublish';
      } else {
        if (store.getters.activeName == 'myPublish' || store.getters.activeName == 'myClaim' || store.getters.activeName == 'myApply')
          this.activeName = store.getters.activeName;
      }
    }
  }
</script>

<style scoped>
  .type {
    color: #1890FF;
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
  }

  .tip {
    font-size: 13px;
    color: gray;
  }

  .el-link {
    margin-right: 10px;
    font-size: 13px;
  }

  .active {
    color: #1890FF;
  }

  .el-row {
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap
  }

  .el-card {
    min-width: 100%;
    height: 100%;
    margin-right: 20px;
    transition: all .5s;
  }
</style>
