<template>
  <m-card title="110非警情">
    <div>
      <m-sub :addition="{ value: String(newFind.newFind), 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="zggfList" />
      </div>
      <div class="gate">
        <p>社会物业</p>
        <Summary :list="shwyList" />
      </div>
    </div>
    <div>
      <m-sub>平安地图</m-sub>
      <div class="safe-map">
        <div>
          <p
            v-for="(item, index) in safeMap"
            :key="item.cmtName"
            :class="`${item.light ? 'show' : ''}`"
            @click="clickStreetName(item, index)"
          >
            <span>{{ item.cmtName }}</span>
            <m-count class="count" :value="item.score" />
          </p>
        </div>
        <div>
          <img src="@/assets/images/map.png" />
        </div>
      </div>
    </div>
    <m-modal
      v-model="searchModal"
      width="20%"
      offset="-50%"
      enter="fadeInUp"
      leave="fadeOutDown"
      translate-y="84%"
      :title="`${streetData.cmtName}2021年1季度得分`"
    >
      <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, { 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() {
    store.dispatch('GET_PUBLICSAFE_RIGHT_GATE')
    store.dispatch('GET_PUBLICSAFE_RIGHT_SAFEMAP')
    store.dispatch('GET_PUBLICSAFE_NEWFIND')
    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
    ) // 门岗值守数据 - 直管公房
    const shwyList = computed(
      () => store.state.pubulicSafeGateSenteryShehuiwuye
    ) // 门岗值守数据 - 社会物业
    const safeMap = computed(() => store.state.pubulicSafeMap) // 门岗值守数据 - 社会物业
    const streetData = ref('')

    const sumList = computed(() => {
      return [
        { name: '今日发现', value: newFind.value.find, icon: icon15 },
        { name: '今日处置中', value: newFind.value.doing, icon: icon16 },
        { name: '今日结案', value: newFind.value.done, 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 clickStreetName = (item: any, index: number): void => {
      console.log(item, index)
      console.log(safeMap.value)
      console.log(safeMap.value[index])
      safeMap.value.forEach((item, index) => {
        safeMap.value[index].light = false
      })
      safeMap.value[index].light = true
      searchModal.value = !searchModal.value
      streetData.value = item
    }
    // 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,
      safeMap,
      // mapList,
      streetData,
      searchModal,
      zggfList,
      shwyList,
      clickStreetName,
      newFind,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import ('../../components/MyComponent/main.styl')
.chart
  width 100%
  height 1.4rem
  margin 0.1rem 0
.gate
  margin-bottom 0.01rem
  p
    margin-bottom 0.01rem
.safe-map
  display flex
  >div
    &:first-child
      cursor pointer
      flex 1.7
      display flex
      flex-wrap wrap
      >p
        width 33.3%
        margin-bottom 0.04rem
        span
          color #ccc
        .count
          margin-left 0.08rem
          font-size 0.12rem
      .show
        span
          color #FFD400
        .count
          color #FFD400
    &:last-child
      $center()
      flex 1
      background url('@/assets/images/border3.png') 100% / 100% 100% no-repeat
      >img
        width 80%
</style>
