<!-- <template>
  <div id="app">
    <div class="bd-container">
      <mu-loading-block :is-text="isText" text="加载中...">
      </mu-loading-block>
      <mu-bd-card :titleIcon="titleIcon" title="公告" iconcolor="#39B6FF" :clickBtn="clickBtn" :isShowBtn="isShowBtn">
        <mu-bd-rolling-notice
          :card-list="rollingList"
          rollingtitle="系统公告"
          :click="clickRollingItem"
          notice-name="aaa"
        >
        </mu-bd-rolling-notice>
      </mu-bd-card>
      <mu-bd-card :titleIcon="titleIcon" title="公告" iconcolor="#39B6FF" :clickBtn="clickBtn" :isShowBtn="isShowBtn">
        <mu-bd-rolling-notice
          :card-list="rollingList"
          rollingtitle="系统公告"
          :click="clickRollingItem"
          noticeName="bbb"
        >
        </mu-bd-rolling-notice>
      </mu-bd-card>
      <mu-bd-card :titleIcon="titleIcon" title="调休假明细" iconcolor="#47D0E2" :clickBtn="clickBtn">
        <mu-bd-column-card
          :card-list="columnCardList"
        >
        </mu-bd-column-card>
      </mu-bd-card>
      <mu-bd-card :titleIcon="titleIcon" title="假期余额" iconcolor="#FF9500" :clickBtn="clickBtn">
        <mu-bd-crosswise-card
          :cardList="crosswiseCardList"
          :handleClick="handleClick"
        >
        </mu-bd-crosswise-card>
      </mu-bd-card>
      <mu-bd-card :titleIcon="titleIcon" title="假期余额" iconcolor="#FF9500" :clickBtn="clickBtn" :isShowBtn="isShowBtn">
        <mu-bd-card-empty
          type="error"
        >
        </mu-bd-card-empty>
      </mu-bd-card>
    </div>
  </div>
</template>

<script>
  import { BDCard,BDColumnCard,BDCrosswiseCard, BDRollingNotice ,BdCardEmpty} from 'muse-ui/builders';
  import loadingBlock from 'muse-ui/loading-block';
  export default {
    data(){
      return {
        titleIcon: 'upaas-icon-tiaoxiujia',
        isShowBtn: false,
        isText: true,
        rollingList: [
          {'title': '1111最新的公告，','type': 'sdss'},
          {'title': '22222最新的公告名字叫做知道不知道的差别，最新的公告名字叫做知道不知道的差别', 'type':'恭送恭送'},
          {'title': '，33333最新的公告','type':'送的'},
        ],
        columnCardList:[
          [
            {
              key: '有效期',
              value: '2017/12/30'
            },
            {
              key:'加班日期',
              value: '2017/12/30'
            },
            {
              key:'加班时长',
              value: '2'
            },
            {
              key: '调休假明细',
              value: '2017'
            },
            {
              key:'加班日期',
              value: '2017/12/30'
            },
            {
              key:'加班时长',
              value: '2017/12/30'
            },
          ],
          [
            {
              key: '调休假明细',
              value: '30'
            },
            {
              key:'加班日期',
              value: '2017/12/30'
            },
            {
              key:'加班时长',
              value: '2017/12/30'
            },
          ],
          [
            {
              key: '调休假余额',
              value: '0'
            },
            {
              key:'加班日期',
              value: '2017/12/30'
            },
            {
              key:'加班时长',
              value: '2017/12/30'
            },
          ]
        ],
        crosswiseCardList:[
            {
                "type": "休假项目9",
                "lastYearBalance": 0,
                "thisYearEnjoy": 66,
                "usedQuota": 0,
                "balance": 66
            },
            {
                "type": "休假项目4",
                "lastYearBalance": 0,
                "thisYearEnjoy": 2,
                "usedQuota": 0,
                "balance": 2
            },
            {
                "type": "休假项目5",
                "lastYearBalance": 0,
                "thisYearEnjoy": 2,
                "usedQuota": 0,
                "balance": 2
            },
        ],


      }
    },
    components: {
      'mu-bd-card': BDCard,
      'mu-bd-column-card': BDColumnCard,
      'mu-bd-crosswise-card': BDCrosswiseCard,
      'mu-bd-rolling-notice': BDRollingNotice,
      'mu-bd-card-empty':BdCardEmpty,
      'mu-loading-block': loadingBlock
    },
    mounted () {
    },
    methods: {
      handleClick(e) {
        console.log(e.target)

      },
      clickBtn() {
        console.log("clickBtn")
      },
      clickRollingItem(data) {
        alert(999)
        // alert(data);
      }
    },
  }
</script>
<style>
.bd-container{
  margin-top: 12px;
  background: #f3f4f5;
}
</style> -->
