<template>
  <div>
    <div class="topbar">
      <div class="topbar_left">
        <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="toparea_dt" :class="colortop">
        <div class="taskcode_dt">
          SC190907001
        </div>
        <div class="taskflag_dt">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weikaishi" v-if="taskflag_dt=='待审核'"></use>
            <use xlink:href="#icon-jindu" v-if="taskflag_dt=='在进行'"></use>
            <use xlink:href="#icon-CombinedShape" v-if="taskflag_dt=='已完成'"></use>
          </svg>
          {{taskflag_dt}}
        </div>
      </div>
      <div class="taskinfo_dt">
        <div class="cust_dt">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shouhuo"></use>
          </svg>
          W-168黑色 FHZY4202
        </div>
      </div>

      <div class="ordermx_pz_dt">背面料:LFSD-22黑色|座面料:LFSS-26黑色|腰面料:LFSS-26黑色|扶手面料:LFSS-26黑色|座主棉:座内棉/D35灰泡|铁架:银白色喷漆|</div>

      <div class="liubai_dt"></div>


      <div class="middlearea">
        <div class='taskinfo_dtflex'>
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt ">生产批号：</div>
            <div class="taskinfo_dtitem leftsize">FHLWL8603-02</div>
          </div>
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt rightside">订单序号：</div>
            <div class="taskinfo_dtitem requiredate">1</div>
          </div>
        </div>
        <div class='taskinfo_dtflex'>
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt ">开始日期：</div>
            <div class="taskinfo_dtitem leftsize">2018-09-10</div>
          </div>
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt rightside">要求交期：</div>
            <div class="taskinfo_dtitem requiredate">2018-09-30</div>
          </div>
        </div>
        <div class="taskinfo_dtamt">
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt">计划数量：</div>
            <div class="taskinfo_dtitem  leftsize">100</div>
          </div>
          <div class="taskinfo_dttitle_dt dingjin">
            <div class="title_dt rightside">已进仓数：</div>
            <div class="taskinfo_dtitem ">80</div>
          </div>
        </div>
        <div class="taskinfo_dtamt">
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt">已终止数：</div>
            <div class="taskinfo_dtitem  leftsize">5</div>
          </div>
          <div class="taskinfo_dttitle_dt dingjin">
            <div class="title_dt rightside">未完成数：</div>
            <div class="taskinfo_dtitem ">15</div>
          </div>
        </div>

        <!-- class=dscrp这一块，只有 客户订单备注 或 特殊需求 有内容才显示 -->
        <div class="dscrp">
          <!-- 下面是客户订单备注字段，如果无内容，整个div不显示 -->
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wentibuchong"></use>
            </svg>备注
            <!-- white-space: pre-wrap;用于正常显示回车换行 -->
            <div style="white-space: pre-wrap;margin-top:5px">1.所有产品的汽杆质量一定要好，上票投诉很多升降有问题
2.靠背网布的颜色和座垫网布的颜色要保持一致
3.客户投诉W-42A喷塑不良，这次要注意，不要再出现此类问题</div>
          </div>

          <!-- 下面是特殊需求字段，如果无内容，整个div不显示 -->
          <div style="margin-top:15px">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jinggao"></use>
            </svg>特殊要求
            <div style="white-space: pre-wrap;margin-top:5px">在喇叭盘下面贴上印有：MADE IN CHINA的不干胶！</div>
          </div>

        </div>

        <div class="ordermx_fj">
          <div style="font-size:30px">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-excel"></use>
            </svg>
          </div>

          <div style="margin:0 0 0 5px">
            <div>FHLWL8603-02唛头信息.xlsx</div>
            <div style="color:#888;font-size:12px">
              <span>1.2M</span>
            </div>
          </div>
        </div>

        <div class="ordermx_fj">
          <div style="font-size:30px">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yasuobao"></use>
            </svg>
          </div>

          <div style="margin:0 0 0 5px">
            <div>FHLWL8603-02唛头信息.rar</div>
            <div style="color:#888;font-size:12px">
              <span>3.2M</span>
            </div>
          </div>
        </div>

      </div>

      <div class="liubai_dt"></div>

      <div class="subtitle_dt">工组进度</div>
      <div class="jindu">
        <div class="jindumx" @click="gotomxjd">
          <div>
            <div style="display:flex">
              <div>
                <span style="font-size:15px;font-weight:bold">木工线</span>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                排程审
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque1"></use>
                </svg>
              </div>
            </div>
            <div style="display:flex">
              <div style="color:#666;background-color:#ddd;width:120px;border-radius: 5px;overflow:hidden">
                <div style="color:#666;background-color:#8dc026;text-align:left;color:#fff;font-weight:bold":style="jdtwidth(80)">
                  <span style="margin-left:10px">80/100</span></div>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                库存够料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque1"></use>
                </svg>
              </div>
            </div>

            <div style="display:flex">
              <div style="color:#666">9/10 08:00~18:00</div>
              <div style="position:absolute;right:40px;color:#888">
                领完料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque1"></use>
                </svg>
              </div>
            </div>

          </div>
          <div class="jindumx_pzbtn" style="color:#ccc">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>

        <div class="jindumx">
          <div>
            <div style="display:flex">
              <div>
                <span style="font-size:15px;font-weight:bold">裁棉线</span>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                排程审
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque1"></use>
                </svg>
              </div>
            </div>
            <div style="display:flex">
              <div style="color:#666;background-color:#ddd;width:120px;border-radius: 5px;overflow:hidden">
                <div style="color:#666;background-color:#8dc026;text-align:left;color:#fff;font-weight:bold":style="jdtwidth(40)">
                  <span style="margin-left:10px">40/100</span></div>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                库存够料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwancheng"></use>
                </svg>
              </div>
            </div>

            <div style="display:flex">
              <div style="color:#666">9/10 08:00~18:00</div>
              <div style="position:absolute;right:40px;color:#888">
                部分领料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bufenfahuo"></use>
                </svg>
              </div>
            </div>

          </div>
          <div class="jindumx_pzbtn" style="color:#ccc">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>

        <div class="jindumx">
          <div>
            <div style="display:flex">
              <div>
                <span style="font-size:15px;font-weight:bold">裁面料线</span>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                排程审
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque1"></use>
                </svg>
              </div>
            </div>
            <div style="display:flex">
              <div style="color:#666;background-color:#ddd;width:120px;border-radius: 5px;overflow:hidden">
                <div style="color:#666;background-color:#8dc026;text-align:left;color:#fff;font-weight:bold":style="jdtwidth(0)">
                  <span style="margin-left:10px">0/100</span></div>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                库存够料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwancheng"></use>
                </svg>
              </div>
            </div>

            <div style="display:flex">
              <div style="color:#666">9/10 08:00~18:00</div>
              <div style="position:absolute;right:40px;color:#888">
                未领料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-jianzhanbuzhouweiwan"></use>
                </svg>
              </div>
            </div>

          </div>
          <div class="jindumx_pzbtn" style="color:#ccc">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>


        <div class="jindumx">
          <div>
            <div style="display:flex">
              <div>
                <span style="font-size:15px;font-weight:bold">配件线</span>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                排程审
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque1"></use>
                </svg>
              </div>
            </div>
            <div style="display:flex">
              <div style="color:#666;background-color:#ddd;width:120px;border-radius: 5px;overflow:hidden">
                <div style="color:#666;background-color:#8dc026;text-align:left;color:#fff;font-weight:bold":style="jdtwidth(0)">
                  <span style="margin-left:10px">0/100</span></div>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                库存够料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwancheng"></use>
                </svg>
              </div>
            </div>

            <div style="display:flex">
              <div style="color:#666">9/11 08:00~18:00</div>
              <div style="position:absolute;right:40px;color:#888">
                未领料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-jianzhanbuzhouweiwan"></use>
                </svg>
              </div>
            </div>

          </div>
          <div class="jindumx_pzbtn" style="color:#ccc">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>


        <div class="jindumx">
          <div>
            <div style="display:flex">
              <div>
                <span style="font-size:15px;font-weight:bold">装配线</span>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                排程审
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque1"></use>
                </svg>
              </div>
            </div>
            <div style="display:flex">
              <div style="color:#666;background-color:#ddd;width:120px;border-radius: 5px;overflow:hidden">
                <div style="color:#666;background-color:#8dc026;text-align:left;color:#fff;font-weight:bold" :style="jdtwidth(0)">
                  <span style="margin-left:10px">0/100</span></div>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                库存够料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwancheng"></use>
                </svg>
              </div>
            </div>

            <div style="display:flex">
              <div style="color:#666">9/11 08:00~18:00</div>
              <div style="position:absolute;right:40px;color:#888">
                未领料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-jianzhanbuzhouweiwan"></use>
                </svg>
              </div>
            </div>

          </div>
          <div class="jindumx_pzbtn" style="color:#ccc">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>

        <div class="jindumx">
          <div>
            <div style="display:flex">
              <div>
                <span style="font-size:15px;font-weight:bold">缝纫线</span>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                排程审
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque1"></use>
                </svg>
              </div>
            </div>
            <div style="display:flex">
              <div style="color:#666;background-color:#ddd;width:120px;border-radius: 5px;overflow:hidden">
                <div style="color:#666;background-color:#8dc026;text-align:left;color:#fff;font-weight:bold" :style="jdtwidth(0)">
                  <span style="margin-left:10px">0/100</span></div>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                库存够料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwancheng"></use>
                </svg>
              </div>
            </div>

            <div style="display:flex">
              <div style="color:#666">9/11 08:00~18:00</div>
              <div style="position:absolute;right:40px;color:#888">
                未领料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-jianzhanbuzhouweiwan"></use>
                </svg>
              </div>
            </div>

          </div>
          <div class="jindumx_pzbtn" style="color:#ccc">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>


        <div class="jindumx">
          <div>
            <div style="display:flex">
              <div>
                <span style="font-size:15px;font-weight:bold">普通网椅线</span>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                排程审
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwancheng"></use>
                </svg>
              </div>
            </div>
            <div style="display:flex">
              <div style="color:#666;background-color:#ddd;width:120px;border-radius: 5px;overflow:hidden">
                <div style="color:#666;background-color:#8dc026;text-align:left;color:#fff;font-weight:bold":style="jdtwidth(0)">
                  <span style="margin-left:10px">0/100</span></div>
              </div>
              <div style="position:absolute;right:40px;color:#888">
                库存够料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwancheng"></use>
                </svg>
              </div>
            </div>

            <div style="display:flex">
              <div style="color:#666">9/11 08:00~18:00</div>
              <div style="position:absolute;right:40px;color:#888">
                未领料
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-jianzhanbuzhouweiwan"></use>
                </svg>
              </div>
            </div>

          </div>
          <div class="jindumx_pzbtn" style="color:#ccc">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>

      <!-- 以下区域暂时弃用 -->
      <!-- <div class="liubai_dt" v-if="ifqty==1"></div>

      <div class="subtitle_dt" v-if="ifqty==1">缺料明细</div>
      <div class="jindu" v-if="ifqty==1">
        <div class="order_mxmtrl_dt">
          <div>
            <span style="font-size:12px;background-color:#fc4e2c;color:#fff;padding: 2px 6px;border-radius: 15px;">木工组
            </span>
            <span style="margin-left:5px">W-119G-1扶手加强铁片 30*30*1.8MM内放孔10*10MM</span>
          </div>
          <div>
            <span style="color:#888">100块;</span>
            <span style="color:#888;margin-left:5px">未领100，库存80</span>
            <span style="color:#f00;font-weight:bold;position:absolute;right:30px">缺料：20</span>
          </div>
        </div>

        <div class="order_mxmtrl_dt">
          <div>
            <span style="font-size:12px;background-color:#fc4e2c;color:#fff;padding: 2px 6px;border-radius: 15px;">装配组
            </span>
            <span style="margin-left:5px">大扁头内六角螺丝（高等发黑） M6*20MM</span>
          </div>
          <div>
            <span style="color:#888">100块;</span>
            <span style="color:#888;margin-left:5px">未领100，库存80</span>
            <span style="color:#f00;font-weight:bold;position:absolute;right:30px">缺料：20</span>
          </div>
        </div>

        <div class="order_mxmtrl_dt">
          <div>
            <span style="font-size:12px;background-color:#fc4e2c;color:#fff;padding: 2px 6px;border-radius: 15px;">配件组
            </span>
            <span style="margin-left:5px">自封袋 9*13cm</span>
          </div>
          <div>
            <span style="color:#888">100只;</span>
            <span style="color:#888;margin-left:5px">未领100，库存80</span>
            <span style="color:#f00;font-weight:bold;position:absolute;right:30px">缺料：20</span>
          </div>
        </div>



      </div> -->

    </div>

  </div>

</template>

<script>
  export default {
    name: 'orderzlmx',
    data() {
      return {
        taskflag_dt: '在进行',
        ifqty: 1 //0-不缺料 1-缺料
      };
    },
    computed: {
      colortop: function () {
        return {
          bgcolorred: this.taskflag_dt == "待审核",
          bgcolorgreen: this.taskflag_dt == "在进行",
          bgcolorblue: this.taskflag_dt == "已完成"
        };
      }
    },
    methods: {
      goback() {
        {
          history.back();
        }
      },
      gotomxjd() {
        this.$router.push({
          path: "/orderwkpmx"
        });
      },
      jdtwidth:function(x){
        return{
          'width':x+'%'
        }
      }
    }
  }

</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;
    /* color:#fff */
  }

  .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: 30px;
  }

  .toparea_dt {
    color: white;
    background-color: rgb(252, 78, 44);
    height: 80px;
    display: flex;
  }

  .bgcolorred {
    background-color: #fc4e2c
  }

  .bgcolorgreen {
    background-color: #8dc026;
  }

  .bgcolorblue {
    background-color: #1e90ff;
  }

  .taskcode_dt {
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0 10px 20px;
    line-height: 30px;
  }

  .taskflag_dt {
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    line-height: 30px;
    position: absolute;
    right: 20px;
  }

  .taskinfo_dt {
    background-color: #fff;
    width: 100%;
    height: 35px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    position: absolute;
    top: 50px;
  }

  .cust_dt {
    font-size: 16px;
    font-weight: bold;
    padding: 10px
  }

  .reptel_dt {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0 2px 10px;
  }

  .ordermx_pz_dt {
    font-size: 13px;
    margin: 10px 20px 10px 30px;
    color: #666;
  }


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


  .middlearea {
    margin: 10px;
    font-size: 14px;
  }


  .taskinfo_dtflex {
    display: flex;
    /* height: 60px; */
    align-items: flex-start;
    line-height: 20px;
  }

  .taskinfo_dttitle_dt {
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
    line-height: 18px;
  }

  .title_dt {
    width: 80px;
    text-align: right
  }

  .taskinfo_dtitem {
    font-weight: normal;
    color: #333;

  }

  .taskinfo_dtamt {
    display: flex;
    line-height: 20px;
  }

  .taskamt {
    font-weight: bold;
    color: red;
  }

  .leftsize {
    width: 100px;
  }

  .dscrp {
    border-radius: 10px;
    background: #f7f7f7;
    padding: 10px 20px;
    margin: 10px 0 0 0;
    font-size: 14px;
    color: #555;
    line-height: 18px;
  }

  .subtitle_dt {
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    margin: 0 20px;
    height: 42px;
    line-height: 43px;
  }

  .ordermx_fj {
    margin: 20px 0;
    padding: 0px 0 0 10px;
    align-items: center;
    display: flex;
    font-size: 14px;
    height: 25px;
    /* line-height: 25px; */
  }

  .subtitle_dt {
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    margin: 0 20px;
    height: 42px;
    line-height: 43px;
    color: #666
  }


  .jindu {
    border-top: 1px solid #f0f0f0;
    margin: 0 20px;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 0;
  }

  .jindumx {
    padding: 5px 0;
    margin-top: 5px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
  }

  .jindumx_pzbtn {
    position: absolute;
    right: 20px;
    color: #ccc;
    font-size: 12px;
  }

  .order_mxmtrl_dt {
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 0;
    line-height: 22px;
    /* display: flex;
    align-items: center; */
  }

</style>
