<template>
  <m-card title="有求必应">
    <div class="today-case">
      <m-sub2 :addition="{ value: todayCase.totalNum, unit: '件' }">
        今日已处置案件数
      </m-sub2>
      <Brief :list="summary" color="#F7933E" />
      <div class="process">
        <div v-for="(item, i) in process" :key="item.name">
          <template v-if="(i + 1) % 2 === 0">
            <m-count class="count" :value="item.value" />
            <p>{{ item.name }}</p>
          </template>
          <template v-else>
            <p>{{ item.name }}</p>
            <m-count class="count" :value="item.value" />
          </template>
        </div>
      </div>
      <div v-if="showChart" class="chart">
        <m-bar
          v-if="barData.source.length > 0"
          :dataset="barData"
          :option="barOption"
        />
        <m-empty v-else />
      </div>
      <div class="chart wrapper">
        <img :src="pyramid" />
        <div>
          <div v-for="item in pieData" :key="item.name">
            <span :style="{ background: item.color }" />
            <p>
              <span>{{ item.name }}</span>
              <span>{{ item.value }}%</span>
              <span>{{ item.num }}</span>
            </p>
            <!-- {{ item.name }}： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
              item.value
            }}% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.num }} -->
          </div>
        </div>
      </div>
    </div>
    <div class="case-follow">
      <m-sub2
        search-able
        @search="searchKey = $event"
        @close="searchKey = null"
      >
        跟踪
      </m-sub2>
      <m-empty
        v-if="!trackEvent || trackEvent.length === 0"
        style="height: 1.8rem"
      />
      <m-scroll
        v-else
        :limit="2"
        :length="trackEvent.length"
        :step="1"
        mode="2"
      >
        <div v-for="(item, i) in trackEvent" :key="i" class="detail">
          <div class="title">
            <p>{{ item.communityName || '无关联小区' }}</p>
            <span />
            <p>{{ item.businsessTypeLv1 }}</p>
          </div>
          <div class="msg">
            <p>{{ item.address }}</p>
            <p>{{ item.acceptTime }}</p>
          </div>
          <m-step :steps="steps" :current="getCurrent(item.status)" />
        </div>
      </m-scroll>
    </div>
  </m-card>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import Brief from '../components/brief.vue'
import store from '@/store'
import pyramid from '@/assets/images/pyramid.png'

export default defineComponent({
  name: 'Demand',
  components: { Brief },
  setup() {
    const todayCase = computed(() => store.state.todayCase)
    const stageCase = computed(() => store.state.stageCase)
    const workstationKind = computed(() => store.state.workstationKind)
    const pieDatamodel = computed(() => store.state.workstationKindPiEData)

    const searchKey = ref('')
    const trackEvent = computed(() => {
      const data = store.state.trackEvent
      return searchKey.value
        ? data.filter((item: any) => item.address.includes(searchKey.value))
        : data
    })

    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
    const showChart = computed(() => store.state.curTheme === 'manage')
    const summary = computed(() => {
      return [
        {
          name: '综合管理',
          value: [
            todayCase.value.comprehensiveDisposalNum || 0,
            todayCase.value.comprehensiveNum || 0,
          ],
        },
        {
          name: '街面管理',
          value: [
            todayCase.value.streetDisposalNum || 0,
            todayCase.value.streetNum || 0,
          ],
        },
        {
          name: '小区管理',
          value: [
            todayCase.value.communityDisposalNum || 0,
            todayCase.value.communityNum || 0,
          ],
        },
      ]
    })
    const process = computed(() => {
      return [
        {
          name: '发现',
          value: stageCase.value.discoveryNum || 0,
        },
        {
          name: '立案',
          value: stageCase.value.recordNum || 0,
        },
        {
          name: '派遣',
          value: stageCase.value.dispatchNum || 0,
        },
        {
          name: '处置',
          value: stageCase.value.disposalNum || 0,
        },
        {
          name: '检查',
          value: stageCase.value.checkNum || 0,
        },
        {
          name: '结案',
          value: stageCase.value.endNum || 0,
        },
      ]
    })
    const barData = computed(() => {
      if (workstationKind.value[0]) {
        const source: { date: any; data1: any; data2: any; data3: any }[] = []
        workstationKind.value.forEach((element: any, index: number) => {
          const {
            oneDisposalNum = 0,
            oneNum = 0,
            twoDisposalNum = 0,
            twoNum = 0,
            threeDisposalNum = 0,
            threeNum = 0,
            oneEndNum = 0,
            twoEndNum = 0,
            threeEndNum = 0,
          } = workstationKind.value[index]?.statistical || {}
          source.unshift({
            date: workstationKind.value[index].date,
            data1: +oneNum + +twoNum + +threeNum,
            data2: +oneDisposalNum + +twoDisposalNum + +threeDisposalNum,
            data3: +oneEndNum + +twoEndNum + +threeEndNum,
          })
        })
        return {
          dimensions: [
            { name: 'date', displayName: '日期' },
            { name: 'data1', displayName: '发现数' },
            { name: 'data2', displayName: '处置数' },
            { name: 'data3', displayName: '结案数' },
          ],
          source: source,
        }
      } else {
        return {
          dimensions: [
            { name: 'date', displayName: '日期' },
            { name: 'data1', displayName: '发现数' },
            { name: 'data2', displayName: '处置数' },
            { name: 'data3', displayName: '结案数' },
          ],
          source: [
            // { date: '2020-11-12', data1: 110, data2: 110, data3: 120 },
            // { date: '2020-11-13', data1: 120, data2: 130, data3: 140 },
            // { date: '2020-11-14', data1: 130, data2: 140, data3: 160 },
            // { date: '2020-11-15', data1: 140, data2: 150, data3: 180 },
            // { date: '2020-11-16', data1: 150, data2: 160, data3: 190 },
            // { date: '2020-11-17', data1: 150, data2: 160, data3: 190 },
            // { date: '2020-11-18', data1: 150, data2: 160, data3: 190 },
          ],
        }
      }
    })
    const barOption = ref({
      color: ['#77BFF9', '#EDB872', '#64C29D'],
      legend: {
        right: '2%',
        itemWidth: fontSize.value * 0.6,
        itemHeight: fontSize.value * 0.8,
      },
      xAxis: {
        axisLabel: {
          formatter: (value: string) => {
            const arr = value.split('-')
            return `${arr[1]}.${arr[2]}`
          },
        },
      },
      yAxis: {
        minInterval: 1,
      },
      series: [1, 2, 3].map(() => ({
        type: 'bar',
        barWidth: '18%',
        itemStyle: {
          borderRadius: 8,
        },
        barGap: 0,
        stack: '总量',
      })),
    })
    const pieData = computed(() => {
      const {
        oneDisposalNum = 0,
        oneNum = 0,
        twoDisposalNum = 0,
        twoNum = 0,
        threeDisposalNum = 0,
        threeNum = 0,
      } = pieDatamodel.value
      return [
        {
          name: '第一工作站',
          value: oneNum ? Math.floor((oneDisposalNum / oneNum) * 100) : 0,
          num: oneNum,
          color: '#FE9B5F',
        },
        {
          name: '第二工作站',
          value: twoNum ? Math.floor((twoDisposalNum / twoNum) * 100) : 0,
          num: twoNum,
          color: '#36CFE1',
        },
        {
          name: '第三工作站',
          value: threeNum ? Math.floor((threeDisposalNum / threeNum) * 100) : 0,
          num: threeNum,
          color: '#429BDF',
        },
      ]
    })
    const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
    const getCurrent = (status: string): number => {
      if (!status) return 0
      if (status.includes('受理')) return 1
      if (status.includes('结')) return 5
      if (status.includes('检查')) return 4
      const index = steps.value.indexOf(status.split('').slice(1).join(''))
      return index < 0 ? 0 : index
    }
    return {
      pyramid,
      summary,
      showChart,
      process,
      barData,
      barOption,
      pieData,
      steps,
      todayCase,
      searchKey,
      trackEvent,
      workstationKind,
      getCurrent,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
$arrow-style()
  display block
  content ''
  width 0.2rem
  height @width
  background url('@/assets/images/arrow.png') 100% / 100% 100% no-repeat
  position absolute
  left 0
  top 0
  bottom 0
  margin auto
  transform translate(-90%, 0)
.today-case
  .process
    width 100%
    background-image url('@/assets/images/line.png')
    background-repeat no-repeat
    background-size 90%
    background-position 50% 50%
    margin .05rem auto .1rem
    position relative
    display flex
    align-items center
    // justify-content space-between
    >div
      flex 1
      text-align center
      height .6rem
      display flex
      flex-direction column
      justify-content space-between
      p
        border .01rem solid #466275
        font-size .08rem
        background rgba(71,179,255,.15)
        width .3rem
        margin 0 auto
        border-radius .02rem
      .count
        font-size .12rem
        font-weight bold
  .chart
    width 100%
    height 1.1rem
    &.wrapper
      display flex
      margin .05rem 0
      padding-left .2rem
      >img
        width 36%
        margin-right .28rem
      >div
        flex 1
        font-weight bold
        &:last-child
          $center()
          flex-direction column
          >div
            display flex
            width 100%
            align-items center
            margin-bottom 0.05rem
            position relative
            >p
              flex 1
              display flex
              justify-content space-between
              padding-right .15rem
              box-sizing border-box
              align-items center
            >span
              display inline-block
              width 0.06rem
              height @width
              border-radius 50%
              margin-right 0.1rem
              &:before
                content ''
                width .6rem
                height .01rem
                display block
                position absolute
                top 0
                bottom 0
                margin auto 0
                background inherit
                transform translateX(-120%)
.case-follow
  height 1.8rem
  overflow hidden
.detail
  display flex
  flex-direction column
  justify-content space-between
  padding 0.1rem
  $card-bg2()
  height .95rem
  margin-top .05rem
  box-sizing border-box
  .title
    display flex
    align-items center
    p
      font-size 0.12rem
      &:last-child
        font-size 0.1rem
    span
      display block
      height 0
      border-bottom .01rem dashed $primary-border
      flex 1
      margin 0 0.1rem
  .msg
    $center()
    justify-content space-between
    font-size 0.08rem
</style>
