<!--  -->
<template>
  <div class="chart-box">
    <!-- 筛选条件 -->
    <el-row>
      <!-- 搜索工作栏 -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
        <el-form-item label="日期" prop="readStatus">
          <el-select v-model="queryParams.readStatus" size="small" placeholder="请选择状态" clearable>
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="单据类型" prop="createTime">
          <el-date-picker v-model="queryParams.createTime" size="small" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 费用统计 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="12">
        <div class="out-box-tt">
          费用统计
        </div>
        <div class="out-box-bt account-box">
          <div class="item-box" v-for="(item,index) in accountList" :key="index">
            <div class="box-tt">{{item.tt}}</div>
            <div class="box-cr">
              CNY <span>{{item.m}}</span>
            </div>
            <div :class="index == 0 ? 'box-bt' : 'box-bt bt-none'">
              单据 <span>{{item.num}}</span> 笔
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="col">
        <div class="out-box-tt">
          按费用类型统计
        </div>
        <div class="out-box-bt">
          <RoundChart :chartData="chartData" />
        </div>
      </el-col>
    </el-row>
    <!-- 金额按月统计 -->
    <el-row>
      <el-col :span="24">
        <div class="out-box-tt">
          金额按月统计
        </div>
        <div class="out-box-bt">
          <LineChart :chartData="chartData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
    RoundChart: () => import('./RoundChart'),
    LineChart: () => import('./LineChart'),
  },
  data() {
    return {
      chartData: {},
      accountList: [
        {
          m: 747.80,
          num: 2,
          tt: '合计',
        },
        {
          tt: '流程中',
          m: 747.80,
          num: 2
        },
      ],
      value: new Date(),
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 我的站内信列表
      list: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        readStatus: null,
        createTime: []
      },
    }
  },


  computed: {},

  methods: {
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
  }
}

</script>
<style lang='scss' scoped>
.col {
  margin: 0px 5px;
}
.out-box-tt {
  background: #f7f7f7;
  box-sizing: border-box;
  padding: 10px;
  font-size: 13px;
}
.account-box {
  @extend .out-box-bt;
  height: calc(100% - 35px);
  display: flex;
  flex-direction: column;
  .item-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
.out-box-bt {
  .item-box {
    box-sizing: border-box;
    padding: 10px;
    font-size: 15px;
    .box-tt {
      margin-bottom: 10px;
      font-weight: 800;
    }
    .box-cr {
      color: #b6b6b6;
      margin-bottom: 10px;
      span {
        font-size: 20px;
        color: #0db90d;
      }
    }
    .box-bt {
      font-size: bold;
      border-bottom: 1px dotted #b6b6b6;
      padding-bottom: 10px;
      span {
        font-size: 20px;
      }
    }
    .bt-none {
      border: none;
    }
  }
}
</style>