<template>
  <m-card title="110非警情">
    <div class="wrapper">
      <div>
        <m-sub2
          :addition="{ value: String(newFind.newFind), unit: '近30mins' }"
        >
          最新发现
        </m-sub2>
        <Brief :list="sumList" color="#fff" />
        <!-- <div v-if="showChart" class="chart">
          <m-line :dataset="lineData" :option="lineOption" />
        </div> -->
      </div>
      <div class="gate-wrapper">
        <m-sub2>门岗值守分布</m-sub2>
        <div class="gate">
          <p>直管公房</p>
          <Summary :list="zggfList" :avatar="avatar7" />
        </div>
        <div class="gate">
          <p>社会物业</p>
          <Summary :list="shwyList" :avatar="avatar7" />
        </div>
      </div>
      <div>
        <m-sub2>平安地图</m-sub2>
        <div class="safe-map">
          <div>
            <p
              v-for="(item, index) in safeMap"
              :key="item.cmtName"
              :class="{ show: index === curIndex }"
              @click="clickStreetName(item, index)"
            >
              <span>{{ item.cmtName }}</span>
              <m-count class="count" :value="item.score" />
            </p>
          </div>
          <div>
            <img :src="mapPhoto" @click="openUrl" />
          </div>
        </div>
      </div>
    </div>
    <m-modal
      v-model="searchModal"
      width="20%"
      offset="-50%"
      enter="fadeInUp"
      leave="fadeOutDown"
      translate-y="90%"
      :mask-closable="false"
      :title="`${streetData.cmtName}${streetData.peaceYear}年${streetData.quarter}得分`"
      @close="curIndex = null"
    >
      <div>
        <m-form
          :template="[
            'score:得分|householdNum:户籍户数(户)',
            'foreignNum:外来人口|permanentNum:常住人口',
            'newNum:新航人员|improvementNum:自强人员',
            'healthNum:安康人员|sunNum:阳光人员',
            'remark:总结',
          ]"
          :data="streetData"
        />
      </div>
    </m-modal>
  </m-card>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import Brief from '../components/brief.vue'
import Summary from '../components/summary.vue'
import store from '@/store'
import icon39 from '@/assets/images/icon39.png'
import icon40 from '@/assets/images/icon40.png'
import icon41 from '@/assets/images/icon41.png'
import avatar7 from '@/assets/images/avatar7.png'
import mapPhoto from '@/assets/images/map.png'

export default defineComponent({
  name: 'Police',
  components: { Brief, Summary },
  setup() {
    const newFind = computed(() => store.state.pubulicSafeNewFindNum)
    const searchModal = ref(false)
    const showChart = computed(() => store.state.curTheme === 'safety')
    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
    const zggfList = computed(
      // () => store.state.pubulicSafeGateSenteryZhiguangongfang
      () => [
        { name: '有出入口', value: 283 },
        { name: '已封闭', value: 130 },
        { name: '有门岗处', value: 54 },
        { name: '有值守处', value: 86 },
      ]
    ) // 门岗值守数据 - 直管公房
    const shwyList = computed(
      // () => store.state.pubulicSafeGateSenteryShehuiwuye
      () => [
        { name: '有出入口', value: 23 },
        { name: '已封闭', value: 40 },
        { name: '有门岗处', value: 12 },
        { name: '有值守处', value: 28 },
      ]
    ) // 门岗值守数据 - 社会物业
    const safeMap = computed(() => store.state.pubulicSafeMap) // 门岗值守数据 - 社会物业
    const streetData = ref({})

    const sumList = computed(() => {
      return [
        { name: '今日发现', value: newFind.value.find, icon: icon39 },
        { name: '今日处置中', value: newFind.value.doing, icon: icon40 },
        { name: '今日结案', value: newFind.value.done, icon: icon41 },
      ]
    })
    const lineData = ref({
      dimensions: [
        { name: 'time', displayName: '时间' },
        { name: 'work1', displayName: '第1工作站' },
        { name: 'work2', displayName: '第2工作站' },
        { name: 'work3', displayName: '第3工作站' },
      ],
      source: [
        { time: '01:00', work1: 100, work2: 200, work3: 300 },
        { time: '02:00', work1: 110, work2: 210, work3: 320 },
        { time: '03:00', work1: 120, work2: 230, work3: 340 },
        { time: '04:00', work1: 130, work2: 240, work3: 360 },
        { time: '05:00', work1: 140, work2: 250, work3: 380 },
        { time: '06:00', work1: 150, work2: 260, work3: 390 },
        { time: '07:00', work1: 150, work2: 260, work3: 390 },
        { time: '08:00', work1: 100, work2: 200, work3: 300 },
        { time: '09:00', work1: 110, work2: 210, work3: 320 },
        { time: '10:00', work1: 120, work2: 230, work3: 340 },
        { time: '11:00', work1: 130, work2: 240, work3: 360 },
        { time: '12:00', work1: 140, work2: 250, work3: 380 },
        { time: '13:00', work1: 150, work2: 260, work3: 390 },
        { time: '14:00', work1: 150, work2: 260, work3: 390 },
      ],
    })
    const lineOption = ref({
      color: ['#0073CA', '#4F953B', '#FF9D27'],
      legend: {
        right: '1%',
        itemWidth: fontSize.value,
        itemHeight: fontSize.value * 0.8,
      },
      grid: {
        bottom: '15%',
      },
      dataZoom: [
        {
          start: 0,
          end: 30,
          minSpan: 10,
          bottom: '5%',
          height: fontSize.value * 1.2,
        },
      ],
    })

    const curIndex = ref<number | null>(null)
    const clickStreetName = (item: any, index: number): void => {
      curIndex.value = index
      searchModal.value = true
      streetData.value = item
    }
    function openUrl() {
      window.open('http://172.21.180.20:8033/Default.aspx', '_blank')
    }
    return {
      mapPhoto,
      avatar7,
      sumList,
      lineData,
      lineOption,
      showChart,
      safeMap,
      // mapList,
      streetData,
      searchModal,
      zggfList,
      shwyList,
      curIndex,
      clickStreetName,
      newFind,
      openUrl,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import ('../../components/MyComponent/main.styl')
.wrapper
  width 100%
  height 100%
  display flex
  flex-direction column
  justify-content space-between
.chart
  width 100%
  height 1.4rem
  margin 0.1rem 0
.gate-wrapper
  margin .1rem 0
.gate
  margin-bottom 0.1rem
  p
    margin 0.05rem 0
.safe-map
  display flex
  $card-bg2()
  padding .1rem
  margin .1rem 0
  >div
    &:first-child
      cursor pointer
      flex 1.2
      display flex
      flex-wrap wrap
      >p
        width 50%
        padding .01rem 0
        span
          color #ccc
        .count
          margin-left 0.08rem
          font-size 0.12rem
          font-family $font-barlow
        &.show,
        &:hover
          span
            color #FFD400
          .count
            color #FFD400
    &:last-child
      $center()
      flex 1
      >img
        width 80%
        cursor pointer
        opacity 0.7
        transition opacity .3s ease-in-out
        &:hover
          opacity 1
</style>
