<template>
    <view class="flex direction-column height-100pre width-100per">
        <view class="flex items-center padding-right">
            <uni-search-bar placeholder="单号、型号" clearButton="none" class="grow-1" v-model="searchValue"
                @confirm="load"></uni-search-bar>
            <button size="mini" type="primary" @tap="load">搜索</button>
        </view>
        <view class="flex padding-lr child-gap">
            <uni-datetime-picker type="date" placeholder="开始时间"></uni-datetime-picker>
            <uni-datetime-picker type="date" placeholder="结束时间"></uni-datetime-picker>
        </view>
        <view class="grow-1 height-0 scroll padding">
            <view class="dispatch-row" v-for="(item, index) in items" key="number">
                <view class="grow-1 padding-right">
                    <view class="dispatch-row-cells child-gap">
                        <view class="dispatch-row-title">{{item.orderNumber}}
                        </view>
                        <view class="dispatch-row-quantity">数量：{{item.quantity}}</view>
                    </view>
                    <view class="dispatch-row-cells child-gap">
                        <view class="dispatch-row-cell grow-1">工艺：{{item.processName}}</view>
                    </view>
                    <view class="dispatch-row-cells child-gap">
                        <view class="dispatch-row-cell grow-1">计划号：{{item.planNumber}}</view>
                    </view>
                    <view class="dispatch-row-cells child-gap">
                        <view class="dispatch-row-cell grow-1">料号：{{item.inventoryNumber}}</view>
                    </view>
                    <view class="dispatch-row-cells child-gap">
                        <view class="dispatch-row-cell grow-1">品名：{{item.inventoryName}}</view>
                    </view>
                    <view class="dispatch-row-cells child-gap">
                        <view class="dispatch-row-cell grow-1">规格{{item.spec}}</view>
                    </view>
                </view>
                <view class="shrink-0">
                    <button size="mini" type="orange" @tap="buttonAction(item.dispatchOrderId)">{{buttonText}}</button>
                </view>
            </view>
        </view>
        
        <view v-if="isAction">
            <view>{{buttonText}}</view>
        </view>
    </view>
</template>

<script>
    import extend from '../../utils/extend';
import message from '../../utils/message';
    import request from '../../utils/request';
    import url from '../../utils/url';
    import user from '../../utils/user';

    let userinfo = user.get();

    export default {
        name: "page-dispatch",
        props: {
            url: {
                type: String,
                default: ''
            },
            detailsUrl: {
                type: String,
                default: ''
            },
            method: {
                type: String,
                default: 'get'
            },
            buttonText: {
                type: String,
                default: ''
            },
            buttonUrl: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                searchValue: '',
                items: [],
                isAction: false
            };
        },
        methods: {
            async load() {
                if (extend.isEmptyString(this.url)) {
                    return;
                }
                uni.showLoading();
                let res = await request.sendToken({
                    url: `${url.apiUrl}${this.url}`,
                    method: this.method,
                    data: {
                        userId: userinfo.systemUserId
                    }
                });
                uni.hideLoading();
                console.log(res);
                if (res.success) {
                    if (extend.isObject(res.data) && extend.isArray(res.data.rows)) {
                        this.items = res.data.rows;
                    }
                } else {
                    uni.showModal({
                        title: '错误',
                        content: res.message
                    });
                }
            },

            openDetail() {
                if (extend.isNonEmptyString(this.detailsUrl)) {
                    uni.navigateTo({
                        url: this.detailsUrl
                    });
                }
            },

            getRowById(id) {
                let res = null;
                for (let i = 0; i < this.items.length; i++) {
                    if (this.items[i].dispatchOrderId === id) {
                        res = this.items[i];
                        break;
                    }
                }
                return res;
            },
            buttonAction(id) {
                this.isAction = true;
            },

            async action(id) {
                let row = this.getRowById(id);
                if (extend.isNull(row) && extend.isNonEmptyString(this.buttonUrl)) {
                    return;
                }
                let r = await uni.showModal({
                    title: '报工操作',
                    content: `是否报工单号为 ${row.orderNumber} 的生产订单？`
                });
                console.log(r);
                if (r.cancel) {
                    return;
                }
                let res = await request.sendToken({
                    url: `${url.apiUrl}${this.buttonUrl}`,
                    method: 'post',
                    data: [id]
                });
                if (res.success) {
                    message.showSuccess({
                        title: '已报工'
                    });
                    this.load();
                } else {
                    uni.showModal({
                        title: '错误',
                        content: res.message
                    });
                }
            }
        }
    }
</script>

<style lang="scss">
    .dispatch-row {
        position: relative;
        display: flex;
        padding: 20upx 0;
        align-items: center;

        .dispatch-row-title {
            font-size: 38upx;
        }

        .dispatch-row-quantity {
            color: #666666;
        }

        .dispatch-row-cells {
            position: relative;
            display: flex;
            font-size: 24upx;
            color: #666666;
            justify-content: space-between;
            align-items: center;
            margin-top: 10upx;
            flex-wrap: wrap;
        }

        .dispatch-row-cell {
            flex-shrink: 0;
        }
    }

    .dispatch-row+.dispatch-row {
        border-top: 1upx solid #dfdfdf;
    }
</style>