<!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
 * @LastEditTime: 2024-05-17 10:34:51
 * @LastEditors: zhp
 * @Description:
-->

<template>
  <div class="stock-monitor">
    <MonitorItem :cities="['成都', '邯郸', '株洲', '瑞昌', '佳木斯']" :stockDOData="stockDOData" />
    <MonitorItem :cities="['凯盛光伏', '蚌埠兴科']" :stockDOData="stockDOData" />
  </div>
</template>

<script>
import MonitorItemVue from "./sub/monitor/MonitorItem.vue";

export default {
  name: "StockMonitor",
  components: { MonitorItem: MonitorItemVue },
  props: {
    stockDOData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      // dhgList: [
      //   { name: "总库存", value: 1000 },
      //   { name: "已用库存", value: 500 },
      //   { name: "剩余库存", value: 500 },
      // ],
      // otherList: [
      //   { name: "分类1", value: 1000 },
      //   { name: "分类2", value: 1000 },
      //   { name: "分类3", value: 1000 },
      //   { name: "分类4", value: 1000 },
      // ],
    };
  },
  computed: {
    dhgList() {
      console.log(this.stockDOData);
      // console.log()
    }
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.stock-monitor {
  flex: 1;
  display: flex;
  gap: 5px;
  position: relative;

  &:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, #00f2ff, transparent);
  }
}
</style>
