<template>
  <div class="ywsq">
    <div class="ywsq-left">
      <p v-for="(item, index) in leftList" @click="handleleftTitle(index)" :key="index"
        :class="{ 'active': n == index }">{{ item }}</p>
      <el-collapse disabled v-model="activeNames">
        <el-collapse-item title="业务申请" name="1">
          <ul class="item-list">
            <li v-for="(obj, key) in list" :key="key" @click="handleList(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" v-if="n == -1">
        <div class="right-title">登记类型</div>
        <ul class="type-content">
          <li :class="item.select ? 'active' : ''" @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 v-if="n >= 0">
          <div class="right-title">业务列表</div>
          <ul>
            <li v-for="(item, index) in busList" :key="index">
              <p>
                {{ item.name }}
              </p>
              <p :class="item.select ? 'active' : ''" @click="handleCollection(item)">
                <i class="el-icon-star-off" :class="item.select ? 'active' : ''"></i>
              </p>
            </li>
          </ul>
        </div>
        <div v-if="n == -1">
          <div class="right-title">登记情形</div>
          <ul>
            <li v-for="(item, index) in busList" :key="index">
              <p>
                {{ item.name }}
              </p>
              <p :class="item.select ? 'active' : ''" @click="handleCollection(item)">
                <i class="el-icon-star-off" :class="item.select ? 'active' : ''"></i>
              </p>
            </li>
          </ul>
        </div>
      </div>
      <div class="submit-button">
        <el-button type="primary">选择不动产信息</el-button>
      </div>
      <div class="right-btn">
        <el-button type="primary" @click="btnClick()">选择不动产信息</el-button>
      </div>
    </div>
    <choiceDialog v-model="isDialog" />
  </div>
</template>
<script>
  import choiceDialog from "./components/choiceDialog.vue"
export default {
  data () {
    return {
      n: -1,
      activeNames: ['1'],
      leftList: [
        '常办业务', '一并申请', '补申请',
      ],
      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
        }
      ],
      isDialog: false,
    }
  },
  components: {
    choiceDialog
  },
  methods: {
    handleleftTitle (index) {
      this.n = index
      this.list.forEach(item => {
        if (item.check) item.check = false
      })
    },
    handleList (list, obj) {
      list.forEach(item => {
        if (item.check) item.check = false
      })
      this.n = -1
      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)
    },
    // 选择不动产信息
    btnClick(){
      this.isDialog = true
    },
  }
}
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
@import './ywsq.scss';
</style>