<template>
  <view class="search-root">
    <uni-search-bar
      cancelButton="none"
      clearButton="auto"
      placeholder="请输入关键字 例如：土豆"
      @confirm="confirm"
      @input="input"
      @clear="clear"
    />

    <view class="add-shopping" @tap="scanCode">
      <jx-icon icon="ziyuan" color="#fff" :size="60"></jx-icon>
    </view>
  </view>
</template>
  
  <script lang="ts" setup >
import toast from '@/utils/toast'
import { jx_trembling } from '@/utils/tools'
import { setStorage, getStorage,cleatStorage } from "@/utils/storage";

/*************************************************
 * emit
 */
const emit = defineEmits<{
  (e: 'serachShopping', data: string): void
  (e: 'clearInpu', data: string): void
  (e: 'scanCode', data: string): void
}>()

/*************************************************
 * 确定搜索
 */
function confirm(e: AnyObject) {
  emit('serachShopping', e.value)
}

/*************************************************
 * 输入框加载
 */
function input(e: string) {
  trembling(e)
}
const trembling = jx_trembling((e: string) => {
  emit('serachShopping', e)
}, 1000)

/*************************************************
 * 输入框
 */
function clear(e: AnyObject) {
  emit('clearInpu', e.value)
}

/*************************************************
 * 扫码搜索
 */
function scanCode() {
  let permission:any = getStorage('permissionList')
  if (permission && permission.scanCodeToCreateGood) {
      uni.scanCode({
        onlyFromCamera: false,
        scanType: ['qrCode', 'barCode'],
        success: ({ result }) => {
          emit('scanCode', result)
        },
        fail: (error) => {
          toast('取消扫码', 2)
        },
      })
  } else {
      uni.jxConfirm({
        title: '相机/相册权限说明',
        content: '便于您使用该功能扫描商品上的条形码，快速识别并创建商品',
         success() {
             let permissionList = {
              'scanCodeToCreateGood':true
             }
            setStorage('permissionList',permissionList)
            uni.scanCode({
              onlyFromCamera: false,
              scanType: ['qrCode', 'barCode'],
              success: ({ result }) => {
                emit('scanCode', result)
              },
              fail: (error) => {
                toast('取消扫码', 2)
              },
            })
         },
      })
  }
}
</script>
  
  <style lang="scss">
.search-root {
  box-sizing: border-box;
  background-color: $jx-primary;
  padding: 0 20rpx 2rpx 20rpx;
  height: 92rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .add-shopping {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    padding: 0;
  }
}
</style>