<template>
    <div style="background: rgb(245, 246, 250)">
        <div v-if="userinform.companyStatus == 2" class="ijaiorenwu" @click="publish">
            <img class="ijaoricon" src="/assets/home/fbrwicon.png" alt="" />
            发布众包任务
        </div>
        <img
            v-if="officialwebsite"
            style="width: 100%; height: 450px; object-fit: cover"
            src="/assets/home/zhbao1.png"
            alt=""
        />
        <div class="topnavbar">
            <div class="topnavbarcon" style="display: flex; justify-content: space-between; align-items: end">
                <div style="width: 100%">
                    <div style="display: flex; padding-top: 7px">
                        <div class="typetext">任务类型:</div>
                        <el-tabs v-model="typeName" @tab-click="showDataTypeChage">
                            <el-tab-pane label="全部" name="q"></el-tab-pane>
                            <el-tab-pane
                                v-for="(item, key) of tasktypelist"
                                :key="key"
                                :label="item.dictLabel"
                                :name="item.dictValue"
                            >
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <el-divider></el-divider>
                    <div style="display: flex; padding-top: 7px">
                        <div class="typetext">金额范围:</div>
                        <el-tabs v-model="amountrange" @tab-click="showDataTypeChage">
                            <el-tab-pane label="全部" name="q"></el-tab-pane>
                            <el-tab-pane
                                v-for="(item, key) of paytypelist"
                                :key="key"
                                :label="item.name"
                                :name="item.id"
                            >
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <el-divider></el-divider>
                    <div style="display: flex; padding-top: 7px">
                        <div class="typetext">项目周期:</div>
                        <el-tabs v-model="period" @tab-click="showDataTypeChage">
                            <el-tab-pane label="全部" name="q"></el-tab-pane>
                            <el-tab-pane
                                v-for="(item, key) of periodlist"
                                :key="key"
                                :label="item.name"
                                :name="item.id"
                            >
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <!-- <div v-if="userinform.companyStatus == 2"> -->
                    <!-- <el-divider></el-divider> -->
                    <!-- <div class="release" v-if="userinform.companyStatus == 2" @click="publish">我要发布任务</div> -->
                    <!-- </div> -->
                    <!-- <div v-else class="piliccomp"> -->
                    <el-divider></el-divider>
                    <!-- </div> -->
                    <div style="display: flex; padding-top: 7px">
                        <div class="typetext">驻场需求:</div>
                        <el-tabs v-model="onsiteType" @tab-click="showDataTypeChage">
                            <el-tab-pane label="全部" name="q"></el-tab-pane>
                            <el-tab-pane
                                v-for="(item, key) of residentlist"
                                :key="key"
                                :label="item.name"
                                :name="item.id"
                            ></el-tab-pane>
                        </el-tabs>
                    </div>
                    <el-divider></el-divider>
                    <div style="display: flex; padding-top: 7px">
                        <div class="typetext">地域要求:</div>
                        <el-tabs style="margin-top: -15px" v-model="diyuChose" @tab-click="showDataTypeChage">
                            <v-distpicker
                                @province="onChangeProvince"
                                @city="onChangeCity"
                                :placeholders="placeholders"
                                :province="province"
                                :city="city"
                                hide-area
                            ></v-distpicker>
                        </el-tabs>
                    </div>
                </div>
                <!-- <div>   
                    
                </div> -->
            </div>
        </div>
        <div class="decsbtn">
            <div class="descbtnitem" style="margin-right: 13px" @click="fabuTimeEsc">发布时间<img src="/assets/home/esc.png" style="width:12px;height:12px;margin-left:5px" alt=""></div>
            <div class="descbtnitem" @click="proMoneyEsc">项目金额 <img src="/assets/home/esc.png" style="width:12px;height:12px;margin-left:5px" alt=""></div>
        </div>
        <div :class="officialwebsite ? 'tytool' : 'notytool'">
            <div v-if="listcrowd.length > 0" v-loading="loading" style="width: 100%">
                <div
                    v-for="(task, key) of listcrowd"
                    :key="key"
                    class="productbox"
                    :style="{ padding: officialwebsite ? '' : '10px 0 5px 18px' }"
                    @click="crowdinform(task.taskId)"
                >
                    <div style="width: 150px; display: flex; align-items: center">
                        <!-- <img style='width:119px;object-fit:contain' :src="task.icon?'https://www.keyitest.cn/'+task.icon.substr(task.icon.indexOf('g')):'/assets/home/picture.png'" alt=""> -->
                        <!-- <img style="width: 119px; object-fit: contain" :src="task.icon" alt="" /> -->
                        <img
                            v-if="task.testType.split(',')[0] == 'static'"
                            style="width: 97px; object-fit: contain"
                            src="/assets/crowd/jtcs.png"
                            alt=""
                        />
                        <img
                            v-else-if="task.testType.split(',')[0] == 'function'"
                            style="width: 97px; object-fit: contain"
                            src="/assets/crowd/gncs.png"
                            alt=""
                        />
                        <img
                            v-else-if="task.testType.split(',')[0] == 'performance'"
                            style="width: 97px; object-fit: contain"
                            src="/assets/crowd/xncs.png"
                            alt=""
                        />
                        <img
                            v-else-if="task.testType.split(',')[0] == 'security'"
                            style="width: 97px; object-fit: contain"
                            src="/assets/crowd/aqcs.png"
                            alt=""
                        />
                        <img
                            v-else-if="task.testType.split(',')[0] == 'reliability'"
                            style="width: 97px; object-fit: contain"
                            src="/assets/crowd/kkxcs.png"
                            alt=""
                        />
                        <img
                            v-else-if="task.testType.split(',')[0] == 'development'"
                            style="width: 97px; object-fit: contain"
                            src="/assets/crowd/ycrw.png"
                            alt=""
                        />
                        <img v-else style="width: 97px; object-fit: contain" src="/assets/crowd/qtcs.png" alt="" />
                    </div>
                    <div class="taskper">
                        <div style="display: flex; justify-content: space-between" class="raise">
                            <p>{{ task.projectName }}</p>
                            <p style="font-weight: bold">
                                <span v-if="task.price == 0" style="color: #e93a3a">面议</span>
                                <span v-else style="color: #e93a3a">￥ {{ task.price }}</span>
                                <!-- <span>/次</span> -->
                            </p>
                        </div>
                        <el-divider></el-divider>
                        <div class="cetype">
                            <p>
                                任务类型：
                                {{ findLabelValueByProp(tasktypelist, task.testType, 'dictValue', 'dictLabel') }}
                            </p>
                            <p>任务工期：{{ task.period }}天</p>
                            <p>发布时间： {{ task.createTime.substr(0, 10) }}</p>
                            <p>
                                共招<span style="color: #0066eb">{{ task.needPerson }}</span
                                >人 / 已报名
                                <span style="color: #0066eb">{{ task.companyAppCount + task.personalAppCount }}</span
                                >人
                                <!-- 当前报名人数/计划招募人数：<span style="color:#4485ee">
                                    {{
                                    task.companyAppCount + task.personalAppCount == 20
                                        ? '已满'
                                        : task.companyAppCount + task.personalAppCount
                                }}/{{task.needPerson}}
                                </span> -->
                            </p>
                            <p>技能要求：{{ task.techNeed | limittechNeed }}</p>
                            <p>驻场要求：{{ findByvalue(onsiteTypelist, task.onsiteType) }}</p>
                            <p>地域要求：{{ task.area }}</p>
                            <!-- <p>发布方：{{ task.companyName }}</p> -->
                            <div style="display: flex">
                                状态：
                                <div class="isBm" v-if="task.processStatus == 0">报名中</div>
                                <div
                                    class="isBm"
                                    v-else-if="task.processStatus == 1"
                                    style="background: #f0ebfd; color: #6445fd"
                                >
                                    实施中
                                </div>
                                <div
                                    class="isBm"
                                    v-else-if="task.processStatus == 2"
                                    style="background: #def3fd; color: #1e83f9"
                                >
                                    待验收
                                </div>
                                <div
                                    class="isBm"
                                    v-else-if="task.processStatus == 3"
                                    style="background: #fceae3; color: #fe4d40"
                                >
                                    待结算
                                </div>
                                <div
                                    class="isBm"
                                    v-else-if="task.processStatus == 4"
                                    style="background: #defdef; color: #12b378"
                                >
                                    已完成
                                </div>
                                <!-- <div class="isBmjs" v-else>报名结束</div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else>
                <el-empty></el-empty>
            </div>
            <div v-if="officialwebsite && total > 10" style="width: 100%; margin-top: 30px; text-align: center">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination>
            </div>
            <!--  :page-sizes="[3, 6, 30]" sizes,-->
            <div v-if="!officialwebsite && total > 3" style="width: 100%; margin-top: 50px; text-align: center">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total,  prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
        <crowdsource-task ref="crowdsourceTask"></crowdsource-task>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { crowdlist, homecrowdlist } from '@/api/crowdsource/crowdsource'
import { onsiteTypelist } from '@/const/dict/commondict'
import CrowdsourceTask from '../../common/CrowdsourceTask'
import { findByvalue, findLabelValueByProp } from '@/util/util'
import mixin from '@/mixin/index.js'
export default {
    mixins: [mixin],
    data() {
        return {
            // 发布时间 up 升序 down降序
            dateOrder: null,
            priceOrder: null,
            // 项目金额
            loading: true,
            taskdrawer: false,
            typeName: 'q', //测试类型
            amountrange: 'q', //金额范围
            period: 'q',
            onsiteType: 'q',
            paytypelist: [
                { name: '2千以下', id: '1' },
                { name: '2千-5千', id: '2' },
                { name: '5千-1万', id: '3' },
                { name: '1万以上', id: '4' },
            ],
            periodlist: [
                { name: '小于30天', id: '1' },
                { name: '30天-90天', id: '2' },
                { name: '90天以上', id: '3' },
            ],
            residentlist: [
                { name: '无需驻场', id: '1' },
                { name: '偶尔驻场', id: '2' },
                { name: '定期驻场', id: '3' },
            ],
            diyuChose: '',
            province: '不限',
            city: '不限',
            placeholders: {
                province: '不限',
                city: '不限',
            },
            myarea: '不限',
            listcrowd: [],
            currentPage: 1,
            total: '',
            pageNum: 1,
            pageSize: 10,
            onsiteTypelist, //驻场需求
            officialwebsite: true, //是否官网
        }
    },
    components: { CrowdsourceTask },
    filters: {
        limittechNeed(value) {
            if (!value) return ''
            if (value.length > 18) {
                return value.slice(0, 18) + '...'
            }
            return value
        },
    },
    computed: {
        ...mapGetters(['testtypelist', 'feescopelist', 'token', 'userinform']),
    },
    mounted() {
        // console.log('toolType----',this.testtype,this.feescope)
        let currentrout = this.$route.path
        if (currentrout !== '/crowdsourcing') {
            this.officialwebsite = false
            this.pageSize = 3
        }
        this.getList()
    },
    methods: {
        // 发布时间和项目金额排序
        fabuTimeEsc() {
            this.priceOrder = null
            if (this.dateOrder == 'down') {
                this.dateOrder = 'up'
            } else if (this.dateOrder == 'up') {
                this.dateOrder = 'down'
            } else {
                this.dateOrder = 'down'
            }
            this.getList()
        },
        proMoneyEsc() {
            this.dateOrder = null
            if (this.priceOrder == 'down') {
                this.priceOrder = 'up'
            } else if (this.priceOrder == 'up') {
                this.priceOrder = 'down'
            } else {
                this.priceOrder = 'up'
            }
            this.getList()
        },

        onChangeProvince(data) {
            if (data.value != '不限') {
                this.province = data.value
                this.myarea = data.value + (this.city == '不限' ? '' : this.city)
            } else {
                this.myarea = '不限'
            }
            this.getList()
            // console.log(data);
            // if (data.value.indexOf('---') == -1) this.province = data.value
            // else this.province = ''
        },
        onChangeCity(data) {
            if (data.value != '不限') {
                this.myarea = this.province + '-' + data.value
            } else {
                this.myarea = this.province
            }
            this.getList()
            // if (data.value.indexOf('---') == -1) this.city = data.value
            // else this.city = ''
        },
        findByvalue,
        findLabelValueByProp,

        
        /** 查询列表 */
        getList() {
            this.loading = true
            // console.log('toolType----',this.onsiteType)
            let onsiteType = ''
            if (this.onsiteType == 0) {
                onsiteType = 'q'
            } else {
                onsiteType = this.onsiteType - 1 + ''
            }
            let data = {
                testType: this.typeName,
                feeType: this.amountrange,
                period: this.period,
                area: this.myarea == '不限' ? null : this.myarea,
                onsiteType,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                dateOrder: this.dateOrder,
                priceOrder: this.priceOrder,
                // status: 1,
            }

            // console.log('data----',data)
            Object.keys(data).forEach((keyd) => {
                // console.log('遍历data----',data[keyd])
                if (
                    !data[keyd] ||
                    data[keyd] == '' ||
                    data[keyd] == 'NaN' ||
                    data[keyd] == 'null' ||
                    data[keyd] == 'q' ||
                    data[keyd] == '-1'
                ) {
                    delete data[keyd]
                }
                // console.log('data[keyd]=='0' || data处理后----',data[keyd])
            })
            //  data.queryType=0
            // console.log('data----',data)
            homecrowdlist(data)
                .then((response) => {
                    // console.log('response----',response)
                    this.listcrowd = response.rows
                    this.total = response.total
                    this.loading = false
                })
                .catch((err) => {
                    // console.log('异常1',err)
                })
        },
        //测试类型
        showDataTypeChage() {
            this.getList()
        },
        // //金额范围
        // payTypeChage(){
        //     this.getList()
        // },
        //详情页
        crowdinform(id) {
            if (this.officialwebsite) {
                this.$router.push(`./crowdsourcing/crowddetails?id=${id}`)
            } else {
                this.$router.push(`/console/crowdinform?id=${id}`)
            }
        },
        //发布任务
        publish() {
            // console.log('token---',this.token);
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {
                        // console.log('取消')
                    })
            } else {
                if (this.userinform.companyStatus != 2) {
                    //不是公司用户无权发布任务
                    // this.$confirm('您不是企业用户不能发布众包任务，点确定将前往个人中心进行企业认证。', '提示', {type: 'warning'}).then(() => {
                    //     this.$router.push(`/console/profile`)
                    // });
                    this.$confirm('您不是企业用户不能发布众包任务。', '提示', {
                        type: 'warning',
                    }).then(() => {})
                } else {
                    this.$router.push('/crowdsourcing/publishtasks')
                    // this.$refs.crowdsourceTask.openDialog();
                }
            }
        },
        //分页
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList()
        },
    },
}
</script>
<style scoped>
.topnavbar {
    width: 100%;
    padding: 10px 0;
    background: #fff;
    box-sizing: border-box;
    margin-top: -3px;
    box-shadow: 0px 4px 11px 1px rgba(20, 77, 150, 0.1);
}
.topnavbarcon {
    width: 1200px;
    margin: auto;
}
.ijaiorenwu {
    position: fixed;
    right: 0;
    top: 50%;
    width: 110px;
    height: 90px;
    background: #2084f9;
    box-shadow: 0px 1px 20px 1px rgba(13, 92, 187, 0.3);
    border-radius: 4px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.ijaoricon {
    width: 31px;
    height: 31px;
    margin-bottom: 7px;
}
.tytool {
    width: 1200px;
    margin: auto;
    padding: 30px 0;
}
.notytool {
    /* width:1200px;
        margin-left:30px; */
}
.topnavbar >>> .el-tabs__item.is-top:last-child {
    padding-right: 30px;
}
.topnavbar >>> .el-tabs__item.is-top:last-child {
    padding-right: 30px;
}
.el-tabs >>> .el-tabs__nav-wrap::after {
    background-color: transparent;
}
.el-tabs >>> .el-tabs__item {
    color: #4d4d4d;
}
.el-tabs >>> .el-tabs__active-bar {
    background-color: transparent;
}
.el-tabs >>> .el-tabs__item.is-active {
    background: #0066eb;
    color: #fff;
    border: none;
    border-radius: 4px;
}
.topnavbar >>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 22px;
}
.topnavbar >>> .el-tabs--top .el-tabs__item.is-top:nth-child(6) {
    padding-right: 18px;
}
.topnavbar >>> .el-divider--horizontal {
    margin: 5px 0 15px 0;
    /* width:1150px; */
}
.pilic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -15px 0 -5px 0;
}
.pilic >>> .el-divider--horizontal {
    margin: 0;
    width: 1000px;
}
/* .piliccomp>>>.el-divider--horizontal{
        width:1000px;
    } */
.topnavbar >>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 22px;
}
.topnavbar >>> .el-tabs--top .el-tabs__item.is-top:nth-child(6) {
    padding-right: 18px;
}
.topnavbar >>> .el-divider--horizontal {
    margin: -5px 0 5px 0;
}
.typetext {
    color: #4d4d4d;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    margin-right: 30px;
    font-size: 17px;
    /* width: 90px !important;  */
}
.productbox >>> .el-divider--horizontal {
    margin: 0px;
}
.cetype {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.productbox {
    width: 100%;
    box-sizing: border-box;
    /* height: 110px; */
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1);
    border-radius: 4px;
    padding: 25px 0 10px 18px;
    display: flex;
    margin-bottom: 30px;
    cursor: pointer;
    transition: all 0.1s linear;
}
.productbox:hover .raise p:nth-child(1) {
    color: #0066eb;
}
.productbox:hover {
    transform: scale(1.01);
    box-shadow: 0px 2px 8px 0px #87898d;
}
.cetype p,
.cetype div {
    width: 200px;
    font-size: 14px;
    margin: 10px 0;
    font-weight: 500;
    color: #4d4d4d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cetype p:nth-child(1),
.cetype p:nth-child(5) {
    width: 260px;
}
.cetype p:nth-child(4),
.cetype p:nth-child(8) {
    width: 230px;
}
.cetype div:nth-child(1),
.cetype div:nth-child(5) {
    width: 260px;
}
.cetype div:nth-child(4),
.cetype div:nth-child(8) {
    width: 230px;
}
.cetype .isBm {
    width: 56px !important;
    height: 24px;
    background: #fdf2de;
    border-radius: 12px;
    color: #fa8717;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    margin-top: 0px;
}
.cetype .isBmjs {
    width: 69px !important;
    height: 24px;
    background: #fdebeb;
    border-radius: 12px;
    color: #fd4545;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    margin-top: 0px;
}
.raise :nth-child(1) {
    font-weight: bold;
}
.release {
    width: 159px;
    height: 40px;
    background: #fc5c1d;
    box-shadow: 0px 1px 13px 0px rgba(12, 54, 110, 0.31);
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    /* margin-bottom: 20px; */
}
/* .crowdtask>>>.el-drawer{
        width:1620px;
        padding: 0 20px;
    } */
/* .crowdtask>>>.el-drawer__container{
        width:130%;
    }  */
.crowdtask >>> .el-drawer__header {
    margin-bottom: 10px;
    font-weight: bold;
    color: #0969bd;
}
.crowdtask >>> .el-divider--horizontal {
    margin: 1px 0 0px 0;
    width: 100%;
    /* position: fixed; */
    z-index: 99;
}
.crowdtask >>> .el-radio {
    margin-bottom: 20px;
    margin-top: 13px;
}
.inforbtn >>> .el-button {
    width: 90px;
    height: 34px;
    background: #0066eb;
    border-radius: 4px;
    color: #ffffff;
}
.crowdtask >>> .el-form-item__label {
    color: #333333;
    font-weight: bold;
    /* margin-right:20px */
}
.crowdtask >>> .el-input__inner {
    width: 90%;
}
/* .crowdtask>>>.el-dialog__title{
        font-weight:bold;
        color: #0969bd
    } */
.taskper {
    /* width:1000px; */
    padding: 0 20px;
}
@media screen and (max-width: 1500px) {
    .productbox {
        /* width:1100px; */
        padding: 10px 10px 5px 18px !important;
    }
    .tytool {
        width: 1100px;
        margin: 30px auto;
    }
    .notytool {
        width: 1100px;
        margin-left: 30px;
    }
    .taskper {
        width: 900px;
    }
    .tytool >>> .el-divider--horizontal {
        margin: 5px 0 15px 0;
        width: 900px;
    }
    .tytool >>> .el-tabs__item {
        padding: 0 20px !important;
    }
}
.topnavbar >>> .el-tabs__item {
    padding: 0 25px;
}
.topnavbar >>> .el-tabs__item {
    padding: 0 28px;
}
.decsbtn {
    width: 1200px;
    margin: auto;
    height: 80px;
    display: flex;
    align-items: flex-end;
}
.descbtnitem {
    width: 100px;
    height: 34px;
    background: #ffffff;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    cursor: pointer;
}
</style>