<template>
  <div class="sensor-list">
    <Tabs v-model="curTab">
      <TabPane v-for="tab in Object.keys(dataSource)" :key="tab" :label="tab" :name="tab"/>
    </Tabs>
    <template v-if="curTab">
      <m-form v-for="item in dataSource[curTab]" :key="item.id" :title="item.addr" :label-width="6" :model="item" :layout="layout"/>
    </template>
  </div>
</template>

<script>
export default {
  name: 'SensorList',
  props: {
    data: {
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      curTab: null,
      layout: [
        {
          sensorType: {
            label: '传感器类型',
            width: 7,
          },
          sensorNo: {
            label: '传感器编号',
            width: 6,
          },
          _scene: {
            label: '场景类型',
            width: 6,
          },
          _status: {
            label: '状态',
            width: 5,
          },
        }
      ],
      dataSource: {},
    }
  },
  mounted() {
    this.$nextTick(this.init())
  },
  methods: {
    init() {
      const result = {}
      this.data.forEach(item => {
        if (!result[item._scene]) {
          result[item._scene] = []
        }
        result[item._scene].push(item)
      })
      this.curTab = Object.keys(result)[0]
      this.dataSource = result
    }
  },
}
</script>

<style lang="stylus">
$blue = #3391FF
.sensor-list
  .ivu-tabs-bar
    margin-bottom 0.5rem
    border-bottom .1rem solid $color-map()
  .ivu-tabs-nav
    .ivu-tabs-ink-bar
      background-color $edgeColor
    .ivu-tabs-tab
      font-size 1rem
      padding 0.3rem 0.5rem
      color $blue
      &.ivu-tabs-tab-active
        color #fff
        background $blue
</style>
