<template>
  <div class="wkplist">
    <div class="wkplist_maininfo">
      <div class="orderwkp_ordercode">
        SC190427001
      </div>

      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yingyongguanli"></use>
        </svg>
        餐桌 #18202FFED，50张
      </div>

      <div class="orderwkp_flex">
        <div class="orderwkp_name">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaozu-"></use>
          </svg>
          喷漆
        </div>
        <div class="orderwkp_wkpjd">(0/50)</div>
      </div>

      <div class="orderwkp_flex">
        <div class="orderwkp_wrkname">油漆组 要求4月27日完成</div>

        <div class="orderwkp_finish" @click="gotofinish">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-icon-test"></use>
          </svg>
          报告完工
        </div>

      </div>
    </div>

    <div class="orderwkp_status bgcolorred">超期</div>
  </div>
</template>
<script>
  export default {
    name: "orderwkplist",
    methods: {
      gotofinish(){
        this.$router.push({
          path: "/wkpfinish"
        });
      }
    }

  }

</script>

<style>
  .wkplist {
    display: flex;
    font-size: 15px;
    margin: 10px 10px 10px 20px;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .wkplist_maininfo {
    flex: 0 0 80%
  }

  .orderwkp_ordercode {
    font-size: 18px;
    font-weight: bold;
  }

  .orderwkp_wkpjd {
    padding: 0 0 0 10px;
  }

  .orderwkp_wrkname {
    font-size: 14px;
    color: #666666;
    flex: 0 0 70%
  }

  .orderwkp_finish {
    font-size: 14px;
    color: #666666;
    position: absolute;
    right: 25px;
  }

  .orderwkp_status {
    font-size: 12px;
    position: absolute;
    right: 30px;
    width: 55px;
    line-height: 20px;
    font-weight: bold;
    color: #fff;
    border-radius: 15px;
    text-align: center;
  }

  .bgcolorred {
    background-color: #ff0000;
  }

  .orderwkp_flex {
    display: flex
  }

</style>
