<template>
  <gui-page :custom-header="true" :header-class="['gui-theme-background-color']">
    <template #gHeader>
      <view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <text
          style="font-size:44rpx;"
          class="gui-header-leader-btns gui-color-white font-icons"
          @tap="goBack"
        >&#xe6c5;</text>
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text
          class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-color-white gui-primary-text"
        >退料签收</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width:40px;" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gBody>
      <view class="list-content">
        <view class="scan">
          <view class="scan-card">
            <uni-easyinput
              ref="easyinput"
              v-model="scanNumber"
              :input-border="false"
              :clearable="false"
              type="text"
              focus
			  @focus="handleInputFocus"
              placeholder="扫描退料标签"
              @confirm="handleKeydown"
            />
            <text class="font-icons" @click="handleMapass">&#xe6b7;</text>
          </view>
        </view>
        <view class="table-title">
          <span>退料清单</span>
        </view>
        <view class="custom-table">
          <uni-table border stripe empty-text="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr class="custom-table-head">
              <uni-th align="center" width="100px">工单</uni-th>
              <uni-th align="center" width="140px">本次退料数量</uni-th>
              <uni-th align="center" width="180px">产品</uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <uni-tr v-for="(item, key) in returnMaterialList" :key="key">
              <uni-td align="center">{{ item.receiveOrderNo }}</uni-td>
              <uni-td align="center">{{ item.rejectOrderNo }}</uni-td>
              <uni-td align="center">{{ item.materialNo }}({{ item.materialName }})</uni-td>
            </uni-tr>
          </uni-table>
        </view>
        <view
          v-if="returnMaterialList.length > 0"
          class="card-list-item"
          style="margin: 12px 0;display: grid;grid-template-columns: 1fr;grid-template-rows: 1fr;"
          @click="handleBtnLight"
        >
          <view class="sign-btn">
            <text
              :style="['font-size: 14px;font-weight: bold;', isLightText?'color: rgba(0, 160, 233, 1)':'']"
            >签收</text>
            <view style="width: 0px;">
              <uni-easyinput
                ref="signInput"
                v-model="signText"
                :input-border="false"
                :clearable="false"
                type="text"
				@focus="handleInputFocus"
                @confirm="handleComplete"
              />
            </view>
          </view>
        </view>
        <view
          v-else-if="returnMaterialList.length === 0"
          class="card-list-item"
          style="margin: 12px 0;display: grid;grid-template-columns: 1fr;grid-template-rows: 1fr;"
        >
          <view class="sign-btn">
            <text style="font-size: 14px;font-weight: bold;color: gray;">签收</text>
            <view style="width: 0px;">
              <uni-easyinput
                ref="signInput"
                :input-border="false"
                :clearable="false"
                type="text"
				@focus="handleInputFocus"
              />
            </view>
          </view>
        </view>
      </view>
      <uni-popup ref="errorTip" type="dialog">
        <uni-popup-dialog
          type="error"
          cancel-text="关闭"
          confirm-text="确认"
          title="提示"
          :content="errorTipMessage"
          @confirm="handleCloseErrorTipsModal"
          @close="handleCloseErrorTipsModal"
        />
      </uni-popup>
    </template>
  </gui-page>
</template>

<script>
import {
  defineComponent,
  ref
} from 'vue'
export default defineComponent({
  setup() {
    const modalForm = ref('')
    const easyinput = ref()
    const errorState = ref(0)
    const errorTip = ref('')
    const errorTipMessage = ref('')
    const returnMaterialList = ref([])
    const scanNumber = ref('')
    const signInput = ref()
    const signText = ref('')
    const isLightText = ref('')

    const handleMapass = function() {
      // #ifdef APP-PLUS
      const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
      mpaasScanModule.mpaasScan({
        // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
        'scanType': ['qrCode', 'barCode'],
        // 是否隐藏相册，默认false不隐藏
        'hideAlbum': false
      },
      (ret) => {
        if (ret.resp_code === 1000) {
          uni.$reqGet('getReturnMaterialToStockPage', {
            pageNo: 1,
            pageSize: 100,
            qrCode: ret.resp_result
          })
            .then(({
              code,
              data,
              msg
            }) => {
              if (code === 0) {
                setInputFocus()
                returnMaterialList.value = data?.list ?? []
              } else {
                // #ifdef APP-PLUS
                plus.device.beep(2)
                // #endif
                errorTipMessage.value = msg
                errorTip.value.open()
                errorState.value = 0
              }
            })
        }
      })
      // #endif
    }

    // 扫描退料标签输入框回车事件
    const handleKeydown = function(e) {
      uni.$reqGet('getReturnMaterialToStockPage', {
        pageNo: 1,
        pageSize: 100,
        qrCode: e
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            setInputFocus()
            returnMaterialList.value = data?.list ?? []
          } else {
            // #ifdef APP-PLUS
            plus.device.beep(2)
            // #endif
            errorTipMessage.value = msg
            errorTip.value.open()
            errorState.value = 0
          }
        })
    }

    const goBack = function() {
      uni.$goBack('/pages/workbranch/warehouse/returnMaterial/returnMaterialType')
    }

    // 设置高亮
    const handleBtnLight = function() {
      // #ifdef APP-PLUS
      signInput.value.onBlur()
      isLightText.value = true
      signInput.value.onFocus()
      // #endif
    }

    const handleComplete = function(e) {
      // const list = []
      // #ifdef APP-PLUS
      // 扫描员工工号
      uni.$reqPost('signReturnMaterial', {
        detail: returnMaterialList.value,
        encodedEmployeeId: e
      })
        .then(({
          code,
          data,
          msg
        }) => {
          isLightText.value = false
          signText.value = ''
          if (code === 0) {
            uni.showToast({
              title: '签收成功',
              icon: 'none',
              duration: 2000
            })
            setInputFocus()
            returnMaterialList.value.length = 0
          } else {
            // #ifdef APP-PLUS
            plus.device.beep(2)
            // #endif
            errorTipMessage.value = msg
            errorTip.value.open()
            errorState.value = -1
          }
        })
      // #endif
    }

    const setInputFocus = function() {
      scanNumber.value = ''
      easyinput.value.onBlur()
      easyinput.value.onFocus()
    }

    // 关闭错误信息弹窗
    const handleCloseErrorTipsModal = async function() {
      errorTip.value.close()
      if (errorState.value === 0) {
        await setInputFocus()
      }
    }
	
	// 禁用软键盘
	const handleInputFocus = function() {
		setTimeout(() => {
			uni.hideKeyboard()
		}, 100)
	}

    return {
      goBack,
      errorTip,
      errorTipMessage,
      easyinput,
      modalForm,
      scanNumber,
      signInput,
      signText,
      isLightText,
      handleMapass,
      handleKeydown,
      returnMaterialList,
      handleBtnLight,
      handleComplete,
	  handleInputFocus,
      handleCloseErrorTipsModal
    }
  }
})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
	}

	.list-content {
		margin-top: 80px;
		background-color: #edeeee;
	}

	.input-200 {
		width: 200px;
		padding-left: 10px;
	}

	.font-icons {
		width: 40px;
		font-size: 20px;
		text-align: right;
	}

	.scan {
		height: 45px;
		width: calc(100% - 48px);
		margin: 12px;
		padding: 0 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 6px;
		background-color: white;

		.scan-card {
			width: 100%;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 7fr 2fr;
			align-items: center;

			input {
				height: 35px;
				line-height: 35px;
			}

			text {
				width: 100%;
				text-align: right;
			}
		}
	}

	.card-list-item {
		width: 750rpx;
		height: 40px;
		margin: 2rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		uni-text {
			font-size: 14px;
			height: 50rpx;
			text-align: left;
			padding: 0 12px;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.text-1 {
			flex: 1;
			height: 40px;
			justify-content: flex-start;
		}

		.text-2 {
			flex: 3;
			height: 40px;
			justify-content: flex-end;
			margin-right: 4px;
			padding: 2px 6px;
		}
	}

	.table-title {
		height: 40px;
		line-height: 40px;
		margin: 4px 0 -3px 0;
		padding: 0 12px;
		font-size: 16px;
		font-weight: bold;
		background-color: white;
	}

	.custom-table {
		height: calc(100vh - 265px);
		min-height: 230px;
		margin: 5px 0;
		overflow-y: scroll;
	}

	.sign-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 8px;
		border: 1px solid #999999;
		background-color: white;
		border-radius: 6px;
	}
</style>
