<template>
  <!-- 防汛物资 -->
  <div class="floodWZPage">
    <div class="partTitleHM">防汛物资</div>
    <div class="partContHM">
      <div class="scrollMapHM" @click="ChartBar3DClick">
        <ChartBar3D :refresh="refresh" :echartData="echartData"></ChartBar3D>
        <!-- <div class="scrollTitle flex">
          <p>物资储备地点</p>
          <p>物资详情</p>
          <p>负责人</p>
        </div>
        <Vue3SeamlessScroll :list="dataList" :singleHeight="50" :singleWaitTime="2000" :hover="true" class="scroll">
          <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
            <p class="ellipsis" :title="item.address">{{ item.address }}</p>
            <p class="ellipsis" :title="item.materialDetails">{{ item.materialDetails }}</p>
            <p class="ellipsis">{{ item.header }}<br />{{ item.headerPhone }}</p>
          </div>
        </Vue3SeamlessScroll> -->
      </div>
    </div>
    <el-dialog :title="title" v-model="open" width="1200px" append-to-body :close-on-click-modal="false">
      <el-table :data="dataList" v-loading="loading" stripe :max-height="620">
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column label="物资储备地点" prop="specificLocation" />
        <el-table-column label="具体位置" prop="address" />
        <el-table-column label="主要储备物资" prop="materialDetails" width="600" />
        <el-table-column label="负责人" prop="header" />
        <el-table-column label="联系方式" prop="headerPhone" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { FloodPreventionMaterialList } from '@/api/longoPeration/MaterialManagement';
import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

const { proxy } = getCurrentInstance();
const open = ref(false);
const title = ref('');
const dataList = ref([]);
const loading = ref(true);
const FormData = ref({});
const refresh = ref(1);
const echartData = ref({
  xAxis: ['车辆类', '泵类', '编织物料', '救生设备', '其他'],
  seriesData: [5, 35, 690, 86, 290],
});

/** 查询列表 */
const getList = async () => {
  loading.value = true;
  let res = await FloodPreventionMaterialList({});
  if (res && res.code == 200) {
    dataList.value = res.data || [];
    // console.log(dataList.value);
  }
  loading.value = false;
};
//图例点击事件
function ChartBar3DClick() {
  open.value = true;
  title.value = '查看物资管理';
  getList();
}

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.floodWZPage {
  width: 100%;
  .scrollMapHM {
    height: 270px;
    // background: red;
    p {
      width: 30%;
    }
    .scroll {
      height: 230px;
    }
  }
}
</style>