<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="oaview_toparea" :class="colortop">
      <div class="oaview_top_type" v-if="tasktype==0">单据审批</div>
      <div class="oaview_top_type" v-if="tasktype==1">公文审批</div>
      <div class="oaview_top_flag">{{oaflag_dt}}</div>
    </div>
    <div class="oaview_toparea_sec" :class="colortop_sec"></div>
    <div class="oaview_toparea_thr" :class="colortop_thr"></div>

    <div class="oaview">

      <div class="oaview_main">
        <div class="oaview_info" v-if="tasktype==1">
          <span>年假申请，2019年9月1日至2019年9月7日共7天，望批准。</span>

          <div style="color:#888;font-size:14px;margin:5px 0 0 20px;position: absolute;right: 20px;">
            黎小娟
          </div>
        </div>



        <!-- 客户订单信息 -->
        <div v-if="tasktype==0" style="padding:10px 0 0px 0 ">

          <!-- <div class="liubai_dt"></div> -->
          <div class="oaview_flex">
            <div class="oaview_title">单号</div>
            <div class="oaview_item">SC190812002</div>
          </div>

          <div class="oaview_flex">
            <div class="oaview_title">类型</div>
            <div class="oaview_item">销售订单</div>
          </div>

          <div class="oaview_flex">
            <div class="oaview_title">客户</div>
            <div class="oaview_item">红岸家私城</div>
          </div>

          <div class="oaview_flex">
            <div class="oaview_title">业务员</div>
            <div class="oaview_item">黎小娟</div>
          </div>


          <div class="oaview_flex">
            <div class="oaview_title">金额</div>
            <div class="oaview_item">200,000元</div>
          </div>


          <div class="oaview_flex">
            <div class="oaview_title">交期</div>
            <div class="oaview_item">2019年8月30日</div>
          </div>

          <div class="oaview_flex">
            <div class="oaview_title">摘要</div>
            <div class="oaview_item">共300件商品,其中包括：218B两人位沙发 100张，100,000元；6528茶几 50张，50,000元...</div>
          </div>

          <div style="display:flex">
            <div style="font-size:14px;color:#6495ed;margin: 10px auto 0 auto">查看单据详细信息</div>
          </div>

          <div style="font-size:14px;margin:20px 0 0 20px;color:#fc4f4f">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jinggao"></use>
            </svg>
            黎小娟于8月13日16:38发起催办，请抓紧处理。</div>

        </div>


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

        <div class="oaview_emp">
          <div class="oaview_emp_title">
            <span class="oaview_emp_list_icon">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhengque1"></use>
              </svg>
            </span>

            <span>
              发起审批
            </span>
          </div>

          <div class="oaview_emp_list">
            <div>
              黎小娟
            </div>

            <div class="oaview_emp_list_time">
              8/12 09:23
            </div>
            <div class="oaview_emp_list_from oaview_emp_list_from_pc">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-diannao"></use>
              </svg>
              PC
            </div>
          </div>

          <div class="oaview_emp_title">
            <span class="oaview_emp_list_icon">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhengque1"></use>
              </svg>
            </span>

            <span>
              主管审批
            </span>
          </div>

          <div class="oaview_emp_list">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-buzhoutiaowancheng"></use>
              </svg>
              李子雄
            </div>
            <div class="oaview_emp_list_time">
              8/12 10:12
            </div>
            <div class="oaview_emp_list_from oaview_emp_list_from_app">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tel"></use>
              </svg>
              移动端
            </div>
          </div>

          <div class="oaview_emp_list oaview_emp_list_gray">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-buzouweijinxing"></use>
              </svg>
              杨李玉
            </div>
          </div>

          <!-- 当前审批步骤：红字 oaview_emp_list_red -->
          <div class="oaview_emp_title" :class="ban_red">
            <span class="oaview_emp_list_icon">
              <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='否决'">
                <use xlink:href="#icon-weiwancheng"></use>
              </svg>

              <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='处理中'">
                <use xlink:href="#icon-dengdai1"></use>
              </svg>

              <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='通过'">
                <use xlink:href="#icon-zhengque1"></use>
              </svg>
            </span>

            <span>
              财务审批<span v-if="oaflag_dt=='处理中'"> (正在审批)</span>
            </span>




          </div>

          <div class="oaview_emp_list">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kongjianyixuan"></use>
              </svg>
              王小千
            </div>
            <div class="oaview_emp_list_time">
              8/12 10:32
            </div>
            <div class="oaview_emp_list_from oaview_emp_list_from_app">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tel"></use>
              </svg>
              移动端
            </div>
          </div>


          <div class="oaview_emp_list" :class="ban_red">
            <div>
              <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='否决'">
                <use xlink:href="#icon-cuowu"></use>
              </svg>
              <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='处理中'">
                <use xlink:href="#icon-kongjianweixuan"></use>
              </svg>
              <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='通过'">
                <use xlink:href="#icon-kongjianyixuan"></use>
              </svg>
              冯子茹
            </div>
            <div class="oaview_emp_list_time" v-if="oaflag_dt=='通过'">
              8/12 10:40
            </div>

            <!-- 当前审批步骤显示为红色，否决状态下，否决那一行的步骤也是红字加粗，否决时间也显示为红色（常规状态下审批时间用的是灰色） -->
            <div class="oaview_emp_list_time " style="color:#f00" v-if="oaflag_dt=='否决'">
              8/12 11:12
            </div>

            <div class="oaview_emp_list_from oaview_emp_list_from_app" v-if="oaflag_dt!='处理中'">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tel"></use>
              </svg>
              移动端
            </div>
          </div>

          <div style="padding:0 0 5px 48px;color:#ef250f;font-size:12px" v-if="oaflag_dt=='否决'">
            否决理由：该客户上批货款还未结清。
          </div>

          <div class="oaview_emp_list" :class="response_band">
            <div>
              <svg class="icon" aria-hidden="true" v-if="oaflag_dt!='通过'">
                <use xlink:href="#icon-kongjianweixuan"></use>
              </svg>
              <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='通过'">
                <use xlink:href="#icon-kongjianyixuan"></use>
              </svg>
              关敏霞
            </div>
            <div class="oaview_emp_list_time" v-if="oaflag_dt=='通过'">
              8/12 10:39
            </div>
            <div class="oaview_emp_list_from oaview_emp_list_from_pc" v-if="oaflag_dt=='通过'">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-diannao"></use>
              </svg>
              PC
            </div>
          </div>




          <!-- 如果是否决，则否决步骤之后的全部步骤，样式均处理为 删除线+浅灰色，表示之后的步骤已经没用了  class是oaview_emp_list_gray -->
          <div class="oaview_emp_title">
            <span class="oaview_emp_list_icon">
              <svg class="icon" aria-hidden="true" v-if="oaflag_dt!='通过'">
                <use xlink:href="#icon-jianzhanbuzhouweiwan"></use>
              </svg>

              <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='通过'">
                <use xlink:href="#icon-zhengque1"></use>
              </svg>
            </span>

            <span :class="response_band">
              经理审批
            </span>
          </div>

          <div class="oaview_emp_list" :class="response_band">
            <div>
              张建国(马浩文 代理)
            </div>
            <div class="oaview_emp_list_time" v-if="oaflag_dt=='通过'">
              8/12 11:32
            </div>
            <div class="oaview_emp_list_from oaview_emp_list_from_app" v-if="oaflag_dt=='通过'">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tel"></use>
              </svg>
              移动端
            </div>
          </div>

        </div>


      </div>

    </div>

    <div class="quote_edit_btn_wrap" v-if="oaflag_dt=='处理中'">
      <div class="quote_edit_btn" style="background-color: #ffb732">
        <span>同意</span>
      </div>
      <div class="quote_edit_btn">
        <span>否决</span>
      </div>
    </div>

    <!-- 完成任务、验收任务弹出界面 -->
    <div v-if="ifresponse>0">
      <div class="oaview_mask"></div>

      <div class="oaview_response">
        <div style="display:flex;align-items: center;">
          <div style="font-size:15px;padding:0 20px;color:#888">
            <span>审批</span>
          </div>
          <div style="position: absolute;right: 20px;color: #ccc;font-size: 12px;">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-guanbi"></use>
            </svg>
          </div>
        </div>


        <!-- 审批意见 -->
        <div style="width: 100%;text-align: center;">

          <textarea name="banreason" rows="5" placeholder="可填写审批意见" style="width: 90%;font-size: 15px;margin: 10px;"
            v-if="ifresponse==1">
            </textarea>

          <textarea name="banreason" rows="5" placeholder="请填写否决原因" style="width: 90%;font-size: 15px;margin: 10px;"
            v-if="ifresponse==2">
            </textarea>
        </div>


        <!-- 提交按钮 -->
        <div class="quote_edit_btn_wrap">
          <div class="quote_edit_btn" style="background-color: #ffb732" v-if="ifresponse==1">
            <span>同意</span>
          </div>

          <div class="quote_edit_btn" v-if="ifresponse==2">
            <span>否决</span>
          </div>
        </div>

      </div>
    </div>



  </div>
</template>
<script>
  export default {
    name: 'oaview',
    data() {
      return {
        tasktype: 0, //0-单据审批 1-公文审批
        oaflag_dt: "否决", //处理中,通过,否决
        ifresponse: 0, //弹窗 0-不弹  1-同意 2-否决
        iffg: 0 //0-不是返工 1-返工
      }
    },
    computed: {
      colortop: function () {
        return {
          oaview_toparea_green: this.oaflag_dt == "处理中",
          oaview_toparea_blue: this.oaflag_dt == "通过"
        };
      },
      colortop_sec: function () {
        return {
          oaview_toparea_green_sec: this.oaflag_dt == "处理中",
          oaview_toparea_blue_sec: this.oaflag_dt == "通过"
        };
      },
      colortop_thr: function () {
        return {
          oaview_toparea_green_thr: this.oaflag_dt == "处理中",
          oaview_toparea_blue_thr: this.oaflag_dt == "通过"
        };
      },
      response_band: function () {
        return {
          oaview_emp_list_gray: this.oaflag_dt == "否决"
        };
      },
      ban_red: function () {
        return {
          oaview_emp_list_red: this.oaflag_dt == "否决"
        };
      }
    }

  }

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

  .oaview_emp {
    padding: 0px 20px;
  }

  .oaview_emp_title {
    margin: 5px 0;
    font-weight: bold;
  }

  .oaview_emp_list {
    display: flex;
    line-height: 25px;
    margin: 0 0 0 30px;
  }

  .oaview_emp_list_red {
    color: #F00;
    /* font-weight: bold; */
  }

  .oaview_emp_list_gray {
    color: #aaa;
    text-decoration: line-through
  }

  .oaview_emp_list_icon {
    margin: 0 10px 0 0;
    font-size: 17px;
  }

  .oaview_emp_list_time {
    color: #888;
    font-weight: 400;
    margin: 0 0 0 10px;
  }


  .oaview_emp_list_from {
    margin: 0 0 0 8px;
    font-size: 12px;
  }

  .oaview_emp_list_from_pc {
    color: #0281ed;
  }

  .oaview_emp_list_from_app {
    color: #7ba62c;
  }

  .oaview_iffg {
    background-color: #fdd1cd;
    color: #ff6f61;
    font-size: 12px;
    margin: 0 4px 0 0;
    padding: 3px 8px;
    border-radius: 15px;
    text-align: center;
  }

  .response_height_1 {
    height: 330px;
  }

  .response_height_2 {
    height: 270px;
  }

  .oaview_mask {
    height: 100%;
    width: 100%;
    background-color: #1d1d1d;
    opacity: 0.8;
    position: fixed;
    top: 0px;
    z-index: 9998;
  }

  .oaview_response {
    z-index: 9999;
    background-color: #ffffff;
    position: fixed;
    bottom: 0px;
    height: 180px;
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 10px 0;
  }

  .topbar {
    min-height: 44px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 9997;
    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;
  }

  .oaview_info {
    font-size: 16px;
    padding: 5px 20px 25px 20px;
  }

  .oaview_toparea {
    position: absolute;
    top: 44px;
    width: 100%;
    display: flex;
    color: #fff;
    background-color: #fc4e2c;
    font-size: 16px;
    font-weight: bold;
    align-items: center;
    height: 35px;
  }

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

  .oaview_toparea_blue {
    background-color: #46a4da;
  }

  .oaview_toparea_sec {
    position: absolute;
    top: 79px;
    height: 5px;
    background-color: #fd8e78;
    width: 100%;
  }

  .oaview_toparea_green_sec {
    background-color: #bbe26e;
  }

  .oaview_toparea_blue_sec {
    background-color: #90cef1;
  }

  .oaview_toparea_thr {
    position: absolute;
    top: 84px;
    height: 5px;
    background-color: #ffdbd4;
    width: 100%;
  }

  .oaview_toparea_green_thr {
    background-color: #e3f8b8;
  }

  .oaview_toparea_blue_thr {
    background-color: #d1edfd;
  }

  .oaview_top_type {
    padding: 0 0 0 20px;
  }

  .oaview_top_flag {
    position: absolute;
    right: 20px;
  }

  .oaview_top_delay {
    position: absolute;
    right: 80px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    background-color: #fdd1cd;
    color: #ff6f61;
    width: 45px;
    border-radius: 15px;
    text-align: center;
  }

  .oaview_finish_delay {
    margin: 0 0 0 10px;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    background-color: #fdd1cd;
    color: #ff6f61;
    width: 40px;
    border-radius: 15px;
    text-align: center;
  }

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

  .oaview_main {
    padding: 0px 0px;
  }

  .oaview_flex {
    display: flex;
    line-height: 25px;
    align-items: flex-start;
    padding: 0px 20px;
  }


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

  .oaview_check_title {
    font-size: 14px;
    font-weight: bold;
    padding: 5px 0 0 20px;
  }

  .oaview_check_dscrp {
    color: #777;
    padding: 0 20px;
  }

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

  .oaview_pzbtn {
    /* position: absolute;
    right: 20px; */
    margin-left: 20px;
    color: #ccc;
    font-size: 16px;
  }

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

  .oaview_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%;
  }

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

  .oaview_fjlist {
    padding: 0px 0 0 20px;
    align-items: center;
    display: flex;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
  }

  .oaview_fjsize {
    font-size: 14px;
    color: #aaa;
    margin-left: 10px;
  }

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

  .oaview_addpic {
    margin: 0 0 20px 15px;
    background-color: #f6f6f6;
    color: #bbb;
    height: 100px;
    flex: 0 0 100px;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
  }

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

</style>
