<template>
  <div class="app-container">
    <panel-group />
    <el-card style="margin-bottom: 32px">
      <div slot="header">
        <span>快捷功能</span>
      </div>
      <el-row :gutter="10">
        <el-col
          :xs="8"
          :sm="6"
          :xl="4"
          v-for="item in quickList"
          :key="item.id"
          class="pointer"
          style="margin-bottom: 20px; padding-top: 20px; text-align: center"
        >
          <router-link :to="item.path">
            <el-avatar
              :size="80"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            ></el-avatar>
            <div style="margin: 10px 0">{{ item.title }}</div>
          </router-link>
        </el-col>
      </el-row>
    </el-card>
    <el-row style="background: #fff">
      <el-card>
        <div slot="header">
          <span>数据统计</span>
        </div>
        <columnar-chart :chart-data="lineChartData" />
      </el-card>
    </el-row>
    <!-- <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <line-chart :chart-data="lineChartData" />
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";
import ColumnarChart from "./dashboard/ColumnarChart";

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    ColumnarChart,
  },
  data() {
    return {
      lineChartData: {
        expertData: [15, 45],
        patentData: [40, 30],
        achievementsData: [20, 45],
        demandData: [45, 40],
        dockingData: [15, 50],
      },
      quickList: [
        {
          title: "专家审核",
          path: "/examine/expertList",
        },
        {
          title: "企业审核",
          path: "/examine/enterpriseList",
        },
        {
          title: "机构审核",
          path: "/examine/researchList",
        },
        {
          title: "实验室审核",
          path: "/examine/laboratoryList",
        },
        {
          title: "经纪人审核",
          path: "/examine/agentList",
        },
        {
          title: "成果审核",
          path: "",
        },
        {
          title: "需求审核",
          path: "",
        },
        {
          title: "企业产品审核",
          path: "",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: rgb(255, 255, 255);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
