<template>
  <div>
    <el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="16">
        <div style="display: flex; justify-content: space-between; align-items: flex-end">
          <h2>{{ $t("查看") }}</h2>
          <div>
            <el-button type="primary" size="small" v-has-permi="['ecw:customer:query-edit']" @click="$router.push('/customer/add-edit/' + id)">{{ $t("编辑") }} </el-button>
            <el-button v-has-permi="['ecw:customer:query-quoted-price']" @click="quote" type="primary" size="small">
              {{ $t("报价") }}
            </el-button>
            <el-button v-has-permi="['ecw:customer:query-follow-up']" type="primary" size="small" @click="customerFollowFn('follow')">{{ $t("跟进") }} </el-button>
            <el-button v-has-permi="['ecw:customer:query-customer-complaint']" type="primary" size="small" @click="customerFollowFn('complain')">{{ $t("客诉") }} </el-button>
            <el-button v-has-permi="['ecw:customer:query-delete']" type="danger" size="small" @click="deleteCustomerFn()">{{ $t("删除") }} </el-button>
          </div>
        </div>

        <el-card style="margin-top: 15px">
          <el-descriptions :title="$t('基本')" :column="3" border>
            <template slot="extra">
              <el-button type="primary" size="small" @click="showMore = !showMore">
                {{ showMore ? $t("隐藏") : $t("更多") }}
              </el-button>
            </template>
            <el-descriptions-item :label="$t('客户编号')">{{ customer.number }}</el-descriptions-item>
            <el-descriptions-item :label="$t('客户名称')"
              ><span style="white-space: pre-wrap">{{ customer.name }}</span></el-descriptions-item
            >
            <el-descriptions-item :label="$t('国籍')">{{ $l(customer, "countryName") }}</el-descriptions-item>
            <el-descriptions-item :label="$t('客户来源')">
              {{ getDictDataLabel(DICT_TYPE.CUSTOMER_SOURCE, customer.source) }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('客户状态')">
              {{ getDictDataLabel(DICT_TYPE.CUSTOMER_STATUS, customer.status) }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('客户经理')">{{ customer.customerServiceName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('询盘信息')">{{ customer.inquiry }}</el-descriptions-item>
            <el-descriptions-item :label="$t('备注')">{{ customer.remarks }}</el-descriptions-item>
            <el-descriptions-item :label="$t('图片')">
              <image-display :picture-urls="customer.picture ? customer.picture.split(',') : []">
                <el-button type="text"> 查看图片</el-button>
              </image-display>
            </el-descriptions-item>

            <el-descriptions-item :label="$t('客户等级')">
              {{ getDictDataLabel(DICT_TYPE.CUSTOMER_LEVEL, customer.level) }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('推介人')">{{ customer.promoterName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('客户生日')">{{ parseTime(customer.birthday, "{y}-{m}-{d}") }} </el-descriptions-item>
            <el-descriptions-item :label="$t('业绩类型')">{{ customer.isNew ? $t("新客户") : $t("老客户") }} </el-descriptions-item>
            <el-descriptions-item :label="$t('资源类型')">
              <dict-tag :type="DICT_TYPE.ECW_CUSTOMER_RESOURCE_TYPE" :value="customer.resourceType"></dict-tag>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('客户英文名称')">{{ customer.nameEn }}</el-descriptions-item>
            <el-descriptions-item :label="$t('联系地址')">{{ customer.address }}</el-descriptions-item>
            <el-descriptions-item :label="$t('首次成交时间')">{{ customer.firstDealTime }}</el-descriptions-item>
            <el-descriptions-item :label="$t('掉入公海时间')">
              {{ customer.estimateEnterOpenSeaTime || customer.enterOpenSeaTime }}
            </el-descriptions-item>

            <template v-if="showMore">
              <el-descriptions-item :label="$t('获取方式')">
                {{ getDictDataLabel(DICT_TYPE.CUSTOMER_GET_METHOD, customer.getMethod) }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('创建入口')">
                {{ getDictDataLabel(DICT_TYPE.CUSTOMER_FROM, customer.createFrom) }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('捞取时间')">{{ customer.catchTime }}</el-descriptions-item>
              <el-descriptions-item :label="$t('归属时间')">{{ customer.customerServiceConfirmedTime }} </el-descriptions-item>
              <el-descriptions-item :label="$t('创建人')">{{ customer.founderName }}</el-descriptions-item>
              <el-descriptions-item :label="$t('创建时间')">{{ parseTime(customer.createTime) }}</el-descriptions-item>
              <el-descriptions-item :label="$t('最后更新人')">{{ customer.updaterName }}</el-descriptions-item>
              <el-descriptions-item :label="$t('最后更新时间')">{{ customer.updateTime }}</el-descriptions-item>
            </template>
          </el-descriptions>
        </el-card>

        <el-tabs v-model="activeName" style="margin-top: 15px" type="border-card">
          <el-tab-pane name="contact" :label="$t('联系人')">
            <el-table :data="customerContacts" style="width: 100%" border>
              <el-table-column prop="department" :label="$t('部门')"> </el-table-column>
              <el-table-column prop="position" :label="$t('职位')"> </el-table-column>
              <el-table-column prop="name" :label="$t('联系人')"> </el-table-column>
              <el-table-column prop="nameEn" :label="$t('联系人英文名称')"> </el-table-column>
              <el-table-column prop="phoneNew" :label="$t('联系方式')">
                <template v-slot="{ row }"> +{{ row.areaCode }} {{ row.phoneNew }} </template>
              </el-table-column>
              <el-table-column prop="userid" :label="$t('关联账号')" :formatter="userIdFormatter"> </el-table-column>
              <el-table-column prop="social" :label="$t('社交软件')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.SOCIAL, cellValue)"> </el-table-column>
              <el-table-column prop="socialNumber" :label="$t('社交软件号码')"> </el-table-column>
              <el-table-column prop="email" :label="$t('邮箱')"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane name="order" :label="$t('订单')">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <el-form :inline="true" size="small" label-width="100px" class="search-z">
                  <div class="search-z">
                    <el-form-item :label="$t('编号')" prop="orderNo">
                      <el-input
                        v-model.trim="noParam.value"
                        :placeholder="$t('请输入订单号、唛头、提单号')"
                        clearable
                        class="w-200"
                        @input="replaceSpace(noParam, 'value')"
                        @keyup.enter.native="handleQuery">
                        <template slot="prepend">
                          <dict-selector :type="DICT_TYPE.ORDER_QUERY_NO_FIELD" defaultable v-model="noParam.key" />
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item :label="$t('运输方式：')">
                      <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" formatter="number"/>
                    </el-form-item>
                    <el-form-item :label="$t('订单状态：')">
                      <dict-selector :type="DICT_TYPE.ORDER_STATUS" v-model="queryParams.status" />
                    </el-form-item>
                    <el-form-item :label="$t('报关方式：')" v-show="showSearch">
                      <dict-selector :type="DICT_TYPE.ECW_CUSTOMS_TYPE" v-model="queryParams.customsTypes" multiple />
                    </el-form-item>
                    <el-form-item :label="$t('控货：')" v-show="showSearch">
                      <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING" v-model="queryParams.isCargoControl" />
                    </el-form-item>
                    <el-form-item :label="$t('始发仓：')" prop="startWarehouseIds" v-show="showSearch">
                      <el-select v-model="queryParams.startWarehouseIds" multiple :placeholder="$t('请选择始发仓')" clearable @change="handleQuery">
                        <el-option v-for="item in exportWarehouseList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('目的国：')" prop="destCountryId" v-show="showSearch">
                      <el-select v-model="destCountryId" multiple :placeholder="$t('请选择目的国')" clearable @change="handleQuery">
                        <el-option v-for="item in AddressProvince" :key="item.guojia" :label="item.guojiaName" :value="item.guojia"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('目的城市：')" prop="objectiveId" v-show="showSearch">
                      <el-select v-model="objectiveId" multiple :placeholder="$t('请选择目的城市')" style="width: 200px" clearable @change="handleQuery">
                        <el-option v-for="item in AddressCity" :key="item.shi" :label="item.shiName" :value="item.shi" ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('目的仓：')" prop="destWarehouseId" v-show="showSearch">
                      <el-select v-model="destWarehouseId" multiple :placeholder="$t('请选择目的仓')" style="width: 200px" clearable @change="handleQuery">
                        <el-option v-for="item in AddressTown" :key="item.id" :label="item.titleZh" :value="item.id" ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
<!--                  <div class="search-time">-->
                  <div class="flex pb-20">
<!--                    <el-form-item :label="$t('入仓时间：')">-->
<!--                      <el-date-picker v-model="rucangtime" @change="changeDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />-->
<!--                    </el-form-item>-->
                    <div v-show="showSearch">
                      <dict-selector :type="DICT_TYPE.ECW_BEGINTIME_TYPE_ENDTIME" :filter="(item) => item.value != 'PickTime'" v-model="dateFilterType" defaultable class="w-200 mr-5" v-show="showSearch"/>
                      <el-date-picker  v-model="dateFilter" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery" > </el-date-picker>
                      <el-form-item style="padding-left: 20px">
                        <el-button type="primary" @click="getOrderList">{{ $t("搜索") }}</el-button>
                        <el-button type="primary" @click="handleOrderReset">{{ $t("重置") }}</el-button>
                      </el-form-item>
                    </div>
                  </div>
                  <div v-show="!showSearch">
                    <el-form-item style="padding-left: 50px">
                    <el-button type="primary" @click="getOrderList">{{ $t("搜索") }}</el-button>
                    <el-button type="primary" @click="handleOrderReset">{{ $t("重置") }}</el-button>
                    </el-form-item>
                  </div>
                </el-form>
                <el-row :gutter="10" class="mb8">
                  <el-col :span="15" v-if="statisticsOrder">
                    <!-- 订单列表显示搜索条件对应箱数、仓库实测、收款方数、重量 -->
                    {{ $t("合计：{totalNum}箱，{totalVolume}m³(测) {totalChargeVolume}m³(重) {totalWeight}KG(测), {totalChargeWeight}kg(收费)", statisticsOrder) }}
                  </el-col>
                  <right-toolbar :showSearch.sync="showSearch" @queryTable="getOrderList"></right-toolbar>
                </el-row>
              </div>
              <el-descriptions :column="2">
                <el-descriptions-item :label="$t('海空联运/海运拼柜/海运整柜/专线空运')"> {{ orderStatisticsObj.hklyTotal || 0 }}/{{ orderStatisticsObj.hypgTotal || 0 }}/{{ orderStatisticsObj.hyzgTotal || 0 }}/{{ orderStatisticsObj.zxkyTotal || 0 }} </el-descriptions-item>
                <el-descriptions-item :label="$t('最后交易日期')">{{ orderStatisticsObj.lastBusinessDate }} </el-descriptions-item>
                <el-descriptions-item :label="$t('全部订单/控货订单')"> {{ orderStatisticsObj.allOrderTotal || 0 }}/{{ orderStatisticsObj.controlOrderTotal || 0 }} </el-descriptions-item>
                <el-descriptions-item :label="$t('最后交易单号')">{{ orderStatisticsObj.lastBusinessOrderNo }} </el-descriptions-item>
                <el-descriptions-item :label="$t('报价/下单/入仓')"> {{ orderStatisticsObj.offerOrderTotal || 0 }}/{{ orderStatisticsObj.pickOrderTotal || 0 }}/{{ orderStatisticsObj.wareHousingTotal || 0 }} </el-descriptions-item>
                <el-descriptions-item :label="$t('储存量')">{{ orderStatisticsObj.stock || 0 }}</el-descriptions-item>
                <el-descriptions-item :label="$t('已出货订单')">{{ orderStatisticsObj.shipmentTotal || 0 }} </el-descriptions-item>
              </el-descriptions>
              <el-table :data="orderList">
                <el-table-column :label="$t('订单编号')" width="120px" align="center">
                  <template slot-scope="{ row }">
                    <el-link type="primary" @click.native="$router.push('/order/detail?orderId=' + row.orderId)">
                      {{ row.orderNo }}
                    </el-link>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('报价单号')" align="center" width="120px">
                  <template slot-scope="{ row }">
                    <el-link type="primary" @click.native="$router.push('/offer/detail?offerId=' + row.offerId)">
                      {{ row.offerNo }}
                    </el-link>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('唛头')" align="center" prop="marks" />
                <el-table-column :label="$t('总箱数/入仓箱数')" align="center" prop="sumNum">
                  <template slot-scope="{ row }"> {{ row.totalNum }}{{ $t("箱") }}/{{ row.sumNum }}{{ $t("箱") }} </template>
                </el-table-column>
                <el-table-column :label="$t('体积/重量')" align="center" prop="sumWeight">
                  <template slot-scope="{ row }">
                    <!--入仓前是填单数据，入仓后是入仓数据-->
                    <!--                    <template v-if="row.inWarehouseState <= 1">{{row.costVO.totalVolume}}m³ /{{row.costVO.totalWeight}}Kg</template>-->
                    <!--                    <template v-else>{{row.sumVolume}}m³ /{{row.sumWeight}}Kg</template>-->
                    <component
                      :is="row.orderType == 2 ? 'el-tooltip' : 'div'"
                      class="item"
                      :style="{
                        color: row.orderType == 2 ? 'red' : null
                      }"
                      effect="dark"
                      :content="(row.wvolume || 0) + 'm³'"
                      placement="bottom"
                    >
                      <div v-if="row.sumNum > 0">{{ row.sumVolume }}m³ /{{ row.sumWeight }}Kg</div>
                      <div v-else>{{ row.costVO.totalVolume }}m³ /{{ row.costVO.totalWeight }}Kg</div>
                    </component>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('始发仓')" align="center" prop="startWarehouseName">
                  <template slot-scope="{ row }">
                    {{ row.startWarehouseName }}
                    <span style="color: red" v-if="row.isExternalWarehouse">({{ $t("外部仓") }})</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('运输方式-渠道/目的仓')" align="center" prop="transportId">
                  <template slot-scope="{ row }">
                    <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId" />
                    <template v-if="row.channelName"> - {{ row.channelName }} </template>
                    / {{ row.dstWarehouseName }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('控货')" align="center" prop="transportId">
                  <template slot-scope="{ row }">
                    <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.isCargoControl" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('订单状态')" align="center" prop="statusMsg">
                  <!--                  <template slot-scope="scope">-->
                  <!--                    <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />-->
                  <!--                  </template>-->
                </el-table-column>
                <el-table-column :label="$t('创建时间')" align="center" prop="createTime" />
                <el-table-column :label="$t('入仓时间')">
                  <template v-slot="{ row }">
                    {{ parseTime(row.rucangTime) }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('装柜/出仓时间')" align="center" prop="loadTime" />
                <el-table-column :label="$t('卸柜/到仓时间')" align="center" prop="unloadTime" />
                <el-table-column :label="$t('提货率')" align="center">
                  <template v-slot="{ row }">
                    {{ row.pickNum | deliveryRate(row.sumNum) }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('客户经理')" align="center" prop="salesmanName" />
                <el-table-column :label="$t('业绩归属客户方')" align="center" prop="customerName" />
              </el-table>
              <pagination @pagination="getOrderList" :page.sync="queryParams.page" :limit.sync="queryParams.rows" :total="orderTotal"></pagination>
            </el-card>
          </el-tab-pane>
          <el-tab-pane name="quote" :label="$t('报价')">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <el-form :inline="true" size="small" ref="handleOffer" label-width="100px">
                  <div class="search-z">
                    <el-form-item :label="$t('编号')" prop="searchNumber">
                      <el-input v-model.trim="queryOfferParams.searchNumber" :placeholder="$t('请输入报价单号、订单号')" clearable @keyup.enter.native="handleQuery" />
                    </el-form-item>

<!--                    <el-form-item :label="$t('客户')" prop="searchCustomer" v-show="showSearch">-->
<!--                      <el-input v-model.trim="queryOfferParams.searchCustomer" clearable @keyup.enter.native="handleQuery" />-->
<!--                    </el-form-item>-->
                    <el-form-item :label="$t('区号')" prop="relationAreaCode"  v-show="showSearch">
                      <el-input v-model.trim="queryOfferParams.relationAreaCode" :placeholder="$t('请输入客户')" clearable @keyup.enter.native="handleQuery" @input="queryOfferParams.relationAreaCode = queryOfferParams.relationAreaCode.replace(/\s+/g, '')" />
                    </el-form-item>
                    <el-form-item :label="$t('联系方式')" prop="relationPhone"  >
                      <el-input v-model.trim="queryOfferParams.relationPhone" clearable @keyup.enter.native="handleQuery" @input="queryOfferParams.relationPhone = queryOfferParams.relationPhone.replace(/\s+/g, '')" />
                    </el-form-item>
                    <el-form-item :label="$t('始发仓')" prop="startWarehouseIds" v-show="showSearch">
                      <el-select v-model="queryParams.startWarehouseIds" multiple :placeholder="$t('请选择始发仓')" clearable @change="handleQuery">
                        <el-option v-for="item in exportWarehouseList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item :label="$t('目的国')" prop="destCountryId"  v-show="showSearch">
                      <el-select v-model="destCountryId" multiple :placeholder="$t('请选择目的国')" clearable @change="handleQuery">
                        <el-option v-for="item in AddressProvince" :key="item.guojia" :label="item.guojiaName" :value="item.guojia"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('目的城市')" prop="objectiveId"  v-show="showSearch">
                      <el-select v-model="objectiveId" multiple :placeholder="$t('请选择目的城市')" style="width: 200px" clearable @change="handleQuery">
                        <el-option v-for="item in AddressCity" :key="item.shi" :label="item.shiName" :value="item.shi"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('目的仓')" prop="destWarehouseId"  v-show="showSearch">
                      <el-select v-model="destWarehouseId" multiple :placeholder="$t('请选择目的仓')" style="width: 200px" clearable @change="handleQuery">
                        <el-option v-for="item in AddressTown" :key="item.id" :label="item.titleZh" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item :label="$t('客户经理')" prop="salesmanIds" >
                      <user-selector v-model="queryOfferParams.salesmanIds" multiple clearable @change="handleQuery" />
                    </el-form-item>
                    <el-form-item :label="$t('销售阶段')" prop="statusList"  v-show="showSearch">
                      <dict-selector :type="DICT_TYPE.ECW_OFFER_STATUS" multiple v-model="queryOfferParams.statusList" clearable @change="handleQuery" />
                    </el-form-item>
                    <el-form-item :label="$t('重要程度')" prop="importances"  v-show="showSearch">
                      <el-select v-model="queryOfferParams.importances" multiple :placeholder="$t('请选择')" clearable @change="handleQuery">
                        <el-option v-for="item in [1, 2, 3, 4, 5]" :label="item" :value="item" :key="item"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="search-time" v-show="showSearch">
                    <el-form-item :label="$t('创建时间')" v-show="showSearch">
                      <el-date-picker v-model="queryTmp.createTime" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"> </el-date-picker>
                    </el-form-item>
                    <el-form-item style="padding-left: 20px">
                      <el-button type="primary" @click="getInfoListOfferPage">{{ $t("搜索") }}</el-button>
                      <el-button type="primary" @click="handleOfferReset">{{ $t("重置") }}</el-button>
                    </el-form-item>
                  </div>
                  <div v-show="!showSearch">
                    <el-form-item style="padding-left: 50px">
                      <el-button type="primary" @click="getInfoListOfferPage">{{ $t("搜索") }}</el-button>
                      <el-button type="primary" @click="handleOfferReset">{{ $t("重置") }}</el-button>
                    </el-form-item>
                  </div>
                </el-form>
                <el-row :gutter="10" class="mb8">
                  <right-toolbar :showSearch.sync="showSearch" @queryTable="getOrderList"></right-toolbar>
                </el-row>
              </div>
              <el-table :data="infoListOfferList" style="width: 100%">
                <el-table-column type="index" :label="$t('序号')"> </el-table-column>
                <el-table-column :label="$t('报价单号')" width="160px">
                  <template slot-scope="{ row }">
                    <el-link type="primary" @click.native="$router.push('/offer/detail?offerId=' + row.offerId)">
                      {{ row.number }}
                    </el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="orderNo" :label="$t('订单号')"> </el-table-column>
                <!--
                <el-table-column
                  prop="consignorName"
                  :label="$t('客户名称')"
                >
                  <template v-slot>
                    {{customer.name}}
                  </template>
                </el-table-column>
                -->
                <el-table-column prop="relationName" :label="$t('联系人')"> </el-table-column>
                <el-table-column :label="$t('联系方式')">
                  <template v-slot="{ row }"> +{{ row.relationAreaCode }}{{ row.relationPhone }} </template>
                </el-table-column>
                <el-table-column :label="$t('始发仓')">
                  <template slot-scope="{ row }">
                    {{ row.startWarehouseName }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('运输方式-渠道/目的仓')">
                  <template slot-scope="{ row }">
                    <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId" />
                    <template v-if="row.channelName"> - {{ row.channelName }} </template>
                    / {{ row.destWarehouseName }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('销售阶段')">
                  <template v-slot="{ row }">
                    {{ STATUS[row.status] }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('预计销售额')">
                  <template slot-scope="{ row }" v-if="row.estCostVO">
                    <div class="" v-for="(item, feeIndex) in row.estCostVO.feeDtoList" :key="feeIndex">
                      <dict-tag :type="DICT_TYPE.ECW_COST_FEE_TYPE" :value="item.feeType" />
                      {{ item.amount }} {{ currencyMap[item.currencyId] }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="stopTime" :label="$t('预计结束时间')"> </el-table-column>
                <el-table-column prop="businessManagerName" :label="$t('负责人')"> </el-table-column>
                <el-table-column prop="importance" :label="$t('重要程度')"> </el-table-column>
                <el-table-column prop="importance" :label="$t('报价有效期')">
                  <template v-slot="{ row }"> {{ row.startTime }} - {{ row.endTime }} </template>
                </el-table-column>
                <el-table-column prop="businessManagerName" :label="$t('客户经理')"> </el-table-column>
                <el-table-column prop="createTime" :label="$t('创建时间')"> </el-table-column>
                <el-table-column :label="$t('操作')" align="center" fixed="right" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <!--
                    0 取消                                        恢复
                    1 特价审批    编辑、跟进、          取消    删除
                    2 草稿        编辑、                       删除
                    3 需求确认    编辑、跟进、结果、特价、取消   删除
                    4 赢单                                    删除
                    5 输单                                    删除
                    6 完成                                    删除
                    7 跟进中      编辑、跟进、结果、特价、取消、 删除
                    -->
                    <el-dropdown>
                      <el-button icon="el-icon-plus" circle type="primary"></el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="$router.push('/offer/detail?offerId=' + scope.row.offerId)" v-hasPermi="['ecw:offer:show']">{{ $t("详情") }} </el-dropdown-item>
                        <el-dropdown-item @click.native="$router.push('/offer/edit?id=' + scope.row.offerId)" v-if="[1, 2, 3, 7].indexOf(scope.row.status) > -1" v-hasPermi="['ecw:offer:update']">{{ $t("编辑") }} </el-dropdown-item>
                        <el-dropdown-item @click.native="handleAddOffer(scope.row)" v-if="[1, 3, 7].indexOf(scope.row.status) > -1">{{ $t("跟进") }}</el-dropdown-item>
                        <el-dropdown-item @click.native="$router.push(`/offer/result?offerId=${scope.row.offerId}&number=${scope.row.number}`)" v-if="[3, 7].indexOf(scope.row.status) > -1" v-hasPermi="['ecw:offer:result']">{{ $t("结果") }} </el-dropdown-item>
                        <el-dropdown-item @click.native="$router.push('/offer/special?offerId=' + scope.row.offerId)" v-if="[1, 3, 7].indexOf(scope.row.status) > -1" v-hasPermi="['ecw:offer:discount', 'ecw:offer:commission']">{{ $t("特价") }} </el-dropdown-item>
                        <el-dropdown-item @click.native="cancel(scope.row.offerId)" v-if="[1, 3, 7].indexOf(scope.row.status) > -1" v-hasPermi="['ecw:offer:cancel']">{{ $t("取消") }} </el-dropdown-item>
                        <el-dropdown-item @click.native="recovery(scope.row.offerId)" v-if="[0].indexOf(scope.row.status) > -1" v-hasPermi="['ecw:offer:recovery']">
                          {{ $t("恢复") }}
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="deleteOffer(scope.row.offerId)" v-if="[0, 1, 2, 3, 4, 5, 6, 7].indexOf(scope.row.status) > -1" v-hasPermi="['ecw:offer:delete']">{{ $t("删除") }} </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
              </el-table>
              <pagination @pagination="getInfoListOfferPage" :page.sync="infoListOfferFrom.pageNo" :limit.sync="infoListOfferFrom.pageSize" :total="infoListOfferTotal"></pagination>
            </el-card>
          </el-tab-pane>
          <el-tab-pane name="follow" :label="$t('跟进')">
            <log-list-customer-common ref="logListCustomerCommon" :customerService="customer.customerService" :customerNumber="customer.number" v-if="activeName === 'follow'" :customerId="id" />
          </el-tab-pane>
          <!-- 客户集运订单 -->
          <el-tab-pane name="consOrder" :label="$t('集运')">
            <customer-cons-order v-if="activeName === 'consOrder'" ref="CustomerConsOrder" :customerId="id"></customer-cons-order>
          </el-tab-pane>
          <el-tab-pane name="special" :label="$t('特殊设置')">
            <el-descriptions :column="2">
              <el-descriptions-item :label="$t('是否显示提单价格')">
                <el-switch v-model="customer.isShowTidanPrice" disabled />
              </el-descriptions-item>
              <el-descriptions-item :label="$t('到仓确认')">
                <el-switch v-model="customer.arrivalConfirm" :active-value="1" :inactive-value="0" disabled />
              </el-descriptions-item>
              <el-descriptions-item :label="$t('重货标准')">{{ customer.weightUnit ? `${customer.weightUnit}kg/cbm` : "" }} </el-descriptions-item>
              <el-descriptions-item :label="$t('泡货标准')">
                {{ customer.lightUnit ? `${customer.lightUnit}kg/cbm` : "" }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('控货无收货人')">
                <el-switch v-model="customer.noConsignee" disabled />
              </el-descriptions-item>
              <el-descriptions-item :label="$t('默认付款')">
                <el-switch v-model="customer.defaultPay" disabled />
              </el-descriptions-item>
              <el-descriptions-item :label="$t('默认开票')">
                <el-switch v-model="customer.defaultBilling" disabled />
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane name="operationLog" v-if="checkPermi(['customer:operate-log:query'])" :label="$t('操作日志')">
            <customer-log :customerId="id" v-if="'operationLog' === activeName"></customer-log>
          </el-tab-pane>
          <el-tab-pane name="complain" :label="$t('客户投诉')">
            <customer-complaint v-if="activeName === 'complain'" ref="customerComplaint" :customerName="customer.name" :customer-id="id" hidden-search></customer-complaint>
          </el-tab-pane>
          <el-tab-pane name="bill" :label="$t('账单')">
            <el-table style="width: 100%" :data="infoListReceiptList">
              <el-table-column :label="$t('序号')" type="index"></el-table-column>
              <el-table-column :label="$t('账单')" prop="receiptNo"></el-table-column>
              <el-table-column :label="$t('订单号')" prop="orderNo"></el-table-column>
              <el-table-column :label="$t('箱数')" prop="num"></el-table-column>
              <el-table-column :label="$t('方数')" prop="volume"></el-table-column>
              <el-table-column :label="$t('重量')" prop="weight"></el-table-column>
              <el-table-column :label="$t('类型')">
                <template v-slot="{ row }">
                  <dict-tag :type="DICT_TYPE.PAYMENT_TYPE" :value="row.collectionType" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('费用类型')">
                <template v-slot="{ row }">
                  <dict-tag :type="DICT_TYPE.FEE_TYPE" :value="row.feeType" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('金额')" prop="totalAmount"> </el-table-column>
              <el-table-column :label="$t('已核销比例')" prop="writeOffScale"></el-table-column>
              <el-table-column :label="$t('实收日期')">
                <template v-slot="{ row }">
                  {{ parseTime(row.writeOffAt) }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('业务员')" prop="salesmanName"></el-table-column>
            </el-table>
            <pagination v-show="infoListReceiptList.length" :total="infoListReceiptTotal" :page.sync="infoListReceiptFrom.pageNo" :limit.sync="infoListReceiptFrom.pageSize" @pagination="infoListReceiptFn" />
          </el-tab-pane>
          <el-tab-pane name="empower" :label="$t('品牌授权')">
            <el-table border style="width: 100%" :data="brandAuthorizationList">
              <el-table-column type="index" :prop="$t('序号')"></el-table-column>
              <el-table-column :label="$t('中文标题')" prop="titleZh"></el-table-column>
              <el-table-column prop="titleEn" :label="$t('英文标题')"></el-table-column>
              <el-table-column :label="$t('有无备案')">
                <template v-slot="{ row }">
                  <dict-tag :type="DICT_TYPE.BRAND_REG_TYPE" :value="row.filing" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('授权开始')">
                <template v-slot="{ row }">
                  {{ parseTime(row.startTime) }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('授权结束')">
                <template v-slot="{ row }">
                  {{ parseTime(row.endTime) }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('授权证明')">
                <template v-slot="{ row }">
                  <div v-if="!!row.fileUrl && row.fileUrl.length > 0">
                    <span v-for="(item, index) in (row.fileUrl || '').split(',')">
                      <a :href="item" target="_blank">{{ $t("附件") }}{{ index + 1 }}</a
                      >,
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="feeScale" :formatter="(row) => getDictDataLabel(DICT_TYPE.BRAND_CUSTOMER_CHARGING_MODEL, row.feeScale)" :label="$t('收费标准')"> </el-table-column>
              <el-table-column prop="createUsername" :label="$t('添加人')"> </el-table-column>
              <el-table-column :label="$t('创建时间')">
                <template v-slot="{ row }">
                  {{ parseTime(row.createTime) }}
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="brandAuthorizationTotal.length" :total="brandAuthorizationTotal" :page.sync="brandAuthorizationFrom.pageNo" :limit.sync="brandAuthorizationFrom.pageSize" @pagination="getBrankByCustomerList" />
          </el-tab-pane>
          <el-tab-pane name="deliver" :label="$t('发货评估')">
            <el-descriptions :column="2">
              <el-descriptions-item :label="$t('客户类别')">
                {{
                  getDictDatas2(DICT_TYPE.CUSTOMER_TYPE, (customer.type || "").split(","))
                    .map((e) => (isChinese ? e.label : e.labelEn))
                    .join(", ")
                }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('角色')">
                {{
                  getDictDatas2(DICT_TYPE.CUSTOMER_ROLE, (customer.roles || "").split(","))
                    .map((e) => (isChinese ? e.label : e.labelEn))
                    .join(", ")
                }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('出货渠道')">
                {{
                  getDictDatas2(DICT_TYPE.ECW_CUSTOMER_TRANSPORT_TYPE, (customer.transportType || "").split(","))
                    .map((e) => (isChinese ? e.label : e.labelEn))
                    .join(", ")
                }}
                <!--              <dict-tag v-if="customer.transportType" v-for="item in (customer.transportType || '').split(',')" :type="DICT_TYPE.ECW_CUSTOMER_TRANSPORT_TYPE" :value="item"></dict-tag>-->
              </el-descriptions-item>
<!--              <el-descriptions-item :label="$t('常提货网点')">{{ $l(customer, "pickupPointName") }} </el-descriptions-item>-->
              <el-descriptions-item :label="$t('常提货网点')">
                {{
                  getDictDatas2(DICT_TYPE.PICKUP_POINTS, (customer.pickupPoints || "").split(","))
                    .map((e) => (isChinese ? e.label : e.labelEn))
                    .join(", ")
                }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('业务国家')">
                {{ isChinese ? customer.busiCountryNameZh : customer.busiCountryNameEn }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('主营类别')">
                <div>
                  <div v-for="(item, index) in productTypeName" :key="index">
                    <b>{{ $l(item, "title") }}：</b><span>{{ item.productList || "-" }}</span>
                  </div>
                </div>
              </el-descriptions-item>
              <el-descriptions-item :label="$t('年度发货量')">{{ customer.weightYearly }}</el-descriptions-item>
              <el-descriptions-item :label="$t('主要竞争对手')">{{ customer.competitorNames }}</el-descriptions-item>
              <el-descriptions-item :label="$t('年度发货次数')">{{ customer.numYearly }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane name="financial" :label="$t('财务资料')">
            <el-card class="box-card">
              <div slot="header">{{ $t("公司信息") }}</div>
              <el-descriptions :column="2">
                <el-descriptions-item :label="$t('公司名称')">{{ customer.company }}</el-descriptions-item>
                <el-descriptions-item :label="$t('公司英文名称')">{{ customer.companyEn }}</el-descriptions-item>
                <el-descriptions-item v-if="permissions.includes('ecw:customer:query-card')" :label="$t('身份证号码')">
                  {{ customer.carNo }}
                </el-descriptions-item>
                <el-descriptions-item v-if="permissions.includes('ecw:customer:query-card')" :label="$t('身份证姓名')">
                  {{ customer.carName }}
                </el-descriptions-item>
                <el-descriptions-item :label="$t('结算方式')">
                  {{ getDictDataLabel(DICT_TYPE.CUSTOMER_BALANCE, customer.balance) }}
                </el-descriptions-item>
                <el-descriptions-item :label="$t('付款人姓名')">{{ customer.payerName }}</el-descriptions-item>
              </el-descriptions>
            </el-card>
            <el-card class="box-card" style="margin-top: 15px">
              <div slot="header">{{ $t("开票信息") }}</div>
              <el-descriptions :column="2">
                <el-descriptions-item :label="$t('发票抬头')">{{ customer.invoiceTitle }}</el-descriptions-item>
                <el-descriptions-item :label="$t('纳税人识别号')">{{ customer.licenseNumber }}</el-descriptions-item>
                <el-descriptions-item :label="$t('开户行')">{{ customer.bank }}</el-descriptions-item>
                <el-descriptions-item :label="$t('账户')">{{ customer.bankNumber }}</el-descriptions-item>
                <el-descriptions-item :label="$t('项目')">{{ customer.project }}</el-descriptions-item>
                <el-descriptions-item :label="$t('开票地址')">{{ customer.billingAddress }}</el-descriptions-item>
                <el-descriptions-item :label="$t('开票电话')">{{ customer.billingTell }}</el-descriptions-item>
                <el-descriptions-item :label="$t('税率')">{{ customer.taxRate }}</el-descriptions-item>
              </el-descriptions>
            </el-card>
            <el-card style="margin-top: 15px">
              <div slot="header">{{ $t("银行账户") }}</div>
              <el-table :data="customer.customerBankBackVOList" border>
                <el-table-column :label="$t('编号')" type="index"></el-table-column>
                <el-table-column :label="$t('账户名称')" prop="accountName"></el-table-column>
                <el-table-column :label="$t('币别')">
                  <template v-slot="{ row }">
                    {{
                      $l(
                        currecyList.find((i) => row.currency == i.id),
                        "title"
                      )
                    }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('银行名称')" prop="bankName"></el-table-column>
                <el-table-column :label="$t('银行账户')" prop="bankAccount"></el-table-column>
                <el-table-column :label="$t('银行代码')" prop="bankCode"></el-table-column>
                <el-table-column :label="$t('账户类型')">
                  <template v-slot="{ row }">
                    {{ Number(row.accountType) === 1 ? $t("公账") : $t("私账") }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('状态')">
                  <template v-slot="{ row }">
                    {{ row.status ? $t("正常") : $t("停用") }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('银行地址')" prop="bankAddress"></el-table-column>
              </el-table>
            </el-card>
          </el-tab-pane>


          <el-tab-pane name="credit" :label="$t('信用日志')">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <el-button style="float: right" type="primary" @click="dialogVisible = true">{{ $t("添加信用日志") }} </el-button>
                <el-descriptions :column="5" border>
                  <el-descriptions-item v-for="(item, index) in creditScoreStatisticObj" :key="index" :label="creditScoreCalculation(item.type)">{{ item.score }} </el-descriptions-item>
                </el-descriptions>
              </div>
              <el-table :data="customerCreditLogList">
                <el-table-column :label="$t('序号')" type="index"></el-table-column>
                <el-table-column :label="$t('规则名称')">
                  <template v-slot="{ row }">
                    {{ isChinese ? row.name : row.nameEn }}
                  </template>
                </el-table-column>
                <el-table-column prop="type" :label="$t('规则分类')">
                  <template v-slot="{ row }">
                    <dict-tag :type="DICT_TYPE.CUSTOMER_CREDIT_RULE_TYPE" :value="row.type" />
                  </template>
                </el-table-column>
                <el-table-column prop="score" :label="$t('规则得分')"></el-table-column>
                <el-table-column prop="remark" :label="$t('备注')"></el-table-column>
                <el-table-column :label="$t('添加人')" prop="createName"></el-table-column>
                <el-table-column :label="$t('时间')">
                  <template v-slot="{ row }">
                    {{ parseTime(row.createTime) }}
                  </template>
                </el-table-column>
              </el-table>
              <pagination @pagination="creditLogPage" :page.sync="customerCreditLogFrom.pageNo" :limit.sync="customerCreditLogFrom.pageSize" :total="customerCreditLogFrom.total"></pagination>
            </el-card>
          </el-tab-pane>
          <el-tab-pane name="grade" :label="$t('等级日志')">
            <el-table style="width: 100%" :data="getCustomerGradeList">
              <el-table-column :label="$t('序号')" type="index"></el-table-column>
              <el-table-column :label="$t('规则名称')" prop="name"></el-table-column>
              <el-table-column :label="$t('规则分类')" prop="type">
                <template v-slot="{ row }">
                  <dict-tag :type="DICT_TYPE.CUSTOMER_LEVEL_RULE_TYPE" :value="row.type" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('规则得分')" prop="score"></el-table-column>
              <el-table-column :label="$t('备注')" prop="remark"></el-table-column>
              <el-table-column :label="$t('时间')">
                <template v-slot="{ row }">
                  {{ parseTime(row.createTime) }}
                </template>
              </el-table-column>
            </el-table>
            <pagination @pagination="getCustomerGrade" :page.sync="getCustomerGradeFrom.pageNo" :limit.sync="getCustomerGradeFrom.pageSize" :total="getCustomerGradeFrom.total"></pagination>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <h1 slot="title">{{ $t("给客户") }}【{{ customer.name }}】{{ $t("添加信用日志") }}</h1>
      <el-form label-width="100">
        <el-form-item :label="$t('客户编号：')">{{ customer.number }}</el-form-item>
        <el-form-item :label="$t('信用类别')">
          <el-select v-model="creditFrom.ruleId">
            <el-option v-for="(item, index) in creditTypeList" :key="index" :value="item.id" :label="isChinese ? item.name : item.nameEn"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="creditTypeList.length > 0" :label="$t('信用分')"> {{ (creditTypeList.find((r) => creditFrom.ruleId === r.id) || {}).score }}{{ $t("分") }} </el-form-item>
        <el-form-item :label="$t('备注')">
          <el-input type="textarea" v-model="creditFrom.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submit">{{ $t("提交") }}</el-button>
        <el-button @click="dialogVisible = false">{{ $t("取消") }}</el-button>
      </div>
    </el-dialog>

    <customer-follow ref="customerFollow" v-if="customerFollowVisible" @close="customerFollowVisible = false" :customer-id="id" :customer-service="customer.customerService" :customer-name="customer.name" :customer-number="customer.number" @refresh="logListCustomerCommonRefresh" />
  </div>
</template>

<script>
import { getCustomer,  getBrankByCustomer, levelLogPage, customerCreditLogPage, infoListOrderPage, orderStatistics, creditLogCreate, creditScoreStatistic, infoListReceiptPage, memberUserList, deleteCustomer, infoListStatisticsOrder } from "@/api/ecw/customer"
import { getOfferPage as infoListOfferPage } from "@/api/ecw/offer"
import { DICT_TYPE, getDictDataLabel, getDictDatas2 } from "@/utils/dict"
import { getProductTypeList } from "@/api/ecw/productType"
import { getNodeList } from "@/api/ecw/node"
import CustomerFollow from "./components/customerFollow"
import { parseTime } from "@/utils/ruoyi"
import CustomerComplaint from "@/views/ecw/customerComplaint"
import CustomerConsOrder from "@/views/ecw/customer/components/customerConsOrder"
import { listServiceUser, getUserProfile } from "@/api/system/user"
import { getCustomerContactsListByCustomer } from "@/api/ecw/customerContacts"
import { getOrderPage, getRegionList } from "@/api/ecw/order"
import Template from "@/views/cms/template"
import { getCreditRulePage } from "@/api/customer/creditRule"
import { getCountry } from "@/api/ecw/country"
import { getCurrencyList } from "@/api/ecw/currency"
import customerLog from "@/views/ecw/customer/customerLog.vue"
import { checkPermi } from "@/utils/permission"
import ImageDisplay from "@/views/ecw/order/components/imageDisplay.vue"
import { getWarehouseList } from "@/api/ecw/warehouse"
import { deleteOffer, cancel, recovery } from "@/api/ecw/offer"


import UserSelector from "@/components/UserSelector"
import LogListCustomerCommon from "@/views/ecw/offer/logListCustomerCommon.vue";

export default {
  name: "query",
  components: {
    LogListCustomerCommon,
    UserSelector,
    ImageDisplay,
    Template,
    CustomerFollow,
    CustomerComplaint,
    customerLog,
    CustomerConsOrder,
  },
  created() {
    // 获取币种
    getCurrencyList().then((response) => {
      this.currecyList = response.data
    })
    getWarehouseList().then((res) => {
      this.tradeCityList = res.data
      this.warehouseList = res.data
    })
    // getTradeCityList().then((res) => (this.tradeCityList = res.data))
    //获取信用类型
    getCreditRulePage({ page: 1, rows: 999, type: 2 }).then((r) => {
      this.creditTypeList = r.data.list
    })
    // getNodeList().then(r => {
    //   this.nodeList = r.data
    // })
    getCustomer(this.id).then((response) => {
      this.customer = { ...this.customer, ...response.data }
      console.log(this.customer, "this.customer")

      getCustomerContactsListByCustomer({ customerId: this.id }).then((r) => {
        this.customerContacts = r.data
        if (this.customerContacts.length > 0) {
          const contacts = this.customerContacts.findIndex((contacts) => contacts.isDefault === 1)
          if (contacts.isDefault === 1) {
            this.customer.defaultContactName = this.isChinese ? contacts.nameZh : contacts.nameEn
            this.customer.defaultContactId = contacts.id
            this.customer.defaultContactPhone = contacts.phoneNew
            this.customer.defaultCountryCode = contacts.areaCode
            this.customer.defaultEmail = contacts.email
          }
          let list = this.customerContacts.filter((r) => r.userid)
          if (list.length > 0) {
            memberUserList({ ids: list.map((i) => i.userid).join(",") }).then((r) => {
              this.memberList = r.data
            })
          }
        }
      })
    })

    // getCustomerSelect({pageSize:1000,pageNo:1}).then(r => {
    //   this.customerSelect = r.data.list
    // })

    // this.getBrankByCustomerList()//品牌授权
    // this.getCustomerGrade()
    // this.creditLogPage()//等级日志
    this.getOrderList() //订单
    // this.getInfoListOfferPage()//报价
    this.getOrderStatistics() //数据
    // this.creditScoreStatisticFn() //信用日志
    // this.infoListReceiptFn()//账单
    this.getData()
    this.getWarehouseList()
    this.getUserProfile()
  },
  watch: {
    activeName(val) {
      switch (val) {
        case "order":
          this.destCountryId = ""
          this.destWarehouseId = ""
          this.objectiveId = ""
          this.getOrderList() //订单
          break
        case "quote":
          this.destCountryId = ""
          this.destWarehouseId = ""
          this.objectiveId = ""
          this.getInfoListOfferPage() //报价
          break
        case "follow":
        case "bill":
          this.infoListReceiptFn() //账单
          break
        case "data":
          this.getOrderStatistics() //数据
          break
        case "empower":
          this.getBrankByCustomerList() //品牌授权
          break
        case "credit":
          this.creditScoreStatisticFn() //信用日志
          this.creditLogPage()
          break
        case "grade":
          this.getCustomerGrade()
          //等级日志
          break
      }
    },
    destCountryId: {
      //监听当前地区值的变化，于与上方地区值进行了双向绑定
      deep: true, //深度监听
      handler() {
        //每当值省份值改变时其下地区值进行清空
        this.AddressCity = []
        this.AddressTown = []
        this.objectiveId = ""
        this.destWarehouseId = ""

        if (this.destCountryId == "") {
          this.getAddressCity()
          this.getAddressTown()
        } else if (this.destCountryId != "" && this.objectiveId == "" && this.destWarehouseId == "") {
          this.findByprovinceCode()
          this.getAddressTown()
        }
      }
    },
    objectiveId: {
      deep: true, //深度监听
      handler() {
        this.AddressTown = []
        this.destWarehouseId = ""
        this.findBycityCode()
        if (this.objectiveId != "" && this.destCountryId != "" && this.destWarehouseId == "") {
          //获取当前城市值id，获取该城市下区域
        } else if (this.destCountryId == "" && this.objectiveId == "" && this.destWarehouseId == "") {
          this.getAddressTown()
        } else if (this.destCountryId != "" && this.objectiveId == "" && this.destWarehouseId == "") {
          this.findByprovinceCode()
          this.getAddressTown()
        }
      }
    },
    destWarehouseId: {
      deep: true, //深度监听
      handler() {
        if (this.objectiveId != "" && this.destCountryId != "" && this.destWarehouseId == "") {
          //获取当前城市值id，获取该城市下区域
          this.findBycityCode()
        } else if (this.destCountryId != "" && this.objectiveId == "" && this.destWarehouseId == "") {
          this.getAddressTown()
        }
      }
    }
  },
  data() {
    return {
      tradeCityList: [],
      warehouseList: [],
      queryTmp: {
        createTime: ["", ""]
      },
      activeName: "order",
      currecyList: [],
      STATUS: {
        0: this.$t("取消报价"),
        1: this.$t("特价审批中"),
        2: this.$t("需求确认"),
        3: this.$t("跟进中"),
        4: this.$t("赢单"),
        5: this.$t("输单"),
        6: this.$t("报价完成"),
        7: this.$t("跟进中")
      },
      dialogVisible: false,
      // 显示搜索条件
      showSearch: false,
      DICT_TYPE,
      getDictDataLabel,
      getDictDatas2,
      parseTime,
      nodeList: [],
      productTypeList: [],
      customerSelect: [],
      serviceUserList: [],
      customerContacts: [],
      memberList: [],
      relation: 1,
      dateFilterType: "", //日期筛选类别
      dateFilter: [], //筛选日期
      customer: {
        id: undefined,
        number: undefined,
        name: undefined,
        level: undefined,
        country: undefined,
        type: undefined,
        agentId: undefined,
        company: undefined,
        address: undefined,
        productTypes: undefined,
        productIds: undefined,
        pickupPoint: undefined,
        memberId: undefined,
        birthday: undefined,
        balance: undefined,
        source: undefined,
        picture: undefined,
        customerService: undefined,
        customerLines: [],
        promoter: undefined,
        status: undefined,
        founder: undefined,
        department: undefined,
        invoiceTitle: undefined,
        licenseNumber: undefined,
        bank: undefined,
        bankNumber: undefined,
        project: undefined,
        billingAddress: undefined,
        billingTell: undefined,
        taxRate: undefined,
        remarks: undefined,
        arrivalConfirm: undefined,
        weightUnit: undefined,
        createTime: undefined,
        productTypeList: []
      },
      brandAuthorizationFrom: {
        pageNo: 1,
        pageSize: 10
      },
      brandAuthorizationList: [],
      brandAuthorizationTotal: 0,
      getCustomerGradeFrom: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      getCustomerGradeList: [],
      customerCreditLogFrom: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      customerCreditLogList: [],
      rucangtime: [],
      queryParams: {
        rows: 10,
        page: 1
      },
      queryOfferParams: {
        salesmanIds: [],
        statusList: [],
        importances: []
      },
      orderList: [],
      statisticsOrder: {},
      orderTotal: 0,
      infoListOfferFrom: {
        pageNo: 1,
        pageSize: 10
      },
      infoListOfferTotal: 0,
      infoListOfferList: [],
      orderStatisticsObj: {},
      creditTypeList: [],
      creditFrom: {}, //添加信用 日志
      creditScoreStatisticObj: [],
      infoListReceiptList: [],
      infoListReceiptFrom: {
        pageNo: 1,
        pageSize: 10
      },
      // 编号搜索条件
      noParam: {
        key: "numberKey",
        value: ""
      },
      infoListReceiptTotal: 0,
      country: "",
      showMore: false,
      AddressCity: [],
      AddressProvince: [],
      AddressTown: [],
      destCountryId: null,
      objectiveId: null,
      destWarehouseId: null,
      customerFollowVisible: false,
      nextTime: [],
      currencyList: [],
      userId: undefined
    }
  },
  computed: {
    productTypeName() {
      return this.customer.productTypeList.map((item) => {
        return {
          ...item,
          productList: this.customer.productList
            .filter((i) => i.typeId === item.id)
            .map((i) => this.$l(i, "title"))
            .join("； ")
        }
      })
    },
    exportCityList() {
      return this.tradeCityList.filter((item) => item.type == 2)
    },
    exportWarehouseList() {
      /* tradeType 1 进口，2出口，3进出口 */
      return this.warehouseList.filter((item) => item.tradeType == 2 || item.tradeType == 3)
    },
    permissions() {
      return this.$store.state.user.permissions
    },
    customerId() {
      return this.$route.params.customerId
    },
    isChinese() {
      return this.$i18n.locale === "zh_CN"
    },
    pickupPoint() {
      const pickupPoint = this.nodeList.find((p) => p.id === parseInt(this.customer.pickupPoint))
      return pickupPoint ? pickupPoint.titleZh : ""
    },
    // promoter() {
    //   return this.customerSelect.find(e => e.id === this.customer.promoter)?.name || ''
    // },

    id() {
      return parseInt(this.$route.params.customerId)
    },
    creditScoreCalculation() {
      return (val) => {
        if (val === "all") {
          return this.$t("信用分")
        } else {
          if (this.isChinese) return (this.getDictDatas(DICT_TYPE.CUSTOMER_CREDIT_RULE_TYPE).find((i) => i.value === val) || {}).label
          else return (this.getDictDatas(DICT_TYPE.CUSTOMER_CREDIT_RULE_TYPE).find((i) => i.value === val) || {}).labelEn
        }
      }
    },
    currencyMap() {
      let map = {}
      this.currencyList.forEach((item) => {
        map[item.id] = this.$l(item, "title")
      })
      return map
    }
  },
  filters: {
    deliveryRate(pickNum, sumNum) {
      if (pickNum == 0 || sumNum == 0) {
        return 0
      } else if (pickNum && sumNum) {
        return Math.round((pickNum / sumNum) * 10000) / 100 + "%"
      }
      return null
    }
  },
  methods: {
    handleAddOffer(row) {
      console.log(row)
      this.curData = row
      this.customerFollowVisible = true
      this.$nextTick(() => {
        this.$refs["customerFollow"].handleAdd()
      })
    },
    getUserProfile() {
      getUserProfile().then((res) => {
        this.userId = res.data.id
      })
    },
    customerFollowFn(val) {
      this.activeName = val
      this.$nextTick(() => {
        if (val === "follow") {
          this.customerFollowVisible = true
          this.$nextTick((_) => {
            this.$refs["customerFollow"].handleAdd()
          })
        } else {
          this.$refs["customerComplaint"].handleAdd(false)
        }
      })
    },
    quote() {
      const row = this.customer
      //jayden 2024-12-12 添加报价是判断客户所属客户经理，不是就不能报价（删除限制）
      // if (row.customerService != this.userId) {
      //   this.$message.error(this.$t("此客户属于其他客户经理名下的客户。"))
      //   return
      // }

      this.$router.push({ path: "/offer/create", query: { customerId: row.id, customerType: row.type, type: 1 } })
    },
    checkPermi,
    userIdFormatter(row, column, cellValue) {
      const member = this.memberList.find((e) => e.id === cellValue)
      if (member) {
        return member.nickname + "(" + member.mobile + ")"
      } else {
        return ""
      }
    },
    changeDate(val) {
      if (val) {
        this.queryParams.beginRucangTime = val[0]
        this.queryParams.endRucangTime = val[1]
      } else {
        this.queryParams.beginRucangTime = undefined
        this.queryParams.endRucangTime = undefined
      }
    },
    //品牌授权
    getBrankByCustomerList() {
      getBrankByCustomer({ ...this.brandAuthorizationFrom, customerId: this.id }).then((r) => {
        this.brandAuthorizationList = r.data.list
        this.brandAuthorizationTotal = r.data.total
      })
    },
    // 信用等级日志
    getCustomerGrade() {
      levelLogPage({ ...this.getCustomerGradeFrom, customerId: this.id, total: undefined }).then((r) => {
        if (r.code === 0) {
          this.getCustomerGradeList = r.data.list
          this.getCustomerGradeFrom.total = r.data.total
        }
      })
    },
    // 信用日志
    creditLogPage() {
      customerCreditLogPage({ ...this.customerCreditLogFrom, customerId: this.id }).then((r) => {
        if (r.code === 0) {
          this.customerCreditLogList = r.data.list
          this.customerCreditLogFrom.total = r.data.total
        }
      })
    },
    //订单
    getOrderList() {
      let timeParams = {}
      if (this.dateFilterType && this.dateFilter) {
        timeParams["begin" + this.dateFilterType] = this.dateFilter[0]
        timeParams["end" + this.dateFilterType] = this.dateFilter[1]
      }
      let queryParams = Object.assign({}, this.queryParams, timeParams)
      if (this.noParam.value) {
        queryParams[this.noParam.key] = this.noParam.value
      }
      //目的国
      if (this.destCountryId != null && this.destCountryId != "") {
        queryParams.destCountryIds = this.destCountryId
      }
      //目的城市
      if (this.objectiveId != null && this.objectiveId != "") {
        queryParams.objectiveIds = this.objectiveId
      }
      //目的仓
      if (this.destWarehouseId != null && this.destWarehouseId != "") {
        queryParams.destWarehouseIds = this.destWarehouseId
      }
      infoListStatisticsOrder({ customerDetailId: this.id, ...this.queryParams, ...queryParams }).then((r) => {
        if (r.code === 0) {
          this.statisticsOrder = r.data
        }
      })
      infoListOrderPage({ customerDetailId: this.id, ...this.queryParams, ...queryParams }).then((r) => {
        if (r.code === 0) {
          this.orderList = r.data.list
          this.orderTotal = r.data.total
        }
      })
    },
    // 自动去除空格
    replaceSpace(obj, field) {
      obj[field] = obj[field].replace(/\s+/g, "")
    },
    handleOrderReset() {
      this.destCountryId = null
      this.destWarehouseId = null
      this.objectiveId = null
      this.destCountryIds = []
      this.destWarehouseIds = []
      this.objectiveIds = []
      this.noParam.value = ""
      this.dateFilter = []
      this.queryParams = {
        page: 1,
        rows: 10,
        packageTypeArr: [],
        channelId: "",
        goodsTypes: [],
        channelIds: []
      }
      this.getOrderList()
    },
    formatQuery() {
      let obj = {}
      //目的国
      if (this.destCountryId != null && this.destCountryId != "") {
        obj.destCountryIds = this.destCountryId
      }
      //目的城市
      if (this.objectiveId != null && this.objectiveId != "") {
        obj.objectiveIds = this.objectiveId
      }
      //目的仓
      if (this.destWarehouseId != null && this.destWarehouseId != "") {
        obj.destWarehouseIds = this.destWarehouseId
      }
      obj.beginCreateTime = this.queryTmp.createTime[0]
      obj.endCreateTime = this.queryTmp.createTime[1]
      return obj
    },
    // 客户报价
    getInfoListOfferPage() {
      infoListOfferPage({ ...this.infoListOfferFrom, customerId: this.id, ...this.queryOfferParams, ...this.formatQuery() }).then((r) => {
        this.infoListOfferList = r.data.list
        this.infoListOfferTotal = r.data.total
      })
    },
    handleOfferReset() {
      this.destCountryId = null
      this.objectiveId = null
      this.destWarehouseId = null
      this.queryOfferParams = {
        salesmanIds: [],
        statusList: [],
        importances: []
      }
      this.infoListOfferFrom = { pageNo: 1, pageSize: 10 }
      this.getInfoListOfferPage()
    },
    //  数据
    getOrderStatistics() {
      orderStatistics({ customerId: this.id }).then((r) => {
        if (r.code === 0) {
          this.orderStatisticsObj = r.data
        }
      })
    },
    submit() {
      creditLogCreate({ customerId: this.id, ...this.creditFrom }).then((r) => {
        if (r.code === 0) {
          this.creditLogPage()
          this.creditFrom = {}
          this.creditScoreStatisticFn()
          this.dialogVisible = false
        }
      })
    },
    //获得信用客户统计
    creditScoreStatisticFn() {
      creditScoreStatistic({ customerId: this.id }).then((r) => {
        if (r.code === 0) this.creditScoreStatisticObj = r.data
      })
    },
    //  获取账单数据
    infoListReceiptFn() {
      infoListReceiptPage({ ...this.infoListReceiptFrom, customerId: this.id }).then((r) => {
        if (r.code === 0) {
          this.infoListReceiptList = r.data.list
          this.infoListReceiptTotal = r.data.total
        }
      })
    },
    deleteCustomerFn() {
      this.$confirm(`${this.$t("是否要删除当前客户")}《${this.customer.name}》?`, `${this.$t("提示")}`, {
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        type: "warning"
      }).then(() => {
        deleteCustomer(this.customerId).then((r) => {
          this.$modal.msgSuccess(this.$t("删除成功"))
          this.$router.back()
        })
      })
    },
    findByprovinceCode() {
      //获取当前省份值id，获取该省份下城市 destCountryId provinceCode
      if (this.destCountryId != null && this.destCountryId != "") {
        getRegionList(2, this.destCountryId).then(({ data }) => {
          this.AddressCity = data
        })
      }
    },
    findBycityCode() {
      //获取当前城市值id，获取该城市下区域
      if (this.objectiveId != null && this.objectiveId != "") {
        getRegionList(3, this.objectiveId).then(({ data }) => {
          this.AddressTown = data
        })
      }
    },
    getData() {
      this.getAddressProvince()
      this.getAddressCity()
      this.getAddressTown()
    },
    getAddressProvince() {
      getRegionList(1, 1).then(({ data }) => {
        this.AddressProvince = data
      })
    },
    getAddressCity() {
      getRegionList(4, 4).then(({ data }) => {
        this.AddressCity = data
      })
    },
    getAddressTown() {
      getRegionList(5, 5).then(({ data }) => {
        this.AddressTown = data
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.activeName == "order") {
        this.queryParams.page = 1
        this.getOrderList()
      } else if (this.activeName == "quote") {
        this.infoListOfferFrom.pageNo = 1
        this.getInfoListOfferPage()
      } else if (this.activeName == "follow") {
        this.followForm.pageNo = 1
        this.getCustomerFollowupList()
      }
    },
    getWarehouseList() {
      getWarehouseList().then((res) => {
        this.warehouseList = res.data
      })
    },
    getWarehouse(id) {
      let warehouseName = ""
      for (const item of this.warehouseList) {
        if (item.id == id) {
          warehouseName = this.$i18n.locale == "zh_CN" ? item.titleZh : item.titleEn
          break
        }
      }
      return warehouseName
    },
    cancel(id) {
      this.doAction(this.$t("确定要取消此报价单么？"), cancel, id)
    },
    recovery(id) {
      this.doAction(this.$t("确定要恢复此报价单么？"), recovery, id)
    },
    deleteOffer(id) {
      this.doAction(this.$t("确定要删除此报价单么？"), deleteOffer, id)
    },
    doAction(tips, action, id) {
      this.$confirm(tips)
        .then((res) => {
          return action(id)
        })
        .then(() => {
          this.$message.success("操作成功")
          this.handleQuery()
        })
    },
    logListCustomerCommonRefresh() {
      this.$refs.logListCustomerCommon && this.$refs.logListCustomerCommon.handleQuery()
    }
  }
}
</script>
