<template>
  <div class="ywsq">
    <div class="ywsq-left">
      <el-card class="box-card" v-for="(item, index) in leftList" :key="index">
        <div class="item-title" @click="handleTitle(item)">{{ item.title }}</div>
        <el-collapse-transition>
          <ul class="item-list" v-show="item.open">
            <li v-for="(obj, key) in item.list" :key="key" @click="handleList(item.list, obj)"
              :class="obj.select ? 'active' : ''">{{ obj.name }}</li>
          </ul>
        </el-collapse-transition>
      </el-card>
    </div>

    <!-- right -->
    <div class="ywsq-right">
      <div class="right-type el-card box-card is-always-shadow">
        <div class="right-title">登记类型</div>
        <ul class="type-content">
          <li v-for="(item, index) in typeList" :key="index">{{ item.name }}</li>
        </ul>
      </div>
      <div class="right-situation el-card box-card is-always-shadow">
        <div class="right-title">登记情形</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      leftList: [
        {
          title: '常办业务',
          open: true,
          list: [
            {
              name: '国有建设用地使用权',
              select: false
            }
          ]
        },
        {
          title: '一并申请',
          open: false,
          list: [
            {
              name: '国有建设用地使用权',
              select: false
            },
            {
              name: '国有建设用地使用权/房屋所有权',
              select: false
            }
          ]
        },
        {
          title: '业务申请',
          open: false,
          list: [
            {
              name: '国有建设用地使用权',
              select: false
            },
            {
              name: '国有建设用地使用权/房屋所有权',
              select: false
            },
            {
              name: '宅基地使用权',
              select: false
            },
            {
              name: '宅基地使用权/房屋所有权',
              select: false
            },
            {
              name: '集体建设用地使用权',
              select: false
            },
            {
              name: '集体建设用地使用权/房屋所有权',
              select: false
            }
          ]
        }
      ],
      typeList: [
        {
          name: '首次登记',
        },
        {
          name: '转移登记',
        },
        {
          name: '变更登记',
        },
        {
          name: '注销登记'
        }
      ],
      situationList: [
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
        },
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
        },
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
        },
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
        },
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
        }
      ]
    }
  },
  methods: {
    handleList (list, obj) {
      list.forEach(item => {
        item.select = false
      });
      obj.select = true
    },
    handleTitle (obj) {
      this.leftList.forEach(item => {
        item.open = false
      })
      obj.open = true
    },
  }
}
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
@import './index.scss';
</style>