<template>
  <div class="govern-analysis">
    <Carousel v-model="cur" autoplay :autoplay-speed="5000" dots="none">
      <CarouselItem>
        <div class="content">
          <div class="title">物业服务满意度得分较低项目</div>
          <div><p>定期公布维修资金使用项目</p><p>76.02</p></div>
          <div><p>定期公布公共收益项目</p><p>76.82</p></div>
          <div><p>对违法搭建、群租问题定期巡视、发现</p><p>77.61</p></div>
        </div>
      </CarouselItem>
      <CarouselItem>
        <div class="content">
          <div class="title">物业服务企业整体满意度倒数企业</div>
          <div><p>上海豫园旅游商城物业管理有限公司</p><p>67.18</p></div>
          <div><p>上海华夏物业有限公司</p><p>69.74</p></div>
          <div><p>上海振南物业有限公司</p><p>75.29</p></div>
        </div>
      </CarouselItem>
      <CarouselItem>
        <div class="chart-wrapper">
          <p class="title">南码头街道业委会运作情况</p>
          <m-chart :config="operationConfig" :data="operationData" />
        </div>
      </CarouselItem>
      <CarouselItem>
        <div class="card">
          <p class="title">南码头街道12345诉求数量全市排名</p>
          <div class="inner">
            <div v-for="(item, i) in list" :key="i">
              <p>{{item.title}}</p>
              <p>
                <b><m-count style="color:#00f2ff;font-size:1.2rem;" :value="item.count" :decimal="0"/></b>
                <span v-if="item.unit">{{item.unit}}</span>
                <i v-if="item.info">{{item.info}}</i>
              </p>
            </div>
          </div>
        </div>
      </CarouselItem>
      <CarouselItem>
        <div class="chart-wrapper">
          <p class="title">南码头街道综合管理诉求二级指标占比</p>
          <m-chart :config="manageConfig" :data="manageData" />
        </div>
      </CarouselItem>
    </Carousel>
  </div>
</template>

<script>
export default {
  name: 'GovernAnalysis',
  data() {
    return {
      cur: 0,
      list: [
        {
          title: '2019诉求量',
          count: 1582,
          unit: '件',
        },
        {
          title: '数量变化',
          count: 115,
          unit: '%',
        },
        {
          title: '全市排名',
          count: 41,
          info: '较去年+51',
        },
        {
          title: '2019诉求密度',
          count: 46,
          unit: '件',
        },
        {
          title: '密度变化',
          count: 112,
          unit: '%',
        },
        {
          title: '全市排名',
          count: 17,
          info: '较去年+70',
        },
      ],
      operationConfig: {
        colors: [['#a45cd1', '#3e29b1'], ['#00f2fe', '#007eff']],
        legend: {
          align: 'right',
        },
        shape: [
          {key: 'nanmatou', name: '南码头', type: 'bar', barWidth: '30%'},
          {key: 'pudong', name: '浦东总体', type: 'bar', barWidth: '30%'},
        ],
        xAxis: {
          key: 'name',
        },
      },
      operationData: [
        {name: '规范', pudong: 24.87, nanmatou: 31.38},
        {name: '正常', pudong: 45.93, nanmatou: 36.49},
        {name: '还可以', pudong: 25.87, nanmatou: 26.83},
        {name: '不正常', pudong: 1.06, nanmatou: 0},
        {name: '不了解', pudong: 2.27, nanmatou: 5.29},
      ],
      manageConfig: {
        grid: {
          right: '1%',
        },
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {key: 'value', type: 'pie', center: ['15%', '50%'], radius: [15, 55], roseType: 'area',},
        ],
      },
      manageData: [
        {name: '公共秩序、环境维护', value: 36.17},
        {name: '非物业类', value: 34.57},
        {name: '公用设施养护', value: 8.88},
        {name: '物业服务规范', value: 7.04},
        {name: '业委会、业主大会', value: 5.14},
        {name: '自用部位维修', value: 4.89},
        {name: '物业使用规范', value: 2.09},
        {name: '维修资金管理', value: 1.21},
        // {name: '其他', value: 47.9},
      ],

    }
  },
}
</script>

<style lang="stylus" scoped>
$title()
  font-size 1.1rem
  text-align center
  font-weight bold
.govern-analysis
  width 100%
  height 100%
  .chart-wrapper
    width 100%
    height 100%
    .title
      $title()
  .content
    width 100%
    height 100%
    div
      display flex
      align-items center
      justify-content space-between
      padding .3rem .5rem
      background rgba(0,0,0,0.5)
      margin-bottom .5rem
      &.title
        $title()
        justify-content center
        background none
      >p
        &:last-child
          color $edgeColor
          font-weight bold
  .card
    .title
      $title()
      margin-bottom .5rem
    .inner
      display flex
      flex-wrap wrap
      >div
        width 33%
        text-align center
        margin-top 1rem
        >p
          color #8fb6fb
          span
            color #fff
          i
            color red

</style>
<style lang="stylus">
.govern-analysis
  .ivu-carousel
    height 100%
    .ivu-carousel-list
      height 100%
      .ivu-carousel-track
        height 100%
        .ivu-carousel-item
          height 90% !important
</style>
