<template>
    <view class="body" @click="goInfo(companyitem)">
        <view class="heads">
            <view class="head_left">
                <rich-text :nodes="string">
                </rich-text>
            </view>

            <view class="head_right">
                {{ companyitem.wage }}{{ wageUnit[companyitem.wageUnitCategory] }}
            </view>

        </view>


        <view class="ask">
            <view class="askList">
                {{ companyitem.tradeNames }}
            </view>
            <view class="askList" v-for="(item, index) in skillNames" :key="index">
                {{ item }}
            </view>
            <view style="flex:1;"></view>
            <u-tag text="零工岗位" v-if="companyitem.type == 0" plain size="mini" type="warning"></u-tag>
            <u-tag text="全职岗位" v-if="companyitem.type == 1" plain size="mini"></u-tag>
            <u-tag text="招工" v-if="companyitem.type == 2" plain size="mini"></u-tag>
        </view>
        <view style="width: 100%;height: 1rpx;background-color: #999;margin: 0 auto;opacity: .5;"></view>
        <view class="timeAddress" style="position: relative;">
            <view style="display: flex;align-items: center;">
                <image src="../../static/img/city.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" mode="">
                </image>
                <view style="font-size: 26rpx;color:#333;">{{ companyitem.missionCompanyName }}</view>
            </view>
            <view style="display: flex;align-items: center;position:absolute;right:0;">
                <image src="../../static/img/location_new.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
                <view>2.2km</view>
            </view>
        </view>
        <view class="comment" v-if='comment' @tap.stop="goComment(companyitem.missionNo)">
            <view class="comment_content commentimg" v-if='companyitem.scoreAll > 0'>
                <image class="commentimg_image" src="../../static/img/star.full.svg"
                    v-for="index1 in companyitem.scoreAll" mode="" :key="index1"></image>
                <image class="commentimg_image" src="../../static/img/star.empty.svg"
                    v-for="index2 in (5 - companyitem.scoreAll)" mode="" :key="index2"></image>
            </view>
            <view class="comment_content allName gocomment" v-else>
                评价
            </view>
        </view>
    </view>
</template>

<script>
    import {
        toDoller,
        dateFormat
    } from "../../untils/format.js";
    import dictionary from '@/common/textdata.js';

    export default {
        beforeCreate: function() {},
        props: {
            companyitem: {
                type: Object,
                default () {
                    return []
                }
            },
            comment: {
                type: Boolean,
                default: false
            },
            noApply: {
                type: Boolean,
                default: true
            },
            near: {
                type: Boolean,
                default: false
            },
            befor: Function,
        },
        data() {
            return {
                ...dictionary,
                string: "<div style='overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'>" + this.companyitem
                    .missionTitle +
                    "</div>"
            };
        },
        computed: {
            skillNames() {
                return this.companyitem.skillNames.split(',')
            }
        },
        methods: {
            goComment: function(no) {
                uni.navigateTo({
                    url: `../../pageMy/mycomment/mycomment?missionNo=${encodeURIComponent(no)}`
                })
            },
            goInfo: function(item) {
                this.$emit('befor', item)
                // const isCan = this.noApply === false ? '0' : '1'
                // if(item.type == 0) {
                uni.navigateTo({
                    url: `/pages/projectInfo/projectInfo?missionNo=${encodeURIComponent(item.missionNo)}&isCan=1`
                })
                // } else if(item.type == 1) {
                // 	uni.navigateTo({
                // 		url: `/pages/projectInfo/workInfo?workId=${encodeURIComponent(item.id)}&isCan=1`
                // 	})
                // }
            },
            getCity: function(val) {
                if (val) {
                    let areas = this.$store.getters.getAreaParents(val)
                    if (areas.length === 3) {
                        return areas[0].label + '-' + areas[1].label + '-' + areas[2].label
                    }
                }
            },
            toDoller,
            dateFormat
        }
    }
</script>

<style>
    .commentimg_image {
        width: 40rpx;
        height: 40rpx;
    }

    .commentimg {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .gocomment {
        font-size: 26rpx !important;
        border-radius: 5rpx;
        border: 1rpx solid #c3c3c3;
        width: 160rpx;
        text-align: center;
        float: right;
        height: 50rpx;
        line-height: 50rpx;
    }

    .timeAddress {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #999999;
        margin: 10rpx 0;
        padding: 10rpx 0;
    }

    .allName {
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #666666;
    }

    .askList {
        /* width: 14%; */
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #666666;
        background-color: #f6f6f6;
        padding: 5rpx 15rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
    }

    .ask {
        overflow: hidden;
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 20rpx 0;
    }

    .head_right {
        ont-family: PingFangSC-Medium;
        font-size: 28rpx;
        color: #F46161;
        font-weight: bold;
    }

    .head_left {
        font-family: PingFangSC-Medium;
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        width: 350rpx;
        overflow: hidden;
        white-space: nowrap;
        /*不换行*/
        text-overflow: ellipsis;
        /*超出部分文字以...显示*/
    }

    .highlight {
        color: #F46161;
    }

    .body {
        width: 690rpx;
        margin: 0rpx auto;
        background-color: #fefefe;
        overflow: hidden;
        box-sizing: border-box;
        padding: 20rpx;
        padding-bottom: 0;
        border-radius: 20rpx;
        margin-top: 20rpx;
    }

    .heads {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>