<template>
  <div class="dashboard-editor-container">
    <div class="mtitle">
      <span style="font-size: 19px">欢迎使用，{{ user.nickName }}</span>
      <iframe
        allowtransparency="true"
        frameborder="0"
        width="180"
        height="36"
        scrolling="no"
        style="padding-top: 10px"
        src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=2&bd=0&k=&f=#545555&ltf=#545555&htf=ffffff&q=1&e=1&a=1&c=72036&w=180&h=36&align=center"
      ></iframe>
    </div>
<!--    <panel-group :cdata="data.count" />
    <div class="chart-wrapper">
      <div class="pop" style="width: 100%">
        <div class="out" style="margin: 0px; margin-top: 5px">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">
                  <span>本年每月捐款金额统计</span>
                </div>
                <div class="years">
                  <div class="ctype">
                    <div class="year" :class="{ active: currentType == index }" @click="currentType = index" v-for="(item, index) in types" :key="index">{{ item.name }}</div>
                  </div>
                  <div class="year" :class="{ active: currentYear == index }" v-for="(item, index) in data.year" :key="index" @click="selectYear(index)">{{ item.year }}年</div>
                </div>
              </div>
              <BarChart :chartData="chartData" :type="types[currentType].value"></BarChart>
            </div>
          </div>
        </div>
      </div>
      <div class="pop" style="width: 50%; margin-top: 10px">
        <div class="out" style="margin: 0px">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">捐赠项目排名</div>
              </div>
              <el-table :data="rankingProject" border height="270">
                <el-table-column label="捐赠项目" align="left" prop="projectName" />
                <el-table-column label="累计捐赠次数" align="center" prop="nums" width="130" />
                <el-table-column label="累计捐赠(￥)" align="center" prop="money" width="150">
                  <template slot-scope="scope">{{ scope.row.money.toFixed(2) || 0 }} 元</template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="pop" style="width: 50%; margin-top: 10px">
        <div class="out" style="margin: 0px; margin-left: 10px">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">捐赠金额排名</div>
              </div>
              <el-table :data="rankingName" border height="270">
                <el-table-column label="捐赠者(单位/个人)" align="left" prop="projectName">
                  <template slot-scope="scope">{{ scope.row.NAME || '匿名' }}</template>
                </el-table-column>
                <el-table-column label="单笔捐赠(￥)" align="center" prop="money" width="150" />
                <el-table-column label="捐赠时间" align="center" prop="create_time" width="190" />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup';
import BarChart from './dashboard/BarChart';
import Vue from 'vue';
export default {
  name: 'Index',
  components: {
    PanelGroup,
    BarChart
  },
  data() {
    return {
      user: this.$store.state.user,
      currentYear: 0, //当前年份
      currentType: 0, //当前图表类型
      types: [
        { name: '柱状图', value: 'bar' },
        { name: '折线图', value: 'line' }
      ],
      data: { count: { total: 0 }, year: [] },
      chartData: [],
      rankingProject: [], //捐赠项目排名
      rankingName: [] //捐赠金额排名
    };
  },
  created() {
    //this.getData();
    //this.getRanking();
  },
  methods: {
    getData() {
      this.ajax({ url: '/home/index' }).then((response) => {
        this.data = response.data;
        this.currentYear = this.data.year.length - 1;
        this.getRecord();
      });
    },
    getRanking() {
      this.ajax({ url: '/home/ranking' }).then((response) => {
        this.rankingProject = response.data.rankingProject;
        this.rankingName = response.data.rankingName;
      });
    },
    getRecord() {
      this.ajax({ url: '/home/record', data: { year: this.data.year[this.currentYear].year } }).then((response) => {
        this.chartData = response.data;
      });
    },
    selectYear(index) {
      this.currentYear = index;
      this.getRecord();
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 15px 20px 0px 20px;
  .mtitle {
    margin-bottom: 20px;
    margin-top: -15px;
  }
  .chart-wrapper {
    margin-top: 8px;
    .pop {
      float: left;
      width: 33.33%;
      overflow: hidden;
      .out {
        margin: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
        .int {
          padding: 15px;
          background: #fff;
          overflow: hidden;
          border-radius: 5px;
        }
      }
    }
  }
  .bos {
    float: left;
    padding: 0px 10px 0px 10px;
    width: 100%;
    border: 0px;
    .years {
      float: right;
      margin-top: -30px;
      overflow: hidden;
      .ctype {
        float: left;
        margin-right: 30px;
      }
      .year {
        float: left;
        padding: 5px 10px;
        background-color: #f6f6f6;
        cursor: pointer;
        font-size: 14px;
        color: #545555;
        &.active {
          background-color: rgb(64, 158, 255);
          color: white;
        }
      }
    }
  }
}
</style>
