<template>
  <div class="yrows">
    <div v-if="row == '结算单'">
      <div class="yr">
        <div class="rout" style="padding-left: 0px">
          <div class="rint" style="background-color: #faf7fe">
            <div class="icon" style="color: #8642df">&#xe611;</div>
            <div class="rcon">
              <div class="rtt omit" title="结算人数（人）">结算人数（人）</div>
              <div class="rdesc">{{ cdata.peoples || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr">
        <div class="rout">
          <div class="rint" style="background-color: #fffcf7">
            <div class="icon" style="color: #fab22e">&#xe818;</div>
            <div class="rcon">
              <div class="rtt omit" title="结算金额（元）">结算金额（元）</div>
              <div class="rdesc">{{ cdata.money || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr">
        <div class="rout">
          <div class="rint" style="background-color: #f7fbff">
            <div class="icon" style="color: #489afd">&#xe645;</div>
            <div class="rcon">
              <div class="rtt omit" title="发放业务费（元）">发放业务费（元）</div>
              <div class="rdesc">{{ cdata.realMoney || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr">
        <div class="rout" style="padding-right: 0px">
          <div class="rint" style="background-color: #fff7f9">
            <div class="icon" style="color: #fa5376">&#xe70f;</div>
            <div class="rcon">
              <div class="rtt omit" title="总服务费（元）">总服务费（元）</div>
              <div class="rdesc">{{ cdata.serviceMoney || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="row == '企业概览'">
      <div class="yr" style="width: 50%">
        <div class="rout">
          <div class="rint" style="background-color: #f7fbff">
            <div class="icon" style="color: #489afd">&#xe60d;</div>
            <div class="rcon">
              <div class="rtt">员工总数</div>
              <div class="rdesc">{{ cdata.users || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr" style="width: 50%">
        <div class="rout" style="padding-right: 0px">
          <div class="rint" style="background-color: #fffcf7">
            <div class="icon" style="color: #fab22e">&#xe818;</div>
            <div class="rcon">
              <div class="rtt">项目总数</div>
              <div class="rdesc">{{ cdata.project || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr" style="width: 50%">
        <div class="rout">
          <div class="rint" style="background-color: #faf7fe">
            <div class="icon" style="color: #8642df">&#xe611;</div>
            <div class="rcon">
              <div class="rtt">关联用户</div>
              <div class="rdesc">{{ cdata.relate || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr" style="width: 50%">
        <div class="rout" style="padding-right: 0px">
          <div class="rint" style="background-color: #fff7f9">
            <div class="icon" style="color: #fa5376">&#xe604;</div>
            <div class="rcon">
              <div class="rtt">接包总数</div>
              <div class="rdesc">{{ cdata.packages || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="row == '快捷菜单'">
      <div class="yr" style="width: 20%" v-for="(item, index) in menu" :key="item.id" v-hasPermi="[item.hasPermi]">
        <router-link :to="item.url">
          <div class="rout">
            <div class="rint" style="text-align: center; cursor: pointer">
              <span class="icon" :style="{ float: 'none', color: item.color }" v-html="item.icon">&#xe60d;</span>
              <div class="ctt">{{ item.name }}</div>
            </div>
          </div>
        </router-link>
      </div>
      <div class="yr" style="width: 20%">
        <router-link to="/notification">
          <div class="rout">
            <div class="rint" style="text-align: center; cursor: pointer">
              <span class="icon" style="float: none; color: #2196f3">&#xe6b0;</span>
              <div class="ctt">通知消息</div>
            </div>
          </div>
        </router-link>
      </div>
      <div class="yr" style="width: 20%">
        <router-link to="/help">
          <div class="rout">
            <div class="rint" style="text-align: center; cursor: pointer">
              <span class="icon" style="float: none; color: #ff5722">&#xe6d5;</span>
              <div class="ctt">问题反馈</div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      row: {
        type: String
      },
      cdata: {
        type: Object
      }
    },
    data() {
      return {
        menu: [{
            icon: '&#xe818;',
            color: '#fab22e',
            name: '项目管理',
            url: '/project',
            hasPermi: 'work:project:list'
          },
          {
            icon: '&#xe609;',
            color: '#1890ff',
            name: '制单管理',
            url: '/statement/make',
            hasPermi: 'work:statement:make'
          },
          {
            icon: '&#xe627;',
            color: '#9C27B0',
            name: '结算单管理',
            url: '/statement/manage',
            hasPermi: 'work:statement:manage'
          },
          {
            icon: '&#xe625;',
            color: '#3F51B5',
            name: '结算单审核',
            url: '/statement/audit',
            hasPermi: 'work:statement:audit'
          },
          {
            icon: '&#xe645;',
            color: '#FF9800',
            name: '发放业务费',
            url: '/statement/give',
            hasPermi: 'work:statement:give'
          },
          {
            icon: '&#xe623;',
            color: '#607D8B',
            name: '关联用户',
            url: '/relate',
            hasPermi: 'work:relate:list'
          },
          {
            icon: '&#xe60d;',
            color: '#1890ff',
            name: '员工管理',
            url: '/system/user',
            hasPermi: 'system:user:list'
          },
          {
            icon: '&#xe60b;',
            color: '#FFC107',
            name: '角色管理',
            url: '/system/role',
            hasPermi: 'system:role:list'
          },
          {
            icon: '&#xe62c;',
            color: '#9E9E9E',
            name: '操作日志',
            url: '/system/operlog',
            hasPermi: 'monitor:operlog:list'
          }
        ]
      };
    },
    methods: {}
  };
</script>

<style lang="scss" scoped>
  .yrows {
    margin-top: 10px;
    .yr {
      float: left;
      width: 25%;
      .rout {
        padding: 6px;
        .rint {
          padding: 10px;
          border-radius: 5px;
          overflow: hidden;
          .icon {
            float: left;
            font-size: 30px;
            background-color: white;
            border-radius: 50%;
            padding: 10px;
            width: 50px;
            height: 50px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          }
          .rcon {
            float: left;
            padding-left: 12px;
            width: calc(100% - 55px);
            .rtt {
              color: #8c8c8c;
              font-size: 14px;
            }
            .rdesc {
              font-weight: bold;
              padding-top: 7px;
            }
          }
          .ctt {
            color: #8c8c8c;
            font-size: 14px;
            padding-top: 18px;
          }
        }
      }
    }
  }
</style>
