@extends('layouts.app')
@section('title','需求发布')
@section('content')
    @include('shared._messages')
    @include('shared._error')
    <div id="list" class="d-none">
        <div class="container-fluid">
            <div id="form_div"></div>
            <div class="form-inline" id="btn"></div>
            <table class="table table-striped table-sm text-nowrap table-hover" id="table">
                <tr v-for="(requirement,i) in requirements"
                    @click="selectTr===i+1?selectTr=0:selectTr=i+1"
                    :class="selectTr===i+1?'focusing' : ''">
                    <td><input class="checkItem" type="checkbox" :value="requirement.id"></td>
                    <td>@{{ requirement.id }}</td>
                    <td>@{{ requirement.creator.name }}</td>
                    <td>@{{ requirement.score }}</td>
                    <td>@{{ requirement.title }}</td>
                    <td :title="requirement.content" class="text-truncate" style="max-width: 300px;">@{{
                        requirement.content }}
                    </td>
                    <td><span :class="calStatusClass(requirement.status)">@{{ requirement.status }}</span></td>
                    <td>
                        <div v-if="requirement.workers.length>0 && requirement.showMore"
                             class="text-overflow-warp-200 up" :id="'route-'+i">
                            <p v-for="worker in requirement.workers">
                                @{{ worker.name}}
                            </p>
                        </div>
                        <div class="text-overflow-warp-200 " v-else>
                            @{{ requirement.workers.length>0? requirement.workers[0].name:'' }}
                        </div>
                        <div @click="requirement.showMore=!requirement.showMore" v-if="requirement.workers.length > 1">
                            <label class="text-center mt-0 p-0 cursor-pointer pull-left">
                                <span class="fa"
                                      :class="requirement.showMore ? 'fa-angle-double-down' : 'fa-angle-double-right'"></span>
                                &nbsp;<span v-if="requirement.showMore">收起</span><span
                                    v-else>展开</span>&nbsp;@{{ requirement.workers.length }} 条
                            </label>
                        </div>
                    </td>
                    <td>@{{ requirement.began_at }}</td>
                    <td>@{{ requirement.finished_at }}</td>
                    <td>@{{ requirement.reviewed_at }}</td>
                    <td>@{{ requirement.created_at }}</td>
                    <td>
                        <form v-if="requirement.status==='待接收'" :action="targetUrl(requirement.id)" method="post"
                              style="display: inline-block;"
                              onsubmit="return confirm('您确定要删除吗？');">
                            {{ csrf_field() }}
                            {{ method_field('DELETE') }}
                            <button type="submit" class="btn btn-outline-danger btn-sm">
                                <i class="far fa-trash-alt"></i> 删
                            </button>
                        </form>
                        <button type="submit" class="btn btn-outline-info btn-sm">
                            <i class="far fa-trash-alt"></i> <a :href="targetUrl(requirement.id)">
                                <span v-if="requirement.status ==='待验收'">验</span>
                                <span v-else>查</span>
                            </a>
                        </button>
                    </td>
                </tr>
            </table>
            <div class="text-info h5 btn btn">{{$requirements->count()}}
                /{{$requirements->total()}}</div>
            {{$requirements->appends($paginateParams)->links()}}
        </div>
        <textarea id="clipboardDiv" style="opacity:0"></textarea>
    </div>
@endsection
@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                requirements: [@foreach($requirements as $requirement){!! $requirement !!},@endforeach],
                selectTr: 0,
                creators: [@foreach($canCreateRequirementUsers as $creator){
                    name: '{{ $creator->id }}',
                    value: '{{ $creator->name }}'
                },@endforeach],
                workers: [@foreach($canWorkRequirementUsers as $worker){
                    name: '{{ $worker->id }}',
                    value: '{{ $worker->name }}'
                },@endforeach]
            },
            created() {
            },
            mounted() {
                $('#list').removeClass('d-none');
                let _this = this;
                $(".up").slideUp();
                let data = [
                    [
                        {
                            name: 'requirement',
                            type: 'input',
                            tip: '输入任务号',
                            placeholder: '任务号',
                        },
                        {
                            name: 'status',
                            type: 'select',
                            tip: '选择状态',
                            placeholder: '状态',
                            data:[
                                {name:'待接收',value:'待接收'},
                                {name:'开发中',value:'开发中'},
                                {name:'待验收',value:'待验收'},
                                {name:'验收通过',value:'验收通过'},
                                {name:'验收未通过',value:'验收未通过'},
                            ]
                        },
                        {
                            name: 'creator',
                            type: 'select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的状态'],
                            placeholder: '发布人',
                            data: this.creators
                        },
                        {
                            name: 'title',
                            type: 'input',
                            tip: '输入标题搜索',
                            placeholder: '标题'
                        },
                        {
                            name: 'worker_ids',
                            type: 'select_multiple_select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的货主'],
                            placeholder: ['执行人', '定位或多选'],
                            data: this.workers
                        },
                    ],
                    [
                        {
                            name: 'finished_at_start',
                            type: 'dateTime',
                            tip: '选择任务完成的起始时间'
                        },
                        {
                            name: 'finished_at_end',
                            type: 'dateTime',
                            tip: '选择任务完成的截止时间'
                        },
                        {
                            name: 'created_at_start',
                            type: 'dateTime',
                            tip: '选择任务创建的起始时间'
                        },
                        {
                            name: 'created_at_end',
                            type: 'dateTime',
                            tip: '选择任务创建的截止时间'
                        },
                        {
                            name: 'began_at_start',
                            type: 'dateTime',
                            tip: '选择任务开始的起始时间'
                        },
                        {
                            name: 'began_at_end',
                            type: 'dateTime',
                            tip: '选择任务开始的截止时间'
                        },


                    ]
                ];
                _this.form = new query({
                    el: '#form_div',
                    condition: data,
                });
                _this.form.init();
                let column = [
                    // {name: 'index', value: '序号', neglect: true},
                    {name: 'requirement_id', value: '任务号'},
                    {name: 'creator_name', value: '创建人'},
                    {name: 'score', value: '分数'},
                    {name: 'title', value: '标题'},
                    {name: 'content', value: '内容'},
                    {name: 'status', value: '状态'},
                    {name: 'workers', value: '完成人'},
                    {name: 'began_at', value: '接收时间'},
                    {name: 'finished_at', value: '完成时间'},
                    {name: 'reviewed_at', value: '验收时间'},
                    {name: 'created_at', value: '创建时间'},
                    {name: 'operation', value: '操作'},
                ];
                new Header({
                    el: "table",
                    name: "requirements",
                    column: column,
                    data: this.requirements,
                    restorationColumn: 'addtime',
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();
                _this.requirements = _this.requirements.map(item => {
                    item.showMore = false
                    return item;
                });
            },
            methods: {
                targetUrl(id) {
                    return "{{ url('requirements') }}/" + id;
                },

                calStatusClass(status) {
                    switch (status) {
                        case '待接收':
                            return "badge badge-primary";
                        case '开发中':
                            return "badge badge-warning";
                        case '待验收':
                            return "badge badge-info";
                        case '验收通过':
                            return "badge badge-success";
                        case '验收未通过':
                            return "badge badge-danger";
                        case '待审核':
                            return "badge badge-warning";
                            case '已驳回':
                            return "badge badge-danger";
                    }
                }
            },
            filters: {},
        });
    </script>
@endsection