<!--
 * @Date: 2024-07-23 12:53:15
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-07-29 10:30:14
 * @FilePath: /temple_material_request/src/views/material_pre_request.vue
 * @Description: 待申领物资页面
-->
<template>
  <div class="material-pre-request-page">
    <div class="list-wrapper">
      <van-sticky>
        <van-row justify="space-between" class="select-all-item">
          <van-col span="8">
            <span v-if="model === 'edit'">
              <van-icon v-if="is_all_checked" @click="onCheckAll()" name="checked" size="1.25rem" :color="styleColor.baseColor" />
              <van-icon v-else name="passed" @click="onCheckAll()" size="1.25rem" />
              <span @click="onCheckAll()" :style="{ color: styleColor.baseColor }">&nbsp;&nbsp;全选</span>
            </span>
            <span v-else :style="{ color: styleColor.baseColor }">品项数: {{ sum_num }}</span>
          </van-col>
          <van-col span="16" :style="{ textAlign: 'right', fontSize: '0.85rem', color: styleColor.baseColor }">
            <span v-if="model !== 'edit'" @click="onClickEdit"><van-icon name="records-o" />&nbsp;编辑</span>
            <span v-else>
              <span @click="onClickDel"><van-icon name="delete-o" />&nbsp;删除</span>&nbsp;&nbsp;
              <span @click="onClickCancel"><van-icon name="close" />&nbsp;确认编辑</span>
            </span>
          </van-col>
        </van-row>
      </van-sticky>
      <div v-for="item in list" :id="item.good_id" :key="item" class="list-boxer">
        <van-row gutter="10" align="center" justify="space-between">
          <van-col span="16" style="display: flex;">
            <span v-if="item.edit">
              <van-icon v-if="item.checked" @click="onCheck(item)" name="checked" size="1.25rem" :color="styleColor.baseColor" />
              <van-icon v-else name="passed" @click="onCheck(item)" size="1.25rem" />&nbsp;&nbsp;
            </span>
            <div class="van-ellipsis" :style="{ color: styleColor.baseColor, textDecoration: 'underline' }" @click="onClickTitle(item)">
              {{ item.product_name }} / {{ item.spec }}
            </div>
          </van-col>
          <van-col v-if="item.edit" span="8" style="display: flex; align-items: center;">
            <van-field
              v-model="item.apply_number"
              style="border: 1px solid #f0f0f0; padding: 0; border-radius: 5px;"
              label=""
              label-width="0"
              input-align="center"
              placeholder="数量"
              type="number"
              @blur="onBlur(item)"
              @focus="onFocus(item)"
            >
              <template #left-icon></template>
            </van-field>&nbsp;&nbsp;<span style="font-size: 0.9rem; color: #666;">{{ item.spec }}</span>
          </van-col>
          <van-col v-else span="8" style="display: flex; align-items: center; justify-content: flex-end;">
            <span style="font-size: 0.9rem; color: #666;">{{ item.apply_number }}</span>&nbsp;&nbsp;<span style="font-size: 0.9rem; color: #666; display: inline-block; width: 1.25rem; text-align: right;">{{ item.spec }}</span>
          </van-col>
        </van-row>
        <div v-if="item.error" style="padding: 0.5rem 2rem 0 0; font-size: 0.85rem; color: red; text-align: right;">输入值有误</div>
      </div>
      <van-empty v-if="!list.length" image="error" description="待申领物资为空" />
      <div style="height: 10rem;"></div>
      <div style="position: fixed; left: 0; right: 0; bottom:4.5rem; padding: 1rem;">
        <van-button icon="plus" type="primary" :color="styleColor.baseColor" plain block :disabled="disabled_btn" @click="addMore">添加更多</van-button>
      </div>
    </div>
    <div class="control-bar">
      <!--  -->
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <div style="display: flex; align-items: center;" @click="showPicker = true">
          <div style="font-size: 0.85rem; color: #202020;">使用时间:</div>&nbsp;&nbsp;
          <div style="border: 1px solid #f0f0f0; border-radius: 5px; padding: 0.5rem 0.35rem 0.5rem 1rem; min-width: 6rem; font-size: 0.85rem; display: flex; align-items: center; justify-content: space-between;">{{ use_time }}&nbsp;&nbsp;<van-icon name="notes-o" size="1rem" :color="styleColor.baseColor"  /></div>
        </div>
        <div style="display: flex; align-items: center;">
          <van-button type="primary" :color="styleColor.baseColor" :disabled="disabled_btn" @click="onConfirmRequest">确定申领</van-button>
        </div>
      </div>
    </div>
  </div>

  <van-popup v-model:show="showPicker" position="bottom">
    <van-date-picker
      v-model="currentDate"
      title="日期选择"
      :min-date="minDate"
      :max-date="maxDate"
      :columns-type="columns_type"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>

  <van-dialog v-model:show="showType" title="" :show-cancel-button="false" :show-confirm-button="false">
    <div style="padding: 1.5rem 0 0; text-align: center; font-size: 0.95rem; font-weight: bold;">请确认您本次是为哪个组别申领物资</div>
    <div style="display: flex; align-items: center; padding: 1rem;">
      <!-- <div style="font-size: 0.9rem; margin-right: 1rem; width: 5rem;">申领组:&nbsp;&nbsp;</div> -->
      <div>
        <van-radio-group v-model="type_checked" direction="horizontal" style="font-size: 0.9rem;">
          <van-radio :name="item.dept_id" v-for="(item, index) in my_depts" :key="index" :checked-color="styleColor.baseColor" style="margin-bottom: 0.25rem;">{{ item.dept_name }}</van-radio>
        </van-radio-group>
      </div>
    </div>
    <div style="padding: 0 1rem;">
      <van-row gutter="10" align="center" style="margin-bottom: 0.5rem;">
        <van-col span="7" style="text-align: right;"><span style="color: red;">*</span>申领人:</van-col>
        <van-col span="17"><van-field v-model="contact_name" label="" placeholder="请输入" style="border: 1px solid #DBDBDB; padding: 0.25rem 1rem; border-radius: 5px;" /></van-col>
      </van-row>
      <van-row gutter="10" align="center" style="margin-bottom: 1rem;">
        <van-col span="7" style="text-align: right;"><span style="color: red;">*</span>联系电话:</van-col>
        <van-col span="17"><van-field v-model="contact_phone" label="" placeholder="请输入" type="tel" maxlength="11" style="border: 1px solid #DBDBDB; padding: 0.25rem 1rem; border-radius: 5px;" /></van-col>
      </van-row>
    </div>
    <van-row gutter="20" justify="space-around" align="center" style="padding: 1rem; border-top: 1px solid #E9E9E9; text-align: center;">
      <van-col span="12">
        <van-button plain block color="#A67939" @click="onDialogCancel">取消</van-button>
      </van-col>
      <van-col span="12">
        <van-button block color="#A67939" @click="onDialogConfirm">确定</van-button>
      </van-col>
    </van-row>
  </van-dialog>

  <choose-material :show="show_choose_material" @close="onCloseChoose"></choose-material>
  <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 { showToast, showConfirmDialog, 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 dayjs from "dayjs";
import chooseMaterial from '@/components/chooseMaterial/index.vue';
import materialDetail from '@/components/materialDetail/index.vue';
import { getCartListAPI, delCartAPI, myDeptsAPI, myUserAPI, editCartAPI, addUseOrderAPI } from "@/api/material";

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

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 disabled_btn = ref(false);

/**
 * 获取我的组别列表
 */
const my_depts = ref([]);
const getDeptsList = async () => {
  const { data, code } = await myDeptsAPI();
  if (code) {
    my_depts.value = data;
    if (data.length === 1) { // 默认选中第一个
      type_checked.value = data[0].dept_id;
    }
    if (!data.length) {
      showToast('您暂无组别无法申领物资');
      disabled_btn.value = true;
    }
  }
}

/**
 * 获取我的用户信息
 */
const getUserList = async () => {
  const { data, code } = await myUserAPI();
  if (code) {
    contact_name.value = data.name;
    contact_phone.value = data.mobile;
  }
}

/**
 * 购物车列表
 */
const getCartList = async () => {
  const { data, code } = await getCartListAPI({ activity_id });
  if (code) {
    list.value = data;
    list.value.forEach(item => {
      item.checked = false;
    })
    if (!list.value.length) { // 购物车为空
      // showDialog({
      //   title: '温馨提示',
      //   message: '物资列表为空，将前往添加！',
      //   confirmButtonColor: styleColor.baseColor
      // }).then(() => {
      //   show_choose_material.value = true;
      // });
      sum_num.value = list.value.length; // 品项数量
    } else {
      sum_num.value = list.value.length; // 品项数量
    }
  }
}

onMounted(async () => {
  // 获取列表
  getCartList();
  getDeptsList();
  getUserList();
  //
  minDate.value = new Date();
});

const is_all_checked = ref(false);

const sum_num = ref(0); // 品项的总数量
const model = ref(''); // 默认非编辑模式

const onClickEdit = () => { // 点击编辑
  model.value = 'edit';
  disabled_btn.value = true;
  list.value.forEach(item => {
    item.checked = false;
    item.error = false;
    item.edit = true;
  })
}
const onClickDel = () => { // 点击删除回调
  let shop_cart_list = [];
  // 把选中的值集合
  list.value
  .filter(item => item.checked)
  .forEach(item => {
    shop_cart_list = shop_cart_list.concat(item);
  });
  // 购物车为空提示
  if (!shop_cart_list.length) {
    showToast('删除项为空');
    return;
  }
  // 把选中的值集合
  let del_ids = shop_cart_list.map(item => item.good_id);
  // 删除接口
  showConfirmDialog({
    title: '温馨提示',
    message:
      `您是否需要删除这 ${del_ids.length} 项物资？`,
      confirmButtonColor: styleColor.baseColor,
  })
    .then(async () => {
      const { code, data } = await delCartAPI({ activity_id, good_ids: del_ids });
      if (code) {
        // 删除del_ids
        list.value = list.value.filter(item => !del_ids.includes(item.good_id));
        sum_num.value = list.value.length;
        if (!list.value.length) {
          // 还原列表显示
          onClickCancel();
        }
        //
        showToast('删除成功');
      }
    })
    .catch(() => {
      // on cancel
    });
}

const onClickCancel = () => { // 点击取消
  if (checkShoppingCart()) {
    model.value = '';
    disabled_btn.value = false;
    is_all_checked.value = false;
    list.value.forEach(item => {
      item.checked = false;
      item.error = false;
      item.edit = false;
    });
  } else {
    showToast('请检查输入项')
  }
}

const onCheckAll = () => {
  is_all_checked.value = !is_all_checked.value;
  if (is_all_checked.value) {
    list.value.forEach(item => {
      item.checked = true;
    })
  } else {
    list.value.forEach(item => {
      item.checked = false;
      item.error = false;
    })
  }
}

const onCheck = (item) => {
  item.checked = !item.checked;
  // 全部为选中
  let all_checked = list.value.every((item) => item.checked === true);
  if (all_checked) {
    is_all_checked.value = true;
  } else {
    is_all_checked.value = false;
  }
  // 如果取消选中，隐藏错误提示
  if (!item.checked) {
    item.error = false;
  }
}

const onBlur = async (item) => { // 输入框失去焦点回调
  if (item.apply_number === null || item.apply_number === '') {
    item.error = true;
  } else {
    // 输入框失去焦点，购物车更新数量
    item.error = false;
    const { code, data } = await editCartAPI({ activity_id, good_list: [{ good_id: item.good_id, apply_number: item.apply_number }] });
    if (code) {

    }
  }
}

const onFocus = (item) => {
  if (item.apply_number === '0') {
    item.apply_number = '';
  }
}

const list = ref([]);

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

const showPicker = ref(false);
const currentDate = ref([]);
const columns_type = ref(['year', 'month', 'day']);
const minDate = ref();
const maxDate = ref();
const use_time = ref('');

const onConfirm = ({ selectedValues, selectedOptions }) => {
  use_time.value = selectedValues.join("-");
  showPicker.value = false;
};

const addMore = () => { // 添加更多回调
  show_choose_material.value = true;
}

const shop_cart_list = ref([]); // 购物车列表

const checkShoppingCart = () => { // 检查购物车有效性
  let flag = true;
  // 校验购物车值
  let error_list = list.value.filter((item) => { if (item.apply_number === null || item.apply_number === '') { return item;} })
  if (error_list.length) {
    // 跳到第一个错误框
    scrollToSection(error_list[0].good_id);
    // 标记所有错误
    error_list.forEach(item => {
      item.error = true;
    });
    flag = false
    return;
  }
  return flag;
}

const onConfirmRequest = () => { // 确定申领回调
  if (!list.value.length) {
    showToast('请先添加申领物资');
    return;
  }
  if (!use_time.value) {
    showToast('请选择使用日期');
    return;
  }
  let sum = list.value.some((item) => { return +item.apply_number > 0  }); // 判断是否有一个值不等于0
  if (!sum) {
    showToast('请检查申领物资的数量');
    return;
  } else {
    showType.value = true;
  }
}

const scrollToSection = (id) => { // 滚动到指定位置
  const current_index = list.value.findIndex((item) => item.good_id === id);
  // 因为布局问题，需要滚动到上一个节点 查询上一个节点ID
  const previous_index = current_index - 2 >= 0 ? current_index - 2 : 0;
  nextTick(() => {
    let element = $('.list-wrapper').find(`#${list.value[previous_index]['good_id']}`);
    if (element[0]) {
      element[0].scrollIntoView({ behavior: 'smooth' });
    } else {
      console.log('Element with ID ' + id + ' not found.');
    }
  })
}

const showType = ref(false);
const type_checked = ref(''); // 组别
const contact_name = ref(''); // 申领人
const contact_phone = ref(''); // 联系电话
const onDialogConfirm = async () => {
  if (!type_checked.value) {
    showToast('请选择组别')
  } else if (!contact_name.value) {
    showToast('申领人不能为空')
  } else if (!contact_phone.value || !contact_phone.value.match(/^1[3456789]\d{9}$/)) {
    showToast('联系电话填写有误')
  } else {
    // 提交申领物资接口
    const { code, data } = await addUseOrderAPI({ activity_id, dept_id: type_checked.value, use_time: use_time.value, contact_name: contact_name.value, contact_phone: contact_phone.value });
    if (code) {
      showType.value = false;
      // 申领成功跳转
      $router.push({
        path: '/success',
        query: {
          activity_id,
          form_id,
          client_id
        }
      });
    }
  }
}
const onDialogCancel = () => {
  showType.value = false;
}

const show_choose_material = ref(false);
const onCloseChoose = async (sum) => { // 关闭选择物资弹窗回调
  show_choose_material.value = false;
  // 刷新购物车列表
  const { data, code } = await getCartListAPI({ activity_id });
  if (code) {
    list.value = data;
    list.value.forEach(item => {
      item.checked = false;
    });
    sum_num.value = list.value.length; // 品项数量
    if (sum_num.value) {
      onClickEdit(); // 打开编辑模式
    }
  }
  //
}

const show_material_detail = ref(false);
const onCloseDetail = () => { // 关闭物资详情窗口
  show_material_detail.value = false;
}
</script>

<style lang="less" scoped>
.material-pre-request-page {
  .list-wrapper {
    position: relative;
    width: 100%;
    .select-all-item {
      padding: 0.5rem 1rem;
      background-color: white;
      border-bottom: 1px solid #f0f0f0;
    }
    .list-boxer {
      margin: 0; padding: 1rem;
    }
  }

  .control-bar {
    display: flex; position: fixed; padding: 1rem 1.5rem; left: 0; right: 0; bottom: 0; background-color: white; width: calc(100% - 3rem);  box-shadow: 0rem -0.33rem 0.33rem 0.08rem rgba(0,0,0,0.06); display: flex; flex-direction: column;
  }
}

:deep(.van-picker__confirm) {
  color: #A67939;
}
</style>