<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>

    <!-- 工组信息 -->
    <div class="reportmx_main" v-if="reporttype == 1">
      <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 35%">总工资 48 万</div>
        <div style="margin-left:10px">月均工资 8万</div>
      </div>
      <div style="font-size:14px;color:#666">
        <span>人均月工资 8000</span>
      </div>
    </div>

    <!-- 折线图 -->
    <div class="img_wap">
      <div style="flex:0 0 90%;margin: 0 auto;">
        <img src="../../assets/zhexian_mx_0620_01.jpg" class="img-bingtu" v-if="reporttype == 0"></img>
        <img src="../../assets/zhexian_mx_0620_02.jpg" class="img-bingtu" v-if="reporttype == 1"></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:14px;margin-top:5px;border-bottom: 1px solid #eee;padding:0 0 5px 0;color:#666"
        v-if="reporttype == 0">
        <div style="flex:0 0 25%;text-align: center;">月份</div>
        <div style="flex:0 0 25%;text-align: center;">产值</div>
        <div style="flex:0 0 25%;text-align: center;">每平方产值</div>
        <div style="flex:0 0 25%;text-align: center;">人均产值</div>
      </div>

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

      <!-- 工组明细 -->
      <div style="display:flex;font-size:14px;margin-top:5px;border-bottom: 1px solid #eee;padding:0 0 5px 0;color:#666"
        v-if="reporttype == 1">
        <div style="flex:0 0 33%;text-align: center;">月份</div>
        <div style="flex:0 0 33%;text-align: center;">工资</div>
        <div style="flex:0 0 33%;text-align: center;">人均工资</div>
      </div>

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

        <!-- <div style="color:#666;font-size:12px;margin:10px 0 0 15px">*单位：元</div> -->

    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        reporttype: 0, //0-车间明细 1-工组明细
        wkplist: [{
            month: "1月",
            totalamt: 900,
            areaamt: 4,
            avgamt: 1,
            gzamt: 6,
            avggzamt: 6000
          },
          {
            month: "2月",
            totalamt: 600,
            areaamt: 3,
            avgamt: 0.8,
            gzamt: 5,
            avggzamt: 5000
          },
          {
            month: "3月",
            totalamt: 1000,
            areaamt: 5,
            avgamt: 1.1,
            gzamt: 8,
            avggzamt: 8000
          },
          {
            month: "4月",
            totalamt: 1200,
            areaamt: 6,
            avgamt: 1.2,
            gzamt: 9,
            avggzamt: 9000
          },
          {
            month: "5月",
            totalamt: 1000,
            areaamt: 5,
            avgamt: 1.1,
            gzamt: 10,
            avggzamt: 10000
          },
          {
            month: "6月",
            totalamt: 830,
            areaamt: 4,
            avgamt: 1,
            gzamt: 12,
            avggzamt: 12000
          }
        ]
      }
    },
    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>
