<template>
  <div
    class="collapse-wrap"
    :class="{'no-child':arr.children.length===0}"
  >
    <Collapse
      accordion
      v-model="current"
    >
      <Panel :name="arr.data.id">
        {{ arr.data.name }}
        <div slot="content">
          <el-form inline>
            <el-form-item label="开放时段">
              {{ arr.data.open_starttime }} - {{ arr.data.open_endtime }}
            </el-form-item>

            <el-form-item label="开放状态">
              <el-switch
                v-model="arr.data.isOpen"
                :inactive-value="0"
                :active-value="1"
              >
              </el-switch>
              <span>{{ arr.data.isOpen?'开放':'关闭' }}</span>
            </el-form-item>

            <el-form-item label="每日最大检票次数">
              {{ arr.data.day_check_limit }}
            </el-form-item>
          </el-form>

          <TreePanel
            v-for="item in arr.children"
            :key="item.data.id"
            :arr="item"
          ></TreePanel>
        </div>
      </Panel>
    </Collapse>
  </div>
</template>

<script>
import { Collapse, Panel } from 'iview'
import '@/assets/css/collapse.scss'

export default {
  name: 'TreePanel',
  components: {
    Collapse,
    Panel
  },
  data () {
    return {
      current: ''
    }
  },
  props: {
    arr: {
      type: Object,
      default: () => {}
    },
    keyId: {
      type: String,
      default: ''
    }
  },
  mounted () {
    this.current = this.arr.data.id
  }
}
</script>

<style lang="scss" scoped>
.collapse-wrap {
  margin-bottom: 20px;
  .collapse-wrap:last-child {
    margin: 0;
  }
}

</style>

<style lang="scss">
.collapse-wrap {
  .el-form-item {
     width: 33%; margin-right: 0;
  }
  &.no-child{
      .el-form-item {
          margin-bottom: 0;
      }
  }
}
</style>
