<template>
  <div>
    <el-card class="!border-none mb-4" shadow="never">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
        <el-tab-pane label="待报价" name="tobe">
          <div class="flex mb-4">
            <el-button type="primary" @click="submit">提交报价</el-button>
          </div>
          <div
            class="quote-list"
            v-infinite-scroll="getLists(1)"
            :infinite-scroll-distance="1000"
            :infinite-scroll-delay="500"
            :infinite-scroll-immediate="false"
            style="overflow: auto"
          >
            <el-row :gutter="20" style="width: 100%">
              <el-col :span="8" v-for="(item, index) in list1" :key="index">
                <el-card>
                  <div class="flex justify-between">
                    <div>名称: {{ item.goods_name }}</div>
                    <div>
                      需求量:
                      <span style="color: #f56c6c">{{ item.need_num }}</span>
                      {{ item.unit_name }}
                    </div>
                  </div>
                  <div class="flex justify-between mt-4">
                    <div class="flex" style="align-items: center">
                      <span class="mr-2">提供数量: </span>
                      <el-input
                        v-model="item.nums"
                        placeholder="请输入可提供数量"
                        style="flex: 1"
                      ></el-input>
                    </div>
                    <div class="flex" style="align-items: center">
                      <span class="mr-2">产品报价: </span>
                      <el-input
                        v-model="item.price"
                        placeholder="请输入产品报价"
                        style="flex: 1"
                      ></el-input>
                    </div>
                  </div>
                  <div class="flex justify-end mt-4">
                    <div>
                      共 {{ item.nums }} {{ item.unit_name }} 合计
                      <span class="mx-1" style="color: #f56c6c">{{
                        (item.nums * item.price).toFixed(2)
                      }}</span>
                      元
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="报价记录" name="yet">
          <div
            class="quote-list not-btn"
            v-infinite-scroll="getLists(1)"
            :infinite-scroll-distance="1000"
            :infinite-scroll-delay="500"
            :infinite-scroll-immediate="false"
            style="overflow: auto"
          >
          <el-row :gutter="20" style="width: 100%;">
            <el-col :span="8" v-for="(item, index) in list2" :key="index">
              <el-card>
                <div class="flex justify-between">
                  <div>名称: {{ item.goods_name }}</div>
                  <div>
                    需求量:
                    <span style="color: #f56c6c">{{ item.need_num }}</span>
                    {{ item.unit_name }}
                  </div>
                </div>
                <div class="flex justify-between mt-4">
                  <div
                    class="flex"
                    style="align-items: center; position: relative"
                  >
                    <span class="mr-2">提供数量: </span>
                    <el-input
                      v-model="item.nums"
                      placeholder="请输入可提供数量"
                      style="flex: 1"
                      readonly
                    ></el-input>
                    <div
                      style="
                        position: absolute;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        width: 100px;
                      "
                    >
                      <el-image
                        v-if="item.is_adopt == 1"
                        src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/274ad202405111523222891.png"
                      ></el-image>
                      <el-image
                        v-else-if="item.is_adopt == 2"
                        src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/739c3202405071458553459.png"
                      ></el-image>
                      <el-image
                        v-else
                        src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/04c2c202405071501462462.png"
                      ></el-image>
                    </div>
                  </div>
                  <div class="flex" style="align-items: center">
                    <span class="mr-2">产品报价: </span>
                    <el-input
                      v-model="item.price"
                      placeholder="请输入产品报价"
                      style="flex: 1"
                      readonly
                    ></el-input>
                  </div>
                </div>
                <div class="flex justify-end mt-4">
                  <div>
                    共 {{ item.nums }} {{ item.unit_name }} 合计
                    <span class="mx-1" style="color: #f56c6c">{{
                      (item.nums * item.price).toFixed(2)
                    }}</span>
                    元
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          </div>
          
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="quoteOffer">
import { useRoute } from "vue-router";
import {
  opurchaseGoodsOfferListsApi,
  opurchaseGoodsOfferOfferApi,
} from "@/api/quote";

const route = useRoute();
const form = ref({});

const activeName = ref("tobe");
const activeMap = ref(
  new Map([
    ["detail", true],
    ["yet", false],
  ])
);
const tabChange = (type: any) => {
  if (type == "yet") {
    list2.value = [];
    getLists(2);
  } else {
    list1.value = [];
    getLists(1);
  }
};

const list1 = ref([]);
const list2 = ref([]);

const queryParams = reactive({
  date: route.query.date,
});

const getLists = (e = 1) => {
  opurchaseGoodsOfferListsApi({
    type: e,
    ...queryParams,
  }).then((res) => {
    if (e == 1) {
      list1.value = [...list1.value, ...res.lists];
    } else {
      list2.value = [...list2.value, ...res.lists];
    }
  });
};

getLists();

const submit = () => {
  let data = list1.value
    .filter((item) => {
      return +item.price && +item.nums;
    })
    .map((item: any) => {
      return {
        id: item.id,
        nums: item.nums,
        price: item.price,
      };
    });
  if (!data.length) return ElMessage.error("请先填写产品报价");
  opurchaseGoodsOfferOfferApi({
    data: data,
  }).then((res) => {
    getLists();
  });
};
</script>

<style scoped lang="scss">
.quote-list {
  height: calc(100vh - 300px);
  width: 100%;
}
.not-btn{
  height: calc(100vh - 252px);
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
  width: 0.315rem; /* 设置滚动条的宽度 */
}

/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置轨道的背景色 */
  margin: 1.25rem 0;
}

/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 设置滑块的背景色 */
  border-radius: 0.315rem; /* 设置滑块的圆角 */
}

/* 设置滚动条鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
}
</style>
