<template>
  <div class="right-section">
    <m-card title="商场" mode="2">
      <div class="sum">
        <div>
          <div v-for="item in sumList.slice(0, 2)" :key="item.name">
            <p>
              <m-count
                class="count"
                :style="`color:${item.color}`"
                :value="item.value"
              />
              <span>{{ item.unit }}</span>
            </p>
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div>
          <div v-for="item in sumList.slice(2)" :key="item.name">
            <p>
              <m-count
                class="count"
                :style="`color:${item.color}`"
                :value="item.value"
              />
              <span>{{ item.unit }}</span>
            </p>
            <p><i :style="`background:${item.dot}`" />{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div class="chart">
        <m-line :dataset="chartData" :option="option" />
      </div>
      <div class="box">
        <div>
          <p class="sub-title">商业分类</p>
          <div class="business-wrapper">
            <div class="pie">
              <m-pie :dataset="pieData" :option="pieOption" />
            </div>
            <div class="legend">
              <div v-for="(item, i) in pieData.source" :key="item.name">
                <p>
                  <i :style="`background:${pieOption.color[i]}`" />
                  {{ item.name }}
                </p>
                <p>{{ item.value }} 家</p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <p class="sub-title">网红门店</p>
          <div v-if="storeList.length > 0" class="stores">
            <img v-for="(item, i) in storeList" :key="i" :src="item" />
          </div>
          <m-empty v-else />
        </div>
      </div>
    </m-card>
    <m-card title="楼宇结构" mode="2">
      <div class="box">
        <div>
          <p class="sub-title">办公楼</p>
          <div class="table">
            <div v-for="item in table1" :key="item.name">
              <p>{{ item.name }}</p>
              <p>{{ item.value }}</p>
            </div>
          </div>
        </div>
        <div>
          <p class="sub-title">商业楼</p>
          <div class="table">
            <div v-for="item in table2" :key="item.name">
              <p>{{ item.name }}</p>
              <p>{{ item.value }}</p>
            </div>
          </div>
        </div>
      </div>
    </m-card>
  </div>
</template>

<script lang="ts" setup>
import { ajax, api } from '@/ajax'
import { computed, defineProps, ref } from 'vue'
import type { PropType } from 'vue'

const props = defineProps({
  info: {
    type: Object as PropType<{ [key: string]: any }>,
    required: true,
  },
})

const sumList = computed(() => {
  const {
    lfsBusinessRent = 0, //来福士商业租金
    lfsFoodRent = 0, //来福士餐饮租金
    districtAvgBusinessRent = 0, //区平均商业租金
    streetAvgBusinessRent = 0, //街道平均商业租金
    lfsAvgBusinessRent = 0, //来福士平均商业租金
  } = props?.info || {}
  return [
    {
      name: '商业租金',
      value: lfsBusinessRent,
      unit: '元/㎡/月',
      color: 'gold',
    },
    { name: '餐饮租金', value: lfsFoodRent, unit: '元/㎡/月', color: 'gold' },
    {
      name: '区平均租金',
      value: districtAvgBusinessRent,
      unit: '元/㎡/月',
      color: 'gold',
      dot: 'gold',
    },
    {
      name: '街道平均租金',
      value: streetAvgBusinessRent,
      unit: '元/㎡/月',
      dot: '#6DD400',
    },
    {
      name: '来福士平均租金',
      value: lfsAvgBusinessRent,
      unit: '元/㎡/月',
      dot: '#32C5FF',
    },
  ]
})
const chartData = ref({
  dimensions: [
    { name: 'month', displayName: '月份' },
    { name: 'rent1', displayName: '区平均租金' },
    { name: 'rent2', displayName: '街道平均租金' },
    { name: 'rent3', displayName: '来福士平均租金' },
  ],
  source: [
    { month: '1月', rent1: 1000, rent2: 1200, rent3: 700 },
    { month: '2月', rent1: 1000, rent2: 1200, rent3: 900 },
    { month: '3月', rent1: 1000, rent2: 1200, rent3: 700 },
    { month: '4月', rent1: 1000, rent2: 1200, rent3: 1000 },
    { month: '5月', rent1: 1000, rent2: 1200, rent3: 800 },
    { month: '6月', rent1: 1000, rent2: 1200, rent3: 800 },
    { month: '7月', rent1: 1000, rent2: 1200, rent3: 1100 },
    { month: '8月', rent1: 1000, rent2: 1200, rent3: 1000 },
    { month: '9月', rent1: 1000, rent2: 1200, rent3: 900 },
    { month: '10月', rent1: 1000, rent2: 1200, rent3: 1000 },
    { month: '11月', rent1: 1000, rent2: 1200, rent3: 1200 },
    { month: '12月', rent1: 1000, rent2: 1200, rent3: 900 },
  ],
})
ajax
  .get({
    url: api.GET_RAFFLES_RENT,
  })
  .then((res) => {
    const {
      lfsRent1 = 0,
      lfsRent2 = 0,
      lfsRent3 = 0,
      lfsRent4 = 0,
      lfsRent5 = 0,
      lfsRent6 = 0,
      lfsRent7 = 0,
      lfsRent8 = 0,
      lfsRent9 = 0,
      lfsRent10 = 0,
      lfsRent11 = 0,
      lfsRent12 = 0,
    } = res?.data?.content?.[0] || {}
    const {
      districtAvgBusinessRent = 0, //区平均商业租金
      streetAvgBusinessRent = 0, //街道平均商业租金
    } = props?.info || {}
    chartData.value = {
      dimensions: [
        { name: 'month', displayName: '月份' },
        { name: 'rent1', displayName: '区平均租金' },
        { name: 'rent2', displayName: '街道平均租金' },
        { name: 'rent3', displayName: '来福士平均租金' },
      ],
      source: [
        {
          month: '1月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent1,
        },
        {
          month: '2月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent2,
        },
        {
          month: '3月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent3,
        },
        {
          month: '4月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent4,
        },
        {
          month: '5月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent5,
        },
        {
          month: '6月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent6,
        },
        {
          month: '7月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent7,
        },
        {
          month: '8月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent8,
        },
        {
          month: '9月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent9,
        },
        {
          month: '10月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent10,
        },
        {
          month: '11月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent11,
        },
        {
          month: '12月',
          rent1: districtAvgBusinessRent,
          rent2: streetAvgBusinessRent,
          rent3: lfsRent12,
        },
      ],
    }
  })
const pieData = computed(() => {
  const {
    entertainment = 0, //休闲娱乐
    parentChildren = 0, //亲子
    food = 0, //餐饮
    beauty = 0, //丽人
    shopping = 0, //购物
  } = props?.info || {}
  return {
    dimensions: [
      { name: 'name', displayName: '分类' },
      { name: 'value', displayName: '数量' },
    ],
    source: [
      { name: '休闲娱乐', value: entertainment },
      { name: '亲子', value: parentChildren },
      { name: '美食', value: food },
      { name: '丽人', value: beauty },
      { name: '购物', value: shopping },
    ],
  }
})
const option = {
  color: ['gold', '#6DD400', '#32C5FF'],
  legend: {
    right: '1%',
  },
  series: [
    {
      type: 'line',
      smooth: true,
      lineStyle: {
        type: 'dotted',
      },
    },
    {
      type: 'line',
      smooth: true,
      lineStyle: {
        type: 'dotted',
      },
    },
    {
      type: 'line',
      smooth: true,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#32C5FF', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(50,197,255,.03)', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
  ],
}
const pieOption = {
  color: ['#00BFFF', '#589C20', '#FFCE34', '#F47C1F', '#826AFA'],
  legend: { show: false },
  series: [
    {
      type: 'pie',
      radius: ['0', '70%'],
      center: ['40%', '50%'],
      label: {
        show: false,
      },
    },
  ],
}
const storeList = computed(() => {
  const { stores = '' } = props?.info || {}
  return (stores && stores?.split(',')) || []
})

const table1 = computed(() => {
  const {
    officeArea = 0, //办公楼面积
    officeAvgRent = 0, //办公楼平均租金
  } = props?.info || {}
  return [
    { name: '面积', value: `${officeArea}㎡` },
    { name: '办公平均租金', value: `${officeAvgRent}元/㎡/月` },
  ]
})
const table2 = computed(() => {
  const {
    businessArea = 0, //商业楼面积
    businessAvgRent = 0, //商业楼平均租金
    foodAvgRent = 0, //餐饮平均租金
  } = props?.info || {}
  return [
    { name: '面积', value: `${businessArea}㎡` },
    { name: '商业平均租金', value: `${businessAvgRent}元/㎡/月` },
    { name: '餐饮平均租金', value: `${foodAvgRent}元/㎡/月` },
  ]
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.right-section
  $blur()
  padding .05rem
  box-sizing border-box
  border-top .01rem solid $primary-border
  border-bottom .01rem solid $primary-border
  background linear-gradient(to bottom, rgba(30, 193, 255, .3), transparent 5%,  transparent 95%, rgba(30, 193, 255, .3) 100%)
  display flex
  flex-direction column
  >.my-card
    &:nth-of-type(1)
      flex 3
    &:nth-of-type(2)
      flex 1
.sum
  display flex
  >div
    padding .05rem 0
    box-sizing border-box
    display flex
    justify-content space-around
    flex 2
    p
      display flex
      align-items center
      .count
        font-size .14rem
        color #fff
      i
        display inline-block
        width .04rem
        height @width
        margin 0 .04rem
      span
        font-size .08rem
        color #ccc
        margin-left .03rem
    &:last-child
      flex 3
      background url('@/assets/images/msg-wrapper3.png') center / cover no-repeat
      p
        color $font-color
.chart
  width 100%
  height 1.5rem
.box
  display flex
  >div
    padding 0 .05rem
    flex 1
    .sub-title
      font-size .12rem
      font-family $font-zcool
      color #32C5FF
      &:before
        content ''
        display inline-block
        width .02rem
        height @width
        background #32C5FF
        margin-right .04rem
        margin-bottom .04rem
.business-wrapper
  display flex
  width 100%
  .pie
    width 50%
    height 1rem
  .legend
    flex 1
    display flex
    flex-direction column
    justify-content space-between
    padding 0 .05rem
    box-sizing border-box
    >div
      display flex
      align-items center
      justify-content space-between
      p
        display flex
        align-items center
        i
          display inline-block
          width .06rem
          height @width
          border-radius 50%
          margin-right .04rem
.stores
  display grid
  grid-template-columns repeat(5, 1fr)
  grid-template-rows repeat(2, 1fr)
  padding .06rem
  box-sizing border-box
  grid-gap @padding
  >img
    width .4rem
    height @width
.table
  display flex
  >div
    border .01rem solid rgba(0, 118,255, .5)
    &+div
      border-left none
    &:nth-of-type(2)
    &:nth-of-type(3)
      flex 1
    p
      padding .04rem .06rem
      box-sizing border-box
      background rgba(0, 118,255,.15)
      &:first-child
        background rgba(0, 118,255,.3)
        border-bottom .01rem solid rgba(0, 118,255, .5)
</style>
