<template>
  <div class="dashboard-editor-container">
    <top title="欢迎使用承揽时代企业端"></top>
    <div class="chart-wrapper">
      <div class="pop" style="width: 65%">
        <div class="out">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">账户信息</div>
              </div>
              <companyInfo :show="true"></companyInfo>
              <yrows :cdata="data" row="结算单"></yrows>
            </div>
          </div>
        </div>
        <div class="out">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">快捷菜单</div>
              </div>
              <yrows :cdata="data" row="快捷菜单"></yrows>
            </div>
          </div>
        </div>
        <div class="out">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">交易金额统计</div>
              </div>
              <div class="years">
                <el-date-picker class="dpicker" :clearable="false" v-model="year" type="year" value-format="yyyy" placeholder="请选择年份"></el-date-picker>
                <div class="year" :class="{ active: current == index }" @click="current = index" v-for="(item, index) in type" :key="index">{{ item.name }}</div>
              </div>
              <BarChart :chartData="chartData" height="270px"></BarChart>
            </div>
          </div>
        </div>
      </div>
      <!--通知消息-->
      <div class="pop" style="width: 35%">
        <div class="out mar0">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">通知消息</div>
              </div>
              <div class="noticeList" v-if="noticeList.length > 0">
                <div class="nitem" v-for="(item, index) in noticeList" :key="item.id" @click="op('noticeDetail', item)">
                  <div class="ntitle omit">{{ item.title }}</div>
                  <div class="ndate">{{ item.createTime.substring(5, 11) }}</div>
                </div>
              </div>
              <el-empty v-else description="暂无通知消息" :image-size="100"></el-empty>
            </div>
          </div>
        </div>
        <div class="out mar0">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">企业概览</div>
              </div>
              <yrows :cdata="data" row="企业概览"></yrows>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import noticeDetail from '@/views/work/notice/detail';
import top from '@/views/dashboard/top';
import yrows from '@/views/dashboard/yrows';
import BarChart from './dashboard/BarChart';
export default {
  components: {
    top,
    yrows,
    BarChart
  },
  data() {
    return {
      user: this.$store.state.user,
      noticeList: [],
      data: {},
      current: 0,
      chartData: [],
      year: this.util.getDate('year'),
      type: [
        { name: '充值金额', value: 0 },
        { name: '提现金额', value: 1 },
        { name: '发放金额', value: 2 }
      ]
    };
  },
  watch: {
    current(val) {
      this.getRecord();
    },
    year(val) {
      this.getRecord();
    }
  },
  created() {
    this.getData();
    this.getRecord();
  },
  methods: {
    getData() {
      this.ajax({ url: '/work/company/statistics' }).then((response) => {
        this.data = response.data;
      });
      this.ajax({ url: '/work/notice/queryList' }).then((response) => {
        this.noticeList = response.data;
      });
    },
    getRecord() {
      this.ajax({ url: '/work/company/statistics/chart', data: { year: this.year, type: this.current } }).then((response) => {
        this.chartData = response.data;
      });
    },
    op(tag, row) {
      if (tag == 'noticeDetail') {
        this.iframe({ obj: noticeDetail, param: { id: row.id }, title: row.title, width: '58%', height: '75%' });
        return;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.bos {
  border: 0px;
}
</style>
