<template>
  <div class="grid">
    <div class="gird-wrapper">
      <div class="gird-item">
        <h2>一级网格</h2>
        <div class="gird-item__wrapper level1" @click="isShowStreet = true">
          <h3>中山门街道</h3>
        </div>
      </div>
      <div class="gird-item">
        <h2>二级网格</h2>
        <div class="gird-item__wrapper level2">
          <div class="grid-item__item" v-for="(item, index) in 10" :key="index">群策巷社区</div>
        </div>
      </div>
      <div class="gird-item">
        <h2>三级网格</h2>
        <div class="gird-item__wrapper level3" @click="isShowVillage = true">
          <h3>专属网格</h3>
          <p>（12个）</p>
        </div>
      </div>
    </div>
    <u-popup v-model="isShowStreet" :closeable="false" border-radius="16" height="60%" mode="bottom">
    <div class="street-dialog">
      <scroll-view scroll-y class="street-wrapper">
        <h2 class="title">数据统计</h2>
        <div class="street-item__wrapper">
          <div class="street-item" v-for="(item, index) in 40" :key="index">
            <div class="left">
              <i></i>
              <h2>网格数</h2>
            </div>
            <span>12</span>
          </div>
        </div>
      </scroll-view>
    </div>
    </u-popup>
    <u-popup v-model="isShowVillage" :closeable="false" border-radius="16" height="60%" mode="bottom">
      <div class="street-dialog">
        <scroll-view scroll-y class="street-wrapper">
          <h2 class="title">数据统计</h2>
          <div class="street-item__wrapper">
            <div class="street-item" v-for="(item, index) in 9" :key="index">
              <div class="left">
                <i></i>
                <h2>网格数</h2>
              </div>
              <span>12</span>
            </div>
          </div>
          <h2 class="title">网格列表</h2>
          <div class="street-item__wrapper">
            <div class="street-item" style="justify-content: center" v-for="(item, index) in 9" :key="index">
              <span>群策巷社区</span>
            </div>
          </div>
        </scroll-view>
      </div>
    </u-popup>
  </div>
</template>

<script>
  export default {
    name: 'grid',

    appName: '网格统计',

    data () {
      return {
        isShowStreet: false,
        isShowVillage: false
      }
    },

    onLoad () {

    },

    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .grid {
    min-height: 100vh;
    padding: 32px 0;
    background: #fff;
    box-sizing: border-box;

    * {
      box-sizing: border-box;
    }

    .street-dialog {
      height: 100%;
      padding: 0 32px 30px;

      .street-wrapper {
        .title {
          height: 100px;
          line-height: 100px;
          width: 128px;
          font-size: 32px;
          font-weight: 600;
          color: #262B36;
        }

        .street-item__wrapper {
          display: flex;
          flex-wrap: wrap;
          height: 100%;
        }

        .street-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: calc((100% - 30px) / 2);
          height: 80px;
          margin-bottom: 16px;
          padding: 0 32px;
          background: #F3F5F7;

          &:nth-of-type(2n - 1) {
            margin-right: 30px;
          }

          .left {
            display: flex;
            align-items: center;

            i {
              width: 8px;
              height: 8px;
              margin-right: 16px;
              border-radius: 50%;
              background: #1365DD;
            }

            h2 {
              color: #666666;
              font-size: 26px;
            }
          }

          span {
            font-size: 28px;
            color: #333;
            font-weight: 600;
          }
        }
      }
    }

    .gird-item {
      position: relative;
      margin: 0 16px 80px;
      padding: 16px;
      border: 2px dashed #CCCCCC;

      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: 11;
        width: 2px;
        height: 80px;
        background: #666666;
        transform: translate(-50%, 100%);
        content: ' ';
      }

      &::before {
        position: absolute;
        bottom: -80px;
        left: 50%;
        z-index: 11;
        border: 14px solid transparent;
        border-top: 14px solid #666666;
        transform: translate(-50%, 50%);
        content: ' ';
      }

      &:last-child::after, &:last-child::before {
        display: none;
      }

      .level1 {
        position: relative;
        text-align: center;
        height: 80px;
        line-height: 80px;
        background: #1365DD;
        color: #fff;
        font-size: 32px;

        &:active {
          opacity: 0.6;
        }

        image {
          position: absolute;
          top: 50%;
          right: 16px;
          z-index: 1;
          width: 32px;
          height: 32px;
          transform: translateY(-50%);
        }

        h3 {
          font-weight: normal;
        }
      }

      .level3 {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        height: 96px;
        background: #E8EFFB;
        color: #fff;
        font-size: 28px;

        &:active {
          opacity: 0.6;
        }

        h3 {
          color: #1365DD;
        }

        p {
          color: #CCCCCC;
          font-size: 24px;
        }

        image {
          position: absolute;
          top: 50%;
          right: 16px;
          z-index: 1;
          width: 32px;
          height: 32px;
          transform: translateY(-50%);
        }

        h3 {
          font-weight: normal;
        }
      }

      .level2 {
        display: flex;
        flex-wrap: wrap;

        .grid-item__item {
          width: calc((100% - 16px) / 2);
          height: 80px;
          line-height: 80px;
          margin-bottom: 8px;
          padding: 0 10px;
          color: #3B3F59;
          font-size: 28px;
          font-weight: 600;
          text-align: center;
          background: #F3F5F7;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          &:nth-of-type(2n - 1) {
            margin-right: 8px;
          }
        }
      }

      & > h2 {
        margin-bottom: 16px;
        text-align: center;
        color: #ccc;
        font-size: 26px;
        font-weight: normal;
      }
    }
  }
</style>
