<template>
  <m-card title="有求必应">
    <div class="today-case">
      <m-sub :addition="{ value: 157, 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="caseList.length" :step="1.1" mode="2">
        <div v-for="(item, i) in caseList" :key="i" class="detail">
          <div class="title">
            <p>{{ item.name }}</p>
            <span />
            <p>{{ item.type }}</p>
          </div>
          <div class="msg">
            <p>{{ item.address }}</p>
            <p>{{ item.date }}</p>
          </div>
          <m-step :steps="steps" :current="item.cur" />
        </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'

export default defineComponent({
  name: 'Demand',
  components: { Brief },
  setup() {
    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
    const showChart = computed(() => store.state.curTheme === 'manage')
    const summary = ref<BriefProp[]>([
      {
        name: '综合管理',
        value: [36, 468],
        icon: icon6,
      },
      {
        name: '街面管理',
        value: [64, 261],
        icon: icon7,
      },
      {
        name: '小区管理',
        value: [57, 154],
        icon: icon8,
      },
    ])
    const process = ref([
      {
        name: '发现',
        value: 157,
      },
      {
        name: '立案',
        value: 106,
      },
      {
        name: '派遣',
        value: 95,
      },
      {
        name: '结案',
        value: 59,
      },
      {
        name: '检查',
        value: 64,
      },
      {
        name: '处置',
        value: 86,
      },
    ])
    const barData = ref({
      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 = ref([
      {
        name: '第一工作站',
        value: 80,
        num: 87,
        color: '#47B3FF',
      },
      {
        name: '第二工作站',
        value: 75,
        num: 72,
        color: '#FF9D27',
      },
      {
        name: '第三工作站',
        value: 30,
        num: 27,
        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 caseList = ref([
      {
        name: '均乐小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-02-13 13:23:08',
        cur: 5,
      },
      {
        name: '均乐小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-02-13 13:23:08',
        cur: 4,
      },
      {
        name: '均乐小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-02-13 13:23:08',
        cur: 3,
      },
      {
        name: '均乐小区',
        type: '电梯困人',
        address: '上海市黄浦区延安东路1292弄6~40号',
        date: '2020-02-13 13:23:08',
        cur: 2,
      },
    ])
    const searchCase = (key: string) => {
      console.log('searck key: ', key)
    }
    return {
      summary,
      showChart,
      process,
      barData,
      barOption,
      pieData,
      pieOption,
      steps,
      caseList,
      searchCase,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
$arrow-style()
  display block
  content ''
  width .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 .1rem
  position relative
  >img
    position absolute
    width .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 .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 .05rem 0
      text-align center
      font-weight bold
      position relative
      .count
        font-size .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 .05rem
          span
            display inline-block
            width .06rem
            height @width
            border-radius 50%
            margin-right .1rem
.case-follow
  height 1.2rem
  overflow hidden
.detail
  display flex
  flex-direction column
  justify-content space-between
  padding .1rem
  background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
  height 1rem
  margin-bottom .1rem
  box-sizing border-box
  .title
    display flex
    align-items center
    p
      font-size .12rem
      &:last-child
        color $edge
        font-size .1rem
    span
      display block
      height .01rem
      background $blue
      flex 1
      margin 0 .1rem
  .msg
    $center()
    justify-content space-between
    color $blue
    font-size .08rem
</style>
