@extends('layouts.app')
@section('title')客户管理-项目录入@endsection

@section('content')
    @component('customer.project.menu')
        @if($owner)
            <li class="nav-item">
                <a class="nav-link" href="{{URL::current()}}" :class="{active:isActive('edit',4)}">编辑</a>
            </li>
        @endif
    @endcomponent
    <div class="container-fluid card" id="container">
        <div class="card-body offset-3">
            <form method="POST" action="{{url('customer/project/store')}}" class="mt-3">
                @csrf
                <label><input hidden name="id" :value="owner.id"></label>
                <div class="row">
                    <label for="code" class="col-2 text-info">项目代码</label>
                    <input :readonly="display" type="text"  id="code" class="form-control form-control-sm col-7 mb-0" :class="errors.code ? 'is-invalid' : ''" v-model="owner.code"  name="code" @change="codeSeekOwner()">
                    <span class="invalid-feedback mt-0 offset-2" role="alert" v-if="errors.code">
                        <strong>@{{ errors.code[0] }}</strong>
                    </span>
                </div>
                <div class="row mt-3">
                    <label for="name" class="col-2 text-info">项目名称</label>
                    <input :readonly="display" type="text"  id="name" class="form-control form-control-sm col-7 mb-0" :class="errors.name ? 'is-invalid' : style" v-model="owner.name" name="name" @change="nameSeekOwner()">
                    <span class="invalid-feedback mt-0 offset-2" role="alert" v-if="errors.name">
                        <strong>@{{ errors.name[0] }}</strong>
                    </span>
                </div>
                <div class="row mt-3">
                    <label for="customer_id" class="col-2 text-info">客户</label>
                    <select id="customer_id" v-model="owner.customer_id" class="form-control form-control-sm col-4 mb-0" :class="errors.customer_id ? 'is-invalid' : ''"  name="customer_id" >
                        <option v-for="customer in customers" :value="customer.id">@{{ customer.name }}</option>
                    </select>
                    <span class="invalid-feedback mt-0 offset-2" role="alert" v-if="errors.customer_id">
                        <strong>@{{ errors.customer_id[0] }}</strong>
                    </span>
                </div>
                <div class="row mt-3">
                    <label for="owner_group_id" class="col-2 text-info">项目小组</label>
                    <select id="owner_group_id" v-model="owner.owner_group_id" class="form-control form-control-sm col-4 mb-0" :class="errors.owner_group_id ? 'is-invalid' : ''"  name="owner_group_id" >
                        <option v-for="ownerGroup in ownerGroups" :value="ownerGroup.id">@{{ ownerGroup.name }}</option>
                    </select>
                    <span class="invalid-feedback offset-2 mt-0" role="alert" v-if="errors.owner_group_id">
                        <strong>@{{ errors.owner_group_id[0] }}</strong>
                    </span>
                </div>
                <div class="row mt-3">
                    <label class="col-2" for="owner_storage_price_model_id">仓储计费类型</label>
                    <select id="owner_storage_price_model_id" v-model="owner.owner_storage_price_model_id" class="selectpicker" multiple data-live-search="true" title="仓储计费类型(多选)">
                        <option v-for="t in storagePriceModels" :value="t.id" :data-subtext="'起：'+t.minimum_area+' '+t.unit_name+' 单：'+t.price+'/'+t.unit_name">
                            @{{ t.counting_type }} - @{{ t.using_type }}
                        </option>
                    </select>
                    <label hidden><input :value="owner.owner_storage_price_model_id" name="owner_storage_price_model_id"></label>
                </div>
                <div class="row mt-3">
                    <label for="tax_rate" class="col-2">税率<span class="badge badge-secondary">%</span></label>
                    <input type="number" v-model="owner.tax_rate" step="0.01" id="tax_rate" class="form-control form-control-sm col-3 mb-0" :class="errors.tax_rate ? 'is-invalid' : ''"  name="tax_rate">
                    <span class="invalid-feedback offset-2 mt-0" role="alert" v-if="errors.tax_rate">
                        <strong>@{{ errors.tax_rate[0] }}</strong>
                    </span>
                </div>
                <div class="row mt-3">
                    <label for="waring_line_on" class="col-2">月单量预警</label>
                    <input type="number" v-model="owner.waring_line_on" id="waring_line_on" class="form-control form-control-sm col-3 mb-0" :class="errors.waring_line_on ? 'is-invalid' : ''"  name="waring_line_on">
                    <span class="invalid-feedback offset-2 mt-0" role="alert" v-if="errors.waring_line_on">
                        <strong>@{{ errors.waring_line_on[0] }}</strong>
                    </span>
                </div>
                <div class="row mt-3">
                    <label for="linkman" class="col-2">联系人</label>
                    <input type="text" v-model="owner.linkman" id="linkman" class="form-control form-control-sm col-7"  name="linkman">
                </div>
                <div class="row mt-3">
                    <label for="phone_number" class="col-2">联系电话</label>
                    <input type="text" v-model="owner.phone_number" id="phone_number" class="form-control form-control-sm col-7"  name="phone_number">
                </div>
                <div class="row mt-3">
                    <label for="description" class="col-2">项目描述</label>
                    <textarea id="description" v-model="owner.description" class="form-control form-control-sm col-7"  name="description"></textarea>
                </div>
                <button type="submit" class="btn btn-success mt-3 col-8 offset-1">提交</button>
            </form>
        </div>
    </div>
@stop

@section('lastScript')
    <script>
        new Vue({
            el:"#container",
            data:{
                owner : {
                    id:"{{old('id') ?? ($owner->id ?? '') }}",
                    name : "{{old('name') ?? ($owner->name ?? '')}}",
                    code : "{{old('code') ?? ($owner->code ?? '')}}",
                    customer_id : "{{old('customer_id') ?? ($owner->customer_id ?? '')}}",
                    owner_group_id : "{{old('owner_group_id') ?? ($owner->user_owner_group_id ?? '')}}",
                    owner_storage_price_model_id : "{{old('owner_storage_price_model_id') ?? ($owner->owner_storage_price_model_id ?? '')}}".split(','),
                    tax_rate : "{{old('tax_rate') ?? ($owner->tax_rate ?? '')}}",
                    linkman : "{{old('linkman') ?? ($owner->linkman ?? '')}}",
                    phone_number : "{{old('phone_number') ?? ($owner->phone_number ?? '')}}",
                    description : "{{old('description') ?? ($owner->description ?? '')}}",
                    waring_line_on : "{{old('waring_line_on') ?? ($owner->waring_line_on ?? '')}}",
                },
                storagePriceModels : [
                    @foreach($storagePriceModels as $storagePriceModel)
                    {   id:"{{$storagePriceModel->id}}",
                        counting_type : "{{$storagePriceModel->counting_type}}",
                        using_type : "{{$storagePriceModel->using_type}}",
                        minimum_area : "{{$storagePriceModel->minimum_area}}",
                        price : "{{$storagePriceModel->price}}",
                        unit_name : "{{$storagePriceModel->unit ? $storagePriceModel->unit->name : ''}}",
                    },
                    @endforeach
                ],
                customers : [
                    @foreach($customers as $customer)
                    {id:"{{$customer->id}}",name:"{{$customer->name}}"},
                    @endforeach
                ],
                ownerGroups : [
                    @foreach($ownerGroups as $ownerGroup)
                    {id:"{{$ownerGroup->id}}",name:"{{$ownerGroup->name}}"},
                    @endforeach
                ],
                style : '',
                errors : {!! $errors !!},
                display:false,
            },
            mounted(){
                if (this.errors.length===0 && this.owner.id){
                    this.display = true;
                }
            },
            methods:{
                nameSeekOwner(){
                    this.style = "";
                    window.axios.post('{{url('customer/project/seekOwner')}}',{name:this.owner.name})
                        .then(res=>{
                            if (res.data.success){
                                if (!this.owner.code){
                                    this.owner.code = res.data.data.code;
                                    this.owner.id = res.data.data.id;
                                    return;
                                }
                                if (this.owner.code === res.data.data.code)this.owner.id = res.data.data.id;
                            }else this.owner.id = "";
                        })
                },
                codeSeekOwner(){
                    this.style = "";
                    window.axios.post('{{url('customer/project/seekOwner')}}',{code:this.owner.code})
                        .then(res=>{
                            if (res.data.success){
                                if (!this.owner.name){
                                    this.owner.name = res.data.data.name;
                                    this.owner.id = res.data.data.id;
                                    return;
                                }
                                if (this.owner.name === res.data.data.name){
                                    this.owner.id = res.data.data.id;
                                    return;
                                }
                                this.owner.name = res.data.data.name;
                                this.owner.id = res.data.data.id;
                                this.style = "border-success";
                            }else this.owner.id = "";
                        })
                },
            },
        });
    </script>
@stop