<template>
  <div>
    <!-- 顶部区域 -->
    <div class="task_top" :class="bg_blur">
      <div class="task_selection_warp">
        <div class="task_selection">
          <div>时刻</div>
          <div style="margin-left:20px">决策</div>
          <div class='task_selection_check' style="margin-left:20px">报表</div>
        </div>
      </div>
    </div>

    <!-- 主体内容区域 -->
    <div style="margin:60px 0 100px 0" :class="bg_blur">
      <div class="homerp_title">销售</div>

      <div style="margin:0 10px 0 20px">
        <div class="home_report_list_item ">
          <div class="home_report_list_item_icon func_icon_bg_blue">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tubiao-zhuzhuangtu"></use>
            </svg>
          </div>

          <div class="home_report_list_item_text home_report_list_item_border">
            <div class="home_report_list_item_name">客户销售排名统计表</div>
            <div class="home_report_list_item_right">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xing1"></use>
              </svg>
            </div>
          </div>
        </div>

        <div class="home_report_list_item ">
          <div class="home_report_list_item_icon func_icon_bg_blue">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-paiming"></use>
            </svg>
          </div>

          <div class="home_report_list_item_text home_report_list_item_border">
            <div class="home_report_list_item_name">产品销售排名统计表</div>
            <div class="home_report_list_item_right">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xing1"></use>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="homerp_more" @click="ifreport_shift">查看更多销售报表</div>


      <div class="homerp_title">财务</div>

      <div style="margin:0 10px 0 20px">
        <div class="home_report_list_item ">
          <div class="home_report_list_item_icon func_icon_bg_red">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-baojia"></use>
            </svg>
          </div>

          <div class="home_report_list_item_text home_report_list_item_border">
            <div class="home_report_list_item_name">销售订单收款统计表</div>
            <div class="home_report_list_item_right">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xing1"></use>
              </svg>
            </div>
          </div>
        </div>

        <div class="home_report_list_item ">
          <div class="home_report_list_item_icon func_icon_bg_red">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-baifenbi"></use>
            </svg>
          </div>

          <div class="home_report_list_item_text home_report_list_item_border">
            <div class="home_report_list_item_name">销售订单利润率统计表</div>
            <div class="home_report_list_item_right">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xing1"></use>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="homerp_more">查看更多财务报表</div>


      <div class="homerp_title">生产</div>

      <div style="margin:0 10px 0 20px">
        <div class="home_report_list_item ">
          <div class="home_report_list_item_icon func_icon_bg_green">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-renwu"></use>
            </svg>
          </div>

          <div class="home_report_list_item_text home_report_list_item_border">
            <div class="home_report_list_item_name">在进行出口订单异常统计表</div>
            <div class="home_report_list_item_right">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xing1"></use>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="homerp_more">查看更多生产报表</div>

    </div>

    <!-- 文件夹视图 -->
    <div v-if="ifreport==1">
      <div
        style="    height: 100%;width: 100%;background-color: #000;opacity: 0.48;position: fixed;top: 0px;z-index: 9998;">
      </div>
      <div style="z-index: 9999;position: fixed;bottom: 0px;height: 100%;width: 100%;font-size:14px;">

        <div style="width:100%;margin: 20% auto;height: 100%;    border-radius: 15px;overflow:hidden;">


          <div @click="ifreport_shift"
            style="position: relative;left:88%;top:40px;background-color:#fc4f4f;color:#fff;font-size:12px;width:20px;height:20px;line-height:20px;text-align: center;border-radius: 50%;">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-guanbi"></use>
            </svg>
          </div>

          <div style="display:flex;">
            <div style="font-size:25px;font-weight:bold;color:#fff;margin:10px auto;">
              销售报表
            </div>
          </div>
          <div :style="rpstyle"
            style="background-color:rgba(255, 255, 255, 0.75);margin: 0 auto;width:95%;border-radius: 15px;overflow: auto;box-shadow: 0 0px 7px rgba(0, 0, 0, 0.2);">


            <div style="padding:15px;">

              <div class="report_list_item ">
                <div class="report_list_item_icon func_icon_bg_blue">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-baobiao"></use>
                  </svg>
                </div>

                <div class="report_list_item_text report_list_item_border">
                  <div class="report_list_item_name">新增销售订单统计表</div>
                  <div class="report_list_item_right">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-xing"></use>
                    </svg>
                  </div>
                </div>
              </div>

              <div class="report_list_item ">
                <div class="report_list_item_icon func_icon_bg_blue">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-paiming"></use>
                  </svg>
                </div>

                <div class="report_list_item_text report_list_item_border">
                  <div class="report_list_item_name">业务员销售排名统计表</div>
                  <div class="report_list_item_right">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-xing"></use>
                    </svg>
                  </div>
                </div>
              </div>


              <div class="report_list_item ">
                <div class="report_list_item_icon func_icon_bg_blue">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tubiao-zhuzhuangtu"></use>
                  </svg>
                </div>

                <div class="report_list_item_text report_list_item_border">
                  <div class="report_list_item_name">客户销售排名统计表</div>
                  <div class="report_list_item_right">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-xing1"></use>
                    </svg>
                  </div>
                </div>
              </div>

              <div class="report_list_item ">
                <div class="report_list_item_icon func_icon_bg_blue">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-paiming"></use>
                  </svg>
                </div>

                <div class="report_list_item_text report_list_item_border">
                  <div class="report_list_item_name">产品销售排名统计表</div>
                  <div class="report_list_item_right">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-xing1"></use>
                    </svg>
                  </div>
                </div>
              </div>


            </div>
          </div>

        </div>

      </div>


    </div>

    <!-- 底部按钮 -->
    <div class="todolist-tab" :class="bg_blur">
      <div class="todolist-tab-btn todolist-tab-btn-on">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-home"></use>
          </svg>
        </div>
        首页
      </div>
      <div class="todolist-tab-btn ">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-format-list-bulleted"></use>
          </svg>
        </div>
        <div class="todolist-tab-count">9</div>
        待办
      </div>


      <div class="todolist-tab-btn">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-google-drive"></use>
          </svg>
        </div>
        功能
      </div>

      <div class="todolist-tab-btn">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-email-outline"></use>
          </svg>
        </div>
        <div class="todolist-tab-count">5</div>
        消息
      </div>

      <div class="todolist-tab-btn">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-account"></use>
          </svg>
        </div>
        我的
      </div>
    </div>
  </div>

</template>
<script>
  export default {
    name: 'homerp',
    data() {
      return {
        ifreport: 0, //0-关闭文件夹 1-打开报表文件夹
        rpstyle:{
            height:''
        }
      }
    },
    computed: {
      bg_blur: function () {
        return {
          blur: this.ifreport == 1
        }
      }
    },
    created() {
      this.get_rp_height(4);
    },
    methods: {
      ifreport_shift() {
        this.ifreport = 1 - this.ifreport
      },
      get_rp_height(num){
          //num 代表文件夹中有多少个报表
          num = (num<4)?4:num; //最少显示4行
          var tmph = num * 50 + 30; //+30为了预留下面空位
          //限制总高度不能大于屏幕的70%
          if(tmph >= window.innerHeight * 0.7){
              this.rpstyle.height = window.innerHeight * 0.7 +'px'
          } else {
            this.rpstyle.height = tmph + 'px'
          }


      }
    }
  }

</script>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: "微软雅黑";
  }

  .blur {
    -webkit-filter: blur(8px);
    /* Chrome, Opera */
    -moz-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px);
  }

  .homerp_more {
    margin: 20px;
    font-size: 14px;
    text-align: center;
    color: #6495ed;
  }

  .homerp_title {
    font-size: 16px;
    font-weight: bold;
    padding: 0 0 10px 20px;
  }

  .task_top {
    z-index: 9998;
    width: 100%;
    position: fixed;
    background-color: #fff;
    font-size: 15px;
    top: 0;
  }

  .task_selection_warp {
    background-color: #fff;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
  }

  .task_selection {
    display: flex;
    margin: 10px 20px;
    font-size: 15px;
    font-weight: bold;
  }

  .task_selection div {
    padding-bottom: 3px;
  }

  .task_selection_check {
    color: #fd7526;
    border-bottom: 2px solid #fd7526;
  }

  /* 底部栏 */
  .todolist-tab {
    color: #666;
    display: flex;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    width: 100%;
    z-index: 9995;
    align-items: center;
    justify-content: center;
    padding: 5px 0 2px 0;
    box-shadow: 0 -1px 3px #f1f1f1
  }

  .todolist-tab-btn {
    font-size: 13px;
    width: 25%;
    text-align: center
  }

  .todolist-tab-btn-on {
    color: #46a4da
  }

  .todolist-tab-icon {
    font-size: 23px;
  }

  .todolist-tab-count {
    position: absolute;
    margin-left: 14%;
    bottom: 30px;
    font-size: 12px;
    line-height: 12px;
    width: 12px;
    font-weight: bold;
    color: #fff;
    border-radius: 50%;
    padding: 3px;
    text-align: center;
    background-color: #fc4f4f
  }


  .home_report_list_item {
    display: flex;
    color: #606060;
    font-size: 15px;
    font-weight: bold;
    line-height: 50px;
    align-items: center;
  }

  .home_report_list_item_icon {
    flex: 0 0 35px;
    /* width: 35px;
    height: 35px; */
    margin: 0 0 0 10px;
    font-size: 20px;
    line-height: 35px;

    color: #fff;
    border-radius: 50%;
    text-align: center;
  }

  .home_report_list_item_border {
    border-bottom: 1px solid #f6f6f6;
  }

  .home_report_list_item_text {
    display: flex;
    width: 100%;
    margin: 0 15px 0 15px;
  }

  .home_report_list_item_name {
    flex: 0 0 90%
  }

  .home_report_list_item_right {
    color: #9b9b9b;
    font-size: 28px;
    /* position: absolute;
    right: 8%; */
  }


  .func_icon_bg_blue {
    background-color: #00aaee;
  }

  .func_icon_bg_green {
    background-color: #47cc47;
  }

  .func_icon_bg_orange {
    background-color: #ff9800;
  }

  .func_icon_bg_red {
    background-color: #ff6f61;
  }


  .report_list_item {
    display: flex;
    color: #606060;
    font-size: 15px;
    font-weight: bold;
    line-height: 50px;
    align-items: center;
  }

  .report_list_item_icon {
    flex: 0 0 35px;
    /* width: 35px;
    height: 35px; */
    font-size: 20px;
    line-height: 35px;

    color: #fff;
    border-radius: 50%;
    text-align: center;
  }

  /* .report_list_item_border {
    border-bottom: 1px solid #fff;
  } */

  .report_list_item_text {
    display: flex;
    width: 100%;
    margin: 0 5px 0 15px;
  }

  .report_list_item_name {
    flex: 0 0 90%
  }

  .report_list_item_right {
    color: #9b9b9b;
    font-size: 28px;
    /* position: absolute;
    right: 8%; */
  }

</style>
