<template>
    <div>
        <el-form v-if="type == 'allTask'" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <!--      <el-form-item label="任务状态" prop="taskStatus">-->
            <!--        <el-select v-model="queryParams.taskStatus">-->
            <!--          <el-option label="请选择" value="">请选择</el-option>-->
            <!--          <el-option label="进行中" value=0>进行中</el-option>-->
            <!--          <el-option label="任务完成" value=0>任务完成</el-option>-->
            <!--          <el-option label="任务失败" value=2>任务失败</el-option>-->
            <!--        </el-select>-->
            <!--      </el-form-item>-->
            <el-form-item label="任务状态" prop="processStatus">
                <el-select v-model="queryParams.processStatus">
                    <el-option label="请选择" value="">请选择</el-option>
                    <el-option label="应征中" value="0">应征中</el-option>
                    <el-option label="测试中" value="1">测试中</el-option>
                    <el-option label="没有应征者，过期下架" value="4">没有应征者，过期下架</el-option>
                    <el-option label="未指定测试者，过期下架" value="5">未指定测试者，过期下架</el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="listAllTask">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list" style="height: 100%">
            <el-table-column label="任务ID" v-if="type == 'allTask'" align="center" key="taskId" prop="taskId" />
            <el-table-column label="发布时间" align="center" key="createTime" prop="createTime">
                <template slot-scope="scope">
                    <span v-if="scope.row.createTime">{{ scope.row.createTime.slice(0, 10) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="项目名称"
                align="center"
                key="projectName"
                prop="projectName"
                :show-overflow-tooltip="true"
            />
            <el-table-column label="金额" align="center" key="price" prop="price" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.price | currency('￥') }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="测试类型"
                align="center"
                key="testType"
                prop="testType"
                :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <!-- <test-type :type="scope.row.testType"></test-type> -->
                    <span>{{ findLabelValueByProp(list1, scope.row.testType, 'dictValue', 'dictLabel') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="项目工期" align="center" key="period" prop="period" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.period }}天</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="截止日期" v-if="type=='myPublish' || type=='myClaim'|| type=='tobeExpired'" align="center" key="expireTime"
                       prop="expireTime"
                       :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <span >{{ scope.row.expireTime}}</span>
        </template>
      </el-table-column> -->
            <el-table-column
                v-if="type == 'myApply'"
                label="审核状态"
                align="center"
                key="1"
                prop="status"
                width="100"
                :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <audit-status :status="scope.row.status"></audit-status>
                </template>
            </el-table-column>
            <!--      <el-table-column v-if="type !='myApply'" label="任务状态" align="center" key="2" prop="taskStatus" width="100">-->
            <!--        <template slot-scope="scope">-->
            <!--         <task-status :status="scope.row.taskStatus"></task-status>-->
            <!--        </template>-->
            <!--      </el-table-column>-->
            <el-table-column
                v-if="type != 'myApply'"
                label="任务状态"
                align="center"
                key="3"
                prop="processStatus"
                width="200"
                :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <process-status :processStatus="scope.row.processStatus"></process-status>
                </template>
            </el-table-column>
            <el-table-column
                v-if="type != 'myApply'"
                label="应征者总数"
                align="center"
                key="appCount"
                :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.personalAppCount + scope.row.companyAppCount }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        v-if="
                            (type == 'myApply' && scope.row.status == 2) ||
                            (type == 'myPublish' &&
                                (scope.row.processStatus == 4 ||
                                    scope.row.processStatus == 5 ||
                                    scope.row.processStatus == 6 ||
                                    scope.row.processStatus == 7))
                        "
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="publishTask(scope.row)"
                        >重新发布
                    </el-button>
                    <router-link
                        v-if="type == 'myApply'"
                        :to="'/crowdsource/my/publishApply/' + scope.row.applyId"
                        class="link-type"
                    >
                        <el-button size="mini" type="text" icon="el-icon-key">查看详情 </el-button>
                    </router-link>
                    <router-link
                        v-if="type == 'myClaim'"
                        :to="'/crowdsource/my/claim/' + scope.row.taskId"
                        class="link-type"
                    >
                        <el-button size="mini" type="text" icon="el-icon-key">查看详情 </el-button>
                    </router-link>
                    <router-link
                        v-if="type == 'myPublish'"
                        :to="'/crowdsource/my/publish/' + scope.row.taskId"
                        class="link-type"
                    >
                        <el-button size="mini" type="text" icon="el-icon-key">查看详情 </el-button>
                    </router-link>
                    <router-link
                        v-if="type == 'tobeExpired' || type == 'allTask'"
                        :to="'/crowdsource/manage/detail/' + scope.row.taskId"
                        class="link-type"
                    >
                        <el-button size="mini" type="text" icon="el-icon-key">查看详情 </el-button>
                    </router-link>
                    <el-button size="mini" type="text" @click="delTaskk(scope.row.taskId)">删除任务 </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <crowdsource-task v-show="type == 'myApply' && task != null" ref="crowdsourceTask"></crowdsource-task>
    </div>
</template>

<script>
import { list, myClaim, myApply, myPublish, delTask } from '@/api/crowdsource/crowdsource'
import ProcessStatus from '@/views/components/enum/ProcessStatus'
import TaskStatus from '@/views/components/enum/TaskStatus'
import AuditStatus from '@/views/components/enum/AuditStatus'
import TestType from '@/views/components/enum/TestType'
import CrowdsourceTask from './CrowdsourceTask'

export default {
    name: 'CrowdsourceList',
    props: {
        type: {
            type: String,
        },
        list1: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    components: { TestType, AuditStatus, TaskStatus, ProcessStatus, CrowdsourceTask },
    data() {
        return {
            list: [],
            task: null,
            loading: false,
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                taskStatus: undefined,
                processStatus: undefined,
            },
        }
    },
    methods: {
        delTaskk(id) {
            this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    delTask(id).then((res) => {
                        this.getList()
                        this.$message({
                            type: 'success',
                            message: '删除成功!',
                        })
                    })
                })
                .catch(() => {
                    
                })
        },
        listMyApply() {
            this.loading = true
            myApply(this.queryParams).then((response) => {
                console.log('任务---', response)
                this.list = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        listMyPublish() {
            this.loading = true
            myPublish(this.queryParams).then((response) => {
                this.list = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        listMyClaim() {
            this.loading = true
            myClaim(this.queryParams).then((response) => {
                this.list = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        listTobeExpired() {
            this.loading = true
            this.queryParams.queryType = 1
            list(this.queryParams).then((response) => {
                this.list = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        listAllTask() {
            this.loading = true
            this.queryParams.queryType = 2
            list(this.queryParams).then((response) => {
                this.list = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        getList() {
            if (this.type == 'myApply') this.listMyApply()
            else if (this.type == 'myPublish') this.listMyPublish()
            else if (this.type == 'myClaim') this.listMyClaim()
            else if (this.type == 'tobeExpired') this.listTobeExpired()
            else if (this.type == 'allTask') this.listAllTask()
        },
        publishTask(task) {
            this.task = task
            this.$refs.crowdsourceTask.openDialog(task)
        },
        resetQuery() {
            this.dateRange = []
            this.resetForm('queryForm')
            this.listAllTask()
        },
    },
    created() {
        this.getList()
    },
}
</script>
<style scoped>
</style>
