<template>
  <div class="ywsq" id="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.nodename }}</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.cselect ? 'cactive' : ''" @click="handleDjlxSelect(item)" v-for="(item, index) in djlxList"
            :key="index">
            <p>
              {{ item.nodename }}
            </p>
            <p v-if="item.sffqlc == 1" :class="item.userCollect == 1 ? 'active' : ''"
              @click.stop="handleCollection(item)">
              <i class="el-icon-star-off" :class="item.userCollect == 1 ? 'active' : ''"></i>
            </p>
          </li>
        </ul>
      </div>
      <div class="right-situation el-card box-card is-always-shadow">
        <div class="right-title">{{ obj[n] }}</div>
        <ul>
          <li v-for="(item, index) in itemList" :key="index" @click="handleSelectYw(item, ywList)"
            :class="item.cselect ? 'cactive' : ''">
            <p>
              {{ item.djywmc }}<br>
              {{ item.nodename }}
            </p>

            <p :class="item.userCollect == 1 ? 'active' : ''" @click.stop="handleCollection(item)">
              <i class="el-icon-star-off" :class="item.userCollect == 1 ? 'active' : ''"></i>
            </p>
          </li>
        </ul>
      </div>
      <div class="submit-button">
        <el-button type="primary" :disabled="btnDisabled" @click="bthSelectClick">选择不动产</el-button>
      </div>
    </div>
    <fqsqDialog v-model="isDialog" :djqxObj="djqxObj" :bsmSqyw="bsmSqyw" :djywbm="djywbm" />
  </div>
</template>
<script>
import fqsqDialog from "./slectBdc.vue"
import { getCollectBiz, getleftMenu, getNextNode, addCollectBiz, deleteCollectBiz } from "@/api/ywbl"
export default {
  data () {
    return {
      n: 0,
      activeNames: ['1'],
      leftList: [
        '常办业务', '一并申请', '登记簿补录',
      ],
      // 左侧列表
      list: [],
      djlxList: [],

      itemList: [],
      ywList: [],
      djqxList: [],
      obj: {
        '0': '常办业务列表',
        '-1': '登记情形'
      },
      isDialog: false,
      btnDisabled: true,
      djywbm: '',

      djqxObj: {
        djqxbm: '',
        djqxmc: ''
      },
      bsmSqyw: ''
    }
  },
  components: {
    fqsqDialog
  },
  created () {
    this.getDataList()
  },
  methods: {
    getDataList () {
      getCollectBiz().then(res => {
        let { result } = res
        this.ywList = result
        this.ywList.forEach(item => {
          this.$set(item, 'cselect', false)
          item.userCollect = 1
        })
        if (this.n == 0) {
          this.itemList = this.ywList
        }
      })
      getleftMenu().then(res => {
        let { result } = res
        this.list = result
      })
    },
    handleleftTitle (index) {
      this.n = index
      let obj = {
        '0': this.ywList
      }
      this.itemList = obj[this.n]
      this.list.forEach(item => {
        if (item.check) item.check = false
      })

    },
    // 业务-登记情形选择
    handleSelectYw (item, list) {
      list.forEach(item => {
        this.$set(item, 'cselect', false)
      })
      item.cselect = true
      this.djqxObj.djqxbm = item.nodecode
      this.djqxObj.djqxmc = item.djqxmc

      if (item.sffqlc == '1') {
        this.btnDisabled = false
        this.bsmSqyw = item.bsmSqyw
        this.djywbm = item.djywbm
      }
    },
    handleList (list, obj) {
      this.btnDisabled = true
      list.forEach(item => {
        if (item.check) item.check = false
      })
      this.n = -1
      this.$set(obj, 'check', true)
      this.getNextNode(obj.bsmSqyw)
      this.djqxList = []
      this.itemList = []
    },
    // 获取下个节点类型
    getNextNode (bsmSqyw, type = true) {
      getNextNode(bsmSqyw).then(res => {
        if (res.result.djqx) this.djqxList = res.result.djqx
        if (res.result.djlx) this.djlxList = res.result.djlx
        if (type) {
          this.djqxList.forEach(item => {
            this.$set(item, 'cselect', false)
          })
          this.djlxList.forEach(item => {
            this.$set(item, 'cselect', false)
          })
        }
        this.itemList = this.djqxList
      })
    },
    handleCollection (item) {
      let that = this
      if (item.userCollect == '2') {
        addCollectBiz(item.bsmSqyw).then(res => {
          if (res.code == 200) {
            item.userCollect = '1'
            that.$message({
              message: '收藏成功！',
              type: 'success'
            })
            that.getDataList()
          }
        })
      } else {
        this.$confirm('此操作将取消收藏, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCollectBiz(item.bsmSqyw).then(res => {
            if (res.code == 200) {
              item.userCollect = '2'
              that.$message({
                message: '取消收藏成功！',
                type: 'success'
              })
              that.getDataList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消收藏'
          })
        })
      }
    },
    handleSelect (item) {
      this.busList.forEach(item => {
        item.cselect = false
      })
      item.cselect = !item.cselect
    },
    // 登记类型
    handleDjlxSelect (item) {
      this.djlxList.forEach(item => {
        item.cselect = false
      })
      this.btnDisabled = true
      item.cselect = true
      if (item.sffqlc == '1') {
        this.btnDisabled = false
        this.bsmSqyw = item.bsmSqyw
        this.djywbm = item.djywbm
      } else {
        this.getNextNode(item.bsmSqyw, false)
      }
      this.djqxList = []
    },
    // 选择不动产信息
    bthSelectClick () {
      this.isDialog = true
    },
    loadView (view) {
      return r => require.ensure([], () => r(require(`./components/${view}/${view}.vue`)))
    },
  }
}
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
@import './ywsq.scss';

/deep/.el-collapse-item__content {
  padding-bottom: 0;
}

/deep/.el-collapse-item__wrap {
  border-bottom: none;
}
</style>