@extends('layouts.app')
@section('title')采购管理-财务-采购账单@endsection

@section('content')
    <div class="container-fluid" id="list">
        <div id="form_div" class="mt-1"></div>
        <div class="row mt-2">
        <span class="dropdown ml-3">
        <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget"
                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">
            导出Excel
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" @click="procurementBillExport(false)" href="javascript:">导出勾选内容</a>
            <a class="dropdown-item" @click="procurementBillExport(true)" href="javascript:">导出所有页</a>
        </div>
        </span>
        </div>
        <table class="table table-sm table-striped table-bordered table-hover text-nowrap card-body mt-2 td-min-width-80" id="table">
            <tr v-for="(procurement,i) in procurements">
                <td>
                    <input class="checkItem" type="checkbox" :value="procurement.id">
                </td>
                <td class="">@{{ procurement.code }}</td>
                <td class="">@{{ procurement.created_at }}</td>
                <td class=""><span v-if="procurement.supplier_id">@{{ procurement.deadline }}</span></td>
                <td class=""><span v-if="procurement.signed_at">@{{ procurement.signed_at }}</span></td>
                <td ><span v-if="procurement.owner_material.owner">@{{ procurement.owner_material.owner.name }}</span></td>
{{--                <td ><span v-if="procurement.owner_material.owner">@{{ procurement.owner_material.owner.customer?procurement.owner_material.owner.customer.company_name:'' }}</span></td>--}}
                <td ><span v-if="procurement.supplier">@{{ procurement.supplier.name }}</span></td>
                <td class="tooltipTarget" style="max-width: 200px;overflow:hidden" v-if="procurement.owner_material"><span>@{{ procurement.owner_material.material_code }}</span></td>
                <td class="text-muted" v-if="procurement.owner_material.material"><span>@{{ procurement.owner_material.material.name }}</span></td>
                <td class="text-muted" v-if="procurement.owner_material"><span>@{{ procurement.owner_material.size }}</span></td>
                <td class="text-muted"  style="max-width: 200px;overflow:hidden" v-if="procurement.owner_material"><span>@{{ procurement.owner_material.special }}</span></td>
                <td class="text-muted" v-if="procurement.owner_material"><span>@{{ procurement.owner_material.specification }}</span></td>
                <td class="text-muted"  style="max-width: 200px;overflow:hidden"><span>@{{ procurement.remark }}</span></td>
                <td><span>@{{ procurement.quantity }}</span></td>{{--采购数量--}}
                <td><span>@{{ procurement.amount }}</span></td> {{--销售数量--}}
                <td><span v-if="procurement.receive_amount">@{{ procurement.receive_amount }}</span></td>
                <td><span>@{{ procurement.cost_price }}</span></td> {{--采购单价--}}
                <td><span>@{{ procurement.unit_price }}</span></td>  {{--销售单价--}}
                <td><span>@{{ (procurement.amount*procurement.cost_price).toFixed(2) }}</span></td> {{--应收--}}
                <td><span>@{{ (procurement.quantity*procurement.unit_price).toFixed(2) }}</span></td> {{--应付--}}
                <td><span>@{{ procurement_status[procurement.status] }}</span></td>
                <td>
                    <span v-if="procurement.status<9">
                        <span class="btn btn-sm btn-outline-danger">锁定</span>
                        <span class="btn btn-sm btn-outline-success" @click="changeCostPrice(procurement.id,procurement.cost_price)">修改采购单价</span>
                    </span>
                </td>
            </tr>
        </table>
        @can('采购管理-财务-采购账单')
            @include('procurement.finance._changeCostPrice')
        @endcan
        <div class="text-info h5 btn btn">{{$procurements->count()}}/@{{ sum }}</div>
        <div>{{$procurements->appends($paginateParams)->links()}}</div>
    </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: {
                procurements: {!! $procurements->toJson() !!}['data'],
                owners:[
                        @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                materials: [
                        @foreach($materials as $material)
                    {name:'{{$material->id}}',value:'{{$material->name}}'},
                    @endforeach
                ],
                suppliers:[
                        @foreach($suppliers as $supplier)
                    {name:'{{$supplier->id}}',value:'{{$supplier->name}}'},
                    @endforeach
                ],
                sum:{!! $procurements->total() !!},
                procurement_status:{!! json_encode(\App\Procurement::status,JSON_UNESCAPED_UNICODE) !!},
                procurement_id:'',cost_price:'',

            },
            mounted: function () {
                $(".tooltipTarget").tooltip({'trigger': 'hover'});
                $('#list').removeClass('d-none');
                let data = [
                    [
                        {name: 'created_at_start', type: 'dateTime', tip: '选择显示指定日期的起始时间'},
                        {name: 'created_at_end', type: 'dateTime', tip: '选择显示指定日期的结束时间'},
                        {name:'code',type:'input',tip:'可支持多采购编号,模糊搜索可在两侧增加百分号(%)进行',placeholder: '采购编号'},
                        {
                            name: 'owner_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表,回车确定', '选择要显示的项目'],
                            placeholder: ['项目', '定位或多选项目'], data: this.owners
                        },
                        {
                            name: 'material_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表,回车确定', '选择要显示的耗材'],
                            placeholder: ['耗材', '定位或多选耗材'], data: this.materials
                        },
                        {
                            name: 'supplier_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表,回车确定', '选择要显示的供应商'],
                            placeholder: ['供应商', '定位或多选供应商'], data: this.suppliers
                        },
                        // {name: 'company_name', type: 'input', tip: '采购公司:可在两侧增加百分号(%)进行模糊搜索', placeholder: '采购公司'},
                    ],
                ];
                this.form = new query({
                    el: "#form_div",
                    condition: data,
                });
                this.form.init();
                let column = [
                    {name: 'code', value: '采购编号', neglect: true,class: 'text-center'},
                    {name: 'code', value: '采购日期', neglect: true,class: 'text-center'},
                    {name: 'code', value: '接单日期', neglect: true,class: 'text-center'},
                    {name: 'code', value: '签收日期', neglect: true,class: 'text-center'},
                    {name: 'owner_id', value: '项目名称',class: 'text-center'},
                    // {name: 'company_name', value: '采购公司',class: 'text-center'},
                    {name: 'supplier_name', value: '供应商',class: 'text-center'},
                    {name: 'material_code', value: '耗材编号',class: 'text-center'},
                    {name: 'material_name', value: '耗材',class: 'text-center'},
                    {name: 'size', value: '尺寸大小',class: 'text-center'},
                    {name: 'special', value: '特殊要求',class: 'text-center'},
                    {name: 'specification', value: '材质规格',class: 'text-center'},
                    {name: '备注', value: '备注',class: 'text-center'},
                    {name: 'quantity', value: '采购数量', neglect: true,class: 'text-center'},
                    {name: '销售数量', value: '销售数量', neglect: true,class: 'text-center'},
                    {name: 'deliver_amount', value: '收货数量', neglect: true,class: 'text-center'},
                    {name: '采购单价', value: '采购单价(元)', neglect: true,class: 'text-center'},
                    {name: 'unit_price', value: '销售单价(元)', neglect: true,class: 'text-center'},
                    {name: '应付金额', value: '应付金额(元)', neglect: true,class: 'text-center'},
                    {name: '应收金额', value: '应收金额(元)', neglect: true,class: 'text-center'},
                    {name: '状态', value: '状态', neglect: true,class: 'text-center'},
                    {name: '操作', value: '操作', neglect: true,class: 'text-center'},
                ];

                new Header({
                    el: "table",
                    name: "procurementBill",
                    column: column,
                    data: this.procurements,
                    fixedTop: ($('#form_div').height()) + 2,
                }).init();
            },
            methods: {
                changeCostPrice(id,cost_price){
                    this.procurement_id=id;
                    this.cost_price=cost_price;
                    $("#change-costPrice").modal('show');
                },
                costPrice(){
                    let _this=this;
                    let url='{{url('procurement/finance/costPrice')}}';
                    let param={id:_this.procurement_id,cost_price:_this.cost_price};
                    window.axios.post(url,param).then(function (res) {
                        if (res.data.success){
                            _this.procurements.forEach(function (procurement) {
                                if (procurement.id===res.data.data.id){
                                    procurement.cost_price=res.data.data.cost_price;
                                    $("#change-costPrice").modal('hide');
                                }
                            })
                        }else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.message);
                        }
                    }).catch(function (err) {
                        window.tempTip.setDuration(3000);
                        window.tempTip.show("网络错误：" + err);
                    })
                },
                procurementBillExport(selectAll){
                    let url = '{{url('procurement/finance/procurementBillExport')}}';
                    let token='{{ csrf_token() }}';
                    excelExport(selectAll,checkData,url,this.sum,token);
                },

            }
        });
    </script>
@endsection