<script setup lang="ts">
import { ref } from 'vue'
import DzIcon from "@/components/svgIcon/main.vue";
import DzMoveWave from "@/components/moveWave/main.vue";
import DzButton from "@/components/button/main.vue";
import DzDashDevider from "@/components/dashDevider/main.vue";
import DzPercentChart from "@/components/percentChart/main.vue";
import DzSectionHeader from "@/components/sectionHeader/main.vue";
import DzSectionCard from "@/components/sectionCard/main.vue";
import DzStepLine from "@/components/stepLine/main.vue";
import DzMilestone from "@/components/milestone/main.vue";
import DzMileMap from "@/components/mileMap/main.vue";

defineProps({
  msg: String
})

let count = ref(0)
let chartData = ref([
  {title: '采矿权出让', num: 300, total: 1000, unit: '元', name: '36436' },
  {title: '铁矿出让收益', num: 400, total: 100, unit: '元', name: '36436' },
])
let legendData = ref([{title: '已缴'},{title: '应缴'}])
let curValue = ref(2021)
let curValue1 = ref([2021,1])
let curValue2 = ref(1)
let options = ref([2021, 2019, 2022])
let options1 = ref([[2021, 2019, 2022], [1,2,3]])
let options2 = ref([{value:1, label: '张森'}, {value:2, label: '网二'}])

let headerOptions = ref({options: [2021, 2019, 2022], modelValue: 2021, filter: true, filterType: "year"})
let stepLineData = ref([
  {date: 1660891510498, title: '111111', imgUrl: 'http://oss.zjgeobigdata.com/geo/fydk/ks/cn/%E6%B2%BB%E7%90%86%E5%89%8D.jpg', slotText: 'lalalal1'},
  {date: '2022-23-34', title: '2222', imgUrl: 'http://oss.zjgeobigdata.com/geo/fydk/ks/cn/%E6%B2%BB%E7%90%86%E5%89%8D.jpg', slotText: 'lalalal2'},
  {date: new Date(1650890510498), title: '33333', imgUrl: 'http://oss.zjgeobigdata.com/geo/fydk/ks/cn/%E6%B2%BB%E7%90%86%E5%89%8D.jpg', slotText: 'lalalal3'},
  {date: '你好', title: '33333', imgUrl: 'http://oss.zjgeobigdata.com/geo/fydk/ks/cn/%E6%B2%BB%E7%90%86%E5%89%8D.jpg', slotText: 'lalalal3'},
])

let mapData = ref([
  {arrows: ['right'], title: '473', value: 'fhhdf', unit: '个'},
  {arrows: ['right'], title: '473', value: 'fhhdf', unit: '个'},
  {arrows: ['bottom'], title: '473', value: 'fhhdf', unit: '个'},
])

let handleClick = (index: number)=> {
  console.log(index)
}

</script>

<template>
<div class="page-bg">
  <DzIcon name="#icon-smile-filling" :size="30" fill="blue"></DzIcon>
  <DzMoveWave color="yellow" title="11"></DzMoveWave>
  <div class="devider"><DzDashDevider></DzDashDevider></div>
  <!-- <div class="devider1"><DzDashDevider type="vertical"></DzDashDevider></div> -->
  <!-- <div class="devider2">
  <DzPercentChart :data="chartData" :legend="legendData"></DzPercentChart>
  </div>
  <div class="devider2">
    <DzSectionHeader v-model="curValue" :options="options" title="你好" filter filter-type="year"></DzSectionHeader>
  </div>
  <div class="devider2">
    <DzSectionHeader v-model="curValue1" :options="options1" title="你好" filter filter-type="yearMonth"></DzSectionHeader>
  </div>
  <div class="devider2">
    <DzSectionHeader v-model="curValue2" :options="options2" title="你好" filter></DzSectionHeader>
  </div>
  <div class="devider2">
    <DzSectionHeader title="你好">
      <DzIcon name="#icon-smile-filling" :size="30" fill="red" style="margin-right: 20px"></DzIcon>
    </DzSectionHeader>
  </div> -->

  <!-- <DzSectionCard label="你好" class="div1" locate="right">
  <div class="do1"></div>
</DzSectionCard> -->

  <!-- <DzSectionCard label="你好左" class="div2" :foldable="true" :header-options="headerOptions">
    <div class="do1"></div>
  </DzSectionCard> -->

  <!-- <DzStepLine :data="stepLineData" class="step-line-box">
    <template v-slot:default='step'>
    <div class="other-info">{{step.stepItem.slotText}}</div>
    </template>
  </DzStepLine> -->
  <!-- <div class="devider2">
    <DzMilestone :arrows="['right']"  title='立项'  value="你好"  unit="个" ></DzMilestone>
    <DzMilestone :arrows="['right']"  title='立项1'  value="你好1"  unit="个" ></DzMilestone>
    <DzMilestone :arrows="['bottom']"  title='立项2'  value="你好2"  unit="个" ></DzMilestone>
  </div>
  <div style=" margin-top: 8px; margin-bottom: 20px;">
    <DzMilestone  title='立项2'  value="你好2"  unit="个"></DzMilestone>
    <DzMilestone :arrows="['left']"  title='立项'  value="你好"  unit="个"></DzMilestone>
    <DzMilestone :arrows="['left']"  title='立项'  value="你好"  unit="个"></DzMilestone>
  </div>


  <div class="devider2">
    <DzMilestone  title='立项2'  value="你好2"  unit="个"></DzMilestone>
    <DzMilestone :arrows="['left']"  title='立项'  value="你好"  unit="个"></DzMilestone>
    <DzMilestone :arrows="['left']"  title='立项'  value="你好"  unit="个"></DzMilestone>
  </div>
  <div style="margin-top: 8px;display: flex;align-items: flex-end;">
    <DzMilestone :arrows="['right']"  title='立项'  value="你好"  unit="个" ></DzMilestone>
    <DzMilestone :arrows="['right']"  title='立项'  value="好1"  unit="个" ></DzMilestone>
    <DzMilestone :arrows="['top']"  title='立项2fghfdgfg'  value="好2"  unit="个" ></DzMilestone>
  </div> -->
  <DzMileMap :map-data="(mapData as any)" @click="handleClick"></DzMileMap>
  
</div>
</template>

<style scoped lang="less">

.page-bg {
  width: 100%;
  height: 1000px;
  margin: 0px;
  padding: 0px;
  background: @GRADIENT_SHADOW_INNER_BG;
}

a {
  color: #42b983;
}

.lala {
    width: 30px;
    height: 30px;
  }
  .devider {
    width: 300px;
    height: 100px;
  }

  .devider1 {
    height: 300px;
    width: 100px;
    
  }
  .devider2 {
    width: 400px;
    background: @GRADIENT_SHADOW_INNER_BG;
    // margin-top: 20px;
    // padding: 20px;
  }

  .div1 {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 300px;
  }

  .div2 {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 300px;
  }

  .do1 {
    height: 100px;
    width: 100px;
    background: red;
  }
  .other-info {
    margin-top: 10px;
    color: red;
    margin-bottom: 10px;
  }

  .step-line-box {
    width: 480px;
  }

  .step-stone {
    // background: red;
    // width: 300px;
  }

  :deep(.dz-milestone-container)  {
    width: 160px;
  }

</style>
