<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 class="taskedit">

      <div class="taskedit_main">

        <div class="taskedit_flex">
          <div class="taskedit_title">设备编号</div>
          <div class="taskedit_item">
            <span>572-102</span>
          </div>
          <div class="taskedit_pzbtn" style="color:#000;font-size:20px">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-qrcode-scan"></use>
            </svg>
          </div>
        </div>

        <div class="taskedit_flex">
          <div class="taskedit_title">设备名称</div>
          <div class="taskedit_item">2#气密机</div>
          <div class="taskedit_pzbtn">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>

        <div class="taskedit_flex">
          <div class="taskedit_title">负责人</div>
          <div class="taskedit_item">李四<span style="margin-left:20px;color:#6495ed"> <svg class="icon"
                aria-hidden="true">
                <use xlink:href="#icon-dianhua"></use>
              </svg>13600136000</span></div>
          <div class="taskedit_pzbtn">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>



        <div class="taskedit_flex">
          <div class="taskedit_title">加急</div>
          <div style="margin-left:10px;font-size:40px">
            <svg class="icon" aria-hidden="true" v-if="ifcheck == 1">
              <use xlink:href="#icon-kaiguanswitch-zhengque"></use>
            </svg>

            <svg class="icon" aria-hidden="true" v-if="ifcheck == 0">
              <use xlink:href="#icon-uni_icon_kaiguan_guan"></use>
            </svg>
          </div>
        </div>

        <div class="taskedit_flex" style="line-height:40px">
          <div class="taskedit_title">报修类型</div>
          <div class="taskedit_item">
            <div style="border-bottom: 1px solid #e5e5e5;">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kongjianweixuan"></use>
              </svg>
              机件损坏
            </div>
            <div style="border-bottom: 1px solid #e5e5e5;" class="check_color">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kongjianyixuan"></use>
              </svg>
              指示灯异常
            </div>
            <div style="border-bottom: 1px solid #e5e5e5;" class="check_color">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kongjianyixuan"></use>
              </svg>
              机器运转有异响

            </div>
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kongjianweixuan"></use>
              </svg>
              器件失电
            </div>
          </div>
          <!-- <div style="flex: 0 0 80%;margin: 0 0 0 10px;color: #777;font-size:14px">
            <div><span class="tip_nocheck">机件损坏</span></div>
            <div><span class="tip_check">指示灯异常</span></div>
            <div><span class="tip_check">机器运转有异响</span></div>
            <div><span class="tip_nocheck">器件失电</span></div>
          </div> -->

        </div>

        <div class="taskedit_flex">
          <div class="taskedit_title">备注</div>
          <div class="taskedit_dscrp">
            <span>设备启动时发出咔咔吱吱呜呜哔哔的声音，明明绿灯转眼变成红灯。</span>
          </div>
        </div>


      </div>

      <div class="taskedit_fjarea">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fujian"></use>
        </svg>
        添加图片
      </div>

      <div style="display:flex;margin:10px 0 0 20px;">
        <div>
          <img src="../assets/taskview_01.jpeg" style="height: 60px;box-shadow: 0 2px 3px rgba(0, 0, 0, 0.302);"></img>
        </div>

        <div style="margin-left:10px">
          <img src="../assets/taskview_02.jpg" style="height: 60px;box-shadow: 0 2px 3px rgba(0, 0, 0, 0.302);"></img>
        </div>
      </div>


    </div>

    <div class="quote_edit_btn_wrap">
      <div class="quote_edit_btn">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tongyi"></use>
        </svg>
        确定
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'taskedit',
    data() {
      return {
        tasktype: 0, //0-临时任务 1-客户走访 2-稽核检查
        ifcheck: 1 //1-需要验收 0-不用验收
      }
    }

  }

</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: 9999;
    display: flex;
    font-size: 18px;
    align-items: center;
  }

  .topbar_left {
    flex: 0 0 20px;
    margin-left: 10px;
  }

  .topbar_middle {
    /* text-align: center; */
    padding: 0 0 0 10px;
    flex: 0 0 89%;
  }

  .topbar_right {
    flex: 0 0 20px;
    position: absolute;
    right: 10px;
  }

  .taskedit {
    position: absolute;
    top: 44px;
    width: 100%;
    margin-bottom: 80px;
  }

  .taskedit_main {
    padding: 5px 20px;
  }

  .taskedit_flex {
    display: flex;
    line-height: 45px;
    align-items: flex-start
  }


  .taskedit_title {
    font-size: 15px;
    font-weight: bold;
    flex: 0 0 60px;
    text-align: justify;
    text-align-last: justify;
  }


  .taskedit_item {
    flex: 0 0 80%;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 0 0 10px;
    color: #777
  }

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

  .taskedit_date {
    position: absolute;
    right: 40px;
    color: #777
  }

  .taskedit_dscrp {
    padding: 10px;
    line-height: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    margin: 5px 0 5px 10px;
    height: 100px;
    color: #777;
    width: 100%
  }

  .color_sub {
    color: #999
  }

  .quote_edit_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;
  }

  .quote_edit_btn {
    /* background-color: #ffb732; */
    background-color: #fc4e2c;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    width: 100%;
  }

  .taskedit_fjarea {
    margin: 10px 20px;
    color: #777
  }

  .taskedit_fjlist {
    padding: 0 20px;
    align-items: center;
    display: flex;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
  }

  .taskedit_fjsize {
    font-size: 15px;
    color: #aaa;
    margin-left: 10px;
  }

  .taskedit_fjdel {
    font-size: 15px;
    color: #fc4e2c;
    position: absolute;
    right: 20px;
  }

  .check_color {
    color: #fc4e2c
  }

  .tip_check {
    padding: 5px 10px;
    background-color: #fc4e2c;
    color: #fff;
    font-weight: bold;
    border-radius: 15px;
  }

  .tip_nocheck {
    padding: 5px 10px;
    border-radius: 15px;
    border: 1px solid #e5e5e5;
    color: #aaa
  }

</style>
