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 tabs"
          :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="110"
        />
        <el-table-column
          prop="ETD"
          label="ETD"
          width="110"
        />
        <el-table-column
          prop="ATD"
          label="ATD"
          width="110"
        />
        <el-table-column
          prop="ETA"
          label="ETA"
          width="110"
        />
        <el-table-column
          prop="ATA"
          label="ATA"
          width="110"
        />
        <el-table-column
          prop="Cut_Off_Date"
          label="入仓时间"
          width="120"
        />
        <el-table-column
          prop="Status"
          label="状态"
          width="100"
        />
        <!-- <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="Carrier"
          label="船东"
          min-width="120"
        />
        <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]">
            <el-button
              v-if="
                ['可用', '已截仓'].includes(currentRow.Status) &&
                [
                  '4791186000259693001',
                  '4791186000022965001',
                  '4791186000052269001',
                ].includes(currentUser)
              "
              size="small"
              type="danger"
              @click="ensure"
            >
              确认集货
            </el-button>
            <el-button
              v-if="currentTab === 'my_request'"
              size="small"
              @click="addBulkProduct"
            >
              Submit Bulk Production Request
            </el-button>
            <el-button
              v-if="currentTab === 'my_request'"
              size="small"
              @click="addSample"
            >
              Submit Sample Request
            </el-button>
            <el-button
              v-if="currentTab === 'my_request'"
              :disabled="subList.length < 1"
              size="small"
              type="danger"
              @click="generateSubList"
            >
              放弃下方表格改动
            </el-button>
            <el-button
              size="small"
              :disabled="subList.length < 1"
              @click="exportSubTable"
            >
              Export Excel File
            </el-button>
            <el-button
              v-if="currentTab === 'my_request'"
              :disabled="subList.length < 1"
              size="small"
              type="primary"
              class="custom-button small"
              @click="commit"
            >
              Commit
            </el-button>
          </div>
        </div>
        <div class="flex justify-between min-w-[350px]">
          <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"
              @change="($e) => onBatchRecordChange($e, scope.$index)"
            >
              <el-option
                v-for="option in batchListOption.concat(qcList) as any[]"
                :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
              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
              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
              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
              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
              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
              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
              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"
          prop="Sales_Person"
        >
          <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="currentTab === 'my_request'"
          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="85"
        >
          <template #default="scope">
            <el-tooltip
              content="新增未commit的行会被直接移除; 已commit的行只会标记, 正式commit后才会删除"
            >
              <el-button
                v-if="currentTab === 'my_request'"
                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
              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
              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>

      <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('')
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 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 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,
  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,
    )
    .map((i) => {
      return {
        Name: i.Batch_Record.name || '',
        id: i.Batch_Record.id || '',
      }
    })
    // ai生成的去重逻辑.
    .filter(
      (item, index, self) =>
        index ===
        self.findIndex((t) => t.Name === item.Name && t.id === item.id),
    ),
)

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 锌合金',
])

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 = qcList.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,
      }
    }
  }
}
// 给子表格加红绿背景. 颜色用的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 || '',
      }
    }) 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/updateSeaFreightData', {
      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) {
        ElNotification({
          title: '保存成功',
          message: '正在刷新数据',
          duration: 3000,
        })
        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',
  ]

  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 || '',
    }
  })
  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 },
  ]

  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  XLSX.writeFile(wb, '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
      } 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('操作失败, 请稍后再试或者联系管理员')
      }
    })
  })
}
// @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 || ''
      getList()
    }
  })
})

zoho.embeddedApp.init()

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

// 订单轨迹地图插件
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: 32px;
  line-height: 32px;
  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%
    );
  }
  &.fb {
    font-weight: 900;
  }
  &.small {
    height: 24px;
    line-height: 24px;
  }
}
</style>