<template>
    <div class="work-item " :class="{ dark: progress === 0 || progress === 1, 'has-bottom-btn': progress === 2 || progress === 3 || progress === 4, 'last-enter':  progress !== 5}">
        <div class="work-line">
            <div class="line-box">
                <div class="line-dotted">
                    <div class="dotted-inset"></div>
                </div>
            </div>
        </div>
        <div class="work-info">
            <img v-if="progress === 2" class="todo-img" src="@/assets/img/gallery/enter.png" />
            <img v-if="progress === 3 || progress === 4" class="done-img" src="@/assets/img/gallery/done.png" />
            <div class="card-item-title"><span class="dotted"></span>参与主体</div>
            <div class="prescription-box">
                <div class="prescription-item">
                    <div class="enter-info" v-if="progress === 4">
                        <div class="enter-l">亩数价格：<span>1500元/亩</span></div>
                        <div class="enter-r">服务亩数：<span>1000亩</span></div>
                    </div>
                    <div class="enter-top" v-if="progress === 2 || progress === 3">
                        <div class="enter-info">
                            <div class="enter-l">当前价格：<span>1亩/1500元</span></div>
                            <div class="enter-r">亩数：<span>500亩/1000亩</span></div>
                        </div>
                        <div class="price-text">
                            还差<span>500亩</span>可享<span>九折</span>价格
                        </div>
                    </div>
                    <div class="step-3-info">
                        <div class="step-info-item">
                            <div class="info-serve-l">
                                <span class="type-name">农户：</span>
                                <div class="img-list" v-if="progress === 4">
                                    <template v-for="item in users" :key="item.id">
                                      <div class="img-item" v-if="item.userType == 1 && item.joinStatus === 1">
                                        <img class="serve-img" :src="item.icon" />
                                        <!-- <img class="checked-icon" v-if="item.joinStatus === 1" src="@/assets/img/gallery/checked.png" /> -->
                                      </div>
                                    </template>
                                </div>
                                <div class="img-list" v-else>
                                    <template v-for="item in users" :key="item.id">
                                      <div class="img-item" v-if="item.userType == 1">
                                        <img class="serve-img" :src="item.icon" />
                                        <img class="checked-icon" v-if="item.joinStatus === 1" src="@/assets/img/gallery/checked.png" />
                                      </div>
                                    </template>
                                </div>
                            </div>
                            <div class="info-serve-r" @click="showDialog(users)">查看详情</div>
                        </div>
                        <div class="step-info-item">
                            <div class="info-serve-l">
                                <span class="type-name">农服：</span>
                                <div class="img-list" v-if="progress === 4">
                                  <template v-for="item in users" :key="item.id">
                                    <div class="img-item" v-if="item.userType == 2 && item.joinStatus === 1">
                                        <img class="serve-img" :src="item.icon" />
                                    </div>
                                  </template>
                                </div>
                                <div class="img-list" v-else>
                                  <template v-for="item in users" :key="item.id">
                                    <div class="img-item" v-if="item.userType == 2">
                                        <img class="serve-img" :src="item.icon" />
                                        <img class="checked-icon" v-if="item.joinStatus === 1" src="@/assets/img/gallery/checked.png" />
                                    </div>
                                  </template>
                                </div>
                            </div>
                            <div class="info-serve-r" @click="showDialog(users)">查看详情</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="enter-btn" v-if="progress === 2 && (ROLETYPE === '2')">
            <el-button class="btn" type="primary" @click="lockWork(3)">开始执行</el-button>
        </div>
        <div class="enter-btn" v-if="progress === 3 && (ROLETYPE === '2')">
            <el-button class="btn" type="primary" @click="lockWork(4)">执行完成</el-button>
        </div>
        <div class="enter-btn" v-if="progress === 4 && (ROLETYPE === '2')">
            <el-button class="btn" type="primary" @click="lockWork(0)">邀请评价</el-button>
        </div>
        <!-- 农户、农服 -->
        <div class="enter-btn" v-if="progress === 2 && (ROLETYPE === '0' || ROLETYPE === '1')">
            <el-button class="btn" type="primary" @click="joinWork">确认加入</el-button>
        </div>
    </div>
</template>

<script setup>
import eventBus from "@/api/eventBus";

import { useStore } from "vuex";
const store = useStore();
const ROLETYPE = store.state.app.curRole

const props = defineProps({
    progress: {
        type: Number,
        required: false,
    },
    users: {
        type: Array,
        required: false,
    },
    orderId: {
        type: [Number, String],
        required: false,
    },
});

// 农户农服加入
const joinWork = () => {
    console.log('props.orderId', props.orderId);
    VE_API.order.fetchFarmerJoin({orderId: props.orderId}).then(({ code }) => {
        if (code == 0) {
            console.log('加入成功');
            eventBus.emit('discover:submitForm')
            window.location.reload()
        }
    });
}

// 农资锁单
const lockWork = (orderStatus) => {
    const data = {
        orderId: props.orderId,
        orderStatus,
    };
    VE_API.order.confirm(data).then(({ code }) => {
        if (code == 0) {
            console.log('成功');
            eventBus.emit('discover:submitForm')
            window.location.reload()
        }
    });
}

const showDialog = (data) => {
    eventBus.emit("enterBox:showDialog", data)
}
</script>

<style lang="scss" scoped>
@import "./boxClass.scss";
.enter-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #BBBBBB;
    font-size: 14px;
    span {
        color: #008EFF;
    }
}
.enter-top {
    .price-text {
        margin-top: 5px;
        font-size: 14px;
        padding: 2px 10px;
        border-radius: 30px 0 0 30px;
        color: rgba(255, 255, 255, 0.6);
        background: linear-gradient( to right, #2199F8, #FFFFFF);
        span {
            padding: 0 4px;
            color: #fff;
        }
    }
}
</style>
