<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" :dataset="pieData" />
        </div>
        <div>
          <p v-for="item in pieData" :key="item.name">
            <span :style="{ background: item.color }" />
            {{ item.name }}： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
              item.value
            }}% &nbsp;&nbsp;&nbsp;&nbsp;&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, watch, 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 pieDatamodel = computed(() => store.state.workstationKindPiEData)
    const trackEvent = computed(() => store.state.trackEvent)
    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(() => {
      return [
        {
          name: '第一工作站',
          value:
            parseInt(
              (pieDatamodel.value.oneDisposalNum / pieDatamodel.value.oneNum) *
                100
            ) || 0,
          num: pieDatamodel.value.oneNum,
          color: '#47B3FF',
        },
        {
          name: '第二工作站',
          value:
            parseInt(
              (pieDatamodel.value.twoDisposalNum / pieDatamodel.value.twoNum) *
                100
            ) || 0,
          num: pieDatamodel.value.twoNum,
          color: '#FF9D27',
        },
        {
          name: '第三工作站',
          value:
            parseInt(
              (pieDatamodel.value.threeDisposalNum /
                pieDatamodel.value.threeNum) *
                100
            ) || 0,
          num: pieDatamodel.value.threeNum,
          color: '#6EB629',
        },
      ]
    })
    const pieSeries = computed(() => {
      return 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 = computed(() => ({
      legend: {
        show: false,
      },
      series: pieSeries.value,
    }))
    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,
      workstationKind,
    }
  },
})
</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
    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
        // border 1px solid red
        &:last-child
          $center()
          flex-direction column
          p
            display flex
            width 100%
            align-items center
            // border 1px solid red
            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>
