<template>
  <m-card title="有求必应">
    <div class="today-case">
      <m-sub :addition="{ value: todayCase.totalNum, unit: '件' }">
        今日案件数
      </m-sub>
      <Brief :list="summary" />
      <div class="process">
        <img src="@/assets/images/arrow.png" />
        <div>
          <div v-for="item in process.slice(0, 3)" :key="item.name">
            <m-count class="count" :value="item.value" />
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div>
          <div v-for="item in process.slice(3)" :key="item.name">
            <m-count class="count" :value="item.value" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div v-if="showChart" class="chart">
        <m-bar :dataset="barData" :option="barOption" />
      </div>
      <div class="chart wrapper">
        <div v-if="showChart">
          <m-pie :option="pieOption" />
        </div>
        <div>
          <p v-for="item in pieData" :key="item.name">
            <span :style="{ background: item.color }" />
            {{ item.name }}： {{ item.value }}% &nbsp;&nbsp;{{ item.num }}
          </p>
        </div>
      </div>
    </div>
    <div class="case-follow">
      <m-sub search-able @search="searchCase">事件跟踪</m-sub>
      <m-scroll :limit="1" :length="trackEvent.length" :step="1.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="item.type" />
        </div>
      </m-scroll>
    </div>
  </m-card>
</template>

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

export default defineComponent({
  name: 'Demand',
  components: { Brief },
  setup() {
    // dispatch('GET_TODAYCASE')
    store.dispatch('GET_TODAYCASE')
    store.dispatch('GET_STAGECASE')
    store.dispatch('GET_WORKSTATION')
    store.dispatch('GET_TRACKEVENT', {
      status_in: '待处置,已签收',
      acceptTime_gte: moment(new Date()).format('YYYY-MM-DD'),
      pageSize: 1000,
    })

    const todayCase = computed(() => store.state.todayCase)
    const stageCase = computed(() => store.state.stageCase)
    const workstationKind = computed(() => store.state.workstationKind)
    const trackEvent = computed(() => store.state.trackEvent)

    // console.log(moment(new Date()).format('YYYY-MM-DD'))

    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,
          ],
          icon: icon6,
        },
        {
          name: '街面管理',
          value: [
            todayCase.value.streetDisposalNum || 0,
            todayCase.value.streetNum || 0,
          ],
          icon: icon7,
        },
        {
          name: '小区管理',
          value: [
            todayCase.value.communityDisposalNum || 0,
            todayCase.value.communityNum || 0,
          ],
          icon: icon8,
        },
      ]
    })
    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.endNum || 0,
        },
        {
          name: '检查',
          value: stageCase.value.checkNum || 0,
        },
        {
          name: '处置',
          value: stageCase.value.disposalNum || 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) => {
          source.unshift({
            date: workstationKind.value[index].date,
            data1: workstationKind.value[index].statistical.oneDisposalNum,
            data2: workstationKind.value[index].statistical.twoDisposalNum,
            data3: workstationKind.value[index].statistical.threeDisposalNum,
          })
        })

        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: '11-11', data1: 100, data2: 100, data3: 100 },
            { date: '11-12', data1: 110, data2: 110, data3: 120 },
            { date: '11-13', data1: 120, data2: 130, data3: 140 },
            { date: '11-14', data1: 130, data2: 140, data3: 160 },
            { date: '11-15', data1: 140, data2: 150, data3: 180 },
            { date: '11-16', data1: 150, data2: 160, data3: 190 },
            { date: '11-17', data1: 150, data2: 160, data3: 190 },
            { date: '11-18', data1: 150, data2: 160, data3: 190 },
          ],
        }
      }
    })
    const barOption = ref({
      color: ['#5BD5FF', '#FFCE34', '#826AFA'],
      legend: {
        right: '2%',
        itemWidth: fontSize.value * 0.6,
        itemHeight: fontSize.value * 0.8,
      },
      series: [1, 2, 3].map(() => ({
        type: 'bar',
        barWidth: '18%',
        itemStyle: {
          borderRadius: 8,
        },
        barGap: 0,
        stack: '总量',
      })),
    })
    const pieData = computed(() => {
      if (workstationKind.value[0]) {
        return [
          {
            name: '第一工作站',
            value:
              (
                (workstationKind.value[0].statistical.oneDisposalNum /
                  workstationKind.value[0].statistical.oneNum) *
                100
              ).toFixed(0) || 0,
            num: workstationKind.value[0].statistical.oneDisposalNum || 0,
            color: '#47B3FF',
          },
          {
            name: '第二工作站',
            value:
              (
                (workstationKind.value[0].statistical.twoDisposalNum /
                  workstationKind.value[0].statistical.twoNum) *
                100
              ).toFixed(0) || 0,
            num: workstationKind.value[0].statistical.twoDisposalNum || 0,
            color: '#FF9D27',
          },
          {
            name: '第三工作站',
            value:
              (
                (workstationKind.value[0].statistical.threeDisposalNum /
                  workstationKind.value[0].statistical.threeNum) *
                100
              ).toFixed(0) || 0,
            num: workstationKind.value[0].statistical.threeDisposalNum || 0,
            color: '#6EB629',
          },
        ]
      } else {
        return [
          {
            name: '第一工作站',
            value: 0,
            num: 0,
            color: '#47B3FF',
          },
          {
            name: '第二工作站',
            value: 0,
            num: 0,
            color: '#FF9D27',
          },
          {
            name: '第三工作站',
            value: 0,
            num: 0,
            color: '#6EB629',
          },
        ]
      }
    })
    const pieSeries = pieData.value.map((item, i) => {
      const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10
      const borderWidth = fontSize.value * 0.6
      return {
        type: 'pie',
        name: item.name,
        clockwise: false, //顺时加载
        radius: [rate, rate],
        label: {
          show: false,
        },
        itemStyle: {
          borderWidth,
          borderColor: item.color,
        },
        data: [
          item,
          {
            value: 100 - item.value,
            name: '',
            tooltip: { show: false },
            label: {
              show: false,
            },
            itemStyle: {
              color: 'transparent',
              borderColor: item.color,
              opacity: 0.1,
            },
          },
        ],
      }
    })
    const pieOption = ref({
      legend: {
        show: false,
      },
      series: pieSeries,
    })
    const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])

    const searchCase = (key: string) => {
      console.log('searck key: ', key)
    }
    return {
      summary,
      showChart,
      process,
      barData,
      barOption,
      pieData,
      pieOption,
      steps,
      // caseList,
      searchCase,
      todayCase,
      trackEvent,
    }
  },
})
</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)
.process
  margin-top 0.1rem
  position relative
  >img
    position absolute
    width 0.2rem
    height @width
    right 13.3%
    top 0
    bottom 0
    margin auto
    transform rotate(90deg)
  >div
    display flex
    align-items center
    justify-content space-around
    margin-bottom 0.15rem
    &:nth-of-type(1)
      div+div
        &::before
          $arrow-style()
    &:nth-of-type(2)
      div+div
        &::before
          $arrow-style()
          transform translate(-90%, 0) rotate(180deg)
    >div
      background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
      width 28%
      padding 0.05rem 0
      text-align center
      font-weight bold
      position relative
      .count
        font-size 0.12rem
      p
        color #ccc
.chart
  width 100%
  height 1.1rem
  &.wrapper
    display flex
    >div
      width 50%
      height 100%
      font-weight bold
      &:last-child
        $center()
        flex-direction column
        p
          display flex
          align-items center
          margin-bottom 0.05rem
          span
            display inline-block
            width 0.06rem
            height @width
            border-radius 50%
            margin-right 0.1rem
.case-follow
  height 1.2rem
  overflow hidden
.detail
  display flex
  flex-direction column
  justify-content space-between
  padding 0.1rem
  background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
  height 1rem
  margin-bottom 0.1rem
  box-sizing border-box
  .title
    display flex
    align-items center
    p
      font-size 0.12rem
      &:last-child
        color $edge
        font-size 0.1rem
    span
      display block
      height 0.01rem
      background $blue
      flex 1
      margin 0 0.1rem
  .msg
    $center()
    justify-content space-between
    color $blue
    font-size 0.08rem
</style>
