<template>
  <div class="hone-content-box">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <div class="statistics">
          <div class="icon" style="background-color:#1890ff;"><a-icon type="team" /></div>
          <!-- <img class="icon" src="~@/assets/guaz.png" alt=""> -->
          <div>
            <p style="color:#666;margin-bottom:5px;">小区总数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.communityCount}}</p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <div class="statistics">
          <div class="icon" style="background-color:#7262fd;"><a-icon type="home" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">房屋总数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.roomCount}}</p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <div class="statistics">
          <div class="icon" style="background-color:#ffaa00;"><a-icon type="car" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">人员总数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.personCount}}</p>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
        <div class="announcement t-box">
          <div class="title">
            <h3 class="box-title">内部通知</h3><a-button size="small" @click="toMore()">查看更多</a-button> <a-button
              size="small" @click="toMore()">发布公告</a-button>
          </div>
          <ul v-if="noticeList.length">
            <li v-for="(item, index) in noticeList" :key="index"><a @click="toDetails(item)">{{ item.noticeTitle}}</a>
              <p>{{ item.createTime.slice(0,10)}}</p>
            </li>
          </ul>
          <div v-else>
            <a-empty />
          </div>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <div class="pay-cost t-box">
          <h3 class="box-title">男女比例</h3>
          <pie :dataSource="genderData" />
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <div class="pay-cost t-box">
          <h3 class="box-title">年龄阶段</h3>
          <BarMultid :fields="ageFields" :dataSource="ageData" style="padding: 0;" />
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :style="{ marginBottom: '24px' }">
        <div class="pay-cost t-box">
          <h3 class="box-title">入驻人员数量</h3>
          <LineNumber :dataSource="LineData" style="padding: 0;" />
        </div>
      </a-col>
    </a-row>

    <a-modal :title="noticeTitle" :visible="visible" @cancel="handleCancel" :footer="null" width="40%">
      <div class="notice-content">
        <p v-html="noticeContent "></p>
      </div>
    </a-modal>
  </div>
</template>

<script>
import LineNumber from '@/components/chart/Line'
import Pie from '@/components/chart/Pie'
import BarMultid from '@/components/chart/BarMultid'
import { homeDataStatistics, companyNoticeList, councilsPersonStatistics } from '@/api/api'

export default {
  name: 'Analysis',
  components: {
    LineNumber,
    Pie,
    BarMultid
  },
  data() {
    return {
      pageForm: {},
      noticeList: [],
      genderData: [],
      ageFields: ["0—18岁", "18—36岁", "36—54岁", "54—65岁", "65岁以上", "未知"],
      ageData: [],
      LineData: [
        { type: '10:10', line: 1000 },
          { type: '10:15', line: 1000},
          { type: '10:20', line: 1000},
          { type: '10:25', line: 1000},
          { type: '10:30', line: 1000},
          { type: '10:35', line: 1000},
          { type: '10:40', line: 1000}
      ],
      noticeTitle: '',
      noticeContent: '',
      visible: false
    }
  },
  created() {
    this.onDetail()
    this.companyNotice()
    this.councilsPersonStatistics()
  },
  methods: {
    async onDetail() {
      let { result } = await homeDataStatistics()
      this.pageForm = { ...result }
      // this.barData = result.monthlyStatistics.map((item) => {
      //   return {
      //     x: item.monthNum + '月',
      //     y: item.totalMoney,
      //   }
      // })
    },
    async companyNotice() {
      let { result } = await companyNoticeList({ pageNo: 1, pageSize: 9, order: 'desc', column: 'createTime', noticeStatus: 'published', noticeType: '1'})
      this.noticeList = result.records
    },
    async councilsPersonStatistics() {
      let { result } = await councilsPersonStatistics()
      this.genderData = [
        { item: '男', count: result.sexMap.manCount },
        { item: '女', count: result.sexMap.womenCount }
      ]
      this.ageData = [
        {
          "type": "男", // 列名
          "0—18岁": result.ageMap.ageMan0,
          "18—36岁": result.ageMap.ageMan18,
          "36—54岁": result.ageMap.ageMan35,
          "54—65岁": result.ageMap.ageMan54,
          "65岁以上": result.ageMap.ageMan65,
          "未知": result.ageMap.ageManNot
        },
        {
          "type": "女",
          "0—18岁": result.ageMap.ageWomen0,
          "18—36岁": result.ageMap.ageWomen18,
          "36—54岁": result.ageMap.ageWomen35,
          "54—65岁": result.ageMap.ageWomen54,
          "65岁以上": result.ageMap.ageWomen65,
          "未知": result.ageMap.ageWomenNot
        }
      ]
      this.LineData = result.map.map(item=> {
        return {
          x: item.month + '月',
          y: item.num
        }
      })
    },
    toMore() {
      this.$router.push({
        path: '/advertisement/adsLlist',
      })
    },
    toDetails(item) {
      this.noticeTitle = item.noticeTitle
      this.noticeContent = item.noticeContent
      this.visible = true
    },
    handleCancel(e) {
      this.visible = false
    },
    handleSizeChange(e) {
      this.onDetail()
    },
  },
}
</script>
<style lang="less" scoped>
.hone-content-box {
  padding: 10px;
  .statistics {
    // flex: none;
    background: #fff;
    width: 100%;
    height: 90px;
    box-sizing: border-box;
    border: 1px solid #e0dfdf;
    display: flex;
    align-items: center;
    padding-left: 20px;
    .icon {
      width: 60px;
      height: 60px;
      border-radius: 60px;
      margin-right: 12px;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      .anticon {
        font-size: 32px;
        color: #ffffff;
      }
    }
  }

  .pay-box {
    display: flex;
    .left-box {
      flex: none;
      width: 50%;
    }
  }
}
.t-box {
  background: #fff;
  padding: 15px;
  border: 1px solid #e0dfdf;
}
.box-title {
  font-weight: bold;
  margin-bottom: 15px;
  display: inline-block;
  padding-left: 10px;
  border-left: 3px solid #1890ff;
  height: 20px;
  line-height: 20px;
}
.pay-cost {
  height: 380px;
}
.announcement {
  height: 380px;
  .title {
    .ant-btn {
      float: right;
      margin-left: 10px;
    }
  }
  ul {
    padding-left: 5px;
    li {
      list-style-type: none;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      a {
        color: #666;
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.salesCard {
  margin-bottom: 25px;
}
.extra-type {
  a {
    margin-right: 20px;
  }
}
.number {
  width: 80%;
  margin: 0 10%;
  display: flex;
  justify-content: space-evenly;
  p {
    font-size: 14px;
    margin: 0;
  }
}
.notice-content{
  word-break: break-all;
  /deep/ img{
    width: 100%;
    height: auto;
  }
}
</style>