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

<template>
  <div class="w-[100vw] bg-white">
    <div
      v-loading="loading"
      class="pt-2 w-[100%] min-h-[100vh]"
    >
      <!-- <div class="text-xl text-slate-700">Cargo Consolidation Request</div> -->
      <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"
            :disabled-date="pickerOptions"
          />
        </el-form-item>
        <el-form-item>
          <el-tooltip content="时间范围最好不要选太大, 不然数据太多会卡">
            <el-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
        :data="computedList"
        highlight-current-row
        style="width: 100%"
        max-height="330"
        @row-click="($e) => getSubList($e)"
      >
        <el-table-column
          prop="Name"
          label="Voyage Name"
        />
        <el-table-column
          prop="Port_From"
          label="Port From"
          width="100"
        />
        <el-table-column
          label="Port To"
          prop="Port_To"
          width="100"
        />
        <el-table-column
          prop="ETD"
          label="ETD"
          width="100"
        />
        <el-table-column
          prop="ETA"
          label="ETA"
          width="100"
        />
        <el-table-column
          prop="Cut_Off_Date"
          label="Cut Off"
          width="120"
        />
        <!-- <el-table-column
          label="Owner"
          width="100"
        >
          <template #default="scope">
            {{ scope.row.Owner.name }}
          </template>
        </el-table-column> -->
        <el-table-column
          prop="Status"
          label="Status"
          width="100"
        />
        <el-table-column
          label="Last Modify Time"
          width="180"
        >
          <template #default="scope">
            {{ dayjs(scope.row.Modified_Time).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
      </el-table>
      <div
        v-show="currentRow.Name?.length"
        class="flex mt-8"
      >
        <div class="flex items-center mr-4">
          current clicked Voyage name:&nbsp;
          <div class="text-red-700 font-bold">
            {{ currentRow.Name }}
          </div>
        </div>
        <el-button
          v-if="currentTab === 'my_request'"
          size="small"
          @click="openBulkProductDialog"
        >
          Submit Bulk Production Request
        </el-button>
        <el-button
          v-if="currentTab === 'my_request'"
          size="small"
          @click="openSampleDialog"
        >
          Submit Sample Request
        </el-button>
        <el-button
          v-if="currentTab === 'my_request'"
          :disabled="subList.length < 1"
          size="small"
          type="danger"
          @click="resetSubList"
        >
          放弃下方表格改动
        </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"
          @click="commit"
        >
          Commit
        </el-button>
      </div>
      <el-table
        class="mt-4"
        :data="subList"
        style="width: 100%"
        :row-style="calcRowStyle"
        :empty-text="
          currentRow.Name?.length
            ? '暂无数据'
            : '请点击voyage表格其中一行以查询相应记录'
        "
        border
      >
        <el-table-column
          fixed
          label="CRM批次记录 (Batch Record)"
          width="250"
        >
          <template #default="scope">
            <el-select
              v-model="scope.row.batchRecord"
              :remote-method="debounce(search, 1500)"
              remote
              style="width: 100%"
              :loading="loading2"
              filterable
              clearable
              :disabled="scope.row.disableFlag"
              @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="User Notes"
          width="250"
          fixed
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.User_Notes"
              :rows="2"
              type="textarea"
              :disabled="scope.row.disableFlag"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="Sample"
          width="80"
          fixed
        >
          <template #default="scope">
            <el-checkbox
              v-model="scope.row.Sample"
              :disabled="scope.row.disableFlag"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          label="箱数(Carton)"
          width="115"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Carton"
              :disabled="scope.row.disableFlag"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="唛头 (Marks & Nos)"
          width="220"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Marks_Nos"
              :disabled="scope.row.disableFlag"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="货物名称 (Description of Goods)"
          width="180"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Description_of_Goods"
              :disabled="scope.row.disableFlag"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="货物材质 (Material goods)"
          width="250"
        >
          <template #default="scope">
            <el-select
              v-model="scope.row.Material_of_Goods"
              multiple
              :disabled="scope.row.disableFlag"
            >
              <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="数量(Qty)"
          width="110"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Quantity"
              :disabled="scope.row.disableFlag"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="单价(澳币/AUD) (Unit Price)"
          width="220"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Unit_Price"
              :disabled="scope.row.disableFlag"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="重量(KG)(Weight)"
          width="100"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Weight"
              :disabled="scope.row.disableFlag"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="体积 m&sup3;(Cube)"
          width="150"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Cube"
              :disabled="scope.row.disableFlag"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="总离岸价 (澳币/AUD)(Total FOB)"
          width="250"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Total_FOB"
              :disabled="scope.row.disableFlag"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="负责人(Owner)"
          fixed="right"
          width="140"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.Requester.name"
              disabled
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          v-if="currentTab === 'my_request'"
          fixed="right"
          label="更新时间"
          width="180"
        >
          <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
          fixed="right"
          label="action"
          width="100"
        >
          <template #default="scope">
            <el-button
              v-if="currentTab === 'my_request'"
              type="danger"
              size="small"
              link
              @click="onDeleteRow"
            >
              删除
            </el-button>
            <el-button
              size="small"
              link
              type="primary"
              @click="print(scope.row)"
            >
              打印
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        v-model="show"
        :title="(isBlukDialog ? 'Bulk Product' : 'Sample') + ' Request'"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="600px"
        :before-close="close"
      >
        <el-form
          ref="formRef"
          :model="form"
          @submit.prevent
        >
          <el-form-item
            v-if="isBlukDialog"
            label="Batch Record"
            prop="batchRecord"
            :rules="{ required: true, message: '必填项' }"
          >
            <!-- <el-select
              v-model="form.batchRecord"
              @change="($e) => onBatchRecordChange($e)"
            >
              <el-option
                v-for="o in batchListOption"
                :key="o.id"
                :label="o.name"
                :value="o.id"
              ></el-option>
            </el-select> -->
            <el-select
              v-model="form.batchRecord"
              :remote-method="debounce(search, 1500)"
              remote
              style="width: 100%"
              :loading="loading2"
              filterable
              clearable
              @change="($e) => onBatchRecordChange($e, -1)"
            >
              <el-option
                v-for="option in qcList"
                :key="option.id"
                :value="option.id"
                :label="option.Name + ` - ${option.Reference}`"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="User Notes"
            prop="User_Notes"
            :rules="{ required: true, message: '必填项' }"
          >
            <el-input v-model="form.User_Notes"></el-input>
          </el-form-item>

          <div class="flex justify-center">
            <el-button
              type="primary"
              @click="addNewSubList(formRef)"
            >
              submit
            </el-button>
          </div>
        </el-form>
      </el-dialog>
      <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"
          :content="[currentPrintRow.Marks_Nos || '']"
          :scene="'QC'"
        />
      </el-drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, watch, computed } from 'vue'
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElTabs,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElDatePicker,
  ElTooltip,
  ElSelect,
  ElOption,
  ElDialog,
  ElCheckbox,
  ElMessage,
  ElNotification,
  ElDrawer,
} from 'element-plus'
import type { FormInstance } from 'element-plus'
import cloneDeep from 'lodash.clonedeep'
import dayjs from 'dayjs'
import * as XLSX from 'xlsx'
import request from '@/utils/axios'
import debounce from 'lodash.debounce'
import compPrint from '@/components/print.vue'
// import { useRouter } from 'vue-router'
// const $router = useRouter()
// $router.push('/so-search')
defineComponent({
  name: 'ComponentCargoConsolidationRequest',
})

const currentUser = ref('')
const currentUserName = ref('')
let show = ref(false) // 新增货物对话框
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].sort()
}
// 用来限定日期选择器不让它选太大的时间范围.
const pickerOptions = computed(() => {
  return (time: Date) => {
    if (!dateRange.value || dateRange.value.length !== 2) {
      return false // 如果没有选择范围，则不禁用任何日期
    }
    const start = dateRange.value[0].getTime()
    const end = dateRange.value[1].getTime()
    const current = time.getTime()
    const maxRange = 14 * 24 * 60 * 60 * 1000 // 14天的毫秒数

    if (current < start) {
      //如果当前日期小于开始日期，不禁用，因为用户可能要修改开始日期。
      return false
    }

    if (end - start > maxRange) {
      //如果用户选中的日期超过14天，则禁用超出范围的日期
      if (current > start + maxRange) {
        return true
      } else {
        return false
      }
    }
    if (current > start + maxRange) {
      //如果当前日期大于开始日期加14天，则禁用。
      return true
    }
    return false
  }
})

const dateShortcuts = ref([
  {
    text: 'Next 3 days',
    value: generateDateRange(3),
  },
  {
    text: 'Last 3 days',
    value: generateDateRange(-3),
  },
  {
    text: 'Next week',
    value: generateDateRange(7),
  },
  {
    text: 'Last week',
    value: generateDateRange(-7),
  },
] as any[])

dateRange.value = generateDateRange(-14) // todo 提交前改为-7

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

let getList = () => {
  loading.value = true
  zoho.CRM.API.coql({
    select_query:
      'select Name,Port_From,Port_To,ETD,ETA,Cut_Off_Date,Owner,Status,Modified_Time from Sea_Freight_Table' +
      " where ETD between '" +
      `${dateRange.value.map((i) => dayjs(i).format('YYYY-MM-DD')).join("' and '")}` +
      "'",
  })
    .then((res: any) => {
      // console.log(res, 'res get list')
      if (Array.isArray(res.data) && res.data.length) {
        list.value = res.data
      } else if (res.status === 204) {
        ElMessage.info(res.statusText || 'zoho api return:' + res.status)
        list.value = []
        clearSubList()
      }
    })
    .finally(() => (loading.value = false))
}

let currentRow = ref({} as any)
let subList = ref([] as any[])
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)
  // console.log(notClose, 'notClose')
  if (notAvaliable || notClose) {
    clearSubList()
  }
})

/**
 *  用来增加新行的数据模版
 */
const newLineTemplate = {
  addFlag: true,
  deleteFlag: false,
  batchRecord: '',
  disableFlag: false,
  // 提交表单前删掉以上字段
  // 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,
  User_Notes: '',
}
// 用在弹窗里面给批次记录做候选项
let batchListOption = computed(() =>
  subListBackup
    .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) {
        // 过滤 Requester.id === 当前用户id
        subListBackup = res.data
          .filter(
            (i: any) =>
              i.Parent_Id.id === currentRow.value.id &&
              (currentTab.value === 'my_request'
                ? i.Requester.id === currentUser.value
                : true),
          )
          .map((i: any) => ({
            ...i,
            Sample: i.Sample || false,
            batchRecord: i.Batch_Record?.id || '',
            // disableFlag: currentUser.value !== i.Requester.id, // 同上判断.
            disableFlag: false,
            addFlag: false,
            deleteFlag: false,
          }))
        subList.value = cloneDeep(subListBackup)
        if (subList.value.length) {
          newLineTemplate.Parent_Id = cloneDeep(subList.value[0].Parent_Id)
        } else {
          newLineTemplate.Parent_Id = { id: currentRow.value.id }
          newLineTemplate.Requester = {
            id: currentUser.value,
            name: currentUserName.value,
          }
        }
      }
    })
    .finally(() => (loading.value = false))
}

const resetSubList = () => {
  subList.value = cloneDeep(subListBackup)
}

const goodMaterialOption = ref([
  'Cotton 棉',
  'Iron 铁',
  'Neoprene 潜水料',
  'Paper 纸质',
  'Plastic 塑料',
  'Polyester Fibre 聚酯纤维',
  'PU 聚氨酯',
  'PVC 聚氯乙烯',
  'Velvet 天鹅绒',
  'Zinc alloy 锌合金',
])

let formRef = ref<FormInstance>()
let form = ref({} as any)
let isBlukDialog = ref(false)

const openBulkProductDialog = () => {
  form.value = cloneDeep(newLineTemplate)
  isBlukDialog.value = true
  show.value = true
}
const openSampleDialog = () => {
  form.value = cloneDeep(newLineTemplate)
  form.value.Sample = true
  form.value.Requester = { id: currentUser.value, name: currentUserName.value }
  isBlukDialog.value = false
  show.value = true
}
const close = (done = {} as any) => {
  if (formRef.value && typeof formRef.value.clearValidate === 'function') {
    formRef.value.clearValidate()
  }
  if (typeof done === 'function') done()
}

const addNewSubList = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid: boolean) => {
    if (!valid) return
    subList.value.push(cloneDeep(form.value))
    show.value = false
    isBlukDialog.value = false
    form.value = {}
  })
}
const onDeleteRow = (row: any) => {
  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].Batch_Record = { id: result.id, name: result.Name }
    if (result.Owner) {
      subList.value[line].Requester = {
        name: result.Owner.name,
        id: result.Owner.id,
      }
    }
  } else {
    form.value.Requester = {
      name: result.Owner.name,
      id: result.Owner.id,
    }
    form.value.Batch_Record = { id: result.id, name: result.Name }
  }
}
// 给子表格加红绿背景. 颜色用的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.deleteFlag) result['background-color'] = 'rgb(254, 202, 202)'
  return result
}

const commit = () => {
  const result = cloneDeep(subList.value)
    .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: {
          name: i.Requester.name,
          id: i.Requester.id || '',
        },
        Sales_Person: i.Requester.name || '',
        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 || '',
      }
    })
  loading.value = true
  request
    .post('/sea_freight/updateSeaFreightData', {
      id: newLineTemplate.Parent_Id.id,
      Sea_Freight_array: result,
    })
    .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 = [
    'id',
    'CRM批次记录 (Batch Record)',
    'Sample',
    '箱数(Carton)',
    '唛头 (Marks & Nos)',
    '货物名称 (Description of Goods)',
    '货物材质 (Material goods)',
    '数量(Qty)',
    '单价(澳币/AUD) (Unit Price)',
    '重量(KG)(Weight)',
    '体积 m³(Cube)',
    '总离岸价 (澳币/AUD)(Total FOB)',
    'User_Notes',
    '负责人(Owner)',
  ]
  // console.log(subList.value, 'subList.value')
  const data: any[] = subList.value.map((i) => {
    return {
      id: i.id,
      'CRM批次记录 (Batch Record)': i.Batch_Record?.name || '',
      Sample: i.Sample ? 'true' : '',
      '箱数(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 || '',
      User_Notes: i.User_Notes || '',
      '负责人(Owner)': i.Requester.name || '',
    }
  })
  if (data.length === 0) {
    throw new Error('Invalid data: Data array is empty.')
  }

  const worksheetData = []
  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['!cols'] = [
    { wpx: 120 },
    { wpx: 450 },
    { wpx: 80 },
    { wpx: 80 },
    { wpx: 80 },
    { wpx: 120 },
    { wpx: 100 },
    { wpx: 80 },
    { wpx: 80 },
    { wpx: 80 },
    { wpx: 80 },
    { wpx: 80 },
    { wpx: 350 },
    { wpx: 100 },
  ]

  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))
}

// @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]
      currentUser.value = user.id
      currentUserName.value = user.full_name || ''
      getList()
    }
  })
})

zoho.embeddedApp.init()
</script>