<template>
  <div class="all-box cube-common-box">
    <p>多卡片样式1 </p>
    <div class="card-box">
      <div class="ul-box">
        <template v-for="(item,index) in 5">
          <cube-card :dataBody="data1.body" :dataHeaders="data1.headers" :params="params1" :key="index"></cube-card>
        </template>
      </div>
    </div>
    <p>多卡片样式2</p>
    <div class="card-box">
      <div class="ul-box">
        <template v-for="(item,index) in 7">
          <cube-card :dataBody="data5.body" :dataHeaders="data5.headers" :params="params5" :key="index+'a'"></cube-card>
        </template>
      </div>
    </div>
    <p>单卡片</p>
    <cube-card :dataBody="data1.body" :dataHeaders="data1.headers"></cube-card>
    <p>进度条</p>
    <cube-progress :dataBody="data2.body" :dataHeaders="data2.headers" :params="params2"></cube-progress>
    <p>进度条默认参数</p>
    <cube-progress :dataBody="data2.body" :dataHeaders="data2.headers"></cube-progress>
    <p>表格</p>
    <cube-table :dataBody="data3.body" :dataHeaders="data3.headers" :params="params3" :drill="drill" @sendDrillName="getDrillName"></cube-table>
    <p>表格默认参数</p>
    <cube-table :dataBody="data3.body" :dataHeaders="data3.headers" @sendDrillName="getDrillName"></cube-table>
    <p>Echarts</p>
    <div v-if="JSON.stringify(data6)!='{}'">
      <cube-echart v-if="data6.body.length" :dataBody="data6.body" :dataHeaders="data6.headers" :params="params6"></cube-echart>
    </div>
    <p>卡片联动</p>
    <cube-link-card :dataList="dataList"></cube-link-card>
    <p>排行榜</p>
    <cube-rank :dataBody="data4.body" :dataHeaders="data4.headers" :params="params4"></cube-rank>
    <p>排行榜默认参数</p>
    <cube-rank :dataBody="data4.body" :dataHeaders="data4.headers"></cube-rank>

  </div>
</template>
<script>
export default {
  data() {
    return {
      data1: {},
      params1: '{}',
      data2: {},
      params2: '{}',
      data3: {},
      params3: '{}',
      data4: {},
      params4: '{}',
      data5: {},
      headers5: {},
      params5: '',
      data6: {},
      params6: '{}',
      dataList: [[], []],
      drill: [{
        "dimension": "区域", "exclude": ["总公司", "华中"]
      }]

    }
  },
  mounted() {
    this.ajax(1, { ids: 2898 }, { id: 2373 })  //编辑id + 源id
    this.ajax(2, { ids: 2893 }, { id: 943 })
    this.ajax(3, { ids: 2894 }, { id: 2786 })
    this.ajax(4, { ids: 2895 }, { id: 2737 })
    this.ajax(5, { ids: 2896 }, { id: 2373 })
    this.ajax(6, { ids: 2878 }, { id: 2849 })

    this.template(2869, 2847).then(obj => {
      this.dataList[0].push(obj)
    });
    this.template(2881, 2849).then(obj => {
      this.dataList[0].push(obj)
    });
    this.template(2878, 2849).then(obj => {
      this.dataList[1].push(obj)
    });
    this.template(2877, 2848).then(obj => {
      this.dataList[1].push(obj)
    });

  },
  methods: {
    ajax(index, editObj, sourceObj) {
      this.$axios.get('chart', editObj).then((res) => {
        // this['params' + index] = JSON.parse(res.data.data.list[0].code);
        this['params' + index] = res.data.data.list[0].code;
      })
      this.$axios.post('running_result', sourceObj).then((res) => {
        this['data' + index] = res.data.data
      })
    },
    async template(cid, sid) {
      const chart = (await this.$axios.get('chart', { ids: cid })).data.data.list[0];
      const data = (await this.$axios.post('running_result', { id: sid })).data.data;
      return Object.assign({}, chart, data)
    },
    getDrillName(name) {
      console.log("下钻的名字:", name)
    }

  }

}
</script>
<style lang="scss" scoped>
p {
  font-size: 1.5em;
  font-weight: bold;
  color: royalblue;
}
.ul-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1em;
}
</style>
