<template>
  <gui-page :custom-header="true" :is-header-sized="false" :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 v-if="cardList.length > 0" class="list-panel">
          <view v-for="(item, key) in cardList" :key="key" class="panel">
            <uni-swipe-action>
              <!-- 基础用法 -->
              <uni-swipe-action-item
                :right-options="options"
                :left-options="options"
                @click="onClick(key)"
              >
                <template #left>
                  <view />
                </template>
                <view class="flex-row">
                  <view class="panel-row">
                    <text>物料批次</text>
                    <text>{{ item.materialLots }}</text>
                  </view>
                  <view class="panel-row">
                    <text>批次数量</text>
                    <text>{{ item.batchQty }}</text>
                  </view>
                  <view class="panel-row">
                    <text>物料编码</text>
                    <text>{{ item.erpMaterialId }}</text>
                  </view>
                  <view class="panel-row">
                    <text>物料名称</text>
                    <text>{{ item.materialName }}</text>
                  </view>
                </view>
              </uni-swipe-action-item>
            </uni-swipe-action>
          </view>
        </view>
        <view v-else>
          <view class="bg-image">
            <image src="@/static/empty.png" mode="heightFix" />
            <text>这里什么都没有...</text>
          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script>
import {
  defineComponent,
  ref
} from 'vue'
export default defineComponent({
  setup() {
    const options = ref([{
      text: '删除',
      style: {
        backgroundColor: '#dd524d'
      }
    }])
    const cardList = ref([])

    uni.getStorage({
      key: 'issueRecord',
      success({
        data
      }) {
        cardList.value = JSON.parse(data)
      }
    })

    const goBack = function() {
      uni.navigateBack({
        delta: 1
      })
    }
    const onClick = function(index) {
      cardList.value.splice(index, 1)
    }

    return {
      goBack,
      options,
      onClick,
      cardList
    }
  }
})
</script>

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

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