<template>
  <m-card title="110非警情">
    <div>
      <m-sub :addition="{ value: 3, unit: '近30mins' }">最新发现</m-sub>
      <Brief :list="sumList" />
      <div v-if="showChart" class="chart">
        <m-line :dataset="lineData" :option="lineOption" />
      </div>
    </div>
    <div>
      <m-sub>门岗值守分布</m-sub>
      <div class="gate">
        <p>直管公房</p>
        <Summary :list="houseSum" />
      </div>
      <div class="gate">
        <p>社会物业</p>
        <Summary :list="houseSum" />
      </div>
    </div>
    <div>
      <m-sub>平安地图</m-sub>
      <div class="safe-map">
        <div>
          <p v-for="item in mapList" :key="item.name">
            <span>{{ item.name }}</span>
            <m-count class="count" :value="item.value" />
          </p>
        </div>
        <div>
          <img src="@/assets/images/map.png" />
        </div>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import Summary, { SummaryProp } from '../components/summary.vue'
import store from '@/store'
import icon15 from '@/assets/images/icon15.png'
import icon16 from '@/assets/images/icon16.png'
import icon17 from '@/assets/images/icon17.png'

export default defineComponent({
  name: 'Police',
  components: { Brief, Summary },
  setup() {
    const showChart = computed(() => store.state.curTheme === 'safety')
    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
    const sumList = ref<BriefProp[]>([
      { name: '今日发现', value: 157, icon: icon15 },
      { name: '今日处置中', value: 64, icon: icon16 },
      { name: '今日结案', value: 37, icon: icon17 },
    ])
    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: ['#9B88F9', '#4F953B', '#FFCE34'],
      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 houseSum = ref<SummaryProp[]>([
      { name: '出入口', value: 165 },
      { name: '已封闭', value: 165 },
      { name: '有门岗处', value: 165 },
      { name: '值守处', value: 165 },
    ])
    const mapList = ref([
      { name: '龙泉', value: 92 },
      { name: '厦门', value: 90 },
      { name: '牛庄', value: 90 },
      { name: '贵州', value: 92 },
      { name: '长江', value: 92 },
      { name: '云中', value: 92 },
      { name: '小花园', value: 92 },
      { name: '平望', value: 92 },
      { name: '振兴', value: 90 },
      { name: '新昌', value: 90 },
      { name: '江阴', value: 90 },
      { name: '顺天村', value: 92 },
      { name: '新桥', value: 92 },
      { name: '三德', value: 90 },
      { name: '福海', value: 92 },
      { name: '福瑞', value: 90 },
      { name: '承兴', value: 92 },
      { name: '定兴', value: 92 },
    ])
    return {
      sumList,
      lineData,
      lineOption,
      showChart,
      houseSum,
      mapList,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import ('../../components/MyComponent/main.styl')

.chart
  width 100%
  height 1.4rem
  margin .1rem 0
.gate
  margin-bottom .1rem
  p
    margin-bottom .05rem
.safe-map
  display flex
  >div
    &:first-child
      flex 1.7
      display flex
      flex-wrap wrap
      >p
        width 33.3%
        margin-bottom .04rem
        span
          color #ccc
        .count
          margin-left .08rem
          font-size .12rem
    &:last-child
      $center()
      flex 1
      background url('@/assets/images/border3.png') 100% / 100% 100% no-repeat
      >img
        width 80%
</style>
