<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"/>
    <MapOperateBottom class="map-bottom"/>
    <div class="box1">
      <m-card title="当日检查情况">
        <DayCheckSituation />
      </m-card>
    </div>
    <div class="box2">
      <m-card title="检查人员列表" mode="2">
        <PersonList @select="handlePersonSelect" ref="person"/>
      </m-card>
    </div>
    <div class="box3">
      <m-card title="检查主题列表">
        <ThemeList @select="handleThemeSelect"/>
      </m-card>
    </div>
    <div class="box4">
      <m-card title="完成检查小区列表" mode="2">
        <CommunityList :list="checkedList" @select="handleCommunitySelect" ref="community"/>
      </m-card>
    </div>
    <div class="box5">
      <m-card title="当日检查情况对比">
        <DayCheckComparison />
      </m-card>
    </div>
    <div class="box6">
      <m-card title="开具整改单列表" mode="2">
        <CommunityList :list="rectifyList" @select="handleCommunitySelect" ref="community2"/>
      </m-card>
    </div>
    <m-modal v-model="showPersonModal" @close="closePersonModal">
      <m-form title="检查人员详情" :layout="personLayout.slice(0, 2)" :model="personData"></m-form>
      <m-form title="检查详情" :layout="personLayout.slice(2)" :model="personData"></m-form>
    </m-modal>
    <m-modal v-model="showCommunityModal" @close="closeCommunityModal" width="46%">
      <m-form title="检查小区详情" :layout="communityLayout.slice(0, 4)" :model="communityData"></m-form>
      <m-form title="检查详情" :layout="communityLayout.slice(4)" :model="communityData"></m-form>
      <m-table title="未落实指标" :layout="communityTableLayout" :model="communityTableData"></m-table>
    </m-modal>
  </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,
      showPersonModal: false,
      personLayout: [
        {
          TE_NAME: {
            label: '检查人员姓名',
            width: 12,
          },
          ORG_NAME: {
            label: '所在单位',
            width: 12
          }
        },
        {
          MOBILE: {
            label: '手机号码',
            width: 12,
          },
        },
        {
          TASK_NAME: {
            label: '检查主题名称',
            width: 12,
          },
          NAME: {
            label: '发布单位',
            width: 12,
          },
        },
        {
          CHECKCOMMUNITYNUMBER: {
            label: '已检查小区数',
            width: 12,
          },
          RECTIFICATIONNUMBER: {
            label: '已发布整改单数',
            width: 12,
          },
        },
      ],
      personData: {},
      showCommunityModal: false,
      communityLayout: [
        {
          COMMUNITYNAME: {
            label: '小区名称',
            width: 12,
          },
          COMMUNITYADDRESS: {
            label: '小区地址',
            width: 12,
          },
        },
        {
          HP_NAME: {
            label: '行政区',
            width: 12,
          },
          HO_NAME: {
            label: '房办',
            width: 12,
          },
        },
        {
          PROPERTYNAME: {
            label: '物业企业',
            width: 12,
          },
          COMMUNITYMANAGER: {
            label: '小区经理',
            width: 12,
          },
        },
        {
          MANAGERTEL: {
            label: '小区经理手机',
            width: 12,
          },
        },
        {
          THEME: {
            label: '主题名称',
            width: 12,
          },
          DEPTTYPE: {
            label: '发布单位',
            width: 12,
          },
        },
        {
          TENAME: {
            label: '检查人员姓名',
            width: 12,
          },
          TE_NAME: {
            label: '同行人员姓名',
            width: 12,
          },
        },
        {
          INSPECTION_DATE: {
            label: '完成检查时间',
            width: 12,
          },
          IS_PUBLISH: {
            label: '是否开具整改单',
            width: 12,
          },
        },
        {
          SIGNATUREIMAGE: {
            label: '小区经理签名',
            width: 12,
            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
    }
  },
  methods: {
    initData(themeId = null, startDate = null, endDate = null) {
      const today = this.$moment().format('YYYYMMDD')
      const defaultDay = this.$moment().format('YYYYMMDD') // 检查人员列表默认开始、结束时间
      const communityParams = {someday: today}
      const personParams = {startDate: defaultDay, endDate: defaultDay}
      // const personParams = {startDate: startDate || today, endDate: endDate || today}
      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: 'http://192.168.104.33:8181/smimap/index.html',
        onReady: () => {
          console.log('地图创建完成')
          this.addPoint()
          this.addListener()
        }
      })
    },
    addListener() {
      this.map.addEventListener(arg => {
        switch (arg.action.toLowerCase()) {
        case 'finished':
          console.log(arg)
          break
        default:
          // console.log(arg)
          break
        }
      }, this)
    },
    addPoint() {
      const params = {
        name: 'test-point',
        mode: 'add',
        dataArray: [
          {
            codX: -1000,
            codY: -1000,
            codZ: 100,
            attrs: {
              att1: '测试属性',
              attm: '第1类',
            },
          }
        ],
        popupEnabled: false, // 是否打开弹出框
        legendVisible: false, // 图例是否可见
        type: 'point',
        fieldJsonArray: [
          {
            name: 'att1',
            alias: '属性1',
            type: 'string',
          },
          {
            name: 'attm',
            alias: '属性m',
            type: 'string',
          },
        ],
        renderer: {
          type: 'unique-value',
          field: 'attm',
          defaultLabel: '无数据',
          // defaultSymbol: {
          //   type: 'point-3d',
          //   symbolLayers: [{
          //     type: 'icon',
          //     size: 24,
          //     resource: {
          //       href: 'http://168.168.112.76:8181/propertybusinessmanage/tjcmv/images/marker/10.png'
          //     }
          //   }]
          // },
          uniqueValueInfos: [
            {
              value: '第1类',
              label: '第I类',
              symbol: {
                type: 'point-3d',
                symbolLayers: [
                  {
                    type: 'icon',
                    size: 24,
                    resource: {
                      href: 'http://192.168.104.33:8181/propertybusinessmanage/tjcmv/images/marker/1.png'
                    // href: 'http://168.168.112.76:8181/propertybusinessmanage/tjcmv/images/marker/1.png'
                    // href: 'http://localhost:8080/static/person-bg.png'
                    },
                  },
                ]
              }
            },
          ]
        },
        labelSymbol: {
          symbol: {
            type: 'text',
            color: 'red',
            haloSize: 2,
            haloColor: '#fff',
          },
          labelPlacement: 'center-right',
        }
      }
      this.map.Invoke({
        ActionName: 'displayJsonData',
        Parameters: JSON.stringify(params),
      })
    },
    handlePersonSelect({OPER_ID, TASK_ID}) {
      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.$refs.person.reset()
    },
    handleCommunitySelect({COMMUNITYID, CHECKID}) {
      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.filter(item => item.THEMEID == this.communityData.TASK_ID)
        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.$refs.community.reset()
      this.$refs.community2.reset()
    },
    handleThemeSelect({TASK_ID, START_DATE, END_DATE}) {
      this.initData(TASK_ID, START_DATE, END_DATE)
    },
  }
}
</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
</style>
