<template>
  <div class="app-container">

    <el-form ref="form" :model="form" :rules="rules" label-position="left" inline>
        <el-card>
            <div slot="header" class="card-title">{{ editMode  ? $t('编辑订单') + '-' + form.orderNo  : $t('新建订单')}}</div>
            <!--默认显示类型(selectedRouter==null)，如果选择路线后没开通则隐藏-->
            <el-form-item :label="$t('订单类型')" v-if="!selectedRouter || routeOtherServices.indexOf('1') > -1 || routeOtherServices.indexOf('4') > -1">
                <el-checkbox-group v-model="form.type" :disabled="inWarehouse">
                    <el-checkbox label="1" v-if="!selectedRouter || routeOtherServices.indexOf('1') > -1">{{$t('集运服务')}}</el-checkbox>
                    <el-checkbox label="2" v-if="!selectedRouter || routeOtherServices.indexOf('2') > -1">{{$t('海外仓')}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <div class="form-section">
                <el-form-item :label="$t('发货人')" prop="consignorContactsId" >
                    <!-- <customer-contact-selector v-model="form.consignorContactsId" @change="consignorContact = $event" type="1" /> -->
                    <div class="contact">
                        <el-input v-model="form.consignorName" placeholder="" :disabled="inWarehouse"/>
                        <img v-if="!inWarehouse" src="@/assets/images/phonebook.png" class="phonebook" @click="contactChooseType='consignor'" />
                        <img v-if="!inWarehouse" src="@/assets/images/new_customer.png" class="phonebook" @click="quickCreateType='0'" />
                    </div>
                </el-form-item>
                <el-form-item :label="$t('发货人电话')" prop="consignorPhone">
                    <area-code-selector v-model="form.consignorCountryCode" class="w-200 mr-10" disabled />
                    <el-input v-model="form.consignorPhone" class="w-200" disabled />
                </el-form-item>
                <el-form-item :label="$t('发货人公司')" prop="consignorPhone">
                    <el-input v-model="form.consignorCompany" :disabled="inWarehouse" />
                </el-form-item>
                <el-form-item label="Email" prop="consignorPhone">
                    <el-input v-model="form.consignorEmail" :disabled="inWarehouse" />
                </el-form-item>
            </div>
            <div class="form-section">
                <el-form-item :label="$t('收货人')" prop="consigneeContactsId">
                    <!-- <customer-contact-selector v-model="form.consignorContactsId" @change="consignorContact = $event" type="1" /> -->
                    <div class="contact">
                        <el-input v-model="form.consigneeName" placeholder="" :disabled="inWarehouse"/>
                        <img v-if="!inWarehouse" src="@/assets/images/phonebook.png" class="phonebook" @click="contactChooseType='consignee'" />
                        <img v-if="!inWarehouse" src="@/assets/images/new_customer.png" class="phonebook" @click="quickCreateType='1'" />
                    </div>
                </el-form-item>
                <el-form-item :label="$t('收货人电话')" prop="consigneePhone">
                    <area-code-selector v-model="form.consigneeCountryCode" class="w-200 mr-10" disabled/>
                    <el-input v-model="form.consigneePhone" class="w-200" disabled/>
                </el-form-item>
                <el-form-item :label="$t('收货人公司')" prop="consigneePhone">
                    <el-input v-model="form.consigneeCompany" :disabled="inWarehouse" />
                </el-form-item>
                <el-form-item label="Email" prop="consigneePhone">
                    <el-input v-model="form.consigneeEmail" :disabled="inWarehouse"/>
                </el-form-item>
            </div>
            <div class="form-section">
                <el-form-item :label="$t('运输方式')" prop="transportId">
                    <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="form.transportId" :disabled="inWarehouse"/>
                </el-form-item>

                <el-form-item :label="$t('出货渠道')" prop="channelId" v-if="getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, form.transportId).cssClass == 'channel'">
                    <selector
                    :disabled="inWarehouse || getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, form.transportId).cssClass != 'channel'"
                    v-model="form.channelId"
                    :options="channelList"
                    value-field="channelId"
                    :label-field="$l(null, 'name')"
                    ></selector>
                </el-form-item>
            </div>
            <div class="form-section">
                <el-form-item :label="$t('始发城市')" prop="departureId">
                    <el-select v-model="form.departureId" :placeholder="$t('请选择始发地')" :disabled="inWarehouse">
                        <el-option v-for="item in exportCityList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('目的城市')" prop="objectiveId">
                    <el-select v-model="form.objectiveId" :placeholder="$t('请选择目的地')" :disabled="inWarehouse">
                        <el-option v-for="item in importCityList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div class="form-section">
                <el-form-item :label="$t('选择线路')" prop="lineId">
                    <el-input :value="selectedRouter ? $l(selectedRouter, 'startTitle') + ' > ' + $l(selectedRouter, 'destTitle') : ''" disabled :placeholder="$t('请在右侧选择线路')"></el-input>
                </el-form-item>
                <select size="5" v-model="form.lineId" style="min-width: 300px; border:1px solid #DCDFE6; border-radius:4px" :disabled="inWarehouse">
                    <option v-for="item in routerList" :value="item.id" :key="item.id">{{$l(item, 'startTitle')}} >> {{$l(item, 'destTitle')}}</option>
                </select>
            </div>
        </el-card>
        <el-card  class="mt-10">
            <div slot="header" class="card-title">
                <div class="card-name">{{$t('商品信息')}}</div>
                <el-button type="primary" size="mini" @click="addProduct(null)" :disabled="!canAddProduct">{{$t('添加货物')}}</el-button>
                <el-button type="primary" size="mini" @click="showBatchImportDialog=true" :disabled="!canAddProduct">{{$t('批量添加货物')}}</el-button>
            </div>
            <el-table :data="form.orderItemVOList" border class="product-list" v-if="!initing">
              <el-table-column :label="$t('序号')" width="60px" fixed>
                <template slot-scope="scope">
                    {{scope.$index + 1}}
                </template>
              </el-table-column>
              <el-table-column :label="$t('中文品名')" width="160px">
                <template slot="header" slot-scope="scope">
                    {{$t('中文品名')}} <span class="red">*</span>
                </template>
                <template slot-scope="scope">
                    <el-form-item label=""
                        :prop="`orderItemVOList.${scope.$index}.prodId`"
                        :rules="{
                            required: true, message: $t('请选择产品'), trigger: 'blur'
                        }"
                        class="mb-0 mr-0"
                    >
                        <product-selector
                        @hook:mounted="onTableMounted"
                        v-model="scope.row.prodId"
                        @change="onProductChange(scope.row, $event)"
                        :disabled="!canAddProduct || !productEditable"
                        @focus="scope.row.updated = true"
                        />
                    </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('英文品名')" width="160px">
                <template slot="header" slot-scope="scope">
                    {{$t('英文品名')}} <span class="red">*</span>
                </template>
                <template slot-scope="scope">
                    <product-selector
                    lang="En"
                    v-model="scope.row.prodId"
                    @change="onProductChange(scope.row, $event)"
                    @focus="scope.row.updated = true"
                    :disabled="!canAddProduct || !productEditable" />
                </template>
              </el-table-column>

              <el-table-column :label="$t('品牌')" width="100px">
                <template slot="header">
                    {{$t('品牌')}} <span class="red">*</span>
                </template>
                <template slot-scope="scope">
                    <el-form-item label=""
                        :prop="`orderItemVOList.${scope.$index}.brandType`"
                        :rules="{
                            required: true, message: $t('请选择品牌'), trigger: 'blur'
                        }"
                        class="mb-0 mr-0"
                    >
                        <dict-selector v-model="scope.row.brandType" :type="DICT_TYPE.ECW_IS_BRAND" defaultable :disabled="!canAddProduct || !productEditable" />
                    </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('件数')" width="90px">
                <template slot="header">
                    {{$t('件数')}} <span class="red">*</span>
                </template>
                <template slot-scope="{row}">
                    <el-input v-model.number="row.num" @keyup.native="checkPositiveInterge(row, 'num')" :disabled="!canAddProduct || !productEditable" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('包装单位')" width="100px">
                <template slot="header" slot-scope="scope">
                    {{$t('包装单位')}} <span class="red">*</span>
                </template>
                <template slot-scope="{row}">
                    <dict-selector v-model="row.unit" :type="DICT_TYPE.ECW_PACKAGING_TYPE" defaultable :disabled="!canAddProduct || !productEditable" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('数量') + '(个)'" width="120px">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantity" @keyup.native="checkPositiveInterge(row, 'quantity')" :disabled="!canAddProduct || !productEditable" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('总体积') + '(m³)'" width="120px">
                <template slot-scope="scope">
                    <el-form-item label=""
                        :prop="`orderItemVOList.${scope.$index}.volume`"
                        :rules="[
                            { validator: validatorPositiveNumber, message: $t('体积错误'), trigger: 'blur'}
                        ]"
                        class="mb-0 mr-0"
                    >
                        <el-input v-model="scope.row.volume" :disabled="!canAddProduct || !productEditable" />
                    </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('总重量') + '(kg)'" width="120px">
                <template slot-scope="scope">
                    <el-form-item label=""
                        :prop="`orderItemVOList.${scope.$index}.weight`"
                        :rules="[
                            { validator: validatorPositiveNumber, message: $t('重量错误'), trigger: 'blur'}
                        ]"
                        class="mb-0 mr-0"
                    >
                        <el-input v-model="scope.row.weight" :disabled="!canAddProduct || !productEditable" />
                    </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('总货值') + '(RMB)'" width="100px">
                <template slot="header" slot-scope="scope">
                    {{$t('货值')}}(RMB) <span class="red">*</span>
                </template>
                <template slot-scope="scope">
                    <el-form-item label=""
                        :prop="`orderItemVOList.${scope.$index}.worth`"
                        :rules="[
                            { required: true, message: $t('货值不能为空'), trigger: 'blur'},
                            { type: 'number', min: 0, message: $t('货值错误'), trigger: 'blur'}
                        ]"
                        class="mb-0 mr-0"
                    >
                        <el-input v-model.number="scope.row.worth" :disabled="!canAddProduct" @input="calculationPrice" type="number" />
                    </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('商品特性')" width="250px">
                <template slot-scope="{row}">
                    <el-checkbox-group v-model="row.prodAttrArr" @change="onProductAttrChange(row, $event)" :disabled="!canAddProduct || !productEditable">
                      <el-checkbox v-for="item in productAttrList" :label="item.id" :key="item.id">{{$l(item, 'attrName')}}</el-checkbox>
                    </el-checkbox-group>
                </template>
              </el-table-column>

              <el-table-column :label="$t('是否预付')">
                <template slot-scope="{row}">
                    <dict-tag v-if="row.fee" :type="DICT_TYPE.ECW_PAY_ADVANCE" :value="row.fee.isPayAdvance"  />
                </template>
              </el-table-column>
              <el-table-column :label="$t('商品链接')" width="200px" align="center">
                <template slot-scope="{row}">
                    <el-link type="primary" :href="row.link" target="_blank" style="display:block">{{row.link}}</el-link>
                    <el-button type="primary" size="mini" @click="setLink(row)" v-if="productEditable">
                        {{row.link ? $t('编辑商品链接') : $t('添加商品链接')}}
                    </el-button>
                </template>
              </el-table-column>
              <el-table-column :label="$t('快递单号')" width="100px">
                <template slot-scope="{row}">
                    <el-input v-model="row.expressNo" placeholder="" :disabled="!productEditable" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('操作')" width="80px" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="delProduct(scope.$index)">{{$t('删除')}}</el-button>
                </template>
              </el-table-column>

            </el-table>
            <!--
        </el-card>
        <el-card  class="mt-10"> -->
            <div class="card-title" style="padding:20px 0;">{{$t('合计')}}</div>
            <el-descriptions :column="6" border>
                <el-descriptions-item :label="$t('总件数')">
                    {{sum.totalNum.toFixed()}}
                </el-descriptions-item>
                <el-descriptions-item :label="$t('总体积')">
                    {{sum.totalVolume.toFixed()}}m³
                </el-descriptions-item>
                <el-descriptions-item :label="$t('总重量')">
                    {{sum.totalWeight.toFixed()}}kg
                </el-descriptions-item>
                <el-descriptions-item :label="$t('总数量')">
                    {{sum.totalQuatity.toFixed() || 0}}
                </el-descriptions-item>
                <el-descriptions-item :label="$t('总货值') + '(RMB)'">
                    {{sum.totalWorth.toFixed() || 0}}元
                </el-descriptions-item>
                <el-descriptions-item :label="$t('保价费')">
                    {{fee.insuranceFee || 0}} {{$t('美元')}}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <el-card class="mt-10">
            <div class="card-title" slot="header">{{$t('通用')}}</div>
            <div class="form-section">
                <el-form-item label="唛头" prop="marks" >
                    <el-input v-model="form.marks" ></el-input>
                </el-form-item>
                <el-form-item label="是否控货" prop="isCargoControl" class="ml-20">
                    <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING" formatter="bool" v-model="form.isCargoControl" form-type="radio"/>
                </el-form-item>
            </div>
            <div class="form-section" v-if="collectionProxy">
                <el-form-item :label="$t('是否代收货款')" prop="isCollection">
                    <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING" formatter="bool" v-model="form.isCollection" form-type="radio" :disabled="false" />
                </el-form-item>
                <!--代收货款，只有非控货订单、并且线路开通了代收货款后，才显示是否代收货款选项-->
                <el-form-item :label="$t('代收货款金额')" v-if="collectionProxy && form.isCollection" prop="collectionProxy" class="ml-20">
                    <el-input type="number" v-model="form.collectionProxy" class="w-200 mr-10"  :disabled="false"></el-input>
                    <selector v-model="form.collectionProxyCurrency" :options="currencyList" label-field="titleZh" value-field="id" defaultable class="w-100"  :disabled="false"/>
                </el-form-item>
            </div>
            <div class="form-section">
                <el-form-item :label="$t('单证报关')" :span="2" prop="customsType">
                    <dict-selector :type="DICT_TYPE.ECW_CUSTOMS_TYPE" v-model="form.customsType" form-type="radio" defaultable :disabled="false" />
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('出单方式')" prop="issuingMethod">
                    <dict-selector :type="DICT_TYPE.ECW_SUING_METHOD" v-model="form.issuingMethod" form-type="radio" defaultable  :disabled="false"/>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('入仓类型')" prop="warehouseType">
                    <dict-selector :type="DICT_TYPE.ECW_WAREHOUSING_TYPE" v-model="form.warehouseType" defaultable  :disabled="false" />
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('外部仓库')" prop="isExternalWarehouse">
                    <el-checkbox label="" v-model="form.isExternalWarehouse" @change="form.isExternalWarehouse=$event" :disabled="false"></el-checkbox>
                </el-form-item>
                <div v-if="form.isExternalWarehouse" class="pl-50">
                    <div v-for="(item, index) in form.externalWarehouseDtoList" class="flex" :key="index">
                        <div class="w-300">
                            <el-form-item :label="$t('装货时间')"
                            :prop="'externalWarehouseDtoList.' + index + '.estLoadingTime'"
                            :rules="{
                            required: true, message: '装货时间不能为空', trigger: 'blur'
                            }"
                            >
                                <el-date-picker v-model="item.estLoadingTime" value-format="yyyy-MM-dd HH:mm:ss" class="w-200"></el-date-picker>
                            </el-form-item>
                        </div>
                        <div class="w-300">
                            <el-form-item :label="$t('装货地址')"
                            :prop="'externalWarehouseDtoList.' + index + '.loadingAddress'"
                            :rules="{
                            required: true, message: '装货地址不能为空', trigger: 'blur'
                            }"
                            >
                                <el-input v-model="item.loadingAddress" placeholder="" class="w-200"></el-input>
                            </el-form-item>
                            <el-button type="primary" icon="el-icon-plus" v-if="index==0" @click="form.externalWarehouseDtoList.push({})"></el-button>
                            <el-button type="danger" icon="el-icon-delete" v-else-if="index == form.externalWarehouseDtoList.length-1" @click="form.externalWarehouseDtoList.splice(index, 1)"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="!form.isExternalWarehouse">
                <el-form-item :label="$t('预计送货日期')" prop="deliveryDate">
                    <el-date-picker v-model="form.deliveryDate" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('收货方式')" prop="harvestMethod" class="ml-20">
                    <dict-selector :type="DICT_TYPE.ECW_HARVEST_METHOD" v-model="form.harvestMethod" :filter="item => item.value == 1 || homeDeliveryService" defaultable :disabled="false" />
                </el-form-item>
            </div>
            <div v-if="homeDeliveryService && form.harvestMethod == 2">
                <el-form-item :label="$t('收货地区')" prop="country">
                    <area-selector
                    :country="form.consigneeVO ? form.consigneeVO.country : undefined"
                    :province="form.consigneeVO ? form.consigneeVO.province : undefined"
                    :city="form.consigneeVO ? form.consigneeVO.city : undefined"
                    @countryChange="onAreaChange('country', $event)"
                    @provinceChange="onAreaChange('province', $event)"
                    @cityChange="onAreaChange('city', $event)"
                    :disabled="false"
                    ></area-selector>
                </el-form-item>
                <el-form-item :label="$t('收货详细地址')" prop="consigneeAddress">
                    <el-input v-model="form.consigneeAddress"  :disabled="false"></el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('付款人')" prop="drawee">
                     <dict-selector :type="DICT_TYPE.DRAWEE" v-model="form.drawee" defaultable form-type="radio"  :disabled="false"/>
                     <el-table :data="customDraweeList" v-if="form.drawee==3" >
                       <el-table-column label="费用类型" prop="label" width="200px"></el-table-column>
                       <el-table-column label="付款人" width="300px">
                            <template slot-scope="{row}">
                                <dict-selector :type="DICT_TYPE.DRAWEE" :filter="(e) => e.value == '1' || e.value == '2'" v-model="row.value" form-type="radio"  :disabled="false"/>
                            </template>
                       </el-table-column>
                     </el-table>
                </el-form-item>
            </div>
        </el-card>

        <el-card  class="mt-10" v-if="transport">
            <div class="card-title" slot="header">{{transport.label}}</div>
            <el-form-item :label="$t('快递单号')">
                <el-input v-model="form.number" :placeholder="$t('请输入购买商品的快递单号')" :disabled="false">
                    <el-button type="primary" slot="append" @click="getOrderCourierNumber" :disabled="false">{{$t('生成单号')}}</el-button>
                </el-input>
            </el-form-item>

            <div v-if="[2,3,4].indexOf(+form.transportId) > -1">
                <el-form-item :label="$t('是否双清')">
                    <dict-selector v-model="form.doubleClear" form-type="radio" :type="DICT_TYPE.ECW_DOUBLE_CLEAR" defaultable :disabled="false" />
                </el-form-item>
            </div>

            <div v-if="[3,4].indexOf(+form.transportId) > -1">
                <el-form-item :label="$t('航空公司')">
                    <supplier-selector v-model="form.airlineCompany" company-type="10"  :disabled="false"/>
                </el-form-item>
            </div>
            <div  v-if="[2].indexOf(+form.transportId) > -1">
                <el-form-item :label="$t('船公司')">
                    <supplier-selector v-model="form.shippingCompany" company-type="9" :disabled="false" />
                </el-form-item>
            </div>
            <div v-if="[2,3,4].indexOf(+form.transportId) > -1">
                <el-form-item :label="$t('清关证书')">
                    <dict-selector v-model="form.customsClearCert"  form-type="radio" :type="DICT_TYPE.INFRA_BOOLEAN_STRING" formatter="bool" defaultable :disabled="false" />
                </el-form-item>
                <el-form-item label="清关证书备注" >
                    <el-input v-model="form.remarks"  :disabled="false"></el-input>
                </el-form-item>
            </div>
            <div v-if="[3,4].indexOf(+form.transportId) > -1">
                <el-form-item label="是否拆包">
                    <dict-selector v-model="form.isUnpack"  form-type="radio" :type="DICT_TYPE.INFRA_BOOLEAN_STRING" formatter="bool" defaultable :disabled="false" />
                </el-form-item>
            </div>
            <div class="form-section">
                <el-form-item :label="$t('单票立刻转运')" v-if="[3,4].indexOf(+form.transportId) > -1">
                    <dict-selector v-model="form.isSingleTicketTransport"  form-type="radio" :type="DICT_TYPE.INFRA_BOOLEAN_STRING" formatter="bool" defaultable :disabled="false" />
                    <span style="margin-left:10px">{{$t('注：若只有一件，货到仓库立即发，选“是”，多件需仓库集运待发，选“否”')}}</span>
                </el-form-item>
            </div>
            <div class="form-section">
                <el-form-item :label="$t('特殊要求')" >
                    <dict-selector v-model="form.packageTypeArr" form-type="checkbox" :type="DICT_TYPE.ORDER_SPECIAL_NEEDS" multiple  :disabled="false"/>
                </el-form-item>
            </div>
            <el-form-item :label="$t('特殊要求备注')">
                <el-input v-model="form.packageRemarks"  :disabled="false" ></el-input>
            </el-form-item>
        </el-card>

        <el-card  class="mt-10" v-if="showWorkFlow">
            <div class="card-title" slot="header">{{$t('审批流程')}}</div>
            <work-flow xmlkey="order_modify" v-model="ccIdArr" />
        </el-card>

        <el-form-item label="" style="margin: 30px 0">
            <template v-if="form.applyStatus == 1">
                <el-button type="primary" @click="$router.push('/bpm/process-instance/detail?id=' + form.formId)">{{$t('审核中')}}</el-button>
            </template>
            <template v-else>
                <el-button type="primary" @click="submitForm(0)" v-if="!form.status">{{$t('保存草稿')}}</el-button> <!--草稿-->
                <el-button type="primary" @click="submitForm(2)" v-if="!form.orderId || !form.status">{{$t('新建订单')}}</el-button> <!--待入仓-->
                <el-button type="primary" @click="submitForm(2)" v-else>{{$t('编辑订单')}}</el-button> <!--修改-->
            </template>
            <el-button @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
        </el-form-item>
      </el-form>

        <el-dialog :title="$t('批量导入')" :visible.sync="showBatchImportDialog" width="1000px" :close-on-click-modal="false">
            <el-steps :active="importList.length > 0 ? 1 : 0" finish-status="success" class="w-500" style="margin: 20px auto">
                <el-step :title="$t('上传装箱单')"></el-step>
                <el-step :title="$t('开始导入')"></el-step>
                <el-step :title="$t('完成')"></el-step>
            </el-steps>
            <div class="mt-20">
                <el-upload :http-request="upload" :show-file-list="false" action="" class="mr-10" style="display:inline-block; ">
                    <el-button size="small" type="primary">{{$t('点击上传')}}</el-button>
                </el-upload>
                <el-button type="info" @click="downloadTpl" size="small" :loading="exportLoading">{{$t('装箱单模板')}}</el-button>
            </div>
            <el-table :data="importList" class="mt-10" height="300">
              <el-table-column :label="$t('序号')">
                <template slot-scope="scope">{{scope.$index + 1}}</template>
              </el-table-column>
              <el-table-column :label="$t('中文品名')" prop="prodTitleZh"></el-table-column>
              <el-table-column :label="$t('英文品名')" prop="prodTitleEn"></el-table-column>
              <el-table-column :label="$t('品牌')" prop="brand">
                <template slot-scope="{row}">
                    <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="row.brandType" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('件数')" prop="num"></el-table-column>
              <el-table-column :label="$t('重量') + '(kg)'" prop="weight"></el-table-column>
              <el-table-column :label="$t('体积') + '(m³)'" prop="volume"></el-table-column>
              <!-- <el-table-column label="有无单证" prop="">// TODO</el-table-column> -->
              <!-- <el-table-column label="缺货箱数" prop="lessNum"></el-table-column> -->
              <el-table-column :label="$t('数量')" prop="quantity"></el-table-column>
              <el-table-column :label="$t('材质')" prop="material"></el-table-column>
            </el-table>

            <div class="mt-10 center">
                <el-button type="primary" @click="addToProductList">{{$t('下一步')}}</el-button>
                <el-button type="default" @click="showBatchImportDialog=false">{{$t('取消')}}</el-button>
            </div>
        </el-dialog>

        <choose-contact-dialog v-if="!!contactChooseType" @choose="onContactChoose" @close="contactChooseType=null"  />
        <quick-create-customer v-if="quickCreateType" :type="quickCreateType" @success="onContactChoose" @close="quickCreateType=null" />
  </div>
</template>

<script>
import { createOrder, updateApply, getOrderDetail, getOrderCourierNumber, orderImport, exportPackingList, getUpdateInfo } from "@/api/ecw/order";
import ProductSelector from '@/components/ProductSelector'
import {getProductAttrList} from '@/api/ecw/productAttr'
import {getChannelList} from '@/api/ecw/channel'
import Selector from '@/components/Selector'
import CustomerContactSelector from '@/components/CustomerContactSelector'
import {openedRouterList as getOpenedRouterList} from '@/api/ecw/warehouse'
import {getTradeCityList} from '@/api/ecw/region'
import {getDictData, getDictDatas} from  '@/utils/dict'
import {getCurrencyList} from '@/api/ecw/currency'
import {getUnitList} from '@/api/ecw/unit'
import AreaSelector from '@/components/AreaSelector'
import FileUpload from '@/components/FileUpload'
import AreaCodeSelector from '@/components/AreaCodeSelector'
import ChooseContactDialog from '@/components/ChooseContactDialog'
import QuickCreateCustomer from '@/components/QuickCreateCustomer'
import {calculationPrice} from '@/api/ecw/product'
import SupplierSelector from '@/components/SupplierSelector'
import Decimal from 'decimal.js'
import WorkFlow from '@/components/WorkFlow'

// 缓存默认的表单数据
let defaultFormData = null
window.Decimal = Decimal

export default {
  name: "EcwOrderEdit",
  components: {
    ProductSelector, Selector, CustomerContactSelector, AreaSelector, FileUpload, AreaCodeSelector, ChooseContactDialog, QuickCreateCustomer, SupplierSelector, WorkFlow
  },
  data() {
    let validatorPositiveNumber = (rule, value, callback) => {
        if (!value) return callback(new Error('请输入数字'))
        if (!Number(value)) return callback(new Error('请输入有效数字'))
        let reg = /((^[1-9]\d*)|^0)(\.\d*){0,1}$/;
        if (!reg.test(value)) return callback(new Error('请输入有效数字'));
        callback();
    }
    return {
        validatorPositiveNumber,
      customDraweeList: [],
      // draweeList: [],
      // 遮罩层
      loading: true,
      //productList:[], // 商品信息
      productAttrList:[],  // 商品属性
      channelList: [], // 出货取到
      routerList: [],
      tradeCityList: [],
      treeList: [],
      consignorContact: {}, // 发货联系人
      consigneeContact:{}, // 收货联系人
      /* consignee: null,
      consignor: null,  */
      transportList: [],
      currencyList:[],
      unitList:[],
      couponList: [],
      couponTypeList: [],
      fee: {}, // 费用
      // 表单参数
      form: {
        status:0,
        sendstatus:0,
        isCargoControl: false,
        isCollection: false,
        type:[],
        isExternalWarehouse: false,
        externalWarehouseDtoList:[],
        orderItemVOList:[],
        drawee: 2
      },
      ccIdArr: [],
      // 表单校验
      rules: {
        marks: [
            {required: true, message: this.$t('请填写唛头')},
            {
                validator: (rule, value, callback) => {
                    if(!/[a-zA-Z]/.test(value.charAt(0))){
                        return callback(new Error(this.$t('唛头必须以字母开头')))
                    }
                    callback()
                },
                trigger: 'blur'
            }
        ],
        consignorContactsId : [{required: true, message: this.$t('发货人不能为空')}],
        consigneeContactsId : [{required: true, message: this.$t('收货人不能为空')}],
        transportId         : [{required: true, message: this.$t('请选择运输方式')}],
        departureId         : [{required: true, message: this.$t('请选择始发城市')}],
        objectiveId         : [{required: true, message: this.$t('请选择目的城市')}],
        lineId              : [{required: true, message: this.$t('请选择路线')}],
        channelId           : [{required: true, message: this.$t('请选择出货渠道')}],
        deliveryDate        : [{required: true, message: this.$t('请选择预计送货日期')}],
        consigneeAddress    : [{required: true, message: this.$t('请填写详细地址')}],
        country             : [{required: true, message: this.$t('收货地区填写不完整')}],
        isCargoControl      : [{required: true, message: this.$t('请选择是否控货')}],
        isCollection        : [{required: true, message: this.$t('请选择代收货款')}],
        collectionProxy     : [{required: true, message: this.$t('代收货款不能为空')}],
        customsType         : [{required: true, message: this.$t('请选择单证报关')}],
        warehouseType       : [{required: true, message: this.$t('请选择入仓类型')}],
        harvestMethod       : [{required: true, message: this.$t('请选择收货方式')}]
      },
      labelStyle: 'width:120px',
      showBatchImportDialog: false, // 显示批量导入弹窗
      importList:[],
      exportLoading: false, // 装下单模板下载状态
      contactChooseType: null, // 联系人选择对象consignor(发货人) 或者 consignee（收货人）
      quickCreateType: null, // 快速新建客户类型，1发货人，2收货人
      showWorkFlow: false, // 是否显示工作流表单
      calculating: false, // 是否正在计算费用，防止频繁重新请求
      initing: true, // 初始化中
    };
  },
  computed:{
    // 是否已完成入仓
    inWarehouse(){
        return !!this.form.inWarehouseState && this.form.inWarehouseState > 201
    },
    exportCityList(){
        return this.tradeCityList.filter(item => item.type == 2 || item.type == 3)
    },
    importCityList(){
        return this.tradeCityList.filter(item => item.type == 1 || item.type == 3)
    },
    exportCityIds(){
        let ids = []
        this.exportCityList.forEach(item => {
            ids.push(item.id)
        })
        return ids
    },
    importCityIds(){
        let ids = []
        this.importCityList.forEach(item => {
            ids.push(item.id)
        })
        return ids
    },
    getDictData(){
        return (type, value) => getDictData(type, value) || {}
    },
    getDictDatas(){
        return getDictDatas
    },
    selectedRouter(){
        // otherService 1 集运服务  2 送货上门  3 非控货订单代收货款  4 海外仓  5 提货异常
        if(!this.form.lineId)return null
        return this.routerList.find(item => item.id == this.form.lineId)
    },
    // 送货上门
    homeDeliveryService(){
        return this.selectedRouter && this.selectedRouter.otherService && this.selectedRouter.otherService.indexOf('2') > -1
    },
    // 代收货款（非控货订单，且路线开通了代收服务）
    collectionProxy(){
        return !this.form.isCargoControl && this.selectedRouter && this.selectedRouter.otherService && this.selectedRouter.otherService.indexOf('3') > -1
    },
    // 根据渠道id显示渠道名
    getChannelNameById(){
        return channelId => {
            return this.channelList.find(item => item.channelId == channelId) ?. nameZh
        }
    },
    // 当前运输方式
    transport(){
        return this.transportList.find(item => item.value == this.form.transportId)
    },
    // 根据id获取优惠券
    getCoupon(){
        return couponId => {
            if(!couponId) return null
            return this.couponList.find(item => item.couponId == couponId)
        }
    },
    currentcyMap(){
        let map = {}
        this.currencyList.forEach(item => {
            map[item.id] = item.titleZh
        })
        return map
    },
    unitMap(){
        let map = {}
        this.unitList.forEach(item => {
            map[item.id] = item.titleZh
        })
        return map
    },
    sum(){
        let sum = {
            totalNum: new Decimal(0),
            totalVolume: new Decimal(0),
            totalWeight: new Decimal(0),
            totalWorth: new Decimal(0),
            totalQuatity: new Decimal(0)
        }
        this.form.orderItemVOList.forEach(item => {
            sum.totalNum = sum.totalNum.plus(item.num || 0)
            sum.totalVolume = sum.totalVolume.plus(item.volume || 0)
            sum.totalWeight = sum.totalWeight.plus(item.weight || 0)
            sum.totalWorth = sum.totalWorth.plus(item.worth || 0)
            sum.totalQuatity = sum.totalQuatity.plus(item.quantity || 0)
        })
        return sum
    },
    // 总优惠金额
    discount(){
        return 0
    },
    // 是否编辑
    editMode(){
        return this.$route.path.indexOf('create') == -1
    },
    // 是否可以编辑商品基本信息（货值除外）
    productEditable(){
        // 非编辑模式 或者 未完成入仓
        return !this.editMode || !this.inWarehouse
    },
    // 路线开通的服务
    routeOtherServices(){
        if(!this.selectedRouter || !this.selectedRouter.otherService) return []
        return this.selectedRouter.otherService.split(',')
    },
    // 是否可以添加商品
    canAddProduct(){
        if(!this.form.lineId){
            return false
        }
        // 如果是海空联运或者空运专线则必须选择渠道
        if(this.transport && this.transport.cssClass == 'channel' && !this.form.channelId ){
            return false
        }
        return true
    }
  },
  watch:{
    ccIdArr(arr){
        this.$set(this.form, 'ccIds', arr.join(","))
    },
    // 始发地
    'form.departureId'(){
        this.getOpenedRouterList()
    },
    // 目的地
    'form.objectiveId'(){
        this.getOpenedRouterList()
    },
    'form.transportId'(transportId, oldTransportId){
        // 海运拼柜给表单默认值
        if(this.form.transportId == 4){
            this.$nextTick(() => {
                this.$set(this, 'form', Object.assign(this.form, {
                    doubleClear: 2,
                    customsClearCert: false,
                    isUnpack: false,
                    isSingleTicketTransport: false
                }))
            })
        }
        // 更换运输方式之后，之前选择的路线会失效，需要重新选择
        if(oldTransportId && oldTransportId != transportId && transportId != this.selectedRouter?.transportType){
            console.log('重置路线',oldTransportId, transportId, this.selectedRouter?.transportType)
            this.$set(this.form, 'lineId', undefined)
        }
        
        this.getOpenedRouterList()
    },
    'form.channelId'(){
        this.calculationPrice()
    },
    'form.lineId'(lineId){
        let router = this.routerList.find(item => item.id == lineId)
        if(!router){
            console.log('未选择路线', router, lineId, JSON.stringify(this.routerList))
            return
        }
        this.$set(this.form, 'departureId', router.startCityId)
        this.$set(this.form, 'objectiveId', router.destCityId)

        this.calculationPrice()
    },
    'form.packageTypeArr'(val){
        console.log('packageType', val, val.length)
        this.$set(this.form, 'packageType', val ? val.join(',') : '')
    },
    'form.isExternalWarehouse'(isExternalWarehouse){
        // 勾选外部仓则添加一个默认的，取消则删除默认的空的
        if(!isExternalWarehouse){
            this.$set(this.form, 'externalWarehouseDtoList', [])
        }else if(!this.form.externalWarehouseDtoList.length){
            this.$set(this.form, 'externalWarehouseDtoList', [{}])
        }
    },
    /* 'form.orderItemVOList'(){
        console.log('form.orderItemVOList', this.form.orderItemVOList.length, this.form.orderItemVOList)
    }, */
    // 选择的路线变化后，需要判断是否开通了对应的服务，如果没开通需要取消对应的服务选择
    selectedRouter(val){
        if(!val) return
        ['1', '4'].forEach(service => {
            if(this.routeOtherServices.indexOf(service) < 0 && this.form.type.indexOf(service) > -1){
                this.form.type.splice(this.form.type.findIndex(item => item == service), 1)
            }
        })

    }
  },
  activated(){
    if(this.$route.query.id != this.form.id){
        this.getOrder()
    }
  },
  created() {
    defaultFormData = Object.assign({}, this.form)

    if(this.$route.query.id){
        this.getOrder()
    }else this.addProduct()

    getProductAttrList().then(res => this.productAttrList = res.data)
    getChannelList().then(res => this.channelList = res.data)
    getTradeCityList().then(res => this.tradeCityList = res.data)
    getCurrencyList().then(res => this.currencyList = res.data)
    getUnitList().then(res => this.unitList = res.data)
    this.transportList = this.getDictDatas(this.DICT_TYPE.ECW_TRANSPORT_TYPE)
    this.getDictDatas(this.DICT_TYPE.ECW_CUSTOM_DRAWEE).forEach(item => {
        this.customDraweeList.push({
            label: item.label, // 显示文字
            name: item.value, // key值
            value: 2 // 1 发货人，2收货人，默认收货人，可修改
        })
    })

    this.$nextTick(() => {
        this.initing = false
    })
  },
  methods: {
    onTableMounted(e){
        // console.warn('onTableMounted', e)
    },
    getOrder(){
        getUpdateInfo(this.$route.query.id).then(res => {
            this.form = Object.assign({}, res.data, {orderItemVOList: []})

            /* this.form.orderItemVOList = []; */
            
            this.form.type = this.form.type ? this.form.type.split(',').filter(item => item != '') : []
            this.form.packageTypeArr = this.form.packageType ? this.form.packageType.split(',').filter(item => item != '') : []
            if(res.data.consignorVO){
                this.$set(this.form, 'consignorCompany',        res.data.consignorVO.company)
                this.$set(this.form, 'consignorContactsId',     res.data.consignorVO.customerContactsId)
                this.$set(this.form, 'consignorCountryCode',    res.data.consignorVO.countryCode.replace('+', ''))
                this.$set(this.form, 'consignorEmail',          res.data.consignorVO.email)
                this.$set(this.form, 'consignorId',             res.data.consignorVO.customerId)
                this.$set(this.form, 'consignorName',           res.data.consignorVO.name)
                this.$set(this.form, 'consignorPhone',          res.data.consignorVO.phone)
            }

            if(res.data.consigneeVO){
                this.$set(this.form, 'consigneeCompany',        res.data.consigneeVO.company)
                this.$set(this.form, 'consigneeContactsId',     res.data.consigneeVO.customerContactsId)
                this.$set(this.form, 'consigneeCountryCode',    res.data.consigneeVO.countryCode.replace('+', ''))
                this.$set(this.form, 'consigneeEmail',          res.data.consigneeVO.email)
                this.$set(this.form, 'consigneeId',             res.data.consigneeVO.customerId)
                this.$set(this.form, 'consigneeName',           res.data.consigneeVO.name)
                this.$set(this.form, 'consigneePhone',          res.data.consigneeVO.phone)
            }
            
            if(res.data.ccIds){
                this.ccIdArr = res.data.ccIds.split(",").filter(item => item && item != '')
            }

            // 审核中需要显示流程表单
            if(this.form.applyStaus == 1){
                this.showWorkFlow = true
            }

            // 如果已完成入仓，则需要监听必填内容，发生更改后需要填写审批表单
            this.$nextTick(() => {
                res.data.orderItemVOList.forEach(item => {
                    item.prodAttrArr = item.prodAttrIds.split(',').filter(item => item != '').map(attrId => +attrId)
                    this.form.orderItemVOList.push({...item})
                })
                
                if(this.inWarehouse){
                    Object.keys(this.rules).forEach(field => {
                        console.log("watch", field)
                        this.$watch(`form.${field}`, () => {
                            this.showWorkFlow = true
                        })
                    })
                }
                this.initing = false
            })
        }).catch(() => {
            this.initing = false
        })
    },
    onContactChoose(contact){
        console.log('选择联系人', contact)
        if(!this.contactChooseType && !this.quickCreateType) return
        if(!this.contactChooseType && this.quickCreateType){
            this.contactChooseType = this.quickCreateType == 0 ? 'consignor' : 'consignee'
        }
        this.$set(this.form, this.contactChooseType + 'Company', contact.company)
        this.$set(this.form, this.contactChooseType + 'ContactsId', contact.customerContactsId)
        this.$set(this.form, this.contactChooseType + 'CountryCode', contact.areaCode.replace('+', ''))
        this.$set(this.form, this.contactChooseType + 'Email', contact.email)
        this.$set(this.form, this.contactChooseType + 'Id', contact.customerId)
        this.$set(this.form, this.contactChooseType + 'Name', contact.contactsName)
        this.$set(this.form, this.contactChooseType + 'Phone', contact.phoneNew)
        this.contactChooseType = null
        this.quickCreateType = null
    },
    upload(e){
        console.log({upload: e})
        let form = new FormData()
        form.append('file', e.file)
        orderImport(form).then(res => {
            if(!res.data.list.length){
                return this.$message.error('无有效数据')
            }

            this.importList = res.data.list
            this.$set(this.form, 'packingListUrl', res.data.packingListUrl)

        })
    },
    addToProductList(){
        console.log('addToProductList')
        this.importList.forEach(item => {
            this.form.orderItemVOList.push({
                prodId: item.prodId,
                brandType: item.brandType,
                num: item.num,
                quantity: item.quantity,
                volume: item.volume,
                weight: item.weight,
                prodAttrArr:[]
            })
        })
        // 重置
        this.importList = []
        this.showBatchImportDialog = false
    },
    downloadTpl(){
        this.exportLoading = true;
        exportPackingList().then(response => {
            this.$download.excel(response, this.$t('装箱单模板') + '.xls');
            this.exportLoading = false;
        }).catch(() => { });
    },
    setLink(row){
        this.$prompt(this.$t('请输入商品链接'), {inputValue: row.link}).then(({value}) => {
            this.$set(row, 'link', value)
        })
    },
    // 检查正整数
    checkPositiveInterge(row, field){
        console.log('checkPositiveInterge', field, row[field])
        row[field] = row[field].replace(/[^\d]/g, '')
    },
    onProductChange(row, product){
        console.log(product)
        // 如果是清除商品
        if(!product){
            row.fee = null
            row.prodAttrArr = []
            return false
        }
        // 没有orderItemId则表示新增的，否则就是编辑回显的
        // row.updated 表示用户操作了,用来区分是自动回显还是用户选择商品
        if(!row.orderItemId || row.updated){
            row.prodAttrArr = !product ? [] : product.attrId.split(',').filter(item => item !== '').map(item => +item)
        }
        row.prodTitleEn = product.titleEn
        row.prodTitleZh = product.titleZh
        this.calculationPrice()
    },
    onAreaChange(type, val){
        this.$set(this.form, type, val)
    },
    // 生成快递单号
    getOrderCourierNumber(){
        getOrderCourierNumber().then(res => {
            this.$set(this.form, 'number', res.data)
        })
    },
    onProductAttrChange(row, attr){
        console.log(attr)
    },

    addProduct(data){
        this.form.orderItemVOList.push(data || {prodAttrArr:[]})
    },
    // 获取路线
    getOpenedRouterList(){
        let params = {}
        if(this.form.departureId){
            params.startCityId = this.form.departureId
        }
        if(this.form.objectiveId){
            params.destCityId = this.form.objectiveId
        }
        if(this.form.transportId){
            params.transportType = this.form.transportId
        }
        getOpenedRouterList(params).then(res => this.routerList = res.data.filter(item => {
            return this.exportCityIds.indexOf(item.startCityId) > -1 && this.importCityIds.indexOf(item.destCityId) > -1
        }))
    },
    // 计算体积
    calcVolume(row){
        if(!row.boxGauge || !row.num) return false
        try{
            row.volume = (eval(row.boxGauge) * row.num).toFixed(2)
        }catch(e){
            row.volume = ''
        }
    },
    // 删除一条产品
    delProduct(index){
        this.$confirm(this.$t('确定删除此条内容么？'))
            .then(res => {
                this.form.orderItemVOList.splice(index, 1)
            })
    },
    /** 提交按钮 */
    // type 在新建的时候表示状态，0草稿，2带入仓
    submitForm(submitType) {
      this.$refs["form"].validate((valid, errors) => {
        if (!valid) {
          return this.$showFormValidateErrors(errors)
        }

        if(this.form.harvestMethod == 2){
            if(!this.form.country || !this.form.province || !this.form.city){
                return this.$notify({
                    title: this.$t('提示'),
                    message: this.$t("收货地区填写不完整"),
                    type: 'warning'
                });
            }
        }

        this.form.orderItemVOList.map(item => {
            item.prodAttrIds = item.prodAttrArr.join(',')
        })
        this.transportList.map(item => {
            if(item._enabled){
                item.lineIds = Array.from(item.lineIdSet).join(',')
                item.channelIds = Array.from(item.channelIdSet).join(',')
            }
        })
        // 修改的提交
        if (this.form.orderNo != null) {
            let data = Object.assign({}, this.form, {
                status: submitType,
              customDraweeVOList: this.customDraweeList,
              // transportUpdateReqVOList: this.transportList.filter(item => item._enabled),
              orderItemVOList: this.getProductListWithDefaultValue(),
            })
            data.type = data.type.join(',')
            updateApply(data).then(response => {
                this.$modal.msgSuccess(this.$t("修改成功"));
                this.$router.back()
            });
            return;
        }
        let data = Object.assign({
            consigneeId: this.consigneeContact.customerId,
            consignorId: this.consignorContact.customerId,
            customerId : this.consignorContact.customerId,
            // couponIds: coupons.join(","),
        }, this.form, {
            customDraweeVOList: this.customDraweeList,
            // transportUpdateReqVOList: this.transportList.filter(item => item._enabled),
            orderItemVOList: this.getProductListWithDefaultValue(),
            status: submitType
        })
        data.type = data.type.join(',')
        // 添加的提交
        createOrder(data).then(response => {
          this.$modal.msgSuccess(this.$t("新增成功"));

          // 重置数据
          this.form = {...defaultFormData}
          this.$refs.form.clearValidate()

          this.$redirect('success?orderId=' + response.data)
        });
      });
    },
    // 计算商品运费(根据货值计算保费)
    calculationPrice(){
        let calcable = true
        if(!this.form.orderItemVOList.length) return false
        this.form.orderItemVOList.forEach(item => {
            if(!item.prodId){
                calcable = false
            }
        })
        console.log('calculationPrice', calcable)
        if(this.calculating || !calcable) return false
        this.calculating = true
        console.log('calculating ---> ')
        calculationPrice({
            lineId: this.form.lineId,
            transportId: this.form.transportId,
            channelId: [3,4].indexOf(this.form.transportId) > -1 ? this.form.channelId : undefined,
            prodConditionParamList: this.getProductListWithDefaultValue(),
            orderType: this.form.orderType
        }).then(res => {
            this.$set(this, 'fee', res.data.costDto)
            this.form.orderItemVOList.map((item, index) => {
                this.$set(item, 'fee', res.data.prodCostDtoList[index] || null)
            })
        }).finally(() => {
            this.calculating = false
        })
    },
    // 体积。件数，数量，重量为选填，但是接口确实必填，所以生成一个副本并赋予默认值
    getProductListWithDefaultValue(){
        let arr = []
        this.form.orderItemVOList.forEach(item => {
            let tmp = {...item}
            if(!tmp.volume)tmp.volume = 1
            if(!tmp.weight)tmp.weight = 1
            if(!tmp.quantity)tmp.quantity = 1
            if(!tmp.num)tmp.num = 1
            tmp.orderType = item.orderItemType
            arr.push(tmp)
        })
        return arr
    }
  }
};
</script>
<style lang="scss" scoped>
.card-title{
    font-size: 18px;
    display: flex;
    .card-name{
        flex: 1;
    }
}
.form-section{
    .contact{
        display: flex;
        align-items: center;
        img.phonebook{
            width: 30px;
            height: 30px;
            margin-left: 10px;
            cursor: pointer;
        }
    }

}
::v-deep .product-list .el-form-item__error{
    position: static;
}
::v-deep th.el-table__cell .cell{
    white-space: nowrap;
    .red{
        color: red;
    }
}
</style>
