<template>
  <div class="container">
    <table align="center"  class="full">
      <tr class="full-width">
        <th colspan="2" style="width: 25%">网格信息</th>
        <th rowspan="5" style="width: 35%">Month</th>
      </tr>
      <tr class="full-width">
        <th style="width: 25%">网格员</th>
        <th style="width: 40%">梁汉强</th>
      </tr>
      <tr class="full-width">
        <th style="width: 25%">手机号码</th>
        <th style="width: 40%">13126058204</th>
      </tr>
      <tr class="full-width">
        <th style="width: 25%">所属网格</th>
        <th style="width: 40%">[110.124748,225.2558]</th>
      </tr>
      <tr class="full-width">
        <th style="width: 25%">网格颜色</th>
        <th style="width: 40%">阿斯顿发送到</th>
      </tr>
      <tr class="full-width" style="height: 50%">
        <th colspan="3">
          <div>
            <avue-data-display :option="option"></avue-data-display>
          </div>
        </th>
      </tr>
    </table>
  </div>
</template>

<script>
    export default {
        name: "gridDetail",
        props:{
          grid: {
            type: "Object",
            default: {}
          }
        },
      data(){
          return {
            option: {
              span:12,
              data: [
                {
                  click: function (item) {
                    alert(JSON.stringify(item));
                  },
                  title: 'New Visits',
                  count: '102,400',
                  icon: 'el-icon-message',
                  color: '#00a7d0',
                },
                {
                  click: function (item) {
                    alert(JSON.stringify(item));
                  },
                  title: 'Messages',
                  count: '81,212',
                  icon: 'el-icon-info',
                  color: 'rgb(27, 201, 142)',
                }
              ]
            }
          }
      }
    }
</script>

<style scoped>
  .container{
    width: 100%;
    height: 400px;
  }
  .full-width{
    width: 100%;
  }
  .full{
    height: 100%;
    width: 100%;
  }
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .border{
    border: solid 1px gray;
  }
  .border-bottom{
    border-bottom: solid 1px gray;
  }
  table tr th{
    border: solid 2px #a0a0a0;
  }
</style>
