// 周转率明细
<template>
  <div>
    <div :class="colortop"></div>
    <div style="display:flex;">
      <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==0">车间周转明细</div>
      <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==1">仓库周转明细</div>
      <div class="reportdetail_mx_subtitle">2019年1月~2019年6月
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xuanze1"></use>
        </svg></div>
    </div>

    <!-- 车间信息 -->
    <div class="reportmx_main" v-if="reporttype == 0">
      <div style="font-size:24px;font-weight:bold">转椅车间</div>
      <!-- <div style="font-size:14px;color:#f20;margin-top:5px;display:flex">
        <div style="flex:0 0 45%">总产值 5530 万</div>
        <div style="margin-left:10px">月均产值 921.67万</div>
      </div>
      <div style="font-size:14px;color:#666;display:flex">
        <div style="flex:0 0 45%">每平方总产值 30万</div>
        <div style="margin-left:10px">每平方月均产值 5万</div>
      </div>
      <div style="font-size:14px;color:#666;display:flex">
        <div style="flex:0 0 45%">人均总产值 7.2万</div>
        <div style="margin-left:10px">人均月产值 1.2万</div>
      </div> -->


      <div style="font-size:14px;display:flex;margin: 5px 0 0 10px">
        <div style="width:85px;text-align: right">期初金额：</div>
        <div style="width:55px">30万</div>
        <div style="margin-left:10px;width:95px;text-align: right;">期间进金额：</div>
        <div >760万</div>
      </div>

      <div style="font-size:14px;display:flex;margin-left:10px">
        <div style="width:85px;text-align: right">结余金额：</div>
        <div style="width:55px">20万</div>
        <div style="margin-left:10px;width:95px;text-align: right;">期间出金额：</div>
        <div>770万</div>
      </div>
    </div>

    <!-- 折线图 -->
    <div class="img_wap">
      <div style="flex:0 0 90%;margin: 0 auto;">
        <img src="../../assets/zhutu_ito_0620_01.jpg" class="img-bingtu"></img>
      </div>
    </div>
    <div class="liubai"></div>


    <div style="font-size:14px;display:flex;margin-left:15px">
      <div style="margin: 0 auto;">周转率：10</div>
    </div>

    <div class="img_wap">
      <div style="flex:0 0 90%;margin: 0 auto;">
        <img src="../../assets/zhexian_ito_0620_01.jpg" class="img-bingtu"></img>
      </div>
    </div>
    <div class="liubai"></div>

    <div style="padding:0 0 20px 0">
      <div style="display:flex;font-size:16px;font-weight:bold;color:#666;padding:0 0 5px 0">
        <div style="margin:0 auto">每月明细</div>
      </div>

      <!-- 车间明细 -->
      <div style="display:flex;font-size:13px;margin-top:5px;border-bottom: 1px solid #eee;padding:0 0 5px 0;color:#666"
        v-if="reporttype == 0">
          <div style="flex:0 0 17%;text-align: center;">月份</div>
          <div style="flex:0 0 16%;text-align: center;">期初</div>
          <div style="flex:0 0 16%;text-align: center;">期间进</div>
          <div style="flex:0 0 16%;text-align: center;">期间出</div>
          <div style="flex:0 0 16%;text-align: center">结余</div>
          <div style="flex:0 0 16%;text-align: center;">周转率</div>
      </div>

      <div style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:12px;"
        v-for="(wkpitem,index) in wkplist" :key="index" v-if="reporttype == 0">
        <div style="flex:0 0 17%;text-align: center;">{{wkpitem.month}}</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.totalamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.areaamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.avgamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.gzamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.ito}}</div>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        reporttype: 0, //0-车间明细 1-工组明细
        wkplist: [{
            month: "1月",
            totalamt: 30,
            areaamt: 100,
            avgamt: 120,
            gzamt: 10,
            avggzamt: 6000,
            ito:5
          },
          {
            month: "2月",
            totalamt: 10,
            areaamt: 150,
            avgamt: 110,
            gzamt: 50,
            avggzamt: 5000,
            ito:8
          },
          {
            month: "3月",
            totalamt: 50,
            areaamt: 120,
            avgamt: 100,
            gzamt: 70,
            avggzamt: 8000,
            ito:10
          },
          {
            month: "4月",
            totalamt: 70,
            areaamt: 130,
            avgamt: 160,
            gzamt: 40,
            avggzamt: 9000,
            ito:8
          },
          {
            month: "5月",
            totalamt: 40,
            areaamt: 110,
            avgamt: 140,
            gzamt: 10,
            avggzamt: 10000,
            ito:7
          },
          {
            month: "6月",
            totalamt: 10,
            areaamt: 150,
            avgamt: 140,
            gzamt: 20,
            avggzamt: 12000,
            ito:12
          }
        ]
      }
    },
    computed: {
      colortop: function () {
        return {
          kindred: this.reporttype == 0,
          kindblue: this.reporttype == 1,
          kindgreen: this.reporttype == 2
        };
      },
      colortitle: function () {
        return {
          bgred: this.reporttype == 0,
          bgblue: this.reporttype == 1,
          bggreen: this.reporttype == 2
        };
      }
    }

  }

</script>

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

  .img_wap {
    display: flex;
    margin-top: 20px;
  }

  .img-bingtu {
    width: 100%;
  }

  .reportdetail_mx_bar {
    /* border-top: 8px solid rgb(0, 132, 161); */
  }

  .kindblue {
    border-top: 8px solid #0195da;
  }

  .kindgreen {
    border-top: 8px solid #88b04b;
  }

  .kindred {
    border-top: 8px solid #ff6f61;
  }

  .bgblue {
    background-color: rgb(1, 149, 218);
  }

  .bggreen {
    background-color: rgb(136, 176, 75);
  }

  .bgred {
    background-color: rgb(255, 111, 97)
  }

  .reportdetail_mx_title {
    color: white;
    font-size: 15px;
    font-weight: bold;
    padding: 3px 8px;
    margin-left: 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .reportdetail_mx_subtitle {
    position: absolute;
    right: 10px;
    padding: 3px;
    font-size: 15px;
    font-weight: bold;
    line-height: 20px;
    color: grey;
    margin-top: 3px;
  }

  .reportmx_main {
    margin: 5px 10px 0 20px;
  }

  .reportmx_mx {
    margin: 0 10px 0 10px;
    padding: 0 0 20px 0;
  }

  .liubai {
    width: 100%;
    height: 10px;
    background-color: rgb(246, 246, 246);
    margin: 10px 0;
  }

  .reportdetail_mx_for {
    display: flex;
    /* margin: 5px 0 15px 10px; */
    align-items: center;

    padding: 5px 0 5px 0
  }

  .mx_border {
    border-bottom: 1px solid #eee;
  }

  .reportdetail_mx_index {
    flex: 0 0 10%;
    text-align: center;
    /* align-items: center; */
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;

  }

  .reportdetail_mx_name {
    flex: 0 0 80%;
    font-size: 15px;
    font-weight: bold
  }

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

  .reportdetail_mx_amt {
    font-size: 15px;
    font-weight: bold;
    color: #fd7526
  }

  .reportdetail_mx_qty {
    margin-left: 20px;
    font-size: 15px;
    color: #666
  }

</style>
