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

      <div class="taskedit_main">

        <div class="taskedit_flex">
          <div class="taskedit_title">类型</div>
          <div class="taskedit_item">
            <span v-if="tasktype==0">临时任务</span>
            <span v-if="tasktype==1">客户走访</span>
            <span v-if="tasktype==2">稽核检查</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" v-if="tasktype==2">
          <div class="taskedit_title">稽核类目</div>
          <div class="taskedit_item">车间检查-卫生检查</div>
          <div class="taskedit_pzbtn">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>

        <div class="taskedit_flex" v-if="tasktype==2">
          <div class="taskedit_title">及格标准</div>
          <div class="taskedit_dscrp">
            <span>地面清洁无灰尘、无垃圾、无油污、无积水、无死角。墙壁(角)清洁无污染、无蛛网、无死角。门窗明亮干净、无积灰、无污迹、无蛛网。</span>
          </div>
        </div>

        <div class="taskedit_flex" v-if="tasktype==2">
          <div class="taskedit_title">责任人</div>
          <div class="taskedit_item">待定</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">张小千</div>
          <div class="taskedit_pzbtn">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>

        <!-- 客户信息 -->
        <div v-if="tasktype==1">


          <div class="taskedit_flex">
            <div class="taskedit_title">客户</div>
            <div class="taskedit_item">红岸家私城</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">章北海</div>

          </div>

          <div class="taskedit_flex">
            <div class="taskedit_title">电话</div>
            <div class="taskedit_item">13600138779</div>
            <div class="taskedit_pzbtn">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dianhua"></use>
              </svg>
            </div>
          </div>

          <div class="taskedit_flex">
            <div class="taskedit_title">地址</div>
            <div class="taskedit_item">佛山市佛山大道189号</div>
            <div class="taskedit_pzbtn">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon_daohang-copy"></use>
              </svg>
            </div>
          </div>


          <div class="taskedit_flex">
            <div class="taskedit_title">走访类型</div>
            <div class="taskedit_item">电话回访</div>
            <div class="taskedit_pzbtn">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-iconfontjiantou2"></use>
              </svg>
            </div>
          </div>
        </div>

        <div class="taskedit_flex" v-if="tasktype!=2">
          <div class="taskedit_title">任务</div>
          <div class="taskedit_dscrp">
            <span v-if="tasktype==0">跟设计公司沟通，定好最新一季宣传画册的设计。</span>
            <span v-if="tasktype==1">了解客户上一批货的销售情况及质量反馈，并介绍本季最新产品。</span>
            <span v-if="tasktype==2">按6S标准检查车间清洁是否达标。</span>
          </div>
        </div>



        <div class="taskedit_flex">
          <div class="taskedit_title">时间</div>
          <div class="taskedit_item color_sub">开始</div>
          <div class="taskedit_date">8月2日 09:00</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 color_sub">结束</div>
          <div class="taskedit_date">8月2日 12:00</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 v-if="tasktype==0">不重复</span>
            <span v-if="tasktype==1">每月</span>
            <span v-if="tasktype==2">每周</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 class="taskedit_item">提前30分钟</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" v-if="ifcheck == 1">
          <div class="taskedit_title">验收人</div>
          <div class="taskedit_item">李学朋</div>
          <div class="taskedit_pzbtn">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>


      </div>

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

      <div class="taskedit_fjlist">
        <div v-if="tasktype!=2">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yasuobao"></use>
          </svg>
          新产品照片_190802.rar
        </div>
        <div v-if="tasktype==2">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tupian"></use>
          </svg>
          及格标准图片.jpg
        </div>
        <div class="taskedit_fjsize">
          <span v-if="tasktype!=2">30.2M</span>
          <span v-if="tasktype==2">1.4M</span>
        </div>
        <div class="taskedit_fjdel">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-guanbi"></use>
          </svg>
        </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: 2, //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;
  }

</style>
