<template>
<div>
  <main id="main">
    <!--==========================
      Marketplace Section
    ============================-->
    <section class="tips-long6" style="margin: 10px 0px 0px 30px">
      <!-- <div class="section-header">
        <h2 class="long long6">测试众包市场</h2>
        <p> </p>
      </div> -->
<!--      <div class="marketplace">-->
        <el-card style="margin-bottom: 10px;">
          <el-row :gutter="24" class="el-row">
            <el-col :span="20">
              <span class="type">测试类型</span>
              <el-link :underline="false" @click="changeTestType(null)"
                       :style="'color:'+ (queryParams.testType==''? '#1890FF':'black')">全部
              </el-link>
              <el-link :underline="false" v-for="dict in testTypes" @click="changeTestType(dict.dictValue)"
                       :style="'color:'+ (queryParams.testType==dict.dictValue ? '#1890FF':'black')">{{dict.dictLabel}}
              </el-link>
              <br>
              <br>
              <span class="type">金额范围</span>
              <el-link :underline="false" type="text" @click="changeFeeType(null)"
                       :style="'color:'+ (queryParams.feeType==''? '#1890FF':'black')">全部
              </el-link>
              <el-link :underline="false" v-for="dict in feeTypes" @click="changeFeeType(dict.dictValue)"
                       :style="'color:'+ (queryParams.feeType==dict.dictValue ? '#1890FF':'black')">{{dict.dictLabel}}
              </el-link>
            </el-col>
            <el-col :span="4">
              <br>
              <el-button type="warning" @click="publishTask()" class="el-button el-button--warning el-button--medium btn-yellow" style="border-color:#fff!important;">我要发布任务</el-button>
            </el-col>
          </el-row>
        </el-card>
        <table v-loading="loading">
          <tr v-if="tasks.length==0"><td>暂无数据</td></tr>
          <tr v-for="task in tasks">
            <td>
              <router-link :to="'/crowdsource/detail/'+ task.taskId" class="link-type">
                <img :src="task.icon">
              </router-link>
            </td>
            <td>
              <p> <router-link :to="'/crowdsource/detail/'+ task.taskId" class="link-type">{{task.projectName}}  </router-link></p>
              <p  style="padding-left: 5px!important;" class="index__Feature-list-itemlist-title newline" :title="task.projectDesc"> {{task.projectDesc |
                ellipsis}} </p>
              <ul>
                <li>测试类型：
                  <test-type :type="task.testType"></test-type>
                </li>
                <li>测试工期：{{task.period}}天</li>
                <li>发布时间：{{task.createTime}}</li>
                <li>技能要求：{{task.techNeed}}</li>
                <li>驻场要求：
                  <onsite-type :type="task.onsiteType"></onsite-type>
                </li>
                <li>地域要求：{{task.area}}</li>
              </ul>
              <div class="cl"></div>
              <p style="padding-left: 5px!important;">发布方：{{task.companyName}}</p>
            </td>
            <td>
              <p>{{task.price  | currency('￥')}}</p>
              <p>已应征人数：{{(task.companyAppCount + task.personalAppCount) == 20 ? "已满":(task.companyAppCount +
                task.personalAppCount) }} </p>
            </td>
          </tr>
        </table>
    </section>
  </main>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <crowdsource-task ref="crowdsourceTask"></crowdsource-task>
<!--      </div>-->
</div>
</template>

<script>
  import {list} from "@/api/crowdsource/crowdsource";
  import CrowdsourceTask from "@/views/components/CrowdsourceTask";
  import OnsiteType from "@/views/components/enum/OnsiteType";
  import TestType from "@/views/components/enum/TestType";
  import {getInfo} from '@/api/login';

  export default {
    name: "CrowdsourceMarket",
    components: {TestType, OnsiteType, CrowdsourceTask},
    data() {
      return {
        // 遮罩层
        loading: true,
        testTypes: [],
        feeTypes: [],
        tasks: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          queryType: 0,//众包市场查询
          pageNum: 1,
          pageSize: 10,
          testType: undefined,
          feeType: undefined
        }
      }
    },
    filters: {
      ellipsis(value) {
        if (!value) return ''
        if (value.length > 100) {
          return value.slice(0, 100) + '...'
        }
        return value
      }
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true;
        this.list();
      },
      list() {
        list(this.queryParams).then(response => {
            this.tasks = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        )
      },
      changeTestType(value) {
        this.queryParams.testType = value;
        this.getList();
      },
      changeFeeType(value) {
        this.queryParams.feeType = value;
        this.getList();
      },
      publishTask() {
        getInfo().then(response => {
          console.log('用户信息2---',response)
          let user = response.user;
          if (user.companyStatus != 2) {//不是公司用户无权发布任务
            this.$confirm('您不是企业用户不能发布众包任务，点确定将前往个人中心进行企业认证。', '提示', {type: 'warning'}).then(
              () => {
                this.$router.push("/user/profile/userUpgrade");
              });
          } else {
            this.$refs.crowdsourceTask.openDialog();
          }
        });

      }
    },
    computed: {},
    created() {
      this.getDicts("sys_test_type").then(response => {
        this.testTypes = response.data;
      })
      this.getDicts("sys_fee_scope").then(response => {
        this.feeTypes = response.data;
      })
      this.list();
    }
  }
</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>
