<template>
  <div class="app-container home flex flex-v">
    <!-- <span>首页</span> -->
   <!-- <el-input
      class="input"
      v-model="keyword"
      placeholder="请输入项目名称"
    >
      <template #suffix>
        <el-icon class="el-input__icon"><Search /></el-icon>
      </template>
    </el-input> -->
    <!-- <div class="legend">
      <el-radio-group class="legend-group" v-model="legendInfo.curType">
        <el-radio
          :label="item.value"
          v-for="item in legendInfo.list"
          class="legend-item"
        >{{ item.name }}</el-radio>
      </el-radio-group>
    </div> -->
    <!-- <chart :title="curLegend.name" :data="chartData" /> -->
    <!-- <div id="map"></div> -->
    <!-- <el-dialog
      v-model="rationalityData.visible"
      title="项目合理性"
      :close-on-click-modal="false"
      width="85%"
    >
      <rationality />
    </el-dialog> -->
    <!-- <el-dialog
      v-model="evaluateData.visible"
      title="项目工程评估控制项"
      :close-on-click-modal="false"
      width="70%"
    >
      <evaluate />
    </el-dialog>  -->
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import chart from './home/chart.vue'
import rationality from './home/rationality'
import evaluate from './home/evaluate'
const keyword = ref('')
const legendInfo = reactive({
  list: [
    {
      name: '年径流总量控制率',
      value: 1
    },
    {
      name: '年径流总量污染控制率',
      value: 2
    },
    {
      name: '硬质地面率',
      value: 3
    },
    {
      name: '处置客水',
      value: 4
    },
    {
      name: '投资产出比',
      value: 5
    },
    {
      name: '分布合理性',
      value: 6
    },
    {
      name: '竖向合理性',
      value: 7
    },
    {
      name: '项目评估',
      value: 8
    }
  ],
  curType: 1
})
const curLegend = computed(() => {
  return legendInfo.list.find((item) => item.value === legendInfo.curType) || {}
})
const chartData = ref([
  {
    name: '优',
    value: 70
  },
  {
    name: '良',
    value: 50
  },
  {
    name: '中',
    value: 49
  },
  {
    name: '差',
    value: 55
  },
])
const rationalityData = reactive({
  visible: false
})
const evaluateData = reactive({
  visible: true
})
</script>

<style scoped lang="scss">
.home {
  height: 100%;
  background: #f5f7fe;
  position: relative;
  .height290 {
    height: 290px;
  }

  .margin-bottom20 {
    margin-bottom: 20px;
  }
  .margin-right20 {
    margin-right: 20px;
  }

  .content-bottom {
    height: calc(100vh - 595px);
  }

  .input {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 300px;
    z-index: 10;
    .el-input__icon {
      cursor: pointer;
    }
  }

  .legend {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 10;
    padding: 15px 20px 5px 15px;
    background-color: #fff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
    border-radius: 8px;
    .legend-group {
      display: block;
      .legend-item {
        display: block;
        margin-right: 0;
      }
    }
  }

  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    // background-color: gray
    z-index: 1;
  }
}
</style>