<template>
  <div class="analysis-modal">
    <div v-if="analysisTitle == '物业服务满意度得分较低项目'" 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><p>投诉及时回复</p><p>79.59</p></div>
      <div><p>提供便民服务或特约服务</p><p>79.81</p></div>
      <div><p>建筑垃圾有制定堆放点</p><p>80.34</p></div>
    </div>
    <div v-else-if="analysisTitle == '物业服务企业整体满意度落后企业'" 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><p>上海霞悦物业管理有限公司</p><p>77.71</p></div>
      <div><p>上海东方明珠物产管理有限公司</p><p>78.27</p></div>
      <div><p>上海富宁物业管理有限公司</p><p>79.51</p></div>
    </div>
    <div v-else-if="analysisTitle == '业委会运作情况'" class="chart-wrapper">
      <p class="title">南码头街道业委会运作情况</p>
      <m-chart :config="operationConfig" :data="operationData" />
    </div>
    <div v-else-if="analysisTitle == '12345投诉区排名'" 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>
    <div v-else-if="analysisTitle == '住宅小区综合管理类诉求二级指标占比'" class="chart-wrapper">
      <p class="title">住宅小区综合管理类诉求二级指标占比</p>
      <m-chart :config="manageConfig" :data="manageData" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'AnalysisModal',
  props: {
    analysisTitle: {
      type: String,
      required: true,
    }
  },
  data() {
    return {
      list: [
        {
          title: '2019投诉量',
          count: 1582,
          unit: '件',
        },
        {
          title: '数量变化',
          count: 115,
          unit: '%',
        },
        {
          title: '全区排名',
          count: 18,
          info: '较去年+5',
        },
        {
          title: '2019投诉密度',
          count: 46,
          unit: '件',
        },
        {
          title: '密度变化',
          count: 112,
          unit: '%',
        },
        {
          title: '全区排名',
          count: 10,
          info: '较去年+6',
        },
      ],
      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: {
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {key: 'value', type: 'pie', center: ['30%', '40%'], radius: [20, 110], 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()
  margin 1rem 0
  font-size 1.2rem
  text-align center
.analysis-modal
  .chart-wrapper
    width 100%
    height 40vh
    .title
      $title()
  .content
    width 100%
    height 96%
    div
      display flex
      align-items center
      justify-content space-between
      padding .5rem 1rem
      background rgba(0,0,0,0.3)
      margin-bottom 1rem
      &.title
        $title()
        justify-content center
        background none
      >p
        &:last-child
          color $edgeColor
          // font-weight bold
  .card
    .title
      $title()
      margin-bottom 1rem
    .inner
      display flex
      flex-wrap wrap
      >div
        width 33%
        text-align center
        margin-top 2rem
        >p
          color #8fb6fb
          span
            color #fff
          i
            color red
</style>
