<template>
  <div class="main">

    <div class="funclist" :class="bg_blur">
      <!-- 销售 -->
      <div class="funclist_title">销售</div>
      <div class="funclist_funcarea">
        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_red">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-baojia"></use>
            </svg>
          </div>
          <div class="funclist_text">销售报价单</div>
        </div>

        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_blue" style="font-size:30px">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiaoshoudingdan"></use>
            </svg>
          </div>
          <div class="funclist_text">销售订单</div>
        </div>

        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_green">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-fahuo"></use>
            </svg>
          </div>
          <div class="funclist_text">销售发货单</div>
        </div>


        <div class="funclist_item" @click="ifreport_shift(1)">
          <div class="funclist_report_icon">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wenjianjiasuolvetu"></use>
            </svg>
          </div>
          <div class="funclist_text">报表</div>
        </div>

      </div>

      <!-- 采购 -->
      <div class="funclist_title">采购</div>
      <div class="funclist_funcarea">
        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_blue">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-caigou"></use>
            </svg>
          </div>
          <div class="funclist_text">采购订单</div>
        </div>

        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_blue">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiance"></use>
            </svg>
          </div>
          <div class="funclist_text">采购送检单</div>
        </div>

        <div class="funclist_item ">
          <div class="funclist_icon func_icon_bg_orange">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiance1"></use>
            </svg>
          </div>
          <div class="funclist_text">采购质检单</div>
        </div>


        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_green">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shouhuo"></use>
            </svg>
          </div>
          <div class="funclist_text">采购收货单</div>
        </div>


        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_red">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-renwu"></use>
            </svg>
          </div>
          <div class="funclist_text">特采审核</div>
        </div>

        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_red">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shenhe1"></use>
            </svg>
          </div>
          <div class="funclist_text">采购审核</div>
        </div>

        <div class="funclist_item">
          <div class="funclist_report_icon">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wenjianjiasuolvetu"></use>
            </svg>
          </div>
          <div class="funclist_text">报表</div>
        </div>

      </div>

      <!-- 生产 -->
      <div class="funclist_title">生产</div>
      <div class="funclist_funcarea">
        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_blue">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhiling1"></use>
            </svg>
          </div>
          <div class="funclist_text">车间指令单</div>
        </div>


        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_blue">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wj-tzwj"></use>
            </svg>
          </div>
          <div class="funclist_text">发料通知单</div>
        </div>

        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_green">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-weiwaifaliao"></use>
            </svg>
          </div>
          <div class="funclist_text">发料单</div>
        </div>

        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_green">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiaozu-"></use>
            </svg>
          </div>
          <div class="funclist_text">工组完工</div>
        </div>

        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_green">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-qrcode-scan"></use>
            </svg>
          </div>
          <div class="funclist_text">工序完工扫描</div>
        </div>

        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_orange">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiance1"></use>
            </svg>
          </div>
          <div class="funclist_text">生产质检单</div>
        </div>

        <div class="funclist_item"@click="ifreport_shift(3)">
          <div class="funclist_report_icon">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wenjianjiasuolvetu"></use>
            </svg>
          </div>
          <div class="funclist_text">报表</div>
        </div>

      </div>

      <!-- 财务 -->
      <div class="funclist_title">财务</div>
      <div class="funclist_funcarea">
        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_blue">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiaohuan"></use>
            </svg>
          </div>
          <div class="funclist_text">其它收入支出单</div>
        </div>

        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_red" style="font-size:35px">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shouruqingkuang"></use>
            </svg>
          </div>
          <div class="funclist_text">应收帐</div>
        </div>

        <div class="funclist_item">
          <div class="funclist_icon func_icon_bg_orange" style="font-size:35px">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhichuqingkuang"></use>
            </svg>
          </div>
          <div class="funclist_text">应付帐</div>
        </div>


        <div class="funclist_item" @click="ifreport_shift(2)">
          <div class="funclist_report_icon">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wenjianjiasuolvetu"></use>
            </svg>
          </div>
          <div class="funclist_text">报表</div>
        </div>

      </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(0)"
            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-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-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 v-if="ifreport==2">
      <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(0)"
            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_red">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-baojia"></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_red">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-20"></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_red">
                  <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_red">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-baifenbi"></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 v-if="ifreport==3">
      <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(0)"
            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_green">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-renwu"></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_green">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shujukanban"></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>
          </div>

        </div>

      </div>


    </div>


    <!-- 底部按钮 -->
    <div class="todolist-tab" :class="bg_blur">
      <div class="todolist-tab-btn">
        <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  todolist-tab-btn-on">
        <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: 'funclist',
    data() {
      return {
        ifreport: 0, //0-关闭文件夹 1-销售报表 2-财务报表 3-生产报表
        rpstyle: {
          height: ''
        }
      }
    },
    computed: {
      bg_blur: function () {
        return {
          blur: this.ifreport > 0
        }
      }
    },
    created() {
      this.get_rp_height(4);
    },
    methods: {
      ifreport_shift(type) {
        this.ifreport = type
      },
      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: "微软雅黑";
  }

  .funclist {
    margin: 20px 0 50px 0;
  }

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

  .funclist_funcarea {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0 10px 20px 10px;
  }

  .funclist_item {
    flex: 0 0 25%;
    text-align: center;
    margin: 0 0 10px 0;
  }

  .funclist_icon {
    width: 45px;
    font-size: 25px;
    line-height: 45px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    margin: 5px auto;
  }

  .funclist_report_icon {
    width: 45px;
    font-size: 45px;
    line-height: 45px;
    text-align: center;
    margin: 5px auto;
  }

  .funclist_text {
    font-size: 13px;
    color: #666;
  }

  .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;
  }

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

  /* 底部栏 */
  .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
  }


  .quote_edit_mask {
    height: 100%;
    width: 100%;
    background-color: #1d1d1d;
    opacity: 0.8;
    position: fixed;
    top: 0px;
    z-index: 9998;
  }

  .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%; */
  }

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

</style>
