<!--
 * @Date: 2024-07-23 10:50:38
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-07-29 10:58:37
 * @FilePath: /temple_material_request/src/views/material_list.vue
 * @Description: 物资情况页面
-->
<template>
  <div class="material-list-page">
    <van-tabs v-model:active="active" @change="onChange" sticky :color="styleColor.baseColor">
      <van-tab v-for="(item, index) in tabList" :title="item.dept_name" shrink>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="item in list" :key="item" class="material-list-item">
            <van-row>
              <van-col span="14">
                <div class="item-title van-ellipsis" :style="{ color: styleColor.baseColor }" @click="onClickTitle(item)">{{ item.product_name }} / {{ item.spec }}</div>
                <div class="item-attr">
                  <div v-for="(x, index) in item.order_list" :key="index">
                    申领人:{{ x.contact_name }}&nbsp;{{ x.use_time }}&nbsp;使用
                  </div>
                </div>
              </van-col>
              <van-col span="5">
                <div class="item-num-title">申请数量</div>
                <div class="item-num van-ellipsis">{{ item.total_apply_number }}&nbsp;{{ item.spec }}</div>
              </van-col>
              <van-col span="5">
                <div class="item-num-title">实际领用</div>
                <div v-if="item.total_number" class="item-num van-ellipsis">{{ item.total_number }}&nbsp;{{ item.spec }}</div>
              </van-col>
            </van-row>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
    <van-empty v-if="!tabList.length" image="error" description="物资情况列表为空" />
    <div style="height: 4rem;"></div>
    <div style="position: fixed; left: 0; right: 0; bottom: 0; padding: 1rem; background-color: white; box-shadow: 0rem -0.33rem 0.33rem 0.08rem rgba(0,0,0,0.06);">
      <van-button @click="onClickRequest" type="primary" block :color="styleColor.baseColor">我要申领</van-button>
    </div>
  </div>

  <material-detail :show="show_material_detail" :good-id="material_id" @close="onCloseDetail"></material-detail>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showDialog } from 'vant';
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { styleColor } from "@/constant.js";
import materialDetail from '@/components/materialDetail/index.vue';
import { getActivityDeptsAPI, getGoodUseListAPI } from "@/api/material";

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

// form_id=799652&i=801234&c=35697
const activity_id = $route.query.activity_id ? $route.query.activity_id : '';
const form_id = $route.query.form_id ? $route.query.form_id : '';
const client_id = $route.query.client_id ? $route.query.client_id : '';

const dept_id = ref('');

onMounted(async () => {
  const { data, code } = await getActivityDeptsAPI({ activity_id, is_previous: 0, only_my_dept: 0 });
  if (code) {
    tabList.value = data;
    if (tabList.value.length) { // 默认选中组别ID
      dept_id.value = tabList.value[0]['dept_id'];
    } else { // 组别为空时跳转到申领物资页面
      // 跳转申领物资页面
      $router.push({
          path: '/material_request',
          query: {
            activity_id,
            form_id,
            client_id
          }
        })
    }
  }
});

// 切换组别模块
const active = ref(0);
const tabList = ref([]); // 组别列表
const onChange = async (index) => { // 切换组别回调
  dept_id.value = tabList.value[index]['dept_id'];
  // 重置物资列表
  limit.value = 20;
  offset.value = 0;
  loading.value = false;
  finished.value = false;
  list.value = [];
}

// 物资列表模块
const limit = ref(20);
const offset = ref(0);
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = async () => {
  // 异步更新数据
  const { code, data } = await getGoodUseListAPI({ activity_id, dept_id: dept_id.value, is_previous: 0, offset: offset.value, limit: limit.value });
  if (code) {
    list.value = _.concat(list.value, data);
    list.value = _.uniqBy(list.value, 'good_id');
    offset.value = list.value.length;
    loading.value = false;
    // 数据全部加载完成
    if (!data.length) {
      // 加载状态结束
      finished.value = true;
    }
  }
};

const material_id = ref('');
const onClickTitle = (item) => { // 点击物资标题回调
  show_material_detail.value = true;
  material_id.value = item.good_id;
}

const show_material_detail = ref(false);
const onCloseDetail = () => { // 关闭物资详情回调
  show_material_detail.value = false;
}

const onClickRequest = () => { // 我要申领物资
  // 上一次申领物资列表
  $router.push({
    path: '/material_request',
    query: {
      activity_id,
      form_id,
      client_id
    }
  });
}
</script>

<style lang="less" scoped>
.material-list-page {
  position: relative;
  .material-list-item {
    padding: 1rem;
    border-top: 1px solid #F5F5F5;
    .item-title {
      font-size: 1rem;
      text-decoration: underline;
      margin-bottom: 0.5rem;
    }
    .item-attr {
      font-size: 0.8rem;
      color: #8F8F8F;
    }
    .item-num-title {
      font-size: 0.85rem;
      color: #8F8F8F;
      text-align: center;
      margin-bottom: 0.5rem;
    }
    .item-num {
      font-size: 0.95rem;
      text-align: center;
    }
  }
}
</style>