<template>
  <div class="containe">
    <Search :navId="navId"></Search>
    <div class="contentWrap">
      <div class="top">
        <div class="title">{{ title }}</div>
        <div class="wrap">
          <Nav v-model:navList="navList" v-model:navActiveKey="navActiveKey" />
        </div>
      </div>
      <div class="goodsInfo">
        <div class="imgWrap">
          <div class="show">
            <img :src="changeImg" alt="" />
          </div>
          <ul class="goodsImgList">
            <li class="imgWrap" v-for="(item, index) in picList" @click="handleChangeImg(item)" :key="index">
              <img :src="item" alt="" />
            </li>
          </ul>
        </div>
        <div class="title">
          <p class="name">{{ goodsInfo?.name }}</p>
          <p class="remark">{{ goodsInfo?.remark }}</p>
          <div class="goodsNum"
            >套数： <a-input-number id="inputNumber" v-model:value="goodsNum" :min="0" @change="handleChangeGoodsNum"
          /></div>
          <p class="pageRemark">{{ goodsInfo?.pageRemark }}</p>
        </div>
      </div>
      <div class="productList">
        <p class="title">产品明细列表</p>
        <a-table :dataSource="productList" :columns="columns" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'quantity'">
              <a-input-number v-model:value="record.quantity" :min="0" :disabled="isKIT" />
            </template>
          </template>
        </a-table>

        <div class="shoppingBtn">
          <a-button type="primary" danger size="large" @click="handleGoShoppingCart">
            <template #icon>
              <shopping-cart-outlined />
            </template>
            加入购物车
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, computed, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import { useNavTree } from '/@/hooks/myhooks/index';
  import * as GoodsApi from '/@/api/product/goodsApi';
  import { toNumber, cloneDeep } from 'lodash';
  import Search from '../components/search.vue';
  import Nav from '../components/nav.vue';
  import { DataItem } from '/@/views/product/goods-category/type';
  import { Goods } from '/@/api/model/goods';
  import { Product } from '/@/api/model/product';
  import { columns } from './schema';
  import { ShoppingCartOutlined } from '@ant-design/icons-vue';
  import { useShoppingStoreWithOut } from '/@/store/modules/store';
  import { message } from 'ant-design-vue';
  import * as CartApi from '/@/api/order/cartApi';

  const route = useRoute();
  const navTree = useNavTree();
  const shoppingStore = useShoppingStoreWithOut();

  const query = route.query;
  const navId = toNumber(query.nav); // 一级选择id
  const goodsId = toNumber(query.goods); // 商品id
  const navList = ref<DataItem[]>([]); // 菜单树
  const navActiveKey = ref(navId); // 一级标签选择
  const title = ref(''); // 标题名称
  const goodsInfo = ref<Goods>(); // 商品信息
  const picList = ref<string[]>([]); // 图片列表
  const changeImg = ref(''); // 选择查看的图片地址
  const goodsNum = ref(0); // 选择套件数
  const productList = ref<Array<Product>>([]); // 产品列表

  const getGrandsonList = (arr: DataItem[]) => {
    arr.some((item) => {
      if (item.id === navId) {
        title.value = item.name;
        return true;
      }
    });
  };

  // 获取商品信息
  const getGoodsInfo = () => {
    GoodsApi.getById(goodsId).then((res) => {
      goodsInfo.value = res;
      if (res.productList) {
        if (isPRODUCT.value) {
          res.productList.forEach((item) => {
            item.quantity = 0;
          });
        } else if (isKIT.value) {
          res.productList.forEach((item) => {
            item.basicQuantity = item.quantity;
            item.quantity = 0;
          });
        }

        productList.value = res.productList;
      }

      if (res.pic) {
        picList.value = res.pic.split(',');
        changeImg.value = picList.value[0];
      }

      // echo();
    });
  };

  // 选择展示的图片
  const handleChangeImg = (url) => {
    changeImg.value = url;
  };

  // 选择套数
  const handleChangeGoodsNum = (num) => {
    if (isPRODUCT.value) {
      productList.value.forEach((item) => {
        item.quantity = num;
      });
    } else if (isKIT.value) {
      productList.value.forEach((item) => {
        item.quantity = num * item.basicQuantity;
      });
    }
  };

  // 加入购物车
  const handleGoShoppingCart = () => {
    const goods = cloneDeep(goodsInfo.value);
    if (goods) {
      goods.pic = picList.value[0];
      goods.uuid = goods.id + '';
    } else {
      return;
    }

    if (isKIT.value) {
      if (goodsNum.value === 0) {
        return message.warning('请填写套件数量!');
      }

      goods.cartProductDetailList = goods.productList;
      goods.quantity = goodsNum.value;
    } else if (isPRODUCT.value) {
      let flag = true;

      const list = <any[]>[];
      productList.value.forEach((item) => {
        if (item.quantity > 0) {
          list.push(item);
          flag = false;
        }
      });

      if (flag) return message.warning('请填写产品数量!');

      goods.cartProductDetailList = list;
      goods.quantity = 1;
    }

    goods.goodsId = goods.id;
    goods.lineThirdId = navActiveKey.value;

    CartApi.add(goods).then(() => {
      message.success('添加成功');
      shoppingStore.refresh();
    });
  };

  // 回显
  // const echo = () => {
  //   if (isKIT.value) {
  //     shoppingStore.shoppingCart.some((item) => {
  //       if (goodsInfo.value && item.id === goodsInfo.value.id) {
  //         item.productList.forEach((shoppingProduct) => {
  //           productList.value.some((product) => {
  //             if (shoppingProduct.id === product.id) {
  //               product.quantity = shoppingProduct.quantity;
  //               return true;
  //             }
  //           });
  //         });
  //         goodsNum.value = item.quantity;
  //         return true;
  //       }
  //     });
  //   }
  // };

  //是否是套件
  const isKIT = computed(() => goodsInfo.value?.goodsType === 'KIT');

  const isPRODUCT = computed(() => goodsInfo.value?.goodsType === 'PRODUCT');

  onMounted(() => {
    navTree(navList, getGrandsonList, 'getGrandsonList');
    getGoodsInfo();
  });
</script>

<style scoped lang="less">
  p {
    margin: 0;
    padding: 0;
  }
  .containe {
    padding: 30px;
    .contentWrap {
      padding: 30px;
      background: #fff;
      border-radius: 10px;
      max-width: 1400px;
      min-width: 1200px;
      margin: 0 auto;

      .top {
        display: flex;
        justify-content: space-between;

        .title {
          width: 25%;
          background: #f7f9fa;
          color: #1890ff;
          border-radius: 10px;
          text-align: center;
          height: 50px;
          padding: 5px;
          line-height: 40px;
          font-size: 20px;
        }

        .wrap {
          width: 73%;
          margin: 0;
        }
      }

      .goodsInfo {
        padding: 20px 100px 20px 100px;
        display: flex;
        justify-content: flex-start;
        .imgWrap {
          margin-right: 30px;
          .show {
            width: 400px;
            height: 400px;
            border: 1px solid #eee;
            position: relative;

            img {
              width: 400px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }

          .goodsImgList {
            margin-top: 20px;
            display: flex;
            justify-content: flex-start;
            .imgWrap {
              width: 70px;
              height: 70px;
              border: 1px solid #eee;
              position: relative;
              margin-right: 10px;
              cursor: pointer;

              img {
                width: 70px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
        }

        .title {
          .name {
            font-size: 26px;
            font-weight: 600;
          }

          .remark {
            font-size: 20px;
            color: red;
          }

          .goodsNum {
            margin-top: 180px;
            margin-bottom: 50px;
          }

          .pageRemark {
            font-size: 18px;
            color: red;
          }
        }
      }

      .productList {
        padding: 10px 100px 50px 100px;

        .title {
          font-size: 20px;
          margin-bottom: 20px;
        }

        .shoppingBtn {
          margin-top: 20px;
          text-align: right;
        }
      }
    }
  }
</style>
