<template>
  <div>
    <div class="topbar">
      <div class="topbar_left" @click="goback">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
      </div>
      <div class="topbar_middle">工组完工</div>
      <div class="topbar_right">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-caidan"></use>
        </svg>
      </div>
    </div>

    <div id="content">
      <div class="wkp_scan_area">
        <div class="wkp_scan">
          输入或扫一扫单号
        </div>
        <div class="wkp_scan_btn">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-iconfontscan"></use>
          </svg>
        </div>
      </div>

      <div v-if="ifscan==1">
        <div class="wkp_order_mtrl">
          <div class="wkp_order_mtrl_ordercode">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-erweima"></use>
            </svg>
            SC190427001</div>
          <div class="wkp_order_mtrl_mtrl">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yingyongguanli"></use>
            </svg>
            餐桌 #18202FFED，50张
          </div>
        </div>

        <div class="liubai_wkp"></div>

        <div class="wkp_order_wkp">

          <div class="wkp_order_wkp_title">工组流程</div>

          <div class="wkp_order_wkp_item">
            <div class="wkp_order_wkp_item_flex">
              <div class="wkp_order_wkp_item_name">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaozu-"></use>
                </svg>
                打磨</div>
              <div class="wkp_order_wkp_item_wkpjd">(50/50)</div>
              <div class="wkp_order_wkp_item_status bgcolorblue">已完成</div>
            </div>

            <div class="wkp_order_wkp_item_flex">
              <div class="wkp_order_wkp_item_wrkname">抛光组 已于4月25日完成</div>
            </div>
          </div>

          <div class="wkp_order_wkp_item">
            <div class="wkp_order_wkp_item_flex">
              <div class="wkp_order_wkp_item_name">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaozu-"></use>
                </svg>
                喷漆</div>
              <div class="wkp_order_wkp_item_wkpjd">(0/50)</div>
              <div class="wkp_order_wkp_item_status bgcolorred">超期</div>
            </div>

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

          <div class="wkp_order_wkp_item">
            <div class="wkp_order_wkp_item_flex">
              <div class="wkp_order_wkp_item_name">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaozu-"></use>
                </svg>
                组装</div>
              <div class="wkp_order_wkp_item_wkpjd">(0/50)</div>
              <div class="wkp_order_wkp_item_status"></div>
            </div>

            <div class="wkp_order_wkp_item_flex">
              <div class="wkp_order_wkp_item_wrkname">安装组 要求4月30日完成</div>
            </div>
          </div>

        </div>
        <div class="liubai_wkp"></div>
      </div>


      <div class="wkp_order_wkp_title">本次完工</div>

      <div class="wkp_input">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaozu-"></use>
          </svg>
          完工工组：
          <span>油漆组<svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiala"></use>
            </svg></span>
        </div>
        <div v-if="ifscan==1">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-icon-test"></use>
          </svg>
          完工数量：<span class="wkp_input_qty">50</span>
        </div>
      </div>

      <div class="wkp_none_msg" v-if="ifscan==0">
        <div>暂无数据</div>
        <div>选择好工组后，点击右上角的扫码按钮</div>
      </div>

      <div class="wkp_input_btn_wrap" v-if="ifscan==1">
        <div class="wkp_input_btn">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tongyi"></use>
          </svg>
          提交
        </div>
      </div>

    </div>

  </div>

</template>
<script>
  export default {
    data() {
      return {
        ifscan: 1 //0-未扫描 1-已扫描
      }
    },
    methods: {
      goback() {
        {
          history.back();
        }
      }
    }
  }

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

  .topbar {
    min-height: 44px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 9993;
    display: flex;
    font-size: 18px;
    align-items: center;
  }

  .topbar_left {
    /* flex: 0 0 %; */
    margin-left: 10px;
  }

  .topbar_middle {
    text-align: center;
    flex: 0 0 85%;
  }

  .topbar_right {
    /* flex: 0 0 10%; */
    position: absolute;
    right: 10px;
  }

  #content {
    position: absolute;
    top: 44px;
    background-color: #fff;
    width: 100%;
    padding-bottom: 60px;
  }
  .bgcolorblue {
    background-color: #1e90ff;
  }

  .bgcolorred {
    background-color: #ff0000;
  }

  .wkp_scan_area {
    display: flex;
    align-items: center;
  }

  .wkp_none_msg {
    margin-top: 50px;
    color: #bbbbbb;
    text-align: center;
  }

  .wkp_scan {
    margin: 10px 20px;
    padding: 5px 10px;
    border: 1px solid #c7c7c7;
    color: #bbb;
    border-radius: 10px;
    flex: 0 0 70%
  }

  .wkp_scan_btn {
    color: #000000;
    font-size: 30px;
  }

  .wkp_order_wkp_title {
    padding: 10px 0 0 20px;
    font-size: 15px;
    font-weight: bold
  }

  .wkp_order_mtrl {
    padding: 20px 0 10px 20px;
  }

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

  .wkp_order_mtrl_mtrl {
    color: #666666
  }

  .wkp_order_wkp_item {
    padding: 5px 20px 0 20px;
    border-bottom: 1px solid #f0f0f0;
  }

  .wkp_order_wkp_item_flex {
    display: flex;
    line-height: 30px;
    align-items: center;
  }

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

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

  .wkp_order_wkp_item_wrkname {
    font-size: 14px;
    color: #666666
  }

  .liubai_wkp {
    width: 100%;
    height: 10px;
    background-color: #f6f6f6;
  }

  .wkp_input {
    padding: 5px 0 10px 20px;
    line-height: 40px;
  }

  .wkp_input_qty {
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
    color: #000000;
    border-radius: 10px;
    text-align: center;
    padding: 2px 20px;
    background-color: #e0e0e0;
  }

  .wkp_input_btn_wrap {
    display: flex;
    position: fixed;
    bottom: 0;
    background-color: #fc4e2c;
    width: 100%;
    z-index: 9990;
    align-items: center;
    justify-content: center;
    padding: 5px 0 2px 0;
    box-shadow: 0 -1px 3px #f1f1f1;
  }


  .wkp_input_btn {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    width: 45%;
    text-align: center;
    padding: 8px;
  }

</style>
