<template>
  <div>
    <Row :gutter="12" class="ivu-mt">
      <Col :span="24" class="ivu-mb">
        <Card :bordered="false">
          <template #title>富文本测试（Word 粘贴）</template>
          <rich-editor v-model="editorTestHtml" :height="420" />
        </Card>
      </Col>
    </Row>
    <Row :gutter="12" class="ivu-mt">
      <!-- <Col :xxl="8" :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
        <div>
          <Row :gutter="12">
            <Col v-bind="grid" class="ivu-mb">
              <Card :bordered="false">
                <template #title>检测任务</template>
                <div class="stat">
                  <div class="icon">
                    <Icon type="md-speedometer" color="rgb(24, 144, 255)" />
                  </div>
                  <div class="content">
                    <div>
                      <Numeral value="85" format="0,0" v-font="30" />
                      <div class="value1">待分派</div>
                    </div>
                    <div>
                      <Numeral value="85" format="0,0" v-font="20" />
                      <div class="value2">已分派</div>
                    </div>
                  </div>
                </div>
              </Card>
            </Col>
            <Col v-bind="grid" class="ivu-mb">
              <Card :bordered="false">
                <template #title>原始记录</template>
                <div class="stat">
                  <div class="icon">
                    <Icon type="md-list-box" color="rgb(250, 173, 20)" />
                  </div>
                  <div class="content">
                    <div>
                      <Numeral value="85" format="0,0" v-font="30" />
                      <div class="value1">待分派</div>
                    </div>
                    <div>
                      <Numeral value="85" format="0,0" v-font="20" />
                      <div class="value2">已分派</div>
                    </div>
                  </div>
                </div>
              </Card>
            </Col>
            <Col v-bind="grid" class="ivu-mb">
              <Card :bordered="false">
                <template #title>检测报告</template>
                <div class="stat">
                  <div class="icon">
                    <Icon type="md-print" color="rgb(19, 194, 194)" />
                  </div>
                  <div class="content">
                    <div>
                      <Numeral value="85" format="0,0" v-font="30" />
                      <div class="value1">待分派</div>
                    </div>
                    <div>
                      <Numeral value="85" format="0,0" v-font="20" />
                      <div class="value2">已分派</div>
                    </div>
                  </div>
                </div>
              </Card>
            </Col>
            <Col v-bind="grid" class="ivu-mb">
              <Card :bordered="false">
                <template #title>检测样件</template>
                <div class="stat">
                  <div class="icon">
                    <Icon type="md-analytics" color="#b37feb" />
                  </div>
                  <div class="content">
                    <div>
                      <Numeral value="85" format="0,0" v-font="30" />
                      <div class="value1">待分派</div>
                    </div>
                    <div>
                      <Numeral value="85" format="0,0" v-font="20" />
                      <div class="value2">已分派</div>
                    </div>
                  </div>
                </div>
              </Card>
            </Col>
          </Row>
        </div>
      </Col> -->
      <Col :xl="10" :lg="8" :md="8" :sm="12" :xs="24">
        <notice-list />
      </Col>
      <Col :xl="6" :lg="8" :md="8" :sm="12" :xs="24">
        <shortcut />
      </Col>
    </Row>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import shortcut from '../../components/home/shortcut.vue';
  import noticeList from '../../components/home/notice-list.vue';
  import richEditor from '../../components/richEditor/index.vue';

  export default {
    name: 'home',
    mixins: [mixinPage],
    components: { noticeList, shortcut, richEditor },
    data() {
      return {
        editorTestHtml: '',
        grid: {
          xl: 12,
          lg: 12,
          md: 12,
          sm: 12,
          xs: 12
        }
      };
    },
    async mounted() {},
    methods: {}
  };
</script>

<style scoped>
  .stat {
    display: flex;
  }
  .stat .icon {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .stat .icon i {
    font-size: 64px;
  }

  .stat .content {
    width: 50%;
  }

  .stat .content .value1 {
    font-size: 12px;
    float: right;
    margin-top: 18px;
  }
  .stat .content .value2 {
    font-size: 12px;
    float: right;
    margin-top: 8px;
  }
</style>
