<template>
  <div id="modal-search-bar">
    <span class="edge left-top" />
    <span class="edge right-top" />
    <span class="edge left-bottom" />
    <span class="edge right-bottom" />
    <a-input-group compact>
      <a-select v-model:value="searchType">
        <a-select-option value="case">案件</a-select-option>
        <a-select-option value="population">人口</a-select-option>
        <a-select-option value="community">小区</a-select-option>
      </a-select>
      <a-input
        v-model:value="searchKey"
        placeholder="请输入搜索关键词"
        @pressEnter="handleSearch"
      />
    </a-input-group>
    <div class="search-btn" @click="handleSearch">搜索</div>
  </div>
  <div class="modal-case-content">
    <template v-if="list.length > 0">
      <template v-if="searchType === 'case'">
        <CaseList :list="list" select-able @select="handleSelect" />
      </template>
      <template v-else-if="searchType === 'population'">
        <PersonList :list="list" select-able @select="handleSelect" />
      </template>
      <template v-else-if="searchType === 'community'">
        <CommunityList :list="list" select-able @select="handleSelect" />
      </template>
    </template>
    <m-empty v-else :img="empty" hidden-text />
  </div>
  <m-drawer v-model="caseModal">
    <CaseDrawer
      :community-info="communityInfo"
      :property-info="propertyInfo"
      :case-info="caseInfo"
    />
  </m-drawer>
  <m-drawer v-model="populationModal">
    <PopulationDrawer
      :community-info="communityInfo"
      :property-info="propertyInfo"
      :case-info="caseInfo"
      :building-info="buildingInfo"
      :room-info="roomInfo"
    />
  </m-drawer>
  <m-drawer v-model="communityModal">
    <CommunityDrawer
      :community-info="communityInfo"
      :property-info="propertyInfo"
      :case-info="caseInfo"
    />
  </m-drawer>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import CaseDrawer from '@/view/drawers/case-drawer.vue'
import PopulationDrawer from '@/view/drawers/population-drawer.vue'
import CommunityDrawer from '@/view/drawers/community-drawer.vue'
import { ajax, api } from '@/ajax'
import CaseList from './case-list.vue'
import PersonList from './person-list.vue'
import CommunityList from './community-list.vue'
import empty from '@/assets/images/empty.png'

export default defineComponent({
  name: 'SearchView',
  components: {
    CaseDrawer,
    PopulationDrawer,
    CommunityDrawer,
    CaseList,
    PersonList,
    CommunityList,
  },
  setup() {
    const searchType = ref('case')
    const searchKey = ref('')
    const list = ref([])

    const searchCase = async (address: string, pageSize = 100) => {
      const { content } = (
        await ajax.get({
          url: api.GET_CASE,
          params: { pageSize, address_l: address },
        })
      ).data
      return content
    }
    const searchRoom = async (address: string, pageSize = 100) => {
      const { content } = (
        await ajax.get({
          url: api.GET_ROOM,
          params: { pageSize, addr_l: address },
          showLoading: false,
        })
      ).data
      return content
    }
    const searchCommunity = async (
      address: unknown,
      sectId: unknown,
      pageSize = 100
    ) => {
      const { content } = (
        await ajax.get({
          url: api.GET_COMMUNITY,
          params: { addrFrst_l: address, pageSize, sectId },
        })
      ).data
      return content
    }
    const searchBuilding = async (params: any) => {
      const { content } = (
        await ajax.get({
          url: api.GET_BUILDING,
          params: { ...params, pageSize: 100 },
        })
      ).data
      return content
    }
    const searchDevice = async (params: any) => {
      const { content } = (
        await ajax.get({
          url: api.GET_DEVICE,
          params: { ...params, pageSize: 1000 },
        })
      ).data
      return content
    }
    const searchCompany = async (id: string) => {
      const { content } = (
        await ajax.get({ url: api.GET_COMPANY, params: { cspId: id } })
      ).data
      return content
    }
    const searchHoc = async (id: string) => {
      const { content } = (
        await ajax.get({
          url: api.GET_INDUSTRY_AUTHORITY,
          params: { hocId: id },
        })
      ).data
      return content
    }
    const searchHocMember = async (id: string) => {
      const { content } = (
        await ajax.get({
          url: api.GET_HOC_MEMBER,
          params: { hocId: id },
        })
      ).data
      return content
    }
    const handleSearch = async () => {
      const address = searchKey.value
      switch (searchType.value) {
        case 'case':
          list.value = await searchCase(address)
          break
        case 'population':
          list.value = await searchRoom(address)
          break
        case 'community':
          list.value = await searchCommunity(address, null)
          break
        default:
          list.value = []
          break
      }
    }
    watch(() => searchType.value, handleSearch, { immediate: true })

    const caseModal = ref(false)
    const populationModal = ref(false)
    const communityModal = ref(false)
    const communityInfo = ref<any>(null)
    const propertyInfo = ref<any>(null)
    const caseInfo = ref<any>(null)
    const roomInfo = ref<any>(null)
    const buildingInfo = ref<any>(null)
    const handleSelect = async (item: unknown) => {
      switch (searchType.value) {
        case 'case':
          await selectCase(item)
          break
        case 'population':
          await selectRoom(item)
          break
        case 'community':
          await selectCommunity(item)
          break
        default:
          communityModal.value = false
          populationModal.value = false
          caseModal.value = false
          break
      }
    }
    async function selectCase(data: any) {
      caseInfo.value = data
      if (data.communityId) {
        const content = await searchCommunity(null, data.communityId)
        communityInfo.value = content && content[0]
        const cspId = content && content[0] && content[0].cspId
        if (cspId) {
          const content = await searchCompany(cspId)
          propertyInfo.value = content && content[0]
        }
      } else {
        communityInfo.value = {}
        propertyInfo.value = {}
      }
      caseModal.value = true
      populationModal.value = false
      communityModal.value = false
    }
    async function selectRoom(data: any) {
      roomInfo.value = data
      const content = await searchCase(data.address || data.addr)
      caseInfo.value = content || []
      const { buildingId } = data
      if (buildingId) {
        // 楼栋信息
        const content = await searchBuilding({ unitId: buildingId })
        buildingInfo.value = content && content[0]
        const sectId = content && content[0] && content[0].sectId
        if (sectId) {
          // 小区信息
          const content = await searchCommunity(null, sectId)
          communityInfo.value = content && content[0]
          // 管理处信息
          const csId = communityInfo.value && communityInfo.value.csId
          if (csId) {
            const { content } = (
              await ajax.get({
                url: api.GET_MANAGE,
                params: { csId },
              })
            ).data
            communityInfo.value.manageInfo = (content && content[0]) || {}
          } else {
            communityInfo.value.manageInfo = {}
          }
          // 业委会信息
          const hocId = communityInfo.value && communityInfo.value.hocId
          if (hocId) {
            const content = await searchHoc(hocId)
            communityInfo.value.hocInfo = (content && content[0]) || {}
            const memberList = await searchHocMember(hocId)
            communityInfo.value.hocInfo.memberList = memberList || []
          } else {
            communityInfo.value.hocInfo = {}
          }
          // 物业信息
          const cspId = communityInfo.value && communityInfo.value.cspId
          if (cspId) {
            const content = await searchCompany(cspId)
            propertyInfo.value = content && content[0]
          } else {
            propertyInfo.value = {}
          }
          // 获取小区楼栋列表
          communityInfo.value.buildingList =
            (await searchBuilding({ sectId })) || []
          // 设施设备列表
          communityInfo.value.deviceList =
            (await searchDevice({ sectId })) || []
        } else {
          communityInfo.value = {}
        }
      } else {
        buildingInfo.value = {}
      }
      populationModal.value = true
      caseModal.value = false
      communityModal.value = false
    }
    async function selectCommunity(data: any) {
      const content = await searchCase(data.addrFrst)
      caseInfo.value = content || []
      communityInfo.value = data
      const csId = communityInfo.value && communityInfo.value.csId
      if (csId) {
        const { content } = (
          await ajax.get({
            url: api.GET_MANAGE,
            params: { csId },
          })
        ).data
        communityInfo.value.manageInfo = (content && content[0]) || {}
      } else {
        communityInfo.value.manageInfo = {}
      }
      const hocId = communityInfo.value && communityInfo.value.hocId
      if (hocId) {
        const content = await searchHoc(hocId)
        communityInfo.value.hocInfo = (content && content[0]) || {}
        const memberList = await searchHocMember(hocId)
        communityInfo.value.hocInfo.memberList = memberList || []
      } else {
        communityInfo.value.hocInfo = {}
      }
      const cspId = communityInfo.value && communityInfo.value.cspId
      if (cspId) {
        const content = await searchCompany(cspId)
        propertyInfo.value = content && content[0]
      } else {
        propertyInfo.value = {}
      }
      communityInfo.value.buildingList =
        (await searchBuilding({ sectId: data.sectId })) || []
      // 设施设备列表
      communityInfo.value.deviceList =
        (await searchDevice({ sectId: data.sectId })) || []
      communityModal.value = true
      populationModal.value = false
      caseModal.value = false
    }
    return {
      searchType,
      searchKey,
      list,
      handleSearch,
      handleSelect,
      caseModal,
      populationModal,
      communityModal,
      communityInfo,
      propertyInfo,
      caseInfo,
      buildingInfo,
      roomInfo,
      empty,
    }
  },
})
</script>

<style lang="stylus">
@import '../../components/MyComponent/main.styl'
$border = .01rem solid rgba(91,213,255,.3)
$bg = rgba(6,34,67,.4)
#modal-search-bar
  width 100%
  position relative
  margin-bottom .1rem
  .edge
    display block
    position absolute
    width .06rem
    height @width
    border .01rem solid $secondary-color
    z-index 1
    &.left-top
      top 0
      left 0
      border-right none
      border-bottom none
    &.right-top
      top 0
      right 0
      border-left none
      border-bottom none
    &.left-bottom
      bottom 0
      left 0
      border-right none
      border-top none
    &.right-bottom
      bottom 0
      right 0
      border-left none
      border-top none
  .ant-select
    border-radius 0
    color $secondary-color
    background $bg
    width .7rem
    height .25rem
    line-height @height
    font-size .12rem
    .ant-select-selector
      background inherit
      border-radius inherit
      border $border
      height inherit
      line-height inherit
      font-size inherit
      .ant-select-selection-item
        line-height inherit
    .ant-select-arrow
      color $secondary-color
      font-size .1rem
  .ant-input
    width calc(100% - 0.7rem)
    border $border
    background $bg
    color #fff
    height .25rem
    line-height @height
    font-size .1rem
    padding-right .4rem
  .search-btn
    height 100%
    color $secondary-color
    line-height .25rem
    position absolute
    top 0
    right .1rem
    cursor pointer
    z-index 99999
    font-size .12rem
    &:hover
      font-weight bold
      text-decoration underline
.modal-case-content
  max-height 60vh
  overflow-y auto
  overflow-x hidden
  // >div
  //   display flex
  //   align-items center
  //   background $table-content-bg
  //   padding .04rem
  //   box-sizing border-box
  //   cursor pointer
  //   &:nth-of-type(odd)
  //     background transparent
  //   &:hover
  //     background $table-content-title
  //     color $secondary-color
  //   >span
  //     display inline-block
  //     border .01rem solid #fff
  //     border-radius .02rem
  //     font-size .08rem
  //     padding 0 .02rem
  //     margin-right .1rem
  //     &.yellow
  //       color $yellow
  //       border-color @color
  //     &.green
  //       color $green
  //       border-color @color
  //     &.blue
  //       color $blue
  //       border-color @color
</style>
