@extends('layouts.base')
@section('title', trans(''))
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <style>
        .all { background: #eff3f6;}
        .el-table th.gutter{
            display: table-cell!important;
        }
        
        .vue-main-form {
            margin-bottom: 50px;
        }
        .vue-main-title-content {
            border-bottom: 1px solid #f5f5f5;
            padding-left: 20px;
        }
        .bill-context {
            background: #eeeeee;
            padding: 9px;
            color: #6f6f6e;
            border: 1px solid #DCDFE6;
        }
    </style>
    <div class="all">
        <div id="app" v-cloak>
            <el-form ref="form" >
                <div class="vue-main">
                    <div class="vue-main-form">
                        <div class="vue-main-title">
                            <div class="vue-main-title-content">标签模板编辑</div>
                        </div>
                        <div style="display: flex;align-items: center;margin-bottom:20px;padding-left: 20px;">
                            <span class="bill-context">单据宽度</span>
                            <el-input style="width: 30%;" v-model="serarch_form.width" @blur="blurPlatformDocumentWidth"></el-input>
                            <span class="bill-context">mm(毫米) 单据高度</span>
                            <el-input style="width: 30%;" v-model="serarch_form.height" @blur="blurPlatformDocumentHeight"></el-input>
                            <span class="bill-context">mm(毫米)</span>
                        </div>
                        <div style="display: flex;align-items: center;margin-bottom:20px;padding-left: 20px;"><span style="background: #f5f7fa;padding: 9px;color: #6f6f6e;border: 1px solid #DCDFE6;">供应商名称</span><el-input style="width: 30%;" v-model="serarch_form.supplier_name"></el-input> </div>
                        <div style="display: flex;align-items: center;margin-bottom:20px;padding-left: 20px;"><span style="background: #f5f7fa;padding: 9px;color: #6f6f6e;border: 1px solid #DCDFE6;">供应商电话</span><el-input style="width: 30%;" v-model="serarch_form.supplier_mobile"></el-input> </div>
                        <div style="display: flex;margin-bottom: 20px;padding-left: 20px;">
                            <span>备注</span>
                            <div id="dialogVisible-card" contenteditable="true" spellcheck="true" data-medium-editor-element="true" role="textbox" aria-multiline="true" style="height: 300px;border: 1px solid #dadada;width: 95%;margin-left: 20px;"></div>
                        </div>
                        <div style="display: flex;flex-direction: column;justify-content: center;align-items: start;margin-left:60px;">
                            <span style="color: #333333;margin: 1% 0;">模板展示</span>
                            <!-- <img src="{{resource_get('plugins/exhelper/assets/image/send.png')}}" alt="" style="height: 140mm;width: 93%;"> -->
                        
                            <div id="platform-supplier-box" style="display: flex;justify-content: center;">
                                <div style="height: 500px;width: 1095px;display: flex;flex-direction: column;background-color: #f9fafc;" id="platformSupplier">
                                    <div style="display: flex;padding: 18px 0;">
                                        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 6;">
                                            <div style="display: flex;width: 100%;font-size: 20px;font-weight: bold;">
                                                <div style="flex: 2;margin-left: 20px;"><span style="height: 32px;padding:4px;"></span></div>
                                                <div style="flex: 5;text-align: center;"><span style="border: solid 1px #d3d3d3;height: 32px;padding:4px 13px;">供应商名称</span></div>
                                            </div>
                                            <div style="display: flex;width: 100%;margin:3% 0">
                                                <div style="flex: 2;text-align: center;"></div>
                                                <div style="flex: 5;text-align: center;display: flex;justify-content: center;align-items: center;">电话: <span style="	width: 104px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
                                            </div>
                                        </div>
                                        <div style="display: flex;justify-content: center;height: 80%;overflow: hidden;flex: 2;">
                                            <div style="width: 60px;height: 60px;background-color: #eeeeee;border: solid 1px #9ba5bb;"></div>
                                        </div>
                                    </div>
                                    <div style="width:100%;display: flex;">
                                        <div style="flex: 5;display: flex;flex-direction: column;justify-content: space-around;padding-left: 2%;">
                                            <div style="display: flex;align-items: center;margin-bottom:15px">
                                                <div style="display: flex;align-items: center;"><span style="width: 70px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;padding:2px 0 0 2px;"> 姓名</span></div>
                                                <div style="margin: 0 75px;display: flex;align-items: center;">收货地址: <span style="width: 158px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
                                                <div style="display: flex;align-items: center;">收货电话: <span style="width: 144px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
                                            </div>
                                            <div style="display: flex;align-items: center;">收货人: <span style="width: 221px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
                                        </div>
                                        <div style="flex: 2;display: flex;flex-direction: column;justify-content: space-around;">
                                            <div style="display: flex;align-items: center;">日期: <span style="width: 80px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
                                            <div style="display: flex;align-items: center;">订单号: <span style="width: 80px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
                                        </div>
                                    </div>
                                    <div style="padding: 0 2%;margin: 1% 0;">
                                        <el-table
                                            :data="tableData"
                                            :span-method="arraySpanMethod"
                                            border
                                            :cell-style="{ borderColor:'#d3d3d3' }"
                                            :header-cell-style="{borderColor:'#d3d3d3'}"
                                            style="width: 100%;border:1px solid #d3d3d3">
                                            <el-table-column prop="trade_name" label="商品名称" width="180" align="center">
                                                <template slot-scope="scope" >
                                                    <div v-if="scope.$index == 1" style="display: flex;">备注: <span  style="	width: 507px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
                                                    <div v-if="scope.$index == 0" style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="specifications" label="规格" align="center">
                                                <template slot-scope="scope" >
                                                    <div v-if="scope.$index == 0" style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="quantity" label="数量" align="center">
                                                <template slot-scope="scope" >
                                                    <div v-if="scope.$index == 0" style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="company" label="单位" align="center">
                                                <template  slot-scope="scope" >
                                                    <div v-if="scope.$index == 0" style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="unit_price" label="单价(元)" align="center">
                                                <template  slot-scope="scope" >
                                                    <div v-if="scope.$index == 0" style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
                                                    <div v-if="scope.$index == 1" style="justify-content: start;display: flex;">本页小计: <span style="	width: 80px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
                                                    <div v-if="scope.$index == 2" style="display: flex">合计: <span style="	width: 110px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="subtotal" label="小计(元)" align="center">
                                                <template slot="header" slot-scope="scope">
                                                    <div style="display: flex;justify-content: end;">小计(元)</div>
                                                </template>
                                                <template slot-scope="scope" >
                                                    <div style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div style="height:100%;width:100%;">
                                        <div style="padding-left: 2%;padding-right: 157px;display: flex;justify-content: space-between;">
                                            <span>经手人: </span>
                                            <span>件数: </span>
                                            <span>司机: </span>
                                            <span>本次收款: </span>
                                        </div>
                                        <div style="display: flex;margin: 12px 0 20px 0;">
                                            <div style="flex: 4;display: flex;padding-left: 20px;align-items: center;display: flex;">
                                                <span>注:</span>
                                                <div style="width: 586px;height: 26px;border: solid 1px #9ba5bb;"></div>
                                            </div>
                                            <div style="flex: 1;align-items: center;display: flex;">打印时间: <span style="width: 96px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form>
            <div class="vue-page" >
                <el-row>
                    <el-col align="center">
                        <el-button type="primary" @click="save">保存</el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
    <script>
        let templateInfo = {!! $templateInfo?:[] !!}
        var vm = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data() {
                return {
                    serarch_form:{
                        width:"",
                        height:"",
                        supplier_name:"",
                        supplier_mobile:""
                    },
                    tableData: [{
                        trade_name:"商品",
                        specifications:"规格",
                        quantity:10,
                        company:"芸众",
                        unit_price:143,
                        subtotal:205445  
                        }, {
                        trade_name:"商品2",
                        specifications:"规格2",
                        quantity:10,
                        company:"芸众2",
                        unit_price:1043,
                        subtotal:212 
                        }, {
                        trade_name:"商品3",
                        specifications:"规格3",
                        quantity:10,
                        company:"芸众3",
                        unit_price:1043,
                        subtotal:20345   
                    }],
                    templateInfo:templateInfo
                }
            },
            mounted () {
                document.getElementById('dialogVisible-card').innerText = this.templateInfo.remark ?this.templateInfo.remark : ""
                this.serarch_form.width = this.templateInfo.width
                this.serarch_form.height  = this.templateInfo.height
                this.serarch_form.supplier_name = this.templateInfo.supplier_name
                this.serarch_form.supplier_mobile = this.templateInfo.supplier_mobile
                // console.log(this.templateInfo,'templateInfo');
            },
            methods: {
                arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                    if (rowIndex == 1 || rowIndex == 2) {
                        if (columnIndex === 0) {
                            return [1, 4];
                        }
                        if (columnIndex === 4) {
                            return [1,2];
                        } else{
                            return [0, 0];
                        }
                    }
                },
                blurPlatformDocumentWidth(){
                    // this.$nextTick(() => {
                    //     document.getElementById('platformSupplier').style.width= this.serarch_form.width ? this.serarch_form.width * 1 + 'mm' : 220 + 'mm';
                    // })
                    // console.log( document.getElementById('platform-supplier-box').innerHTML,12);
                },
                blurPlatformDocumentHeight(){
                    // this.$nextTick(() => {
                    //     document.getElementById('platformSupplier').style.height= this.serarch_form.height ? this.serarch_form.height * 1 + 'mm' : 140 + 'mm';
                    // })
                },
                save(){
                    this.$http.post("{!! yzWebFullUrl('plugin.exhelper.admin.delivery.templateEdit') !!}",{
                        remark: document.getElementById('dialogVisible-card').innerText,
                        ...this.serarch_form
                    }).then(response => {
                        return response.json()
                    }).then(({result,data,msg}) => {
                        console.log(result,data,msg,55);
                        if (result) {
                            this.$message.success(msg);
                        } else {
                            this.$message.error(msg);
                        }
                    }), function (res) {
                        console.log(res);
                    };
                }
            },
        });


    </script>
@endsection