<template>
  <div class="public-service">
    <m-card mode="border">
      <Police />
    </m-card>
    <m-card mode="border">
      <div class="population"><Population /></div>
      <div class="house"><House /></div>
      <div class="company"><Company /></div>
    </m-card>
    <m-card id="flex-start" mode="border">
      <m-card title="应急物资储备">
        <div class="emergency">
          <div v-for="(item, index) in list" :key="index">
            <div>
              <p>{{ item.name }}</p>
              <p class="num">{{ item.value }}</p>
            </div>
            <img :src="item.img" />
          </div>
        </div>
      </m-card>
      <m-card title="房屋外立面">
        <div class="outHouse">
          <div class="view-selector">
            <a-select
              :value="year"
              dropdown-class-name="view-selector-drop-down"
            >
              <a-select-option
                v-for="option in yearOptions"
                :key="option"
                :value="option"
              >
                {{ option }}
              </a-select-option>
            </a-select>
          </div>
          <Summary class="summary" :two-child="true" :list="houseSum" />
          <div class="chartBox">
            <div v-if="showChart" class="drawCharts">
              <div>
                <m-pie class="chart1" :dataset="pieData1" :option="pieOption" />
                <span class="line"></span>
                <m-pie class="chart2" :dataset="pieData2" :option="pieOption" />
              </div>
              <div class="legend">
                <div v-for="(item, i) in pieData2.source" :key="item.name">
                  <p>
                    <span :style="{ background: pieOption.color[i][0] }" />
                    {{ item.name }}
                  </p>
                  <p>
                    <m-count class="count" :value="item.value" />
                  </p>
                </div>
              </div>
            </div>
            <div class="legendBottom">
              <div v-for="(item, i) in pieData1.source" :key="item.name">
                <p>
                  <span :style="{ background: pieOption.color[i][0] }" />
                  <m-count class="count" :value="item.value" />
                </p>
                <span style="">{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="bottomBox">
            <SubTitle @clicktit="clickSecTitle">
              重点关注楼宇
              <template #secTitle> 查看清单 </template>
            </SubTitle>
            <div class="content">
              <div v-for="item in buildings.slice(0, 6)" :key="item.id">
                <div>
                  <span>{{ item.projectName }}</span>
                  <!-- <img src="@/assets/images/location.png" /> -->
                </div>
                <div class="secRow">
                  <span>
                    <span>隐患 </span>
                    <m-count
                      class="count"
                      :value="item.outerWallFacilityHiddenPoint"
                    />
                  </span>
                  <span>
                    <span>危险 </span>
                    <m-count
                      class="count"
                      :value="item.outerWallFacilityDangerPoint"
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </m-card>
    </m-card>
    <m-modal v-model="searchModal" width="50%" title="重点关注楼宇清单">
      <div>
        <m-table
          :template="[
            '楼宇名称|房屋地址*2|检测日期|房屋用途|建造年份|平面形式|建筑面积|结构类别|层数|隐患点|危险点',
            'projectName|houseAddr|inspectionDate|useType|buildYear|planeSituation|constructArea|structureType|floor|outerWallFacilityHiddenPoint|outerWallFacilityDangerPoint',
          ]"
          :data="buildings"
        ></m-table>
      </div>
    </m-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import Police from './police.vue'
import Population from './population.vue'
import House from './house.vue'
import Company from './company.vue'
import Brief from '../components/brief.vue'
import Summary from '../components/summary.vue'
import SubTitle from '../components/sub-title.vue'
import store from '@/store'
import Circle from '@/assets/images/Circle.png'
import { log } from 'util'
export default defineComponent({
  name: 'PublicSafety',
  components: { Police, Population, House, Company, SubTitle, Brief, Summary },

  setup() {
    store.dispatch('GET_PUBLICSAFE_SOS_MATERIAL')
    store.dispatch('GET_PUBLICSAFE_OUTHOUSEWALL')
    store.dispatch('GET_PUBLICSAFE_BUILDINGS')
    store.dispatch('GET_PUBLICSAFE_PIEDATA')

    const searchModal = ref(false)
    const SOSMaterail = computed(() => store.state.pubulicSafeSOSMaterail)
    const pieData = computed(() => store.state.pubulicSafePieData)
    const outHouseWall2019 = computed(
      () => store.state.pubulicSafeOutHouseWall2019
    )
    const outHouseWall2020 = computed(
      () => store.state.pubulicSafeOutHouseWall2020
    )
    const buildings = computed(() => store.state.pubulicSafeBuildings)

    const showChart = computed(() => store.state.curTheme === 'safety')

    const year = '2020'
    const yearOptions = ref(['2020', '2019'])

    const list = computed(() => {
      return [
        {
          img: Circle,
          value: SOSMaterail.value.floodPreventionUnits,
          name: '防汛防台',
        },
        {
          img: Circle,
          value: SOSMaterail.value.warmAntifreeze,
          name: '防寒抗冻',
        },
        {
          img: Circle,
          value: SOSMaterail.value.emergencySupplies,
          name: '疫情控制',
        },
        {
          img: Circle,
          value: SOSMaterail.value.emergencyRescue,
          name: '应急抢险',
        },
      ]
    })
    const houseSum = computed(() => {
      return [
        { name: '检查楼数', value: outHouseWall2019.value.checkNum },
        { name: '隐患点数', value: outHouseWall2019.value.hiddenPoint },
        { name: '危险点数', value: outHouseWall2019.value.dangerPoint },
      ]
    })
    const population = ref([
      { name: '楼宇名称', value: 4, danger: 1 },
      { name: '楼宇名称', value: 4, danger: 1 },
      { name: '楼宇名称', value: 4, danger: 1 },
      { name: '楼宇名称', value: 4, danger: 1 },
      { name: '楼宇名称', value: 4, danger: 1 },
      { name: '楼宇名称', value: 4, danger: 1 },
    ])

    const pieData1 = computed(() => {
      return {
        dimensions: [
          { name: 'name', displayName: '类型' },
          { name: 'value', displayName: '数量' },
        ],
        source: [
          {
            name: '外立面附加设施危险点',
            value: outHouseWall2019.value.outerWallFacilityDangerPoint,
          },
          {
            name: '外立面附加设施隐患点',
            value: outHouseWall2019.value.outerWallFacilityHiddenPoint,
          },
          {
            name: '外墙面层隐患点',
            value: outHouseWall2019.value.outerWallHiddenPoint,
          },
          {
            name: '外墙面层危险点',
            value: outHouseWall2019.value.outerWallDangerPoint,
          },
        ],
      }
    })
    const pieData2 = ref({
      dimensions: [
        { name: 'name', displayName: '类型' },
        { name: 'value', displayName: '数量' },
      ],
      source: [
        { name: '第一工作站', value: 30 },
        { name: '第二工作站', value: 40 },
        { name: '第三工作站', value: 48 },
      ],
    })
    const pieOption = ref({
      color: [
        ['#F76B1C', '#FAD961'],
        ['#429321', '#B4EC51'],
        ['#3023AE', '#C86DD7'],
        ['#51B7EC', '#212F93'],
      ],
      legend: { show: false },
      series: [
        {
          type: 'pie',
          radius: [0, '90%'],
          center: ['50%', '50%'],
          label: {
            show: false,
          },
        },
      ],
    })
    function clickSecTitle() {
      // 点击查看清单按钮 弹框展示全部重点关注楼宇清单列表
      searchModal.value = true
    }
    return {
      list,
      houseSum,
      searchModal,
      population,
      pieOption,
      pieData2,
      pieData1,
      showChart,
      year,
      yearOptions,
      SOSMaterail,
      outHouseWall2019,
      outHouseWall2020,
      buildings,
      clickSecTitle,
      pieData,
      // handleChangeYear,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.public-service
  $full()
  display flex
  justify-content space-between
  >div
    height 100%
    width 33%
    .population
      flex 1
    .house
      flex 2
    .company
      flex 1.2
#flex-start
  display flex
  :deep(.card-content)
    justify-content flex-start
  >div
    flex 1
    &:last-child
      flex 2
  .emergency
    flex 1
    display flex
    flex-wrap wrap
    align-items center
    >div
      display flex
      height 50%
      flex-wrap wrap
      align-items center
      width 50%
      position relative
      img
        width 100%
      >div
        position absolute
        text-align center
        top 40%
        left 50%
        transform translate(-50%, -50%)
        .num
          font-size 0.2rem
          font-family $font-pang
  .outHouse
    // white-space nowrap
    flex 2
    .chartBox
      height 40%
      display flex
      flex-direction column
      .drawCharts
        height 60%
        display flex
        >div
          display flex
          justify-content space-around
          width 100%
          align-items center
          .chart1
            width 50%
          .chart2
            width 35%
          .line
            height 3px
            width 15%
            background lime
        .legend
          display flex
          flex-direction column
          justify-content space-around
          padding 0 0.1rem
          >div
            display flex
            justify-content space-between
            align-items center
            >p
              &:first-child
                span
                  width 0.06rem
                  height @width
                  display inline-block
                  margin-right @width
                  border-radius 50%
              &:last-child
                .count
                  font-size 0.12rem
                .unit
                  font-size 0.08rem
                  color #aaa
                  margin-left 0.03rem
      .legendBottom
        display flex
        flex-direction row
        justify-content space-around
        text-align left
        height 40%
        >div
          width 25%
          display flex
          flex-direction column
          justify-content space-between
          align-items center
          >span
            width 70%
          >p
            flex 1
            white-space nowrap
            width 100%
            padding-left 0.06rem
            &:first-child
              padding-left 0
              span
                width 0.06rem
                height @width
                display inline-block
                margin-right @width
                border-radius 50%
            &:last-child
              .count
                font-size 0.12rem
              .unit
                font-size 0.08rem
                color #aaa
                margin-left 0.03rem
    .bottomBox
      height 40%
      display flex
      flex-direction column
      .content
        flex 1
        display flex
        justify-content space-around
        align-items center
        flex-wrap wrap
        >div
          width 32%
          background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
          padding 0.08rem
          .count
            font-size 0.12rem
          >div
            display flex
            align-items center
            justify-content space-between
            width 100%
            span
              font-size 0.09rem
              color #ccc
            img
              width 0.1rem
              height @width
          .secRow
            display flex
            justify-content space-around
            flex-direction row
            font-size 0.06rem
            >span
              display flex
              flex-direction row
              align-items center
              justify-content space-around
    .view-selector
      float right
      height 8%
      padding 0.03rem 0
    .summary
      height 10%
</style>
