<template>
  <div class="container">
    <!-- <div id="map">
      <BaiduMap/>
    </div> -->
    <iframe id="map" frameborder="no" scrolling="no" allowtransparency="true"/>
    <ThemeTitle class="title">
      物业督查实时专题图
    </ThemeTitle>
    <MapOperateTop class="map-top" v-show="!fullScreen"/>
    <MapOperateBottom @zoom="handleZoom" @fullscreen="handleFullscreen" @reset="handleReset" class="map-bottom"/>
    <div class="box1" >
      <m-card title="当日检查情况" v-show="!fullScreen" enter="fadeInLeft" leave="fadeOutLeft">
        <DayCheckSituation />
      </m-card>
    </div>
    <div :class="`${showDrawer ? 'box2 blur' : 'box2'}`">
      <m-card title="检查人员列表" mode="2" v-show="!fullScreen">
        <PersonList @select="handlePersonSelect" ref="person"/>
      </m-card>
    </div>
    <div class="box3">
      <m-card title="检查主题列表" v-show="!fullScreen" enter="fadeInLeft" leave="fadeOutLeft">
        <ThemeList @select="handleThemeSelect" ref="theme"/>
      </m-card>
    </div>
    <div :class="`${showDrawer ? 'box4 blur' : 'box4'}`">
      <m-card title="完成检查小区列表" mode="2" v-show="!fullScreen">
        <CommunityList :list="checkedList" @select="handleCommunitySelect" ref="community"/>
      </m-card>
    </div>
    <div class="box5">
      <m-card title="当日检查情况对比" v-show="!fullScreen" enter="fadeInLeft" leave="fadeOutLeft">
        <DayCheckComparison />
      </m-card>
    </div>
    <div :class="`${showDrawer ? 'box6 blur' : 'box6'}`">
      <m-card title="开具整改单列表" mode="2" v-show="!fullScreen">
        <CommunityList :list="rectifyList" @select="handleCommunitySelect" ref="community2"/>
      </m-card>
    </div>
    <m-drawer v-model="showPersonModal" @close="closePersonModal">
      <m-form title="检查人员详情" :layout="personLayout.slice(0, 1)" :model="personData"/>
      <m-form title="检查详情" :layout="personLayout.slice(1)" :model="personData"/>
    </m-drawer>
    <m-drawer v-model="showCommunityModal" @close="closeCommunityModal">
      <m-form title="检查小区详情" :label-width="8" :layout="communityLayout.slice(0, 1)" :model="communityData"/>
      <m-form title="检查详情" :label-width="8" :layout="communityLayout.slice(1)" :model="communityData"/>
      <m-table mode="2" title="未落实指标" :layout="communityTableLayout" :model="communityTableData"/>
    </m-drawer>
  </div>
</template>

<script>
// import BaiduMap from './components/baidu'
import ThemeTitle from './components/title'
import DayCheckSituation from './components/day-check-situation'
import ThemeList from './components/theme-list'
import PersonList from './components/person-list'
import CommunityList from './components/community-list'
import DayCheckComparison from './components/day-check-comparison'
import MapOperateTop from './components/map-operate-top'
import MapOperateBottom from './components/map-operate-bottom'
export default {
  name: 'Main',
  components: {
    // BaiduMap,
    ThemeTitle,
    DayCheckSituation,
    ThemeList,
    PersonList,
    CommunityList,
    DayCheckComparison,
    MapOperateTop,
    MapOperateBottom,
  },
  data() {
    return {
      map: null,
      fullScreen: false,
      showPersonModal: false,
      personLayout: [
        {
          TE_NAME: {
            label: '检查人员姓名',
            width: 24,
          },
          ORG_NAME: {
            label: '所在单位',
            width: 24
          },
          MOBILE: {
            label: '手机号码',
            width: 24,
          },
        },
        {
          TASK_NAME: {
            label: '检查主题名称',
            width: 24,
          },
          NAME: {
            label: '发布单位',
            width: 24,
          },
          CHECKCOMMUNITYNUMBER: {
            label: '已检查小区数',
            width: 24,
          },
          RECTIFICATIONNUMBER: {
            label: '已发布整改单数',
            width: 24,
          },
        },
      ],
      personData: {},
      showCommunityModal: false,
      communityLayout: [
        {
          COMMUNITYNAME: {
            label: '小区名称',
            width: 24,
          },
          COMMUNITYADDRESS: {
            label: '小区地址',
            width: 24,
          },
          HP_NAME: {
            label: '行政区',
            width: 24,
          },
          HO_NAME: {
            label: '房办',
            width: 24,
          },
          PROPERTYNAME: {
            label: '物业企业',
            width: 24,
          },
          COMMUNITYMANAGER: {
            label: '小区经理',
            width: 24,
          },
          MANAGERTEL: {
            label: '小区经理手机',
            width: 24,
          },
        },
        {
          THEME: {
            label: '主题名称',
            width: 24,
          },
          DEPTTYPE: {
            label: '发布单位',
            width: 24,
          },
          TENAME: {
            label: '检查人员姓名',
            width: 24,
          },
          TE_NAME: {
            label: '同行人员姓名',
            width: 24,
          },
          INSPECTION_DATE: {
            label: '完成检查时间',
            width: 24,
          },
          IS_PUBLISH: {
            label: '是否开具整改单',
            width: 24,
          },
          SIGNATUREIMAGE: {
            label: '小区经理签名',
            width: 24,
            type: 'img',
          },
        },
      ],
      communityData: {},
      communityTableLayout: [
        {
          title: '指标名称',
          key: 'INDEXNAME',
          width: 8,
        },
        {
          title: '检查情况',
          key: 'REMARK',
          width: 8,
        },
        {
          title: '附件',
          key: 'imageList',
          width: 8,
          type: 'img',
        },
      ],
      communityTableData: [],
    }
  },
  mounted() {
    this.$nextTick(this.initMap)
    // this.initData()
  },
  computed: {
    checkedList() {
      return this.$store.state.checkedCommunityList
    },
    rectifyList() {
      return this.$store.state.rectifyCommunityList
    },
    showDrawer() {
      return this.showPersonModal || this.showCommunityModal
    },
  },
  methods: {
    initData(themeId = null, startDate = '20190101', endDate = '20200101') {
      let today = this.$moment().format('YYYYMMDD')
      if(this.$route.query.date) {
        today = this.$moment(this.$route.query.date).format('YYYYMMDD')
      }
      const defaultDay = this.$moment().format('YYYYMMDD') // 检查人员列表默认开始、结束时间
      const communityParams = {someday: today}
      // const personParams = {startDate: defaultDay, endDate: defaultDay}
      const personParams = {startDate: startDate || defaultDay, endDate: endDate || defaultDay}
      if (themeId) {
        communityParams.taskId = themeId
        personParams.taskId = themeId
      }
      if (!themeId) {
        this.$store.dispatch('GET_THEME_LIST', {flag: 0, someday: today})
      }
      this.$store.dispatch('GET_COMMUNITY_LIST', communityParams)
      this.$store.dispatch('GET_PERSON_LIST', personParams)
    },
    initMap() {
      const {ShsmiGis} = window
      this.map = new ShsmiGis.Bridge({
        id: 'map',
        url: this.$api.MAP_URL,
        onReady: () => {
          console.log('地图创建完成')
          this.initData()
          this.addListener()
        }
      })
    },
    addListener() {
      this.map.addEventListener(arg => {
        switch (arg.action.toLowerCase()) {
        case 'graphicsclicked':
          const data = this.$com.confirm(arg, 'data.attributes', {})
          if (data.COMMUNITYID) {
            this.handleCommunitySelect(data)
          } else if (data.OPER_ID) {
            this.handlePersonSelect(data)
          }
          break
        default:
          // console.log(arg)
          break
        }
      }, this)
    },
    addPoint({name, key, data, labelKey = null, icon = 'test.png', size = 16}) {
      if(!this.map) return
      const params = this.$com.getMapParams({data, key, labelKey, icon, size})
      params.name = name
      params.mode = 'add'
      this.map.Invoke({
        ActionName: 'displayJsonData',
        Parameters: JSON.stringify(params),
      })
    },
    removePoint(name) {
      if (!this.map) return
      this.map.Invoke({
        ActionName: 'displayJsonData',
        Parameters: JSON.stringify({
          name,
          mode: 'delete',
        })
      })
    },
    gotoPosition(x, y, zoom = 6) {
      if (!this.map || !x || !y ) return
      const params = {
        codX: x,
        codY: y,
        zoomlevel: zoom,
      }
      this.map.Invoke({
        ActionName: 'goToPosition',
        Parameters: JSON.stringify(params),
      })
    },
    handlePersonSelect(data) {
      // this.removePoint('selected-point')
      // this.addPoint({name:'selected-point', key:'OPER_ID', labelKey: 'TE_NAME', data:[data], icon:'person-on.gif', size: 30})
      const {OPER_ID, TASK_ID, X, Y} = data
      this.gotoPosition(X, Y)
      this.$ajax.post({
        url: this.$api.POST_PERSON_DETAIL,
        params: {
          taskId: TASK_ID,
          operId: OPER_ID,
        }
      }).then(res => {
        this.personData = (this.$com.confirm(res, 'data.content', []))[0]
        this.showPersonModal = true
      })
    },
    closePersonModal() {
      this.removePoint('selected-point')
      this.$refs.person.reset()
      this.showPersonModal = false
    },
    handleCommunitySelect(data) {
      this.removePoint('selected-point')
      this.addPoint({name: 'selected-point', key: 'COMMUNITYID', labelKey: 'COMMUNITYNAME', data:[data], icon: 'red.png',})
      const {COMMUNITYID, CHECKID, X, Y} = data
      this.gotoPosition(X, Y)
      this.$ajax.post({
        url: this.$api.POST_COMMUNITY_DETAIL,
        params: {
          checkId: CHECKID,
          communityId: COMMUNITYID,
        }
      }).then(res => {
        const followList = this.$com.confirm(res, 'data.content.fellowList', [])
        this.communityData = (this.$com.confirm(res, 'data.content.content', []))[0]
        const followers = followList.map(item => {
          if(item.THEMEID == this.communityData.TASK_ID) {
            return item.TEAMNAME
          }
        })
        this.communityData.TE_NAME = (followers.length > 0 && followers.join(',')) || '无'
        this.communityData.IS_PUBLISH = this.communityData.IS_PUBLISH == '1' ? '是' : '否'
        this.communityTableData = this.$com.confirm(res, 'data.content.indexList', [])
        this.showCommunityModal = true
      })
    },
    closeCommunityModal() {
      this.removePoint('selected-point')
      this.$refs.community.reset()
      this.$refs.community2.reset()
      this.showCommunityModal = false
    },
    handleThemeSelect(TASK_ID, {START_DATE, END_DATE}) {
      this.removePoint('selected-point')
      this.removePoint('checked-points')
      this.showCommunityModal = false
      this.showPersonModal = false
      // TODO  START_DATE, END_DATE看获取检查人列表是否需要用到
      this.initData(TASK_ID)
    },
    handleFullscreen(type) {
      this.fullScreen = (type != null)
    },
    handleZoom(type) {
      this.map.Invoke({
        ActionName: 'mapzoom',
        Parameters: {
          'zoommode': type == 'plus' ? 'zoomin' : 'zoomout'
        }
      })
    },
    handleReset() {
      this.closeCommunityModal()
      this.closePersonModal()
      this.$refs.theme.reset()
      this.removePoint('selected-point')
      this.removePoint('checked-points')
      this.removePoint('person-points')
      this.initData()
    },
  },
  watch: {
    '$store.state.checkedCommunityList': {
      handler(cur, past) {
        this.addPoint({name: 'checked-points', key: 'COMMUNITYID', data: cur, icon: 'person-bg.png'})
      }
    },
    // '$store.state.rectifyCommunityList': {
    //   handler(cur, past) {
    //     this.addPoint({name:'rectify-points', key: 'COMMUNITYID', data: cur, icon: 'red.png'})
    //   }
    // },
    '$store.state.personList': {
      handler(cur, past) {
        this.addPoint({name:'person-points', key: 'OPER_ID', labelKey: 'TE_NAME', data: cur, icon: 'person-bg2.png', size: 28})
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
.container
  $layout()
  grid-template-areas \
    'title title title'\
    'box1 map-top box2'\
    'box1 . box4'\
    'box3 . box4'\
    'box3 . box4'\
    'box3 . box6'\
    'box5 . box6'\
    'box5 map-bottom box6'
  grid-template-rows 4rem 1fr 1fr 1fr 1fr 1fr 1fr 1fr
  grid-template-columns 1fr 2.2fr 1fr
  #map
    width 100%
    height 100vh
    background-color #001021
    position fixed
    top 0
    left 0
    right 0
    bottom 0
  .title
    grid-area title
  .map-top
    grid-area map-top
  .map-bottom
    grid-area map-bottom
  .box1
    grid-area box1
  .box2
    height 20vh
    overflow hidden
    grid-area box2
  .box3
    grid-area box3
  .box4
    grid-area box4
  .box5
    grid-area box5
  .box6
    grid-area box6
  .blur
    filter blur(0.5rem)
</style>
