<template>
  <section class="AppPetitionManage">
    <ai-detail>
      <!-- 标题 -->
      <ai-title slot="title" title="楼栋管理" isShowBottomBorder/>
      <template #content>
        <ai-tree-menu title="楼栋管理" @search="(v) => $refs.gridTree.filter(v)">
          <el-tree :data="treeData" ref="gridTree" :filter-node-method="handleTreeFilter" @node-click="handleSelectGrid" highlight-current node-key="id"
                   :props="{ label: 'name', children: 'children' }" :default-expanded-keys="[defaultShowNodes]"/>
        </ai-tree-menu>

        <div class="flex-content">
          <ai-search-bar bottomBorder>
            <template slot="left">
              <!-- 定位状态 -->
              <ai-select v-model="search.locationStatus" placeholder="定位状态" clearable :selectList="dict.getDict('BuildLocationStatus')"
                         @change=";(page.current = 1), getList()"></ai-select>
            </template>

            <!-- 搜索 -->
            <template slot="right">
              <el-input
                  v-model="search.managerName"
                  size="small"
                  placeholder="楼栋号/楼长/联系方式"
                  clearable
                  v-throttle="() => {page.current = 1, getList()}"
                  @clear=";(page.current = 1), (search.managerName = ''), getList()"
                  suffix-icon="iconfont iconSearch"/>
            </template>
          </ai-search-bar>

          <ai-search-bar class="ai-search-ba">
            <template slot="left">
              <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')" :disabled="!isAdd">添加</el-button>
              <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除</el-button>
            </template>

            <!-- 导入导出 -->
            <template #right>
              <ai-import :instance="instance" :dict="dict" type="appcommunitybuildinginfo" :importParams="{ areaId: userArea}" name="楼栋管理"
                         @success="getList()">
                <el-button icon="iconfont iconImport">导入</el-button>
              </ai-import>
              <ai-download :instance="instance" url="/app/appcommunitybuildinginfo/listExport" :params="param" fileName="楼栋管理模板"
                           :disabled="tableData.length == 0">
                <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
              </ai-download>
            </template>
          </ai-search-bar>

          <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" style="margin-top: 20px;" :current.sync="page.current"
                    :size.sync="page.size" @getList="getList" @selection-change="(v) => (ids = v.map((e) => e.id))">
            <el-table-column slot="locationStatus" label="定位状态" align="center">
              <template slot-scope="{ row }">
                <span style="color:red" v-if="row.locationStatus == 0">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span>
                <span style="color:green" v-if="row.locationStatus == 1">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span>
              </template>
            </el-table-column>

            <el-table-column slot="options" label="操作" align="center" width="240px" fixed="right">
              <div class="table-options" slot-scope="{ row }">
                <el-button type="text" @click="onAdd(row.id)">编辑</el-button>
                <el-button type="text" @click="remove(row.id)">删除</el-button>
                <el-button type="text" @click="toBuildMsg(row)">房屋信息</el-button>
                <el-button type="text"
                           @click="$router.push({ name: '63', query: { communityId: row.communityId, buildingId: row.id, unitNum: 1, buildingNumber: row.buildingNumber } })">
                  楼栋模型
                </el-button>
              </div>
            </el-table-column>
          </ai-table>
        </div>
      </template>
    </ai-detail>
  </section>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'List',
  props: {
    dict: Object,
    instance: Function,
    params: Object,
  },

  data() {
    return {
      isAdd: false,
      page: {
        current: 1,
        size: 10,
      },
      total: 0,
      search: {
        locationStatus: '',
        managerName: '',
      },
      id: '',
      ids: [],
      colConfigs: [
        {type: 'selection'},
        {
          prop: 'communityName',
          label: '小区名称',
        },
        {
          prop: 'buildingNumber',
          label: '楼栋号',
          align: 'center',
        },
        {prop: 'unitNumber', label: '单元数', align: 'center'},
        {
          prop: 'layerNumber',
          label: '最高层数',
          align: 'center',
        },
        {prop: 'householdNumber', label: '每层户数', align: 'center'},
        {
          prop: 'houseNum',
          label: '实有户数',
          align: 'center',
        },
        {prop: 'residentNum', label: '实有人口', align: 'center'},
        {
          prop: 'managerName',
          label: '楼栋长名',
          align: 'center',
        },
        {prop: 'managerPhone', label: '楼栋长联系方式', align: 'center', width: '150'},
        {slot: 'locationStatus'},
        {
          slot: 'options',
          label: '操作',
          align: 'center',
        },
      ],
      tableData: [],
      organizationId: '',
      meta: [],
      treeData: [],
      areaId: '',
      communityId: null,
      buildingTypeStatus: '',
      defaultShowNodes: [],
    }
  },

  computed: {
    ...mapState(['user']),
    userArea: v => v.user?.info?.areaId,
    param() {
      return {
        ...this.search,
        communityId: this.communityId,
        areaId: this.userArea,
        ids: this.ids,
      }
    },
  },

  created() {
    this.dict.load('BuildLocationStatus').then(() => {
      this.getList()
      this.getListinfo()
    })
  },
  methods: {
    getListinfo() {
      return this.instance.post(`/app/appcommunityinfo/queryCommunityTree?id=${this.userArea}`).then((res) => {
        if (res?.data) {
          this.treeData = [res.data]
          this.$nextTick(() => {
            this.defaultShowNodes = this.treeData[0].id
          })
        }
      })
    },

    getList() {
      this.instance.post(`/app/appcommunitybuildinginfo/list`, null, {
        params: {
          ...this.page,
          ...this.search,
          communityId: this.communityId,
          areaId: this.areaId,
        },
      })
      .then((res) => {
        if (res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },

    // 添加
    onAdd(id) {
      this.$emit('change', {
        type: 'add',
        params: {
          id: id || '',
          bulidId: this.id,
          communityId: this.communityId,
        },
      })
    },

    // 房屋信息
    toBuildMsg(row) {
      this.$emit('change', {
        type: 'buildmsg',
        params: {
          ...row,
        },
      })
    },

    // 删除
    remove(id) {
      this.$confirm('确定删除该数据?').then(() => {
        this.instance.post(`/app/appcommunitybuildinginfo/delete?ids=${id}`).then((res) => {
          if (res.code == 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      })
    },

    removeAll() {
      var id = this.ids.join(',')
      this.remove(id)
    },

    handleTreeFilter(v, data) {
      return data?.name.indexOf(v) > -1
    },

    handleSelectGrid(data) {
      this.isAdd = false
      if (data.type == 1) {
        this.isAdd = true
        this.communityId = data.id
        this.areaId = null
      } else if (data.type == 0) {
        this.communityId = null
        this.areaId = data.id
      }
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped>
.AppPetitionManage {
  height: 100%;

  .ai-detail {
    :deep( .ai-detail__content ){
      .ai-detail__content--wrapper {
        display: flex;
        justify-content: space-between;
        height: 100%;
        max-width: 100%;
        padding: 15px;

        .AiTreeMenu {
          width: 22%;
        }

        .flex-content {
          width: 78%;
          margin-left: 10px;
          padding: 15px;
          background-color: #fff;

          .ai-search-ba {
            margin-top: 10px;
          }

          .ai-table {
            margin-top: 0 !important;
          }
        }
      }
    }
  }

  :deep( .el-tree ){
    .el-tree-node__content {
      display: inline-flex;
      min-width: 100%;

      &:hover {
        background: #e8efff;
        color: #222222;
        border-radius: 2px;
      }
    }

    .is-current > .el-tree-node__content {
      background: #2266ff;
      min-width: 100%;

      &:hover {
        background: #2266ff;
        color: #fff;
      }

      span {
        color: #fff;
        font-weight: bold;
      }
    }
  }

  :deep( .is-current > .el-tree-node__content ){
    width: 100% !important;
    padding-right: 16px !important;
  }
}
</style>
