<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{ backgroundColor: '#ffcb57' }"
                :border-bottom="false"
                title="雇佣师傅"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="reachBottom">
                <u-card :show-head="false" v-for="item in workers" :key="item.Id">
                    <view slot="body" class="wmBd">
                        <view class="left">
                            <u-avatar src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"></u-avatar>
                        </view>
                        <view class="right">
                            <view class="hdline">
                                <span class="name">{{ item.FSFQuotedPriceWorkerID.Name[0].Value }}</span>
                                <u-icon name="integral" color="#ffec3d"></u-icon>
                            </view>
                            <!-- <view class="line">
                                <span class="smtitle">联系电话：</span>
                                <span class="smContent">{{item.FSFQuotedPriceWorkerID.FPHONE}}</span>
                            </view>-->
                            <view class="line">
                                <span class="smtitle">服务类目：</span>
                                <span class="smContent">{{
                                    item.FSFQuotedPriceWorkerID.FServiceTypeEntity | formatServiceType
                                }}</span>
                            </view>
                            <view class="line">
                                <span class="smtitle">服务区域：</span>
                                <span class="smContent">{{
                                    item.FSFQuotedPriceWorkerID.FServiceArea | formatArea
                                }}</span>
                            </view>
                            <view class="line">
                                <span class="smtitle">案例：</span>
                            </view>
                            <view class="line">
                                <view class="pre-box">
                                    <u-image
                                        :width="160"
                                        :height="160"
                                        v-for="(img, j) in item.FServiceImagesURL"
                                        :key="j"
                                        :src="img.url"
                                        border-radius="5"
                                        @click="previewImg(img.url)"
                                    ></u-image>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view slot="foot">
                        <u-cell-group :border="false">
                            <!-- <u-cell-item title="师傅报价" :value="item.FSFQuotedPriceAmount" :arrow="false">
                            </u-cell-item> -->
                            <u-cell-item
                                title="商家应付费用"
                                :value="computedPrice(item)"
                                :border-bottom="false"
                                :arrow="false"
                            >
                            </u-cell-item>
                        </u-cell-group>
                        <u-button
                            type="primary"
                            :custom-style="{ marginTop: '24rpx', backgroundColor: '#ffcb57', color: '#472d21' }"
                            hover-class="defaultBtnhover"
                            @click="hireHe(item)"
                            >雇佣他</u-button
                        >
                        <!-- <view class="left">
                            <span>报价：</span>
                            <span class="amount">¥ {{ item.FSFQuotedPriceAmount }}</span>
                        </view>
                        <view class="right">
                            
                        </view> -->
                    </view>
                </u-card>
            </scroll-view>
        </view>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import request from '../../common/service';
export default {
    data() {
        return {
            workers: [],
        };
    },
    onLoad() {
        console.log(this.currentOrder);
        this.getWorks();
    },
    computed: {
        ...mapGetters({
            currentOrder: 'order/currentOrder',
        }),
    },
    filters: {
        formatServiceType(arr) {
            return arr
                .map((x) => {
                    return x.FSERVICEITEM.Name[0].Value;
                })
                .join(',');
        },
        formatArea(arr) {
            return arr
                .map((x) => {
                    return `${x.FEntityPROVINCE}${x.FEntityCity}${x.FEntityCOUNTY}`;
                })
                .join(', ');
        },
    },
    methods: {
        ...mapActions({
            updateCurrentWorker: 'order/updateCurrentWorker',
        }),
        computedPrice(data) {
            return (this.currentOrder.FPayWay === "1" || this.currentOrder.FPayWay === "3") ? `${Number(this.currentOrder.FSHAmount).toFixed(2)}元` : `${(data.FSFQuotedPriceAmountSF * (1 + data.FSFQuotedPriceWorkerID.FInfoRate / 100)).toFixed(2)}元`;
        },
        async getWorks() {
            for (let i = 0; i < this.currentOrder.FSFQuotedPriceEntity.length; i++) {
                const worker = this.currentOrder.FSFQuotedPriceEntity[i];
                worker.FServiceImagesURL = [];
                for (let j = 0; j < worker.FSFQuotedPriceWorkerID.FServiceImagesEntity.length; j++) {
                    const imgInfo = worker.FSFQuotedPriceWorkerID.FServiceImagesEntity[j];
                    const result = await this.getImageUrl(imgInfo.FServiceImage);
                    worker.FServiceImagesURL.push({ url: result[0].fileurl });
                }
            }
            this.workers = this.currentOrder.FSFQuotedPriceEntity;
            console.log(this.workers);
        },
        async getImageUrl(fileId) {
            const res = await request.get('/api/UploadAttachments/GetUrl', { fileid: fileId });
            return res.result;
        },
        reachBottom() {},
        hireHe(worker) {
            const _t = this;
            let commitData = {
                Model: {
                    FID: this.currentOrder.Id, //订单内码
                    FStatus: 'DYY', //订单状态:待预约，传固定值：DYY
                    FWorkerID: {
                        FNUMBER: worker.FSFQuotedPriceWorkerID.Number,
                    },
                    FReceiveOrdertime: this.$u.timeFormat(+new Date(), 'yyyy-mm-dd hh:MM')
                },
            };
            if (this.currentOrder.FPayWay === "1" || this.currentOrder.FPayWay === "3") {
                const fee = (this.currentOrder.FSHAmount * (worker.FSFQuotedPriceWorkerID.FInfoRate / 100)).toFixed(2);
                commitData.Model.FSFAmount = worker.FSFQuotedPriceAmountSF;
                commitData.Model.FSFYAmount = this.currentOrder.FSHAmount - fee;
                commitData.Model.FInfoFee = fee;
            } else {
                const fee = (worker.FSFQuotedPriceAmountSF * (worker.FSFQuotedPriceWorkerID.FInfoRate / 100)).toFixed(2);
                commitData.Model.FSFAmount = worker.FSFQuotedPriceAmountSF;
                commitData.Model.FSFYAmount = worker.FSFQuotedPriceAmountSF;
                commitData.Model.FSHAmount = worker.FSFQuotedPriceAmountSF + parseFloat(fee);
                commitData.Model.FInfoFee = fee;
            }
            request.post('/api/Order/save', commitData).then((res) => {
                const { code, message, result } = res;
                if (code === 0) {
                    const { IsSuccess } = result.Result.ResponseStatus;
                    if (IsSuccess) {
                        _t.updateCurrentWorker(worker).then(() => {
                            _t.$refs.uToast.show({
                                title: '提交成功',
                                isTab: true,
                                url: '/pages/orders/index',
                            });
                        });
                    }
                } else {
                    _t.$refs.uToast.show({
                        title: message,
                    });
                }
            });
        },
        previewImg(url) {
            uni.previewImage({
                current: 0,
                urls: [url],
            });
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .wmBd {
            display: flex;
            align-items: flex-start;
            .right {
                padding-left: 24rpx;
                .hdline {
                    margin-bottom: 24rpx;
                    .name {
                        margin-right: 12rpx;
                        font-size: 30rpx;
                        color: #262626;
                    }
                }
                .line {
                    margin-top: 12rpx;
                    .smtitle {
                        font-size: 24rpx;
                        color: #8c8c8c;
                    }
                    .smContent {
                        font-size: 24rpx;
                        color: #595959;
                    }
                }
            }
        }
        .wmFt {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                .amount {
                    font-size: 36rpx;
                    color: #ffcb57;
                }
            }
        }
        .pre-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            /deep/ .u-image {
                margin-bottom: 12rpx;
            }
        }
    }
}
</style>
