<template>
  <div class="ywsq">
    <div class="ywsq-left">
      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item :title="item.title" :name="index + 1" v-for="(item, index) in leftList" :key="index">
          <ul class="item-list">
            <li v-for="(obj, key) in item.list" :key="key" @click="handleList(item.list, obj)"
              :class="obj.check ? 'active' : ''">{{ obj.name }}</li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </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 :class="item.select ? 'cactive' : ''" @click="handleTypeSelect(item)" 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>
        <ul>
          <li v-for="(item, index) in busList" :key="index">
            <p>
              {{ item.name }}
            </p>
            <p :class="item.select ? 'cactive' : ''" @click="handleCollection(item)">
              <i class="el-icon-star-off" :class="item.select ? 'cactive' : ''"></i>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeNames: [1],
      leftList: [
        {
          title: '常办业务',
          list: [
            {
              name: '国有建设用地使用权',
            }
          ]
        },
        {
          title: '一并申请',
          list: [
            {
              name: '国有建设用地使用权',
            }
          ]
        },
        {
          title: '业务申请',
          list: [
            {
              name: '国有建设用地使用权',
            },
            {
              name: '国有建设用地使用权/房屋所有权',
            },
            {
              name: '宅基地使用权',
            },
            {
              name: '宅基地使用权/房屋所有权',
            },
            {
              name: '集体建设用地使用权',
            },
            {
              name: '集体建设用地使用权/房屋所有权',
            }
          ]
        }
      ],
      typeList: [
        {
          name: '首次登记',
        },
        {
          name: '转移登记',
        },
        {
          name: '变更登记',
        },
        {
          name: '注销登记'
        }
      ],
      situationList: [
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
        },
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
        },
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
        },
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
        },
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
        }
      ],
      busList: [
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
          select: false
        },
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
          select: false
        },
        {
          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
          select: false
        }
      ]
    }
  },
  methods: {
    handleList (list, obj) {
      list.forEach(item => {
        if (item.check) item.check = false
      })
      this.$set(obj, 'check', true)
    },
    handleCollection (item) {
      item.select = !item.select
    },
    handleTypeSelect (item) {
      this.typeList.forEach(item => {
        if (item.select) item.select = false
      })
      this.$set(item, 'select', true)
    }
  }
}
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
@import './ywsq.scss';
</style>