<template>
  <div class="container">
    <div id="map">
      <!-- <BaiduMap/> -->
    </div>
    <ThemeTitle class="title">
      物业督查实时专题图
    </ThemeTitle>
    <MapOperate class="map"/>
    <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 />
      </m-card>
    </div>
    <div class="box4">
      <m-card title="完成检查小区列表" mode="2">
        <CommunityList @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 @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>
// const {ShsmiGis} = window
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 MapOperate from './components/map-operate'
export default {
  name: 'Main',
  components: {
    BaiduMap,
    ThemeTitle,
    DayCheckSituation,
    ThemeList,
    PersonList,
    CommunityList,
    DayCheckComparison,
    MapOperate,
  },
  data() {
    return {
      map: null,
      showPersonModal: false,
      personLayout: [
        {
          name: {
            label: '检查人员姓名',
            width: 12,
          },
          company: {
            label: '所在单位',
            width: 12
          }
        },
        {
          phone: {
            label: '手机号码',
            width: 12,
          },
        },
        {
          theme: {
            label: '检查主题名称',
            width: 12,
          },
          public: {
            label: '发布单位',
            width: 12,
          },
        },
        {
          check: {
            label: '已检查小区数',
            width: 12,
          },
          rectify: {
            label: '已发布整改单数',
            width: 12,
          },
        },
      ],
      personData: {
        name: '张三',
        company: '市物业中心',
        phone: '1234567890',
        theme: '主题名称',
        public: '上海市房办',
        check: 7,
        rectify: 3,
      },
      showCommunityModal: false,
      communityLayout: [
        {
          name: {
            label: '小区名称',
            width: 12,
          },
          address: {
            label: '小区地址',
            width: 12,
          },
        },
        {
          province: {
            label: '行政区',
            width: 12,
          },
          house: {
            label: '房办',
            width: 12,
          },
        },
        {
          company: {
            label: '物业企业',
            width: 12,
          },
          manager: {
            label: '小区经理',
            width: 12,
          },
        },
        {
          phone: {
            label: '小区经理手机',
            width: 12,
          },
        },
        {
          theme: {
            label: '主题名称',
            width: 12,
          },
          public: {
            label: '发布单位',
            width: 12,
          },
        },
        {
          checker: {
            label: '检查人员姓名',
            width: 12,
          },
          partner: {
            label: '同行人员姓名',
            width: 12,
          },
        },
        {
          date: {
            label: '完成检查时间',
            width: 12,
          },
          isRectify: {
            label: '是否开具整改单',
            width: 12,
          },
        },
        {
          sign: {
            label: '小区经理签名',
            width: 12,
            type: 'img',
          },
        },
      ],
      communityData: {
        name: '金港花园',
        address: '上海市松江区横港路155弄',
        province: '松江区',
        house: '泗泾房办',
        company: '上海市XXX物业公司',
        manager: '张三',
        phone: '12345667890',
        theme: '主题名称',
        public: '上海市房办',
        checker: '李四',
        partner: '王五',
        date: '2020-01-10 15:50:00',
        isRectify: '是',
        sign: 'test.png',
      },
      communityTableLayout: [
        {
          title: '指标名称',
          key: 'name',
          width: 8,
        },
        {
          title: '检查情况',
          key: 'situation',
          width: 8,
          color: 'red',
        },
        {
          title: '附件',
          key: 'file',
          width: 8,
          type: 'img',
        },
      ],
      communityTableData: [
        {name: '指标1', situation: '指标有问题', file: 'test.png'},
        {name: '指标2', situation: '指标有问题', file: 'test.png'},
        {name: '指标3', situation: '指标有问题', file: 'test.png'},
      ]
    }
  },
  mounted() {
    // this.$nextTick(this.initMap)
  },
  methods: {
    initMap() {
      this.map = new ShsmiGis.Bridge({
        id: 'map',
        url: 'http://168.168.112.76:8181/smimap/index.html',
        onReady: function () {
          console.log('地图创建完成')
        }
      })
    },
    handlePersonSelect(name) {
      this.showPersonModal = true
    },
    closePersonModal() {
      this.$refs.person.reset()
    },
    handleCommunitySelect(name) {
      this.showCommunityModal = true
    },
    closeCommunityModal() {
      this.$refs.community.reset()
      this.$refs.community2.reset()
    },
  }
}
</script>

<style lang="stylus" scoped>
.container
  $layout()
  grid-template-areas \
    'title title title'\
    'box1 map box2'\
    'box1 map box4'\
    'box3 map box4'\
    'box3 map box4'\
    'box3 map box6'\
    'box5 map box6'\
    'box5 map 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
    grid-area map
  .box1
    grid-area box1
  .box2
    grid-area box2
  .box3
    grid-area box3
  .box4
    grid-area box4
  .box5
    grid-area box5
  .box6
    grid-area box6
</style>
