<template>
  <div>
    <Card style="width:100%;">
      <div class="config_meta">
        <p style="margin-bottom: 10px;">科室检测项目统计</p>
      </div>
      <Row>
        <!--查询条件-->
        <Col span="24">
          <Form id="search-form" :label-width="70" inline onsubmit="return false">
            <Form-item label="检测科室:">
              <Select v-model="formObj.groupId" name="groupId" style="width:150px" placeholder="请选择检测科室">
                <Option v-for="item in groupData" :value="item.id" :key="item.id">{{item.name}}</Option>
              </Select>
            </Form-item>
            <Form-item label="日期:">
              <DatePicker v-model="formObj.date" :editable="false" type="year"
                          style="width:90px"></DatePicker>
            </Form-item>
            <Form-item class="search-btn">
              <Button @click="_page" type="primary">搜索</Button>
            </Form-item>
          </Form>
        </Col>
        <!--内容-->
        <Col span="24" style="margin-bottom: -11px">
          <GroupItemBar ref="barModal"></GroupItemBar>
        </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
import { soilStatistics } from '../../api'
import GroupItemBar from './GroupItemBar'

export default {
  components: {
    GroupItemBar
  },
  data() {
    return {
      formObj: {
        date: new Date(),
        groupId: ''
      },
      groupData: []
    }
  },
  mounted() {
    this._page()
  },
  methods: {
    // 检测科室
    _page: async function() {
      const result = await soilStatistics.pageGroupExpStatistics()
      if (result) {
        console.log('bar', result)
        const obj = {
          mounth: [],
          num: []
        }
        for (let i = 0; i < result.records.length; i++) {
          obj.num.push(result.records[i].testCount)
          obj.mounth.push(result.records[i].testMonth)
        }
        this.$refs.barModal._openBar(obj)
      }
    }
  }
}
</script>
