<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="lab">
        <div class="bsg"></div>
        <div class="tit">结算广场待办事项</div>
      </div>
      <div class="boc">
        <div class="yr" style="width: 33.333%">
          <router-link to="/square/recharge?state=0">
            <div class="rout">
              <div class="rint" style="text-align: center; cursor: pointer">
                <span class="icon" style="float: none; color: #2196f3">&#xe6b0;</span>
                <span class="bages">{{ cdata.recharge > 100 ? '99+' : cdata.recharge || 0 }}</span>
                <div class="ctt">企业充值审核</div>
              </div>
            </div>
          </router-link>
        </div>
        <div class="yr" style="width: 33.333%">
          <router-link to="/square/out?state=0">
            <div class="rout">
              <div class="rint" style="text-align: center; cursor: pointer">
                <span class="icon" style="float: none; color: #2196f3">&#xe6b0;</span>
                <span class="bages">{{ cdata.moneyOut > 100 ? '99+' : cdata.moneyOut || 0 }}</span>
                <div class="ctt">企业提现审核</div>
              </div>
            </div>
          </router-link>
        </div>
        <div class="yr" style="width: 33.333%">
          <router-link to="/square/pay?give=1">
            <div class="rout">
              <div class="rint" style="text-align: center; cursor: pointer">
                <span class="icon" style="float: none; color: #2196f3">&#xe6b0;</span>
                <span class="bages">{{ cdata.gives > 100 ? '99+' : cdata.gives || 0 }}</span>
                <div class="ctt">业务发放审核</div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
      <div class="lab">
        <div class="bsg"></div>
        <div class="tit">招聘管理待办事项</div>
      </div>
      <div class="boc">
        <div class="yr" style="width: 33.333%">
          <router-link to="/job/enterprise?state=0">
            <div class="rout">
              <div class="rint" style="text-align: center; cursor: pointer">
                <span class="icon" style="float: none; color: #2196f3">&#xe6b0;</span>
                <span class="bages">{{ cdata.enterprise > 100 ? '99+' : cdata.enterprise || 0 }}</span>
                <div class="ctt">企业认证审核</div>
              </div>
            </div>
          </router-link>
        </div>
        <div class="yr" style="width: 33.333%">
          <router-link to="/job/position?audit=0">
            <div class="rout">
              <div class="rint" style="text-align: center; cursor: pointer">
                <span class="icon" style="float: none; color: #2196f3">&#xe6b0;</span>
                <span class="bages">{{ cdata.position > 100 ? '99+' : cdata.position || 0 }}</span>
                <div class="ctt">职位发布审核</div>
              </div>
            </div>
          </router-link>
        </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">&#xe640;</div>
            <div class="rcon">
              <div class="rtt">企业总数</div>
              <div class="rdesc">{{ cdata.companys || 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">&#xe60a;</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">
          <div class="rint" style="background-color: #faf7fe">
            <div class="icon" style="color: #8642df">&#xe6ed;</div>
            <div class="rcon">
              <div class="rtt">签约总数</div>
              <div class="rdesc">{{ cdata.contracts || 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="/notice">
          <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="/feedback">
          <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: '&#xe611;',
          color: '#fab22e',
          name: 'APP用户',
          url: '/users',
          hasPermi: 'work:user:list'
        },
        {
          icon: '&#xe640;',
          color: '#1890ff',
          name: '企业管理',
          url: '/square/company',
          hasPermi: 'work:company:list'
        },
        {
          icon: '&#xe645;',
          color: '#9C27B0',
          name: '充值管理',
          url: '/square/recharge',
          hasPermi: 'work:recharge:list'
        },
        {
          icon: '&#xe628;',
          color: '#3F51B5',
          name: '提现管理',
          url: '/square/out',
          hasPermi: 'work:out:list'
        },
        {
          icon: '&#xe645;',
          color: '#FF9800',
          name: '发放业务',
          url: '/square/pay',
          hasPermi: 'work:statement:pay'
        },
        {
          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;
  .boc {
    background-color: aliceblue;
    overflow: hidden;
    padding-top: 10px;
    border-radius: 7px;
    margin-bottom: 10px;
    margin-top:-10px;
  }
  .yr {
    float: left;
    width: 25%;
    .rout {
      padding: 6px;
      .rint {
        padding: 10px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        .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);
        }
        .bages {
          position: absolute;
          background-color: red;
          color: white;
          padding: 0px 5px 0px 5px;
          border-radius: 40px;
          text-align: center;
          top: 2px;
        }
        .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>
