crm_extend/src/pages/cargo-consolidation-request/index.vue

<template>
  <div class="w-[100vw] bg-white page-cargo-consolidation">
    <div
      v-loading="loading"
      class="pt-2 w-[100%] min-h-[100vh]"
    >
      <el-form
        style="width: 100%"
        inline
        :loading="loading"
        @submit.prevent="getList"
      >
        <el-form-item label="ETD Range">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            unlink-panels
            clearable
            start-placeholder="Start date"
            end-placeholder="End date"
            :shortcuts="dateShortcuts"
          />
        </el-form-item>
        <el-form-item>
          <el-tooltip content="时间范围最好不要选太大, 不然数据太多会卡">
            <el-button
              class="custom-button"
              @click="getList"
            >
              Search
            </el-button>
          </el-tooltip>
        </el-form-item>
      </el-form>

      <el-tabs v-model="currentTab">
        <el-tab-pane
          v-for="tab in finalTabs"
          :key="tab.value"
          :label="tab.label"
          :name="tab.value"
        ></el-tab-pane>
      </el-tabs>
      <el-table
        border
        :header-cell-style="{ backgroundColor: 'rgb(227, 241, 253)' }"
        :data="computedList"
        highlight-current-row
        style="width: 100%"
        max-height="330"
        @row-click="($e) => getSubList($e)"
      >
        <el-table-column
          prop="Name"
          label="船名&航次"
          min-width="500"
        />
        <el-table-column
          prop="Forwarder"
          label="货代"
          width="100"
        />
        <el-table-column
          prop="ETD"
          label="ETD"
          width="100"
        />
        <el-table-column
          prop="ATD"
          label="ATD"
          width="100"
        />
        <el-table-column
          prop="ETA"
          label="ETA"
          width="100"
        />
        <el-table-column
          prop="ATA"
          label="ATA"
          width="100"
        />
        <el-table-column
          prop="Cut_Off_Date"
          label="入仓时间"
          width="100"
        />
        <el-table-column
          prop="Status"
          label="状态"
          width="75"
        />
        <!-- <el-table-column
          label="修改时间"
          min-width="190"
        >
          <template #default="scope">
            {{ dayjs(scope.row.Modified_Time).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column> -->
        <el-table-column
          prop="GRN"
          label="入仓单号"
          min-width="200"
        />
        <el-table-column
          prop="Booking_Number"
          label="订舱号"
          min-width="120"
        />
        <el-table-column
          prop="Container_Number"
          label="柜号"
          min-width="125"
        />
        <el-table-column
          prop="Carrier"
          label="船东"
          min-width="100"
        />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              type="warning"
              link
              :disabled="!scope.row.SubscriptionId"
              @click="openMapDrawer(scope.row)"
            >
              查看轨迹
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        v-show="currentRow.Name?.length"
        class="flex justify-between mt-8"
      >
        <div class="flex">
          <!-- <div class="flex items-center mr-2">
            <span class="min-w-[150px]">选中的船名&航次:&nbsp;</span>
            <div class="text-red-700 font-bold">
              {{ currentRow.Name }}
            </div>
          </div> -->
          <div class="flex flex-wrap min-w-[800px] mr-2">
            <!-- ['可用', '已截仓'].includes(currentRow.Status) && -->
            <el-input
              v-if="
                currentTab === 'Arrangement' &&
                [
                  '4791186000259693001',
                  '4791186000022965001',
                  '4791186000052269001',
                ].includes(currentUser)
              "
              :disabled="!['Arrangement', 'my_request'].includes(currentTab)"
              style="width: 200px; height: 24px; margin-right: 10px"
              size="small"
              v-model="bookingNumber"
            >
              <template #append>
                <el-button
                  class="custom-button"
                  size="small"
                  style="padding-top: 0; padding-bottom: 0"
                  @click="updateBookingNumber"
                >
                  更新订舱号
                </el-button>
              </template>
            </el-input>
            <!-- ['可用', '已截仓'].includes(currentRow.Status) && -->
            <el-input
              v-if="
                currentTab === 'Arrangement' &&
                [
                  '4791186000259693001',
                  '4791186000022965001',
                  '4791186000052269001',
                ].includes(currentUser)
              "
              :disabled="!['Arrangement', 'my_request'].includes(currentTab)"
              style="width: 200px; height: 24px; margin-right: 10px"
              size="small"
              v-model="containerNumber"
            >
              <template #append>
                <el-button
                  class="custom-button"
                  size="small"
                  style="padding-top: 0; padding-bottom: 0"
                  @click="updateContainerNumber"
                >
                  更新柜号
                </el-button>
              </template>
            </el-input>
            <el-button
              v-if="
                currentTab === 'Arrangement' &&
                ['可用', '已截仓'].includes(currentRow.Status) &&
                [
                  '4791186000259693001',
                  '4791186000022965001',
                  '4791186000052269001',
                ].includes(currentUser)
              "
              size="small"
              type="danger"
              @click="ensure"
            >
              确认集货
            </el-button>
            <el-button
              class="custom-button"
              v-if="
                ['Arrangement', 'my_request'].includes(currentTab) &&
                ['可用'].includes(currentRow.Status)
              "
              size="small"
              @click="addBulkProduct"
            >
              提交大货集货申请
            </el-button>
            <el-button
              class="custom-button"
              v-if="
                ['Arrangement', 'my_request'].includes(currentTab) &&
                ['可用'].includes(currentRow.Status)
              "
              size="small"
              @click="addSample"
            >
              提交样品集货申请
            </el-button>
            <el-button
              v-if="['Arrangement', 'my_request'].includes(currentTab)"
              :disabled="subList.length < 1"
              size="small"
              type="danger"
              @click="generateSubList"
            >
              放弃下方表格改动
            </el-button>
            <el-button
              class="custom-button"
              size="small"
              :disabled="subList.length < 1"
              @click="exportSubTable"
            >
              导出Excel文档
            </el-button>
            <el-button
              v-if="
                ['Arrangement', 'my_request'].includes(currentTab) &&
                ['可用'].includes(currentRow.Status)
              "
              :disabled="subList.length < 1"
              size="small"
              type="primary"
              class="custom-button small"
              @click="commit"
            >
              保存更改
            </el-button>
          </div>
        </div>
        <div class="flex justify-end min-w-[380px] gap-2">
          <div class="flex">总重量: {{ computedWeight }}</div>
          <div class="flex">总体积: {{ computedCube }}</div>
          <div class="flex">总离岸价: {{ computedTotalFOB }}</div>
        </div>
      </div>
      <el-table
        class="mt-4"
        size="small"
        :data="subList"
        style="width: 100%"
        :row-style="calcRowStyle"
        :header-cell-style="{ backgroundColor: 'rgb(227, 241, 253)' }"
        :empty-text="
          currentRow.Name?.length
            ? '暂无数据'
            : '请点击voyage表格其中一行以查询相应记录'
        "
        border
      >
        <el-table-column
          fixed
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column
          fixed
          label="CRM批次记录"
          width="220"
        >
          <template #default="scope">
            <el-select
              v-model="scope.row.batchRecord"
              size="small"
              :remote-method="debounce(search, 1500)"
              remote
              style="width: 100%"
              :loading="loading2"
              filterable
              clearable
              :placeholder="scope.row.Sample ? 'Sample' : ''"
              :disabled="
                scope.row.Sample ||
                !['Arrangement', 'my_request'].includes(currentTab)
              "
              @change="($e) => onBatchRecordChange($e, scope.$index)"
            >
              <el-option
                v-for="option in computedOption as any[]"
                :disabled="!option.isSearch && scope.row.addFlag"
                :key="option.id"
                :value="option.id"
                :label="
                  option.Name +
                  (option.Reference ? ` - ${option.Reference}` : '')
                "
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          width="110"
          fixed
        >
          <template #default="scope">
            <el-input
              :disabled="!['Arrangement', 'my_request'].includes(currentTab)"
              v-model="scope.row.User_Notes"
              size="small"
              :rows="2"
              type="textarea"
              @change="scope.row.editFlag = true"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="箱数"
          width="80"
        >
          <template #default="scope">
            <el-input
              :disabled="!['Arrangement', 'my_request'].includes(currentTab)"
              v-model="scope.row.Carton"
              size="small"
              @change="scope.row.editFlag = true"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="唛头"
          width="220"
        >
          <template #default="scope">
            <el-input
              :disabled="!['Arrangement', 'my_request'].includes(currentTab)"
              v-model="scope.row.Marks_Nos"
              size="small"
              @change="scope.row.editFlag = true"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="货物名称"
          width="180"
        >
          <template #default="scope">
            <el-input
              :disabled="!['Arrangement', 'my_request'].includes(currentTab)"
              v-model="scope.row.Description_of_Goods"
              size="small"
              @change="scope.row.editFlag = true"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="货物材质"
          width="220"
        >
          <template #default="scope">
            <el-select
              :disabled="!['Arrangement', 'my_request'].includes(currentTab)"
              v-model="scope.row.Material_of_Goods"
              size="small"
              multiple
              @change="scope.row.editFlag = true"
            >
              <el-option
                v-for="i in goodMaterialOption"
                :key="i"
                :value="i"
                :label="i"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="数量"
          width="100"
        >
          <template #default="scope">
            <el-input
              :disabled="!['Arrangement', 'my_request'].includes(currentTab)"
              v-model="scope.row.Quantity"
              size="small"
              @change="changeTotal(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="单价(澳币/AUD)"
          width="120"
        >
          <template #default="scope">
            <el-input
              :disabled="!['Arrangement', 'my_request'].includes(currentTab)"
              v-model="scope.row.Unit_Price"
              size="small"
              @change="changeTotal(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="负责人"
          fixed="right"
          width="120"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Requester.name"
              size="small"
              disabled
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="申请人"
          fixed="right"
          width="120"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Sales_Person"
              size="small"
              disabled
            ></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column
          v-show="['Arrangement', 'my_request'].includes(currentTab)"
          fixed="right"
          label="更新时间"
          width="90"
        >
          <template #default="scope">
            <div v-if="scope.row.id">
              {{
                dayjs(scope.row.update_time || new Date()).format(
                  'YYYY-MM-DD HH:mm:ss',
                )
              }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          v-show="
            [
              '4791186000259693001',
              '4791186000022965001',
              '4791186000052269001',
            ].includes(currentUser)
          "
          fixed="right"
          label="操作"
          width="90"
        >
          <template #default="scope">
            <el-tooltip
              content="新增未commit的行会被直接移除; 已commit的行只会标记, 正式commit后才会删除"
            >
              <el-button
                v-if="['Arrangement', 'my_request'].includes(currentTab)"
                type="danger"
                size="small"
                link
                @click="() => onDeleteRow(scope.row, scope.$index)"
              >
                删除
              </el-button>
            </el-tooltip>
            <el-button
              size="small"
              link
              type="primary"
              @click="print(scope.row)"
            >
              打印
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="重量 (KG)"
          width="70"
        >
          <template #default="scope">
            <el-input
              :disabled="!['Arrangement', 'my_request'].includes(currentTab)"
              v-model="scope.row.Weight"
              size="small"
              @change="scope.row.editFlag = true"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="体积 m&sup3;"
          width="70"
        >
          <template #default="scope">
            <el-input
              :disabled="!['Arrangement', 'my_request'].includes(currentTab)"
              v-model="scope.row.Cube"
              size="small"
              @change="scope.row.editFlag = true"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="总离岸价 (澳币/AUD)"
          width="140"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Total_FOB"
              size="small"
              disabled
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="Reference"
          fixed="right"
          width="90"
        >
          <template #default="scope">
            <div class="">{{ scope.row.Reference || scope.row.PO_Number }}</div>
          </template>
        </el-table-column>
      </el-table>

      <el-drawer
        v-model:model-value="printDrawerVisible"
        :size="'1050px'"
        :title="'打印唛 (注意先写完唛内容和宽高最后再调页数, 不然可能会很卡)'"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <comp-print
          v-if="printDrawerVisible"
          :autoOpenQRCode="false"
          :content="[currentPrintRow.Marks_Nos || '']"
          :scene="'QC'"
        />
      </el-drawer>
      <el-drawer
        v-model:model-value="mapDrawerVisible"
        :size="'1050px'"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :destroy-on-close="true"
        :with-header="false"
        header-class="mb-1"
      >
        <div class="relative h-[20px]">
          <span
            @click="closeMapDrawer"
            class="absolute top-[-16px] right-0 text-gray-600 text-sm cursor-pointer"
          >
            关闭地图窗口
          </span>
        </div>
        <div
          id="mapDrawer"
          class="h-[100%]"
        ></div>
      </el-drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, watch, computed, nextTick } from 'vue'
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElTabs,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElDatePicker,
  ElTooltip,
  ElSelect,
  ElOption,
  ElMessage,
  ElMessageBox,
  ElNotification,
  ElDrawer,
} from 'element-plus'
import cloneDeep from 'lodash.clonedeep'
import dayjs from 'dayjs'
import * as XLSX from 'xlsx'
import debounce from 'lodash.debounce'
import compPrint from '@/components/print.vue'
import request from '@/utils/axios'

defineComponent({
  name: 'ComponentCargoConsolidationRequest',
})

const currentUser = ref('')
const currentUserName = ref('')
const currentUserRawData = ref({} as any)
let loading = ref(false)
let list = ref([] as any[])
let currentTab = ref('all')

let tabs = [
  {
    label: 'All',
    value: 'all',
  },
  {
    label: 'Avaliable',
    value: 'avaliable',
  },
  {
    label: 'Closed Voyage',
    value: 'voyage_closed',
  },
  {
    label: 'My Request',
    value: 'my_request',
  },
]

let finalTabs = ref([] as any[])
finalTabs.value = cloneDeep(tabs)

let computedList = computed(() => {
  return list.value.filter((i: any) => {
    let condition = true
    switch (currentTab.value) {
      case 'avaliable':
        condition = i.Status && i.Status === '可用'
        break
      case 'voyage_closed':
        condition = ['已截仓', '已确认', '已发出', '已到达'].includes(i.Status)
        break
    }
    return condition
  })
})

let dateRange = ref([] as any[])
const generateDateRange = (days = 7) => {
  const today = new Date()
  const endDate = new Date()
  endDate.setDate(today.getDate() + days)
  return [today, endDate]
}

const dateShortcuts = ref([
  {
    text: 'Next 3 days',
    value: generateDateRange(3),
  },
  {
    text: 'Next week',
    value: generateDateRange(7),
  },
  {
    text: 'Next 14days',
    value: generateDateRange(14),
  },
] as any[])
function getDefaultRange() {
  const today = dayjs()
  const lastMonthFirstDay = today
    .subtract(1, 'month')
    .startOf('month')
    .format('YYYY-MM-DD')
  const nextMonthLastDay = today
    .add(1, 'month')
    .endOf('month')
    .format('YYYY-MM-DD')

  return [lastMonthFirstDay, nextMonthLastDay]
}
dateRange.value = getDefaultRange()

const clearSubList = () => {
  subList.value = []
  subListBackup = []
  currentRow.value = {}
}

let getList = () => {
  loading.value = true
  zoho.CRM.API.coql({
    select_query:
      'select Container_Number,Name,Forwarder,ETD,ATD,ETA,ATA,Cut_Off_Date,Owner,Status,Modified_Time,SubscriptionId,Carrier,Booking_Number,GRN from Sea_Freight_Table' +
      " where ETD between '" +
      `${dateRange.value.map((i) => dayjs(i).format('YYYY-MM-DD')).join("' and '")}` +
      "'",
  })
    .then((res: any) => {
      if (Array.isArray(res.data) && res.data.length) {
        list.value = res.data.sort(
          (a: any, b: any) =>
            new Date(b.Cut_Off_Date).getTime() -
            new Date(a.Cut_Off_Date).getTime(),
        )
      } else if (res.status === 204) {
        ElNotification({
          type: 'warning',
          title: 'No Data Found',
          message: res.statusText || `zoho api return: ${res.status}`,
          duration: 3000,
        })
        list.value = []
        clearSubList()
      }
    })
    .finally(() => (loading.value = false))
}

let currentRow = ref({} as any)
let subList = ref([] as any[])
// 未经过滤的crm数据
let subListBackup: any[] = []

watch(currentTab, (value: string) => {
  // 切到可用tab, 但是当前行是不是 可用 状态
  let notAvaliable = value === 'avaliable' && currentRow.value.Status !== '可用'

  // 切到关闭tab, 但当前行不是‘关闭’状态
  let notClose =
    value === 'voyage_closed' &&
    !['已截仓', '已确认', '已发出'].includes(currentRow.value.Status)

  if (notAvaliable || notClose) {
    clearSubList()
  } else {
    generateSubList()
  }
})

const generateSubList = () => {
  // clonedeep 是因为数据里面有 object array, 担心浅复制到表单变量会影响到原始数据
  subList.value = cloneDeep(
    subListBackup
      .filter(
        (i: any) =>
          i.Parent_Id.id === currentRow.value.id &&
          (currentTab.value === 'my_request'
            ? i.Sales_Person === currentUserName.value
            : true),
      )
      .map((i: any) => ({
        ...i,
        Requester: i.Requester?.id
          ? {
              name: i.Requester.name || '',
              id: i.Requester.id,
            }
          : { name: '', id: '' },
        Sample: i.Sample || false,
        batchRecord: i.Batch_Record?.id || '',
        addFlag: false,
        editFlag: false,
        deleteFlag: false,
      })),
  )
}
const changeTotal = (row: any) => {
  row.editFlag = true
  row.Total_FOB = (Number(row.Unit_Price) * Number(row.Quantity)).toFixed(2)
}

/**
 *  用来增加新行的数据模版
 */
const newLineTemplate = {
  addFlag: true,
  editFlag: true,
  deleteFlag: false,
  batchRecord: '',
  // 提交表单前删掉以上字段
  // id: '',
  Sample: false,
  Batch_Record: {
    name: '',
    id: '',
  } as any,
  Sales_Order: '',
  Purchase_Order: '',
  Reference: '',
  PO_Number: '',
  Parent_Id: {
    name: '',
    id: '',
  } as any,
  Carton: '',
  Marks_Nos: '',
  Description_of_Goods: '',
  Material_of_Goods: [],
  Quantity: '',
  Unit_Price: '',
  Weight: '',
  Cube: '',
  Total_FOB: '',
  Requester: { name: '', id: '' } as any,
  Sales_Person: '', // 申请人
  User_Notes: '',
}
// 用在弹窗里面给批次记录做候选项
let batchListOption = computed(() =>
  subList.value
    .filter(
      (i) =>
        i.Batch_Record && i.Batch_Record.name && i.Batch_Record.name.length > 0,
    )
    .map((i) => {
      return {
        Name: i.Batch_Record.name || '',
        id: i.Batch_Record.id || '',
        isSearch: false, // 用来区分是搜索出来的还是原始数据
      }
    })
    // ai生成的去重逻辑.
    .filter(
      (item, index, self) =>
        index ===
        self.findIndex((t) => t.Name === item.Name && t.id === item.id),
    ),
)
let computedOption = computed(() => {
  return qcList.value.concat(batchListOption.value)
})
let getSubList = (e: any = {}) => {
  if (e.id) currentRow.value = e
  loading.value = true
  zoho.CRM.API.searchRecord({
    Entity: 'Sea_Freight_Details',
    Type: 'criteria',
    Query: `(Parent_Id:equals:${currentRow.value.id})`,
    delay: false,
  })
    .then((res: any) => {
      if (Array.isArray(res.data) && res.data.length) {
        subListBackup = cloneDeep(res.data)
      } else {
        subListBackup = []
      }

      generateSubList()
      newLineTemplate.Parent_Id = { id: currentRow.value.id }
      newLineTemplate.Sales_Person = currentUserName.value
      newLineTemplate.Requester = {
        id: currentUser.value,
        name: currentUserName.value,
      }
    })
    .finally(() => (loading.value = false))
}
// 货物材质候选数据
const goodMaterialOption = ref([
  'Cotton 棉',
  'Iron 铁',
  'Neoprene 潜水料',
  'Paper 纸质',
  'Plastic 塑料',
  'Polyester Fibre 聚酯纤维',
  'PU 聚氨酯',
  'PVC 聚氯乙烯',
  'Velvet 天鹅绒',
  'Zinc alloy 锌合金',
  'Aluminum alloy 铝合金',
  'Glass 玻璃',
  'Rubber 橡胶',
  'Stainless Steel 不锈钢',
])
// 动态获取货物材质候选数据
let getGoodMaterialOption = () => {
  request
    .post('/common/getWebsiteSubform', { id: '4791186000359651051' })
    .then((resp: any) => {
      // console.log(resp, 'res')
      const res = resp.data.result || {}
      if (Array.isArray(res.data) && res.data.length) {
        // console.log(res.data, 'res.data')
        goodMaterialOption.value =
          res.data[0].Website_Subform.map(
            (i: any) => i.Website_Subform_Value,
          ) || []
      }
    })
}
getGoodMaterialOption()

const addBulkProduct = () => {
  let temp = cloneDeep(newLineTemplate)
  temp.Sample = false
  subList.value.unshift(temp)
}
const addSample = () => {
  let temp = cloneDeep(newLineTemplate)
  temp.Sample = true
  subList.value.unshift(temp)
}

const onDeleteRow = (row: any, index: number = -1) => {
  if (row.addFlag) {
    subList.value.splice(index, 1)
  } else {
    row.deleteFlag = true
    ElNotification({
      type: 'warning',
      title: '已标记删除',
      duration: 3000,
      message: '点 提交 按钮后会正式删除. 误操作请点击 放弃改动.',
    })
  }
}

const onBatchRecordChange = ($e: string, line = -1) => {
  const temp = computedOption.value.filter((i) => i.id === $e)
  let result: any = {}
  if (temp.length) {
    result = cloneDeep(temp[0])
  }

  if (line > -1) {
    // 主页面数据编辑
    subList.value[line].editFlag = true
    subList.value[line].Batch_Record = { id: result.id, name: result.Name }
    if (result.Owner) {
      subList.value[line].Requester = {
        name: result.Owner.name,
        id: result.Owner.id,
      }
    }
    subList.value[line].Sales_Order = result.Sales_Order || ''
    subList.value[line].Purchase_Order = result.Purchase_Order || ''
    subList.value[line].Reference = result.Reference || ''
    subList.value[line].PO_Number = result.PO_Number || ''
  }
}
// 给子表格加红绿背景. 颜色用的tailwind的 red green
const calcRowStyle = ($e: any) => {
  const result = {} as any
  if ($e.row.addFlag) result['background-color'] = 'rgb(187, 247, 208)'
  if ($e.row.editFlag) result['background-color'] = 'rgb(187, 247, 208)'
  if ($e.row.deleteFlag) result['background-color'] = 'rgb(254, 202, 202)'
  return result
}

const commit = () => {
  let temp = cloneDeep(subList.value)
  let result = temp
    .filter((i) => !i.deleteFlag)
    .map((i) => {
      return {
        id: i.id,
        Sample: i.Sample || false,
        Batch_Record: i.batchRecord
          ? {
              name: i.Batch_Record.name,
              id: i.Batch_Record.id,
            }
          : '',
        Parent_Id: {
          name: i.Parent_Id.name,
          id: i.Parent_Id.id || '',
        },
        Material_of_Goods: i.Material_of_Goods,
        Requester: i.Requester.name
          ? {
              name: i.Requester.name,
              id: i.Requester.id || '',
            }
          : '',
        Sales_Person: i.Sales_Person || '',
        Carton: i.Carton || '',
        Marks_Nos: i.Marks_Nos || '',
        Description_of_Goods: i.Description_of_Goods || '',
        Quantity: i.Quantity || '',
        Unit_Price: i.Unit_Price || '',
        Weight: i.Weight || '',
        Cube: i.Cube || '',
        Total_FOB: i.Total_FOB || '',
        User_Notes: i.User_Notes || '',
        Sales_Order: i.Sales_Order || '',
        Purchase_Order: i.Purchase_Order || '',
        Reference: i.Reference || '',
        PO_Number: i.PO_Number || '',
      }
    }) as any[]

  result = result.concat(
    temp
      .filter((i) => i.deleteFlag)
      .map((i) => ({ id: i.id, _delete: null, Material_of_Goods: null })),
  )
  // const emptyBatchRecordList: number[] = []
  const emptyUserNotesList: number[] = []
  result.forEach((i, index) => {
    // if (!i.Sample) {
    //   if (!i.Batch_Record) {
    //     emptyBatchRecordList.push(index)
    //   }
    // }
    if (!i.User_Notes) {
      emptyUserNotesList.push(index)
    }
  })

  // if (emptyBatchRecordList.length) {
  //   ElNotification({
  //     title: '请检查表单',
  //     message: `第 ${emptyBatchRecordList.map((i) => i + 1).join(', ')} 行的Batch Record数据`,
  //     duration: 5000,
  //   })
  //   return
  // }
  if (emptyUserNotesList.length) {
    ElNotification({
      title: '请检查表单, 备注是必填的',
      message: `第 ${emptyUserNotesList
        .map((i) => i + 1)
        .join(', ')} 行的备注数据, 不能为空`,
      duration: 5000,
    })
    return
  }

  console.log(result, 'submit result')
  loading.value = true
  request
    .post('/sea_freight/updateSeaFreightDataV2', {
      id: newLineTemplate.Parent_Id.id,
      Sea_Freight_array: result,
      Sales_Person: currentUserName.value,
      Sales_Person_Obj: {
        id: currentUser.value,
        name: currentUserName.value,
      },
    })
    .then((res) => {
      if (res.data.code === 1) {
        let result = res.data.result || { data: [] }
        if (
          Array.isArray(result.data) &&
          result.data.length &&
          result.data.every((i: any) => i.status === 'success')
        ) {
          ElNotification({
            title: '保存成功',
            message: '正在刷新数据',
            duration: 3000,
          })
        } else {
          ElNotification({
            title: '部份内容保存失败',
            message: '建议刷新再试或者联系管理员',
            duration: 10000,
          })
        }
        getSubList(currentRow.value)
      } else {
        ElMessage.error('保存出错')
        loading.value = false
      }
    })
    .catch((e) => {
      console.log(e, 'commit error')
      loading.value = false
    })
}
let printDrawerVisible = ref(false)
let currentPrintRow = ref({} as any)
const print = (row: any) => {
  currentPrintRow.value = row
  printDrawerVisible.value = true
}
const exportSubTable = () => {
  const headers = [
    '箱数 Carton',
    '唛头 Marks & Nos',
    '货物名称 Description of Goods',
    '货物材质 Material goods',
    '数量 QTY',
    '单价 澳币/AUD Unit Price',
    '重量KG Weight',
    '体积m³ Cube',
    '总离岸价 澳币/AUD Total FOB',
    '负责人 Owner',
    'Reference',
  ]

  const data: any[] = subList.value.map((i) => {
    return {
      '箱数 Carton': i.Carton || '',
      '唛头 Marks & Nos': i.Marks_Nos || '',
      '货物名称 Description of Goods': i.Description_of_Goods || '',
      '货物材质 Material goods': i.Material_of_Goods,
      '数量 QTY': i.Quantity || '',
      '单价 澳币/AUD Unit Price': i.Unit_Price || '',
      '重量KG Weight': i.Weight || '',
      '体积m³ Cube': i.Cube || '',
      '总离岸价 澳币/AUD Total FOB': i.Total_FOB || '',
      '负责人 Owner': i.Requester.name || '',
      Reference: i.Reference || i.PO_Number || '',
    }
  })
  if (data.length === 0) {
    throw new Error('Invalid data: Data array is empty.')
  }

  const worksheetData = []
  worksheetData.push(['发票/装箱单/INVOICE/PACKING LIST'])
  if (headers && headers.length > 0) {
    worksheetData.push(headers)
  } else {
    worksheetData.push(Object.keys(data[0]))
  }
  data.forEach((row) => {
    worksheetData.push(Object.values(row))
  })
  const wb = XLSX.utils.book_new()
  let ws = XLSX.utils.aoa_to_sheet(worksheetData)
  ws['!merges'] = [
    { s: { r: 0, c: 0 }, e: { r: 0, c: 9 } }, // 合并列作为标题
  ]

  ws['!cols'] = [
    { wpx: 80 },
    { wpx: 200 },
    { wpx: 180 },
    { wpx: 120 },
    { wpx: 90 },
    { wpx: 120 },
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 120 },
    { wpx: 120 },
    { wpx: 100 },
  ]

  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  XLSX.writeFile(
    wb,
    encodeURIComponent(currentRow.value.Name || 'test') + '.xlsx',
  )
}

let qcList = ref([] as any[])
let loading2 = ref(false)

const search = (keyword: string) => {
  if (keyword.length < 2) return

  loading2.value = true
  zoho.CRM.API.searchRecord({
    Entity: 'QC_Record',
    Type: 'criteria',
    Query: `(Reference:in:${keyword})or(Reference:starts_with:${keyword})or(Purchase_Order.name:in:${keyword})or(Purchase_Order.name:starts_with:${keyword})`,
    delay: false,
  })
    .then((res: any) => {
      if (Array.isArray(res.data) && res.data.length) {
        qcList.value = res.data.map((i: any) => {
          return {
            ...i,
            isSearch: true,
          }
        })
      } else {
        qcList.value = []
        ElMessage.warning('No Data Found')
      }
    })
    .finally(() => (loading2.value = false))
}

const ensure = () => {
  ElMessageBox.confirm('确定要把该记录状态更新为"已确认"吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    loading.value = true
    zoho.CRM.API.updateRecord({
      Entity: 'Sea_Freight_Table',
      Trigger: ['workflow'],
      APIData: {
        id: currentRow.value.id,
        Status: '已确认',
      },
    }).then((res: any) => {
      if (
        Array.isArray(res.data) &&
        res.data.length &&
        res.data[0].code === 'SUCCESS'
      ) {
        ElMessage.success('操作成功, 正在刷新数据')
        loading.value = false
        getList()
        clearSubList()
      } else {
        loading.value = false
        ElMessage.error('操作失败, 请稍后再试或者联系管理员')
      }
    })
  })
}
let bookingNumber = ref('')
const updateBookingNumber = () => {
  bookingNumber.value = bookingNumber.value.trim()
  if (!bookingNumber.value || !currentRow.value.id) {
    ElMessage.error('请填写订舱号')
    return
  }
  ElMessageBox.confirm(
    `确定要把该记录的订舱号更新为"${bookingNumber.value}"吗?`,
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    loading.value = true
    zoho.CRM.API.updateRecord({
      Entity: 'Sea_Freight_Table',
      Trigger: ['workflow'],
      APIData: {
        id: currentRow.value.id,
        Booking_Number: bookingNumber.value,
      },
    }).then((res: any) => {
      if (
        Array.isArray(res.data) &&
        res.data.length &&
        res.data[0].code === 'SUCCESS'
      ) {
        ElMessage.success('操作成功, 正在刷新数据')
        loading.value = false
        bookingNumber.value = ''
        getList()
        clearSubList()
      } else {
        loading.value = false
        ElMessage.error('操作失败, 请稍后再试或者联系管理员')
      }
    })
  })
}

let containerNumber = ref('')
const updateContainerNumber = () => {
  containerNumber.value = containerNumber.value.trim()
  if (!containerNumber.value || !currentRow.value.id) {
    ElMessage.error('请填写柜号')
    return
  }
  ElMessageBox.confirm(
    `确定要把该记录的柜号更新为"${containerNumber.value}"吗?`,
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    loading.value = true
    zoho.CRM.API.updateRecord({
      Entity: 'Sea_Freight_Table',
      Trigger: ['workflow'],
      APIData: {
        id: currentRow.value.id,
        Container_Number: containerNumber.value,
      },
    }).then((res: any) => {
      if (
        Array.isArray(res.data) &&
        res.data.length &&
        res.data[0].code === 'SUCCESS'
      ) {
        ElMessage.success('操作成功, 正在刷新数据')
        loading.value = false
        containerNumber.value = ''
        getList()
        clearSubList()
      } else {
        loading.value = false
        ElMessage.error('操作失败, 请稍后再试或者联系管理员')
      }
    })
  })
}
// @ts-ignore
const zoho = window.ZOHO
zoho.embeddedApp.on('PageLoad', function () {
  zoho.CRM.CONFIG.getCurrentUser().then(function (data: any) {
    if (Array.isArray(data.users) && data.users.length) {
      const user = data.users[0]
      // console.log(user, 'user')
      currentUser.value = user.id
      currentUserName.value = user.full_name || ''
      currentUserRawData.value = cloneDeep(user)
      getList()
    }
  })
})

zoho.embeddedApp.init()
watch(currentUserRawData, () => {
  if (!currentUserRawData.value.role) return false

  let result =
    /(CEO|Logistics)/g.test(currentUserRawData.value.role.name) ||
    ['4791186000022965001', '4791186000052269001'].includes(
      currentUserRawData.value.role.id,
    )

  if (result) {
    finalTabs.value = cloneDeep(tabs)
    finalTabs.value.push({
      label: 'Arrangement',
      value: 'Arrangement',
    })
  }
})

let computedWeight = computed(() => {
  return subList.value
    .reduce((t, c) => {
      t = t + Number(c.Weight)
      return t
    }, 0)
    .toFixed(2)
})
let computedCube = computed(() => {
  return subList.value
    .reduce((t, c) => {
      t = t + Number(c.Cube)
      return t
    }, 0)
    .toFixed(2)
})
let computedTotalFOB = computed(() => {
  return subList.value
    .reduce((t, c) => {
      t = t + Number(c.Total_FOB)
      return t
    }, 0)
    .toFixed(2)
})

// 订单轨迹地图插件
let mapDrawerVisible = ref(false)
const openMapDrawer = (row: any) => {
  mapDrawerVisible.value = true
  // console.log(row.Carrier, 'row.value.Carrier')
  // console.log(row.Booking_Number, 'row.value.Booking_Number')
  if ((window as any).Sgld) {
    nextTick(() => {
      ;(window as any).Sgld.createContainerTrack({
        id: 'mapDrawer',
        carrierCode: row.Carrier, // 船公司代码
        billNo: row.Booking_Number, // 提单号
      })
    })
  }
}
const closeMapDrawer = () => {
  mapDrawerVisible.value = false
}
</script>
<style lang="scss">
.page-cargo-consolidation {
  .el-table__body tr.current-row > td.el-table__cell {
    background-color: rgb(56, 163, 238);
    color: #fff;
  }
}
</style>
<style lang="scss" scoped>
.el-button.custom-button {
  height: 24px;
  line-height: 24px;
  background-image: linear-gradient(
    171deg,
    rgb(28, 74, 136) 49%,
    rgb(0, 130, 193) 100%
  );
  background-color: rgb(97, 165, 245);
  color: #fff;
  font-size: 13px;
  font-family: Zoho_Puvi_Bold sans-serif;
  border-radius: 6px;
  cursor: pointer;
  &:hover,
  &:active {
    background-image: linear-gradient(
      171deg,
      rgb(28, 74, 136) 49%,
      rgb(22, 208, 239) 100%
    );
    color: #fff;
  }
  &.fb {
    font-weight: 900;
  }
  &.small {
    height: 24px;
    line-height: 24px;
  }
}
</style>