<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"
              @select="changeYear"
            >
              <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"
                  @init="handleInit"
                />
                <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"
                  style="width: 70%"
                >
                  <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"
                @click="changePie2(item, i)"
              >
                <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="searchModal = true">
              重点关注楼宇
              <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"
      enter="fadeInRight"
      leave="fadeOutRight"
      offset="65%"
      width="40%"
      title="重点关注楼宇清单"
      :mask-closable="false"
    >
      <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() {
    const showChart = computed(() => store.state.curTheme === 'safety')

    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 buildings = computed(() => store.state.pubulicSafeBuildings)
    const outHouseWall = computed(() => store.state.pubulicSafeOutHouseWall)

    const year = ref('2020') //年份
    const yearOptions = ref(['2020', '2019']) //年份option
    const houseSum = ref([
      { name: '检查楼数', value: 0 },
      { name: '隐患点数', value: 0 },
      { name: '危险点数', value: 0 },
    ])

    const secPieKey = ref('外立面附加设施隐患点') // 默认展示的第二饼图类型
    const pieData1 = ref({
      dimensions: [
        { name: 'name', displayName: '类型' },
        { name: 'value', displayName: '数量' },
      ],
      source: [
        {
          name: '外立面附加设施危险点',
          value: 1,
        },
        {
          name: '外立面附加设施隐患点',
          value: 1,
        },
        {
          name: '外墙面层隐患点',
          value: 1,
        },
        {
          name: '外墙面层危险点',
          value: 1,
        },
      ],
    })

    //切换年份
    const changeYear = (value: string) => {
      year.value = value
    }
    //切换第二饼图展示的类别
    const changePie2 = (item: any, i: number) => {
      secPieKey.value = item.name
    }

    const list = computed(() => {
      return [
        {
          img: Circle,
          value: SOSMaterail.value.floodPreventionUnits || 0,
          name: '防汛防台',
        },
        {
          img: Circle,
          value: SOSMaterail.value.warmAntifreeze || 0,
          name: '防寒抗冻',
        },
        {
          img: Circle,
          value: SOSMaterail.value.emergencySupplies || 0,
          name: '疫情控制',
        },
        {
          img: Circle,
          value: SOSMaterail.value.emergencyRescue || 0,
          name: '应急抢险',
        },
      ]
    })

    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 pieData2 = ref({
      dimensions: [
        { name: 'name', displayName: secPieKey.value },
        { name: 'value', displayName: '数量' },
      ],
      source: [
        { name: '第一工作站', value: 1 },
        { name: '第二工作站', value: 1 },
        { name: '第三工作站', value: 1 },
      ],
    })
    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,
          },
        },
      ],
    })
    const handleInit = (instance: any) => {
      instance.on('click', (e: any) => {
        console.log('click~~~~~', e)
        secPieKey.value = e.name
      })
    }

    watch(
      // 监听年份切花更改检查楼数  隐患点数 危险点数
      [() => outHouseWall.value, () => year.value],
      ([data, year]) => {
        if (data.length === 0) return
        const {
          checkNum = 0,
          hiddenPoint = 0,
          dangerPoint = 0,
          outerWallDangerPoint = 0,
          outerWallFacilityDangerPoint = 0,
          outerWallFacilityHiddenPoint = 0,
          outerWallHiddenPoint = 0,
        } = data.find((e: any) => e.year === year)
        houseSum.value = [
          { name: '检查楼数', value: checkNum },
          { name: '隐患点数', value: hiddenPoint },
          { name: '危险点数', value: dangerPoint },
        ]
        pieData1.value = {
          dimensions: [
            { name: 'name', displayName: '类型' },
            { name: 'value', displayName: '数量' },
          ],
          source: [
            {
              name: '外墙面层隐患点',
              value: outerWallHiddenPoint,
            },
            {
              name: '外墙面层危险点',
              value: outerWallDangerPoint,
            },
            {
              name: '外立面附加设施隐患点',
              value: outerWallFacilityHiddenPoint,
            },
            {
              name: '外立面附加设施危险点',
              value: outerWallFacilityDangerPoint,
            },
          ],
        }
      },
      { immediate: true }
    )
    watch(
      [() => pieData.value, () => year.value, () => secPieKey.value],
      ([data, year, secPieKey]) => {
        if (data.length === 0) return
        // console.log(data, year)
        const arr: any = []
        data.forEach((item: any) => {
          if (item.year == year) {
            arr.push(item)
          }
        })
        let secPieKeyName = ''
        switch (secPieKey) {
          case '外墙面层隐患点':
            secPieKeyName = 'outerWallHiddenPoint'
            break
          case '外墙面层危险点':
            secPieKeyName = 'outerWallDangerPoint'
            break
          case '外立面附加设施隐患点':
            secPieKeyName = 'outerWallFacilityHiddenPoint'
            break
          case '外立面附加设施危险点':
            secPieKeyName = 'outerWallFacilityDangerPoint'
            break

          default:
            break
        }

        const first = arr.find(
          (e: any) => e.workstationName == '第一综合网格工作站（武胜路）'
        )[secPieKeyName]
        const second = arr.find(
          (e: any) => e.workstationName == '第二综合网格工作站（厦门路）'
        )[secPieKeyName]
        const third = arr.find(
          (e: any) => e.workstationName == '第三综合网格工作站（牯林路）'
        )[secPieKeyName]

        // // 将第二张饼图的数据更新
        pieData2.value = {
          dimensions: [
            { name: 'name', displayName: secPieKey },
            { name: 'value', displayName: '数量' },
          ],
          source: [
            { name: '第一工作站', value: first || 0 },
            { name: '第二工作站', value: second || 0 },
            { name: '第三工作站', value: third || 0 },
          ],
        }
      },
      { immediate: true }
    )

    return {
      list,
      houseSum,
      searchModal,
      population,
      pieOption,
      pieData2,
      pieData1,
      showChart,
      changeYear,
      year,
      yearOptions,
      SOSMaterail,
      buildings,
      outHouseWall,
      pieData,
      changePie2,
      handleInit,
    }
  },
})
</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 67%
        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 30%
        >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
            .count
              color #fff
              padding-left 0.03rem
            >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>
