<template>
  <q-page style="padding-top: 90px">

    <q-pull-to-refresh @refresh="refresh">

      <!-- 置顶 搜索栏 -->
      <q-page-sticky expand position="top" style="z-index: 999;" class="shadow-5 flex inline shadow-box flex-center">
        <q-toolbar class="bg-white text-white">
          <q-card-section style="width: 100%;padding: 16px 0;">
            <q-input outlined label="入库单号" v-model="pagination.data.asnCode" class="text-h6" autofocus clearable
              @input="selectList" @clear="clearFn" ref="inputFoucs">
              <template v-slot:after>
                <q-btn glossy push rounded size="lg" color="primary" label="查询" icon="search"
                  @click="getASNDetailList()" />
              </template>
            </q-input>
          </q-card-section>
        </q-toolbar>
      </q-page-sticky>

    </q-pull-to-refresh>

    <!-- 内容 滚动部分 -->
    <q-scroll-area ref="scrollRef" :thumb-style="thumbStyle" :bar-style="barStyle" @scroll="onScroll"
      :style="{ height: Screen.height - 141 + 'px' }">
      <q-list bordered separator>
        <q-slide-item ref="slideItem" v-for="(item, index) in table_list" :key="index"
          @right="(details) => { onRight(details, item) }" @click="trClick(item)" right-color="positive">
          <template v-slot:right>
            完成收货 <q-icon color="white" name="done" />
          </template>
          <q-item>
            <q-item-section>
              <q-card-section>
                <div class="absolute-top-right">
                  <q-badge color="grey-5" rounded floating style="
                      font-size: 1.2rem;
                      font-weight: 500;
                      line-height: 1.2rem;
                      letter-spacing: 0.0125em;
                      z-index:99;
                    ">
                    {{ index + 1 }}
                  </q-badge>
                </div>
                <!-- label: '草稿', value: 0
                  label: '待收货', value: 1
                  label: '收货中', value: 2
                  label: '待上架', value: 3
                  label: '上架中', value: 4
                  -->
                <div class="row q-col-gutter-sm">
                  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-h6">入库单号：{{ item.asnCode }}</div>
                  <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 text-h6">入库单类型：{{
                    helper.getAsnType(item.asnType) }}
                  </div>
                  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-h6">状态：
                    <q-badge class="text-h6" :color="Number(item.state) == 1 ? 'primary' : 'orange'">{{
                      helper.getAsnState(item.state) }}</q-badge>
                  </div>
                  <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 text-h6">订单号：{{ item.orderCode }}
                  </div>
                  <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 text-h6">项目号：{{ item.projectCode }}
                  </div>
                  <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 text-h6">建单人：{{ item.createName }}
                  </div>
                  <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 text-h6">建单时间：{{ item.createAt }}
                  </div>
                </div>
              </q-card-section>
            </q-item-section>
          </q-item>
        </q-slide-item>
        <div class="row justify-center q-my-md" v-show="loadingFlag">
          <q-spinner-dots color="primary" size="40px" />
        </div>
      </q-list>
    </q-scroll-area>

    <!-- 回到顶部 -->
    <q-page-scroller position="bottom-right" style="z-index: 98;" :scroll-offset="300" :offset="[18, 18]">
      <q-btn fab push glossy icon="keyboard_arrow_up" color="light-blue-5" />
    </q-page-scroller>
  </q-page>

  <!-- 收货模态窗 -->
  <receivingDialog ref="receivingRef" @refresh="getASNDetailList"></receivingDialog>
</template>

<script setup lang="ts">
import receivingDialog from './components/receivingDialog.vue';
import { Dialog, Notify } from 'quasar';
import { Pagination, convert } from 'src/api/class';
import { AsnSearchEntity } from 'src/api/inbound/model/asn';
import { asnApi } from 'src/api/inbound/asnApi';
import { Screen } from 'quasar'
import { onMounted, ref } from 'vue';
import helper from 'src/Utils/helper';

const thumbStyle = {
  right: '4px',
  borderRadius: '5px',
  width: '5px'
}
const barStyle = {
  right: '2px',
  borderRadius: '9px',
  width: '9px'
}
const slideItem = ref()
//分页
const pagination = ref(new Pagination(new AsnSearchEntity()));
pagination.value.data.state = [1, 2]
pagination.value.rowsPerPage = 10
const loadingFlag = ref(false)

const table_list: any = ref([])

const selectList = () => {
  getASNDetailList()
}

const clearFn = () => {
  getASNDetailList();
}

const inputFoucs = ref()
const scrollRef = ref()
const getASNDetailList = (callback?: VoidCallback) => {
  // 滚动栏置顶
  scrollRef.value.setScrollPercentage('vertical', 0, 0);
  pagination.value.page = 1
  asnApi
    .getPage(pagination.value)
    .then((res) => {
      convert(pagination.value, res);
      // inputFoucs.value.blur()
      table_list.value = res.dataList;
      callback ? callback() : ''
    });
}


const receivingRef = ref()
// 打开收货模态窗
const trClick = (row: any) => {
  receivingRef.value.clickForm(row)
}

onMounted(() => {
  getASNDetailList()
})

const refresh = (done: any) => {
  getASNDetailList(() => {
    done()
    Notify.create({
      message: '刷新成功',
      icon: 'check_circle_outline',
      color: 'positive',
      position: 'top'
    });
  })
}

// 上拉搜索 下一页
const onScroll = ({ verticalPercentage }) => {
  if (verticalPercentage === 1 && pagination.value.rowsNumber > table_list.value.length) {
    loadingFlag.value = true
    pagination.value.page = pagination.value.page + 1
    asnApi
      .getPage(pagination.value)
      .then((res) => {
        loadingFlag.value = false
        convert(pagination.value, res);
        table_list.value = table_list.value.concat(res.dataList);
      });
  }
};

// 修改状态为 完成收货
const onRight = ({ reset }, item: any) => {
  Dialog.create({
    title: '系统提示',
    message: '是否将此订单的状态修改为完成收货，状态变更后将不可再修改库存数量?',
    class: 'text-h7 text-weight-bold',
    cancel: true,
    persistent: true
  }).onOk(() => {
    asnApi.overReceiving(item.id).then(() => {
      // reset : 调用时，它会将组件重置为其初始非滑动状态
      reset();
      getASNDetailList();
    });
  }).onCancel(() => {
    reset();
  })
}
</script>
