<template>
  <div class="app-container" style="padding-top:0">
    <!-- <div class="filter-container">
    </div> -->

    <!-- <el-card class="box-card" shadow="never"> -->
    <div class="recordLayout">
      <div style="border-left:5px solid #1890ff;padding-left:5px">工单详情</div>

      <div class="convenienceInfo">
        <div class="convenienceTitle">
          <i class="icon_list" />
          <div style="flex:1">
            <div class="eventType">
              <span v-if="!isEventTypeChange">{{
                convenience && convenience.eventType.eventName
              }}</span>

              <el-cascader
                ref="cascader"
                v-else
                v-model="convenience.eventType.id"
                :options="typeOptions"
                :show-all-levels="false"
                :props="{ emitPath: false }"
                placeholder="编辑"
                @change="handleEventTypeChange"
              />
              <el-button
                v-if="
                  convenience &&
                    convenience.phase !== 'FINISH' &&
                    convenience.statusList[0].status !== 'WAIT_APPLY' &&
                    convenience.statusList[0].status !== 'SUBMIT_APPLY' &&
                    convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
                    convenience.statusList[0].status !== 'FORWARDED'
                "
                icon="el-icon-edit"
                type="text"
                @click="cascader"
                >{{ isEventTypeChange ? "取消" : "编辑" }}</el-button
              >
              <!-- <i class="icon_timer"></i
              ><span class="text_timer">
                {{
                  `${
                    this.totalTime.hour > 9
                      ? this.totalTime.hour
                      : this.totalTime.hour
                  }:${
                    this.totalTime.minute > 9
                      ? this.totalTime.minute
                      : this.totalTime.minute
                  }:${
                    this.totalTime.second > 9
                      ? this.totalTime.second
                      : this.totalTime.second
                  }`
                }}
              </span> -->
              <!-- {{
                  `${
                    this.totalTime.hour > 9
                      ? this.totalTime.hour
                      : "0" + this.totalTime.hour
                  }:${
                    this.totalTime.minute > 9
                      ? this.totalTime.minute
                      : "0" + this.totalTime.minute
                  }:${
                    this.totalTime.second > 9
                      ? this.totalTime.second
                      : "0" + this.totalTime.second
                  }`
                }} -->
            </div>
            <div style="color:#787878;font-size:14px;">
              <!-- <el-tag type="danger" style="color:#ff5f40;background:#ffe0da">{{
                convenience && convenience.phase | phaseFilter
              }}</el-tag> -->
              {{ convenience && convenience.sponsor | sponsorFilter }}创建于{{
                convenience &&
                  convenience.createDate | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
              }}
              <el-tag type="danger" style="color:#ff5f40;background:#ffe0da">{{
                convenience && convenience.phase | phaseFilter
              }}</el-tag>
            </div>
          </div>
          <!-- style="display: flex;flex-direction: row;justify-content: center;width: 25%;" -->
          <div>
            <!-- <el-button
              v-if="
                convenience &&
                  convenience.phase !== 'FINISH' &&
                  convenience.statusList[0].status !== 'WAIT_APPLY' &&
                  convenience.statusList[0].status !== 'SUBMIT_APPLY' &&
                  convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
                  convenience.statusList[0].status !== 'FORWARDED'
              "
              type="primary"
              @click="handleChangeEventType"
              >编辑</el-button
            > -->
            <!-- v-if="convenience && convenience.phase === 'PENDING_ORDER'" -->
            <el-button
              v-if="convenience && convenience.phase === 'PENDING_ORDER'"
              style="margin-right:16px"
              type="primary"
              @click="handleUpdate(5)"
              ><i class="icon_jd" />接单</el-button
            >
            <el-button
              v-if="
                convenience &&
                  convenience.statusList[0].status !== 'SUBMIT_APPLY' &&
                  convenience.phase === 'PREREQUISITES' &&
                  convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
                  convenience.statusList[0].status !== 'FORWARDED'
              "
              style="margin-right:16px"
              type="primary"
              @click="handleUpdate(6)"
              ><i class="icon_yj" />要件齐备，开始办理</el-button
            >
            <el-button
              v-if="
                convenience &&
                  convenience.phase !== 'FINISH' &&
                  convenience.phase === 'PROCESSING' &&
                  convenience.statusList[0].status !== 'SUBMIT_APPLY' &&
                  convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
                  convenience.statusList[0].status !== 'WAIT_APPLY' &&
                  convenience.statusList[0].status !== 'FORWARDED'
              "
              style="margin-right:16px;"
              type="primary"
              @click="handleUpdate(7)"
            >
              <i class="icon_bj" />
              办结
            </el-button>

            <el-button
              v-if="
                convenience &&
                  convenience.phase !== 'FINISH' &&
                  convenience.statusList[0].status !== 'WAIT_APPLY' &&
                  convenience.statusList[0].status !== 'SUBMIT_APPLY' &&
                  convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
                  convenience.statusList[0].status !== 'FORWARDED'
              "
              style="margin-right:16px;"
              type="primary"
              @click="handleApprovalReminder(11)"
              ><i class="icon_sh" />发起审批</el-button
            >

            <el-button
              v-if="
                convenience &&
                  convenience.phase !== 'FINISH' &&
                  convenience.statusList[0].status !== 'SUBMIT_APPLY' &&
                  convenience.statusList[0].status !== 'FORWARDED_APPLY' &&
                  convenience.statusList[0].status !== 'FORWARDED' &&
                  convenience.statusList[0].status !== 'WAIT_APPLY'
              "
              type="primary"
              @click="handleUpdate(14)"
              ><i class="icon_zj" />转交任务</el-button
            >
          </div>
        </div>
        <div class="hr" />
        <el-row :gutter="20" style="color:#787878;margin-bottom:30px">
          <el-col :span="6">
            <div>流水号：{{ convenience && convenience.serialNumber }}</div>
            <!-- <div>
              创建人：{{ convenience && convenience.sponsor | sponsorFilter }}
            </div> -->
          </el-col>
          <!-- <el-col :span="6">
            <div>
              创建时间：{{
                convenience &&
                  convenience.createDate | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
              }}
            </div>
            </el-col
          > -->
          <el-col :span="6"
            ><div>
              申办人：{{ convenience && convenience.residentInformation.name }}
            </div></el-col
          >
          <el-col :span="6"
            ><div>
              受理人：{{
                convenience && convenience.firstResponsiblePerson.name
              }}
            </div></el-col
          >
          <el-col :span="6" style="text-align:right">
            总办理时长：<i class="icon_timer" /><span class="text_timer">
              {{
                `${
                  this.totalTime.hour > 9
                    ? this.totalTime.hour
                    : this.totalTime.hour
                }:${
                  this.totalTime.minute > 9
                    ? this.totalTime.minute
                    : this.totalTime.minute
                }:${
                  this.totalTime.second > 9
                    ? this.totalTime.second
                    : this.totalTime.second
                }`
              }}
            </span>
          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          style="color:#787878;display: flex;align-items: center;"
        >
          <!-- <el-col :span="6">
            任务阶段：{{ convenience && convenience.phase | phaseFilter }}
          </el-col> -->
          <!-- <el-col :span="6">
            总办理时长：<i class="icon_timer" /><span class="text_timer">
              {{
                `${
                  this.totalTime.hour > 9
                    ? this.totalTime.hour
                    : this.totalTime.hour
                }:${
                  this.totalTime.minute > 9
                    ? this.totalTime.minute
                    : this.totalTime.minute
                }:${
                  this.totalTime.second > 9
                    ? this.totalTime.second
                    : this.totalTime.second
                }`
              }}
            </span>
          </el-col> -->

          <el-col
            :span="6"
            style="display: flex;align-items: center;flex-direction:column"
          >
            <div
              style="width:100%;display: flex;align-items: center;"
              class="status_btn"
            >
              任务状态：<span style="color:#ff5a00">{{
                convenience && convenience.statusList[0].status | statusFilter
              }}</span>
              <el-popover
                placement="top"
                width="160"
                v-model="cxPop"
                v-if="
                  convenience &&
                    convenience.phase !== 'FINISH' &&
                    convenience.statusList[0].status === 'SUBMIT_APPLY'
                "
              >
                <p>确定撤销审批吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="cxPop = false"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleUpdate(12)"
                    >确定</el-button
                  >
                </div>
                <el-button
                  slot="reference"
                  type="primary"
                  style="margin-left:10px"
                  >撤回</el-button
                >
              </el-popover>
              <!-- <el-button
                v-if="
                  convenience &&
                    convenience.phase !== 'FINISH' &&
                    convenience.statusList[0].status === 'SUBMIT_APPLY'
                "
                type="primary"
                style="margin-left:10px"
                @click="handleUpdate(12)"
                >撤销</el-button
              > -->
              <el-button
                v-if="
                  convenience &&
                    convenience.phase !== 'FINISH' &&
                    convenience.statusList[0].status === 'FORWARDED_APPLY' &&
                    convenience &&
                    convenience.applyType === 'FORWARDED'
                "
                style="margin-left:10px"
                type="primary"
                @click="handleUpdate(9)"
                >撤销转交审批</el-button
              >

              <div
                v-if="
                  convenience &&
                    convenience.statusList[0].status === 'WAIT_APPLY'
                "
                style="margin-left:10px"
              >
                <el-button type="success" @click="handleApprove(true)"
                  >通过</el-button
                ><el-button type="danger" @click="handleApprove(false)"
                  >驳回</el-button
                >
              </div>
            </div>
            <!-- <ul v-if="convenience" class="approveUl">
              <li v-for="(item, index) in convenience.applyVoList" :key="index">
                <el-tag type="info" style="display: flex;align-items: center;"
                  ><i
                    :class="{
                      icon_approve: true,
                      approve_pass: item.approve,
                      approve_null: item.approve === null,
                      approve_no: !item.approve
                    }"
                  />{{
                    `${item.residentInformation.name}${
                      item.approve
                        ? "已同意"
                        : item.approve === null
                        ? "审批中"
                        : "已驳回"
                    }`
                  }}</el-tag
                >
              </li>
            </ul> -->
            <!-- <div>
              <span
                >(审批人:{{
                  convenience &&
                    convenience.applyVoList[0].residentInformation.name
                }})</span
              >

            </div> -->
            <!-- <div
              v-if="
                convenience && convenience.statusList[0].status === 'WAIT_APPLY'
              "
              style="margin-left:10px"
            >
              <el-button type="success" @click="handleApprove(true)"
                >通过</el-button
              ><el-button type="danger" @click="handleApprove(false)"
                >驳回</el-button
              >
            </div> -->

            <!-- <div
              v-if="
                convenience &&
                  convenience.phase !== 'FINISH' &&
                  convenience.statusList[0].status === 'FORWARDED_APPLY' &&
                  convenience &&
                  convenience.applyType === 'FORWARDED'
              "
            >
              <span
                >(审批人:{{
                  convenience &&
                    convenience.applyVoList[0].residentInformation.name
                }})</span
              >
              <el-button
                style="margin-left:10px"
                type="primary"
                @click="handleUpdate(9)"
                >撤销转交审批</el-button
              >
            </div>
            <div
              v-if="
                convenience &&
                  convenience.phase !== 'FINISH' &&
                  convenience.statusList[0].status === 'SUBMIT_APPLY'
              "
              style="margin-left:10px"
            > -->
            <!-- <el-popover
                placement="bottom-start"
                title=""
                width="410"
                trigger="click"
              >
                <ul class="approveUl">
                  <li
                    v-for="(item, index) in convenience.applyVoList"
                    :key="index"
                  >
                    <i
                      :class="{
                        icon_approve: true,
                        approve_pass: item.approve,
                        approve_null: item.approve === null,
                        approve_no: !item.approve
                      }"
                    />{{ item.residentInformation.name }}
                  </li>
                </ul>
                <el-button
                  type="primary"
                  style="position:relative;left:155px;"
                  @click="handleUpdate(12)"
                  >撤销</el-button
                >
                <el-link slot="reference" type="primary">查看审批详情</el-link>
              </el-popover> -->

            <!-- </div> -->
          </el-col>
          <el-col
            :span="6"
            style="display:flex"
            class="appeal"
            v-if="convenience && convenience.evaluation"
          >
            <div>
              办事评价：
              {{ convenience && convenience.evaluation | evaluationFilter }}
            </div>
            <el-button
              type="primary"
              style="position: relative;top: -10px;left: 20px;"
              @click="handleUpdate(16)"
              >申诉</el-button
            ></el-col
          >
        </el-row>
        <el-row>
          <el-col
            :span="24"
            style="display: flex;align-items: center;flex-direction:column"
          >
            <ul v-if="convenience" class="approveUl">
              <li v-for="(item, index) in convenience.applyVoList" :key="index">
                <el-tag type="info" style="display: flex;align-items: center;"
                  ><i
                    :class="{
                      icon_approve: true,
                      approve_pass: item.approve,
                      approve_null: item.approve === null,
                      approve_no: !item.approve
                    }"
                  />{{
                    `${item.residentInformation.name}${
                      item.approve
                        ? "已同意"
                        : item.approve === null
                        ? "审批中"
                        : "已驳回"
                    }`
                  }}</el-tag
                >
              </li>
            </ul>
          </el-col>
        </el-row>
        <!-- <div style="margin-top:32px;color:#787878">
          <el-row :gutter="20" style="color:#787878">
            <el-col :span="6"
              ><div style="display: flex;align-items: center;">
                任务状态：{{
                  convenience && convenience.statusList[0].status | statusFilter
                }}
                <div
                  style="margin-left:10px"
                  v-if="
                    convenience &&
                      convenience.statusList[0].status === 'WAIT_APPLY'
                  "
                >
                  <el-button type="primary" @click="handleApprove(true)"
                    >通过</el-button
                  ><el-button type="danger" @click="handleApprove(false)"
                    >驳回</el-button
                  >
                </div>
              </div></el-col
            >
            <el-col
              :span="6"
              style="display:flex"
              v-if="convenience && convenience.evaluation"
              ><div>
                办事评价：
                {{ convenience && convenience.evaluation | evaluationFilter }}
              </div>
              <el-button
                type="primary"
                style="position: relative;top: -10px;left: 20px;"
                @click="handleUpdate(16)"
                >我要申诉</el-button
              ></el-col
            >
          </el-row>
        </div> -->

        <el-row class="text-center acceptanceOptionsLayout">
          <el-col :span="8">
            <i class="a_times icon_acceptance" />
            <p>受理</p>
            <div class="timerDiv">
              <div class="text_left">承诺时长 24小时内</div>
              <div>
                实际时长
                <span class="duration">{{
                  `${
                    this.acceptanceTime.hour > 9
                      ? this.acceptanceTime.hour
                      : this.acceptanceTime.hour
                  }:${
                    this.acceptanceTime.minute > 9
                      ? this.acceptanceTime.minute
                      : this.acceptanceTime.minute
                  }:${
                    this.acceptanceTime.second > 9
                      ? this.acceptanceTime.second
                      : this.acceptanceTime.second
                  }`
                }}</span
                ><span
                  v-if="acceptanceMsec > 57600 && acceptanceMsec < 86400"
                  class="timeout"
                  ><i class="icon_timeout" />即将超时</span
                >
                <span v-if="acceptanceMsec > 86400" class="timeout"
                  ><i class="icon_timeout" />已超时</span
                >
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="line_left" />
            <div class="line_right" />
            <i class="a_times icon_prepare" />
            <p>要件准备</p>
            <div class="timerDiv">
              <div>承诺时长 尽快</div>
              <div>
                实际时长
                <span class="duration">{{
                  `${
                    this.prerequisitesTime.hour > 9
                      ? this.prerequisitesTime.hour
                      : this.prerequisitesTime.hour
                  }:${
                    this.prerequisitesTime.minute > 9
                      ? this.prerequisitesTime.minute
                      : this.prerequisitesTime.minute
                  }:${
                    this.prerequisitesTime.second > 9
                      ? this.prerequisitesTime.second
                      : this.prerequisitesTime.second
                  }`
                }}</span>
                <!-- <span
                  v-if="acceptanceMsec > 57600 && acceptanceMsec < 86400"
                  class="timeout"
                  ><i class="icon_timeout" />即将超时</span
                >
                <span v-if="acceptanceMsec > 86400" class="timeout"
                  ><i class="icon_timeout" />已超时</span
                > -->
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <i class="a_times icon_finish" />
            <p>办结</p>
            <div class="timerDiv">
              <div class="text_left">
                法定时长
                {{ convenience && convenience.eventType.legalTimeLimit }}小时内
              </div>
              <div class="text_left">
                承诺时长
                {{
                  convenience && convenience.eventType.commitmentTimeLimit
                }}小时内
              </div>
              <div class="text_left">
                实际时长
                <span class="duration">
                  {{
                    `${
                      this.finishTime.hour > 9
                        ? this.finishTime.hour
                        : this.finishTime.hour
                    }:${
                      this.finishTime.minute > 9
                        ? this.finishTime.minute
                        : this.finishTime.minute
                    }:${
                      this.finishTime.second > 9
                        ? this.finishTime.second
                        : this.finishTime.second
                    }`
                  }}
                </span>
                <!-- {{
                  finishMsec +
                    ":" +
                    convenience&&convenience.eventType.commitmentTimeLimit * 3600
                }} -->
                <span
                  v-if="
                    finishMsec >=
                      (convenience &&
                        convenience.eventType.commitmentTimeLimit * 3600)
                  "
                  class="timeout"
                  ><i class="icon_timeout" />已超时</span
                >
                <span
                  v-else-if="
                    finishMsec >=
                      (convenience &&
                        convenience.eventType.timeoutReminder * 3600)
                  "
                  class="timeout"
                  ><i class="icon_timeout" />即将超时</span
                >
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- <div class="acceptanceOptionsLayout">
          <div>
            <i class="a_times icon_acceptance"></i>
            <p>受理</p>
            <p class="text_left">承诺时长 24小时内</p>
            <p>
              实际时长
              <span class="duration">{{
                `${
                  this.acceptanceTime.hour > 9
                    ? this.acceptanceTime.hour
                    : this.acceptanceTime.hour
                }:${
                  this.acceptanceTime.minute > 9
                    ? this.acceptanceTime.minute
                    : this.acceptanceTime.minute
                }:${
                  this.acceptanceTime.second > 9
                    ? this.acceptanceTime.second
                    : this.acceptanceTime.second
                }`
              }}</span
              ><span
                class="timeout"
                v-if="acceptanceMsec > 57600 && acceptanceMsec < 86400"
                ><i class="icon_timeout"></i>即将超时</span
              >
              <span class="timeout" v-if="acceptanceMsec > 86400"
                ><i class="icon_timeout"></i>已超时</span
              >
            </p>
          </div>
          <div style="padding: 0px 23%;">
            <i class="a_times icon_prepare"></i>
            <p>要件准备</p>
            <p class="text_left">承诺时长 尽快</p>
            <p class="text_left">
              实际时长
              <span>{{
                `${
                  this.prerequisitesTime.hour > 9
                    ? this.prerequisitesTime.hour
                    : this.prerequisitesTime.hour
                }:${
                  this.prerequisitesTime.minute > 9
                    ? this.prerequisitesTime.minute
                    : this.prerequisitesTime.minute
                }:${
                  this.prerequisitesTime.second > 9
                    ? this.prerequisitesTime.second
                    : this.prerequisitesTime.second
                }`
              }}</span>
            </p>
          </div>
          <div>
            <i class="a_times icon_finish"></i>
            <p>办结</p>
            <p class="text_left">
              承诺时长
              {{
                convenience && convenience.eventType.commitmentTimeLimit
              }}小时内
            </p>
            <p class="text_left">
              法定时长
              {{ convenience && convenience.eventType.legalTimeLimit }}小时内
            </p>
            <p class="text_left">
              实际时长
              <span class="duration">
                {{
                  `${
                    this.finishTime.hour > 9
                      ? this.finishTime.hour
                      : this.finishTime.hour
                  }:${
                    this.finishTime.minute > 9
                      ? this.finishTime.minute
                      : this.finishTime.minute
                  }:${
                    this.finishTime.second > 9
                      ? this.finishTime.second
                      : this.finishTime.second
                  }`
                }}
              </span>
              <span
                class="timeout"
                v-if="
                  finishMsec >= convenience &&
                    convenience.eventType.commitmentTimeLimit * 3600
                "
                ><i class="icon_timeout"></i>已超时</span
              >
              <span
                class="timeout"
                v-else-if="
                  finishMsec >= convenience &&
                    convenience.eventType.timeoutReminder * 3600
                "
                ><i class="icon_timeout"></i>即将超时</span
              >
            </p>
          </div>
        </div> -->
      </div>
    </div>
    <!-- </el-card> -->

    <div class="recordLayout">
      <div style="border-left:5px solid #1890ff;padding-left:5px;float: left;">
        任务处理流程
      </div>
      <div style="float: right">
        <el-button
          v-if="convenience && convenience.phase !== 'FINISH'"
          type="primary"
          style="margin-right:73px;"
          @click="handleContact"
          >发起沟通</el-button
        >
      </div>

      <div class="timeLine">
        <el-timeline v-if="convenience">
          <el-timeline-item
            v-for="(item, index) in convenience.records"
            :key="index"
            :timestamp="item.createDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')"
            placement="top"
            ><i
              v-if="convenience.residentInformation.id === item.from.id"
              class="timeLine_self"
            ></i
            ><i v-else class="timeLine_staff"></i>
            <i
              class="timeline_avatar"
              :style="{
                background: 'url(' + item.from.avatar + ')'
              }"
            />

            <el-card
              shadow="never"
              :class="{
                contact_staff:
                  convenience.residentInformation.id !== item.from.id,
                contact_self:
                  convenience.residentInformation.id === item.from.id
              }"
            >
              <h3>{{ item.content }}</h3>

              <p v-if="item.type === 11">审批人：{{ getNames(item.to) }}</p>
              <p v-if="item.type === 3">
                被沟通人：{{ getNames(item.to) }}
                <!-- <span v-for="item in item.to" :key="item.id">{{
                  getNames(item.to)
                }}</span> -->
              </p>
              <p
                v-for="(attachment, index) in item.attachmentList"
                :key="index"
              >
                <!-- url.substr(url.lastIndexOf(".") + 1) -->
                <span
                  v-if="
                    isAssetTypeAnImage(
                      attachment.substr(attachment.lastIndexOf('.') + 1)
                    )
                  "
                  style="cursor: pointer"
                  @click="handleSetPreviewImg(attachment)"
                >
                  <i
                    v-if="convenience.residentInformation.id === item.from.id"
                    class="icon_fujian_self"
                  /><i v-else class="icon_fujian" />
                  {{
                    attachment.substring(attachment.lastIndexOf("/") + 1)
                  }}</span
                >
                <el-link
                  v-else
                  :href="attachment"
                  :underline="false"
                  target="_blank"
                >
                  <i class="icon_fujian" />
                  {{ attachment.substring(attachment.lastIndexOf("/") + 1) }}
                </el-link>
              </p>
              <p v-if="item.type === 13 || item.type === 10">
                审批结果：{{ item.approve ? "通过" : "驳回" }}
              </p>
              <p v-if="item.frequency">
                已转交次数：{{ item.frequency }}
                <span
                  v-if="item.type === 14 || item.type === 8"
                  style="margin-left:164px"
                  >被转交人：{{ item.to[0].name }}</span
                >
              </p>
              <!-- <p v-if="item.type === 14 || item.type === 8">
                被转交人：{{ item.to[0].name }}
              </p> -->
              <p v-if="item.type === 8">
                转交超限审批人：{{ item.to[0].name }}
              </p>
              <p v-if="item.type === 1">
                办事项目：{{ convenience && convenience.eventType.eventName }}
              </p>
              <p v-if="item.remark">
                {{
                  item.type === 11
                    ? "审批备注："
                    : item.type === 14
                    ? "转交备注："
                    : item.type === 1
                    ? "文字说明："
                    : "备注："
                }}{{ item.remark }}
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <el-dialog :visible.sync="dialogPreviewImg" width="500px">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>

    <el-dialog
      class="dialog"
      center
      width="434px"
      append-to-body
      :visible.sync="contactDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div slot="title" class="dialog-title">
        <span class="title-text">发起沟通</span>
      </div>
      <div class="preview-container">
        <el-form
          ref="contractForm"
          style="width:100%"
          :rules="rules"
          :model="payload"
        >
          <el-form-item label="选择被沟通人" prop="ids">
            <el-select
              v-model="payload.ids"
              multiple
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in communicationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="请输入沟通内容" prop="remark">
            <el-input
              v-model="payload.remark"
              type="textarea"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item prop="attachmentList">
            <AliOss v-model="payload.attachmentList" multiple />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="default" @click="contactDialog = false"
          >取消</el-button
        >
        <el-button type="primary" @click="createContact">提交</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="confirmDialog" width="434px" center>
      <div style="text-align: center;line-height: 25px;">
        转交次数已经超限，继续转交会提交转交超限审批，
      </div>
      <div style="text-align: center;line-height: 25px;">是否要继续转交？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmDialog = false">取消</el-button>
        <el-button type="primary" @click="handleContinue">继续转交</el-button>
      </span>
    </el-dialog>

    <el-dialog
      class="dialog"
      :title="updateType | typeFilter"
      append-to-body
      center
      width="434px"
      :visible.sync="applyDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="preview-container">
        <el-form ref="updateForm" style="width:100%" :rules="rules">
          <el-form-item
            v-if="updateType === 8 || updateType === 11"
            label="选择审批人"
          >
            <el-select
              v-model="spr"
              placeholder="请选择"
              style="width:100%"
              :multiple="updateType !== 8"
              @change="handleChange"
            >
              <el-option
                v-for="item in staffOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="updateType === 8 || updateType === 14"
            label="选择被转交人"
          >
            <el-select v-model="bzjr" placeholder="请选择" style="width:100%">
              <el-option
                v-for="item in staffOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- <el-form-item v-if="updateType === 13">
            <el-radio-group v-model="payload.approve">
              <el-radio :label="true">通过</el-radio>
              <el-radio :label="false">拒绝</el-radio>
            </el-radio-group>
          </el-form-item> -->

          <el-form-item
            :label="
              `${
                convenience && convenience.statusList[0].status === 'WAIT_APPLY'
                  ? '请输入不通过理由'
                  : updateType === 16
                  ? '申诉理由'
                  : '备注'
              }`
            "
          >
            <el-input
              v-model="payload.remark"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="default" @click="applyDialog = false">取消</el-button>
        <el-button type="primary" @click="apply">提交</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogApprovalReminder"
      width="30%"
      center
    >
      <div class="text-center">
        {{ convenience && convenience.eventType.approvalReminder }}
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="handleConfirmApprovalReminder"
          >发起审批</el-button
        >
      </span>
    </el-dialog>

    <!-- <el-dialog
      title="编辑办事项目"
      :visible.sync="dialogEventType"
      width="30%"
      center
    >
      <div>
        <el-cascader
          v-model="eventTypeId"
          :options="typeOptions"
          :show-all-levels="false"
          :props="{ emitPath: false }"
          placeholder="选择办事项目"
          style="width:100%"
          clearable
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="eventTypeUpdate">变更</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  add,
  info,
  communicationList,
  update,
  typeList
} from "@/api/convenience";
import { parseTime } from "@/utils";
import { staffList } from "@/api/staff";
import AliOss from "@/components/AliOSS/index.vue";

export default {
  filters: {
    sponsorFilter(status) {
      const statusMap = {
        SELF: "群众",
        STAFF: "工作人员"
      };
      return statusMap[status];
    },
    phaseFilter(status) {
      const statusMap = {
        PENDING_ORDER: "待接单",
        PREREQUISITES: "要件准备中",
        PROCESSING: "办理中",
        FINISH: "办结"
      };
      return statusMap[status];
    },
    statusFilter(status) {
      const statusMap = {
        MINE: "我处理",
        FORWARDED: "已转交",
        FORWARDED_APPLY: "转交超限审批中",
        SUBMIT_APPLY: "已提交审批",
        WAIT_APPLY: "待审核"
      };
      return statusMap[status];
    },
    typeFilter(status) {
      const statusMap = {
        1: "建立工单",
        2: "撤销工单",
        3: "沟通",
        4: "调整工单类别",
        5: "接单",
        6: "要件齐备",
        7: "办结",
        8: "转交超限审批提交",
        9: "转交超限审批撤销",
        10: "转交超限审批",
        11: "发起审批",
        12: "撤销审批",
        13: "审批操作",
        14: "转交",
        16: "提示"
      };
      return statusMap[status];
    },
    evaluationFilter(status) {
      const statusMap = {
        1: "不满意",
        2: "满意",
        3: "非常满意"
      };
      return statusMap[status];
    }
    // 1 不满意, 2 满意, 3 非常满意
  },
  components: {
    AliOss
  },
  data() {
    return {
      id: this.$route.query.id,
      convenience: undefined,
      contactDialog: false,
      remark: undefined,
      fileList: [],
      payload: {
        id: this.id,
        version: undefined,
        ids: [],
        remark: undefined,
        attachmentList: undefined,
        approve: undefined,
        evaluation: undefined
      },
      rules: {
        ids: [{ required: true, message: "请选择操作对象", trigger: "change" }]
        // category: [{ required: true, message: '请选择栏目板块', trigger: 'change' }]
      },
      updateType: undefined,
      communicationOptions: [],
      staffOptions: [],
      confirmDialog: false,
      applyDialog: false,
      spr: [],
      bzjr: undefined,
      prerequisitesInterval: undefined,
      preMsec: 0,
      prerequisitesTime: {
        hour: "--",
        minute: "--",
        second: "--"
      },
      finishTimeInterval: undefined,
      finishMsec: 0,
      finishTime: {
        hour: "--",
        minute: "--",
        second: "--"
      },
      acceptanceInterval: undefined,
      acceptanceMsec: 0,
      acceptanceTime: {
        hour: "--",
        minute: "--",
        second: "--"
      },
      totalTimeInterval: undefined,
      totalMsec: 0,
      totalTime: {
        hour: "--",
        minute: "--",
        second: "--"
      },
      dialogPreviewImg: false,
      dialogImageUrl: undefined,
      dialogApprovalReminder: false,
      dialogEventType: false,
      typeOptions: [],
      eventTypeId: undefined,
      applyDetail: false,
      isEventTypeChange: false,
      cxPop: false
    };
  },
  created() {
    this.getInfo();
    this.getStaffList();
    this.getCommunicationList();
    this.getTypeList();
  },
  methods: {
    getInfo() {
      info({ id: this.id }).then(res => {
        this.convenience = res.d;
        const tempData = Object.assign({}, this.convenience);
        const now = Date.parse(new Date()).toString() / 1000;
        // console.log(now);
        clearInterval(this.acceptanceInterval);
        clearInterval(this.prerequisitesInterval);
        clearInterval(this.finishTimeInterval);
        clearInterval(this.totalTimeInterval);
        switch (tempData.phase) {
          // 待接单
          case "PENDING_ORDER":
            if (tempData.acceptanceTime === null) {
              this.acceptanceMsec = now - this.convenience.createDate;
              this.countdown(tempData.phase);
            }
            break;
          // 要件准备
          case "PREREQUISITES":
            if (tempData.prerequisitesTime === null) {
              this.preMsec =
                now - tempData.createDate - tempData.acceptanceTime;
              this.acceptanceMsec = tempData.acceptanceTime;
              this.timeFormat("acceptanceTime", this.acceptanceMsec);
              this.countdown(tempData.phase);
            }
            break;
          // 办理中
          case "PROCESSING":
            if (tempData.finishTime === null) {
              this.finishMsec =
                now -
                tempData.createDate -
                tempData.acceptanceTime -
                tempData.prerequisitesTime;
              this.acceptanceMsec = tempData.acceptanceTime;
              this.preMsec = tempData.prerequisitesTime;
              this.timeFormat("acceptanceTime", this.acceptanceMsec);
              this.timeFormat("prerequisitesTime", this.preMsec);
              this.countdown(tempData.phase);
            }
            break;
          // 办结
          case "FINISH":
            // console.log(123);
            if (tempData.finishTime !== null) {
              this.finishMsec = tempData.finishTime;
              this.acceptanceMsec = tempData.acceptanceTime;
              this.preMsec = tempData.prerequisitesTime;
              this.timeFormat("acceptanceTime", this.acceptanceMsec);
              this.timeFormat("prerequisitesTime", this.preMsec);
              this.timeFormat("finishTime", this.finishMsec);

              this.countdown(tempData.phase);
            }
            break;
        }
        // const now = Date.parse(new Date()).toString() / 1000;
        // switch (this.convenience.phase) {
        //   case "PENDING_ORDER":
        //     if (this.convenience.acceptanceTime === null) {
        //       this.acceptanceMsec = now - this.convenience.createDate;
        //     } else {
        //       this.acceptanceMsec = this.convenience.acceptanceTime;
        //     }
        //     this.countdown("PENDING_ORDER");
        //     break;
        //   case "PREREQUISITES":
        //     if (this.convenience.prerequisitesTime === null) {
        //       this.preMsec = now - this.convenience.createDate;
        //     } else {
        //       this.preMsec = this.convenience.prerequisitesTime;
        //     }
        //     this.countdown("PREREQUISITES");
        //     break;
        //   case "PROCESSING":
        //     if (this.convenience.finishTime === null) {
        //       this.finishMsec =
        //         now - this.preMsec - this.convenience.createDate;
        //     } else {
        //       this.finishMsec = this.convenience.finishTime;
        //     }
        //     this.countdown("PROCESSING");
        //     break;
        //   default:
        //     this.acceptanceMsec = this.convenience.acceptanceTime;
        //     this.preMsec = this.convenience.prerequisitesTime;
        //     this.finishMsec = this.convenience.finishTime;
        //     this.countdown(this.convenience.phase);
        //     break;
        // }
      });
    },
    getTypeList() {
      typeList().then(res => {
        this.typeOptions = [];
        res.d.map(i => {
          const children = [];

          i.eventTypesList.map(c => {
            const level2 = {
              label: c.eventName,
              value: c.id
            };
            children.push(level2);
          });
          const level1 = {
            label: i.eventName,
            children
          };

          this.typeOptions.push(level1);
        });
      });
    },
    countdown(phase) {
      if (phase === "PENDING_ORDER") {
        this.acceptanceInterval = setInterval(() => {
          this.timeFormat("acceptanceTime", this.acceptanceMsec);
          this.acceptanceMsec++;
        }, 1000);
        // 当前阶段的时间加上
        this.totalMsec = this.acceptanceMsec;
        this.totalTimeInterval = setInterval(() => {
          this.timeFormat("totalTime", this.totalMsec);
          this.totalMsec++;
        }, 1000);
      } else if (phase === "PREREQUISITES") {
        this.prerequisitesInterval = setInterval(() => {
          this.timeFormat("prerequisitesTime", this.preMsec);
          this.preMsec++;
        }, 1000);
        this.totalMsec = this.convenience.acceptanceTime + this.preMsec;
        this.totalTimeInterval = setInterval(() => {
          this.timeFormat("totalTime", this.totalMsec);
          this.totalMsec++;
        }, 1000);
      } else if (phase === "PROCESSING") {
        this.finishTimeInterval = setInterval(() => {
          // console.log(233);
          this.timeFormat("finishTime", this.finishMsec);
          this.finishMsec++;
        }, 1000);
        this.totalMsec =
          this.convenience.acceptanceTime +
          this.convenience.prerequisitesTime +
          this.finishMsec;
        console.log(this.totalMsec);
        this.totalTimeInterval = setInterval(() => {
          this.timeFormat("totalTime", this.totalMsec);
          this.totalMsec++;
        }, 1000);
      } else if (phase === "FINISH") {
        // console.log(233);
        this.finishMsec;
        this.totalMsec =
          this.convenience.acceptanceTime +
          this.convenience.prerequisitesTime +
          this.convenience.finishTime;
        this.timeFormat("totalTime", this.totalMsec);
        // this.totalTimeInterval = setInterval(() => {
        //   this.totalMsec++;
        // }, 1000);
      } else {
        // 除FINISH外total都要计时
        // this.totalTimeInterval = setInterval(() => {
        //   this.timeFormat(this.totalTime, this.totalMsec);
        //   this.totalMsec++;
        // }, 1000);
      }

      // if (phase === "PENDING_ORDER") {
      //   // 受理
      //   if (this.convenience.acceptanceTime === null) {
      //     this.acceptanceInterval = setInterval(() => {
      //       this.acceptanceTime.hour = Math.floor(this.acceptanceMsec / 3600);
      //       this.acceptanceTime.minute = Math.floor(
      //         ((this.acceptanceMsec % 86400) % 3600) / 60
      //       );
      //       this.acceptanceTime.second = Math.floor(
      //         ((this.acceptanceMsec % 86400) % 3600) % 60
      //       );
      //       this.totalTime = this.acceptanceTime;
      //       this.acceptanceMsec++;
      //     }, 1000);
      //   } else {
      //     this.acceptanceTime.hour = Math.floor(this.acceptanceMsec / 3600);
      //     this.acceptanceTime.minute = Math.floor(
      //       ((this.acceptanceMsec % 86400) % 3600) / 60
      //     );
      //     this.acceptanceTime.second = Math.floor(
      //       ((this.acceptanceMsec % 86400) % 3600) % 60
      //     );
      //   }
      // } else if (phase === "PREREQUISITES") {
      //   // 要件准备
      //   if (this.convenience.prerequisitesTime === null) {
      //     this.prerequisitesInterval = setInterval(() => {
      //       this.prerequisitesTime.hour = Math.floor(this.preMsec / 3600);
      //       this.prerequisitesTime.minute = Math.floor(
      //         ((this.preMsec % 86400) % 3600) / 60
      //       );
      //       this.prerequisitesTime.second = Math.floor(
      //         ((this.preMsec % 86400) % 3600) % 60
      //       );
      //       // this.totalTime = this.acceptanceTime;
      //       this.totalMsec = this.acceptanceMsec + this.preMsec;
      //       this.totalTime.hour = Math.floor(this.totalMsec / 3600);
      //       this.totalTime.minute = Math.floor(
      //         ((this.totalMsec % 86400) % 3600) / 60
      //       );
      //       this.totalTime.second = Math.floor(
      //         ((this.totalMsec % 86400) % 3600) % 60
      //       );
      //       this.preMsec++;
      //     }, 1000);
      //   } else {
      //     this.prerequisitesTime.hour = Math.floor(this.preMsec / 3600);
      //     this.prerequisitesTime.minute = Math.floor(
      //       ((this.preMsec % 86400) % 3600) / 60
      //     );
      //     this.prerequisitesTime.second = Math.floor(
      //       ((this.preMsec % 86400) % 3600) % 60
      //     );
      //   }
      // } else if (phase === "PROCESSING") {
      //   // 办结
      //   if (this.convenience.finishTime === null) {
      //     this.finishTimeInterval = setInterval(() => {
      //       this.finishTime.hour = Math.floor(this.finishMsec / 3600);
      //       this.finishTime.minute = Math.floor(
      //         ((this.finishMsec % 86400) % 3600) / 60
      //       );
      //       this.finishTime.second = Math.floor(
      //         ((this.finishMsec % 86400) % 3600) % 60
      //       );
      //       this.finishMsec++;
      //     }, 1000);
      //   } else {
      //     this.finishTime.hour = Math.floor(this.finishMsec / 3600);
      //     this.finishTime.minute = Math.floor(
      //       ((this.finishMsec % 86400) % 3600) / 60
      //     );
      //     this.finishTime.second = Math.floor(
      //       ((this.finishMsec % 86400) % 3600) % 60
      //     );
      //     console.log(this.convenience.finishTime);
      //   }
      // } else {
      //   this.acceptanceTime.hour = Math.floor(this.acceptanceMsec / 3600);
      //   this.acceptanceTime.minute = Math.floor(
      //     ((this.acceptanceMsec % 86400) % 3600) / 60
      //   );
      //   this.acceptanceTime.second = Math.floor(
      //     ((this.acceptanceMsec % 86400) % 3600) % 60
      //   );
      //   this.prerequisitesTime.hour = Math.floor(this.preMsec / 3600);
      //   this.prerequisitesTime.minute = Math.floor(
      //     ((this.preMsec % 86400) % 3600) / 60
      //   );
      //   this.prerequisitesTime.second = Math.floor(
      //     ((this.preMsec % 86400) % 3600) % 60
      //   );
      //   this.finishTime.hour = Math.floor(this.finishMsec / 3600);
      //   this.finishTime.minute = Math.floor(
      //     ((this.finishMsec % 86400) % 3600) / 60
      //   );
      //   this.finishTime.second = Math.floor(
      //     ((this.finishMsec % 86400) % 3600) % 60
      //   );
      // }
    },
    timeFormat(obj, timeStamp) {
      this[obj].hour =
        Math.floor(timeStamp / 3600) < 9
          ? "0" + Math.floor(timeStamp / 3600)
          : Math.floor(timeStamp / 3600);
      this[obj].minute =
        Math.floor(((timeStamp % 86400) % 3600) / 60) < 9
          ? "0" + Math.floor(((timeStamp % 86400) % 3600) / 60)
          : Math.floor(((timeStamp % 86400) % 3600) / 60);
      this[obj].second =
        Math.floor(((timeStamp % 86400) % 3600) % 60) < 9
          ? "0" + Math.floor(((timeStamp % 86400) % 3600) % 60)
          : Math.floor(((timeStamp % 86400) % 3600) % 60);
    },
    getCommunicationList() {
      communicationList({ id: this.id }).then(res => {
        res.d.map(item => {
          const obj = {
            label: item.name,
            value: item.id
          };
          this.communicationOptions.push(obj);
        });
      });
    },
    getStaffList() {
      staffList().then(res => {
        res.d.records.map(item => {
          const obj = {
            label: item.name,
            value: item.id
          };
          this.staffOptions.push(obj);
        });
      });
    },
    resetPayload() {
      this.payload = {
        id: undefined,
        version: undefined,
        ids: [],
        remark: undefined,
        attachmentList: undefined,
        approve: undefined,
        evaluation: undefined
      };
      this.spr = [];
      this.bzjr = undefined;
    },
    handleRevoke() {
      const payload = {
        id: this.id,
        version: this.convenience.version,
        type: 2
      };
      update(payload).then(res => {
        // console.log(res);
        this.$notify.success("撤销成功");
      });
    },
    handleContact() {
      this.resetPayload();
      this.$nextTick(() => {
        this.$refs.contractForm.clearValidate();
      });
      this.contactDialog = true;
      this.payload.type = 3;
      this.payload.id = this.id;
      this.payload.version = this.convenience.version;
    },
    getNames(arr) {
      const temp = [];
      arr.map(item => {
        temp.push(item.name);
      });
      return temp.join(",");
    },
    handlePreview() {},
    handleRemove() {},
    beforeRemove() {},
    handleExceed() {},
    createContact() {
      // this.resetPayload()
      // const payload = {
      //   id: this.id,
      //   version: this.convenience.version,
      //   type: 3,
      //   remark: this.remark
      //   // ids:
      // };
      // console.log(payload);
      this.$refs.contractForm.validate(valid => {
        if (valid) {
          update(this.payload).then(res => {
            // console.log(res);
            if (res.c === 200) {
              this.$notify.success("提交成功");
            }
            this.getInfo();
            this.contactDialog = false;
          });
        }
      });
    },
    handleApprove(approve) {
      const applyType = this.convenience.applyType;
      this.updateType = applyType === "FORWARDED" ? 10 : 13;
      this.payload.id = this.convenience.id;
      this.payload.version = this.convenience.version;
      this.payload.type = this.updateType;
      this.payload.approve = approve;

      if (approve) {
        // console.log(this.payload);
        this.updateData();
      } else {
        this.applyDialog = true;
      }
      // id: this.id,
      //   version: undefined,
      //   ids: undefined,
      //   remark: undefined,
      //   attachmentList: undefined,
      //   approve: undefined,
      //   evaluation: undefined
    },
    handleApprovalReminder() {
      this.dialogApprovalReminder = true;
    },
    handleConfirmApprovalReminder() {
      this.dialogApprovalReminder = false;
      this.handleUpdate(11);
    },
    handleUpdate(type) {
      // console.log(type);
      this.resetPayload();
      this.updateType = type;
      this.payload.id = this.convenience.id;
      this.payload.version = this.convenience.version;
      this.payload.type = type;
      switch (type) {
        case 6:
          // 要件齐备
          this.applyDialog = true;
          break;
        case 7:
          // 办结
          this.applyDialog = true;
          break;
        case 10:
          // 转交超限审批
          // this.approve;
          break;
        case 11:
          // 发起审批
          this.applyDialog = true;
          break;

        // case 12:
        //   // 撤销审批
        //   break;

        case 13:
          // 审批操作
          this.applyDialog = true;
          break;
        case 14:
          // console.log("handle14");
          // 转交
          const frequencys = this.convenience.records.filter(
            m => m.frequency !== null
          );
          if (
            frequencys.filter(
              item =>
                item.frequency >=
                this.convenience.eventType.referralRestrictions
            ).length > 0
          ) {
            this.updateType = 8;
            this.confirmDialog = true;
          } else {
            this.updateType = 14;
            this.applyDialog = true;
          }
          break;
        case 16:
          // 评价申诉
          this.applyDialog = true;
          break;
        default:
          this.updateData();
          break;
      }
    },
    handleEventTypeChange(val) {
      // console.log(val);
      // handle
      this.payload = {
        id: this.id,
        type: 4,
        version: this.convenience.version,
        remark: val
      };
      this.updateType = 4;
      this.updateData();
      // this.dialogEventType = false;
    },
    handleChange(val) {
      // console.log(val);
    },
    apply() {
      // this.$refs.updateForm.validate(valid=>{
      //   console.log(valid);
      // })
      // console.log(this.payload);
      // console.log(this.payload.type);
      this.updateData();
      this.applyDialog = false;
    },
    handleContinue() {
      setTimeout(() => {
        this.confirmDialog = false;
      }, 100);
      this.applyDialog = true;
    },
    updateData() {
      // console.log(this.updateType);
      switch (this.updateType) {
        case 6:
          break;
        case 8:
          this.payload.ids.push(this.spr);
          this.payload.ids.push(this.bzjr);
          this.payload.type = 8;
          break;
        case 11:
          this.payload.id = this.convenience.id;
          this.payload.version = this.convenience.version;
          this.payload.ids = this.spr;
          break;
        case 14:
          this.payload.type = 14;
          this.payload.ids.push(this.bzjr);
          break;
      }
      update(this.payload).then(res => {
        if (res.c === 200) {
          this.$notify.success("操作成功");
          if (this.updateType === 13) {
            this.$router.push("/convenience/list");
            return;
          }
          if (this.updateType === 4) {
            this.isEventTypeChange = false;
          }
          if (this.updateType === 12) {
            this.cxPop = false;
          }
          // if (this.updateType===12){
          //   this.$notify.success('撤销成功')
          // }
          // if(this.updateType===10||this.updateType===13){
          //   if(this.payload.approve){
          //     this.$notify.success('审批通过')
          //   }
          // }
          this.getInfo();
        }
      });
    },
    // handlePreviewAttachment(url) {
    //   const fileType = url.substr(url.lastIndexOf(".") + 1);
    //   if(this.isAssetTypeAnImage(fileType)){

    //   }else{

    //   }
    // },
    isAssetTypeAnImage(ext) {
      return (
        ["png", "jpg", "jpeg", "bmp", "gif"].indexOf(ext.toLowerCase()) !== -1
      );
    },
    handleSetPreviewImg(imgurl) {
      this.dialogImageUrl = imgurl;
      this.dialogPreviewImg = true;
    },
    handleChangeEventType() {
      this.dialogEventType = true;
    },
    eventTypeUpdate() {
      this.payload = {
        id: this.id,
        type: 4,
        version: this.convenience.version,
        remark: this.eventTypeId
      };
      this.updateType = 4;
      this.updateData();
      this.dialogEventType = false;
    },
    cascader() {
      this.isEventTypeChange = !this.isEventTypeChange;
      this.$nextTick(() => {
        console.log(this.$refs.cascader)
        const tempRef = this.$refs.cascader;
        tempRef.$el.style.display='inline-block'
        this.$refs.cascader.focusFirstNode()
      }, 100);
    }
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.acceptanceInterval);
    clearInterval(this.prerequisitesInterval);
    clearInterval(this.finishTimeInterval);
    next();
  }
  // timeFormat(timeStamp) {
  //   const timeStr = `${
  //     Math.floor(timeStamp / 3600) < 9
  //       ? "0" + Math.floor(timeStamp / 3600)
  //       : Math.floor(timeStamp / 3600)
  //   }:${
  //     Math.floor(((timeStamp % 86400) % 3600) / 60) < 9
  //       ? "0" + Math.floor(((timeStamp % 86400) % 3600) / 60)
  //       : Math.floor(((timeStamp % 86400) % 3600) / 60)
  //   }:${
  //     Math.floor(((timeStamp % 86400) % 3600) % 60) < 9
  //       ? "0" + Math.floor(((timeStamp % 86400) % 3600) % 60)
  //       : Math.floor(((timeStamp % 86400) % 3600) % 60)
  //   }`;
  //   return timeStr;
  // }
};
</script>

<style scope>
.convenienceInfo {
  padding: 40px 50px;
  margin-bottom: 10px;
}
.convenienceTitle {
  display: flex;
}
.icon_list {
  background: url("./img/icon_list.png") no-repeat;
  background-size: cover;
  display: inline-block;
  width: 52px;
  height: 51px;
  margin-right: 20px;
}
.icon_timer {
  background: url("./img/icon_timer.png") no-repeat;
  background-size: cover;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  vertical-align: baseline;
  margin-left: 24px;
}
.a_times {
  background-size: cover !important;
  width: 69px;
  height: 69px;
  display: inline-block;
}
.acceptanceOptionsLayout {
  display: flex;
  text-align: center;
  background-image: linear-gradient(#f9f9f9, #f9f9f9),
    linear-gradient(#f7f7f7, #f7f7f7);
  background-blend-mode: normal, normal;
  padding: 50px 132px;
  margin-top: 40px;
  color: #878787;
  position: relative;
}
.line_left {
  border-top: 4px solid #f2f2f2;
  position: absolute;
  left: 30%;
  width: 15%;
  top: 28%;
}
.line_right {
  border-top: 4px solid #f2f2f2;
  position: absolute;
  right: 30%;
  width: 15%;
  top: 28%;
}
.acceptanceOptionsLayout div p:nth-child(2) {
  color: #000000;
}
.icon_acceptance {
  background: url("./img/icon_acceptance.png") no-repeat;
}
.icon_finish {
  background: url("./img/icon_finish.png") no-repeat;
}
.icon_prepare {
  background: url("./img/icon_prepare.png") no-repeat;
}
.timeout {
  color: #ff3000;
  position: absolute;
}
.icon_timeout {
  width: 12px;
  height: 11px;
  display: inline-block;
  background: url("./img/icon_timeout.png") no-repeat;
  background-size: cover;
  margin-right: 5px;
  margin-left: 10px;
}
.eventType {
  font-size: 18px;
  color: #000000;
}
.text_timer {
  color: #ff6918;
  font-size: 20px;
}
.el-tag {
  font-size: 14px;
  margin-top: 3px;
}
.duration {
  color: #000000;
}
.hr {
  height: 3px;
  background-image: linear-gradient(#f9f9f9, #f9f9f9),
    linear-gradient(#c8c8c8, #c8c8c8);
  background-blend-mode: normal, normal;
  border-radius: 1px;
  margin-top: 25px;
  margin-bottom: 25px;
}
.timeline {
  background: #fff;
}
.el-icon-mores {
  background: url("./img/icon_acceptance.png") no-repeat;
}
.icon_fujian {
  background: url("./img/icon_fujian.png") no-repeat;
  background-size: cover;
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: top;
  margin-right: 12px;
}
.icon_fujian_self {
  background: url("./img/icon_fujian_self.png") no-repeat;
  background-size: cover;
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: top;
  margin-right: 12px;
}
.timeline_avatar {
  width: 73px;
  height: 74px;
  display: inline-block;
  border-radius: 73px;
  position: absolute;
  left: -32px;
  top: -28px;
  background-size: cover !important;
}
.el-timeline-item__wrapper {
  padding-left: 60px;
}
.contact_staff {
  background: #f7fafd;
}
.contact_self {
  background: #fff5f4;
}
.recordLayout {
  padding-top: 26px;
  background: #fff;
  /* margin-top: 25px; */
}
.timeLine {
  padding: 130px 73px;
}
.el-dialog__header {
  background: #f9fafc;
  border-radius: 4px;
}
.text_left {
  text-align: left;
}
.timerDiv {
  width: 137px;
  text-align: left;
  margin: 0 auto;
  line-height: 25px;
  margin-top: 25px;
}
.approveUl {
  list-style: none;
  padding-left: 0;
  display: inline-block;
  line-height: 30px;
  width: 100%;
  padding: 0 80px;
}
.approveUl > li {
  /* width: 50%; */
  margin-right: 10px;
  float: left;
}
.icon_approve {
  width: 19px;
  height: 19px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.approve_pass {
  background: url("./img/approve_pass.png") no-repeat;
  background-size: cover;
}
.approve_no {
  background: url("./img/approve_no.png") no-repeat;
  background-size: cover;
}
.approve_null {
  background: url("./img/approve_null.png") no-repeat;
  background-size: cover;
}
/* .timeLine > .el-card {
  border-radius: 0;
  border: none;
}
.timeLine > .el-card__body {
  padding: 5px 48px;
} */
.contact_staff {
  border: none;
  color: #787878;
}
.contact_self {
  border: none;
  color: #787878;
}
.contact_staff > .el-card__body {
  padding: 20px 48px 15px 48px;
}
h3 {
  color: #000000;
}
.el-timeline-item__content {
  margin-bottom: 63px;
}
.el-timeline-item__timestamp.is-top {
  margin-bottom: 22px;
}
/* .el */
.el-timeline-item__timestamp {
  color: #787878;
  padding-left: 25px;
}
.approveUl > li > .el-tag.el-tag--info {
  background-color: #f9f9f9;
  border: 0;
  color: #787878;
  height: 42px;
  border-radius: 10px;
}
.icon_zj {
  background: url("./img/icon_zj.png") no-repeat;
  width: 21px;
  height: 19px;
  display: inline-block;
  background-size: cover;
  margin-right: 6px;
  vertical-align: top;
}
.icon_sh {
  background: url("./img/icon_sh.png") no-repeat;
  width: 19px;
  height: 20px;
  display: inline-block;
  background-size: cover;
  margin-right: 6px;
  vertical-align: top;
}
.icon_bj {
  background: url("./img/icon_bj.png") no-repeat;
  width: 20px;
  height: 14px;
  display: inline-block;
  background-size: cover;
  margin-right: 4px;
  /* vertical-align: top; */
}
.timeLine_staff {
  background: url("./img/timeLine_staff.png") no-repeat;
  background-size: cover;
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
}
.timeLine_self {
  background: url("./img/timeLine_self.png") no-repeat;
  background-size: cover;
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
}
.icon_jd {
  background: url("./img/icon_jd.png") no-repeat;
  width: 20px;
  height: 19px;
  display: inline-block;
  background-size: cover;
  margin-right: 4px;
  vertical-align: top;
}
.icon_yj {
  background: url("./img/icon_yj.png") no-repeat;
  width: 17px;
  height: 19px;
  display: inline-block;
  background-size: cover;
  margin-right: 7px;
  vertical-align: top;
}
/* .el-cascader-panel{
  display: -webkit-inline-box;
} */

</style>
