<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="goHome"
        >&#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="card-list-flexbox">
        <view v-for="(item, key) in returnMaterialTypeList" :key="key" class="card">
          <div class="card-panel" style="background-color: #00a0e9;" @click="handleNavigateTo('退料单申请', item)">
            <text class="font-icons">&#xe660;</text>
            <text>{{ item.label }}申请</text>
          </div>
        </view>
        <view class="card">
          <div class="card-panel" style="background-color: #55aa7f;" @click="handleNavigateTo('退料单签收')">
            <text class="font-icons">&#xe660;</text>
            <text>退料单签收</text>
          </div>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script>
import {
  defineComponent,
  onMounted,
  ref
} from 'vue'
export default defineComponent({
  setup() {
    const returnMaterialTypeList = ref([])
    const goHome = function() {
      uni.$goHome()
    }

    onMounted(() => {
      uni.$reqGet('getDictDataPage', {
        dictType: 'wms_material_return_type'
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            returnMaterialTypeList.value = data?.list ?? []
          } else {
            uni.showToast({
              title: msg,
              icon: 'none',
              duration: 2000
            })
          }
        })
    })

    const handleNavigateTo = function(state, item) {
      switch (state) {
      case '退料单申请':
        uni.navigateTo({
          url: `/pages/workbranch/warehouse/returnMaterial/returnMaterialApplication?returnType=${item.value}`
        })
        break
      case '退料单签收':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/returnMaterial/returnMaterialSign'
        })
        break
      }
    }

    return {
      goHome,
      handleNavigateTo,
      returnMaterialTypeList
    }
  }
})
</script>

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

	.card-list-flexbox {
		margin-top: 100px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;

		.card {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 16px 0;

			.card-panel {
				width: 85px;
				height: 85px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 8px;
				box-shadow: 1px 1px 2px 3px #e9e9e9;

				text:nth-of-type(2) {
					margin-top: 4px;
					font-size: 12px;
					font-weight: bold;
					color: white;
				}
			}
		}

	}

	.font-icons {
		font-size: 36px;
		color: white;
	}
</style>
