<!--
 * @Description: In User Settings Edit
 * @Author: Huidong Che
 * @Date: 2020-03-27 16:38:45
 * @LastEditors: chd
 * @LastEditTime: 2020-11-18 09:25:23
-->
<template>
  <div class="wraper">
    <div class="page_left">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        ref="tree"
        highlight-current
        :node-key="'statusCode'"
        :expand-on-click-node="false"
        default-expand-all
        @node-click="handleNodeClick"
      >
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
          <span v-html="node.label"></span>
          <span>({{ data.quantity }})</span>
        </span>
      </el-tree>
    </div>
    <div class="page_right">
      <el-form
        v-show="is_tab == 1"
        :model="searchForm"
        size="mini"
        v-enter-submit="getlist"
        :inline="true"
        ref="form"
        class="search_form"
      >
        <el-form-item>
          <el-select
            v-model="searchForm.prop"
            placeholder="请选择"
            clearable
            style="width: 88px"
          >
            <el-option
              label="开始时间"
              value="startTime"
            ></el-option>
            <el-option
              label="创建时间"
              value="createTime"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <choose-time-period
            v-model="periodTime"
          ></choose-time-period>
        </el-form-item>
        <el-form-item label="工单编号">
          <el-input
            style="width: 110px"
            v-model="searchForm.orderNo"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="工单标题">
          <el-input
            style="width: 110px"
            v-model="searchForm.title"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="工单类型">
          <el-select
            v-model="searchForm.orderType"
            style="width: 110px"
            value-key=""
            placeholder="请选择"
            clearable
            filterable
          >
            <el-option
              v-for="(type, index) in orderTypes"
              :key="index"
              :label="type.value"
              :value="type.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="负责人/参与人"
          v-if="
            !(
              statusCode === 'PRE_HANDLING' ||
              statusCode === 'TO_BE_ASSIGN'
            )
          "
        >
          <el-select
            style="width: 150px"
            placeholder="请选择"
            clearable
            multiple
            collapse-tags
            v-model="searchForm.leaderAndParticipator"
          >
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.realName"
              :value="user.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="验收人"
          v-if="
            !(
              statusCode === 'PRE_HANDLING' ||
              statusCode === 'TO_BE_ASSIGN'
            )
          "
        >
          <el-select
            style="width: 110px"
            placeholder="请选择"
            clearable
            v-model="searchForm.acceptanceUserId"
          >
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.realName"
              :value="user.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select
            style="width: 110px"
            filterable
            clearable
            v-model="searchForm.priorityStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="(priorityStatus,
              index) in priorityStatusList"
              :key="index"
              :value="priorityStatus.value"
              :label="priorityStatus.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="沟通状态">
          <el-select
            v-model="searchForm.sign"
            placeholder="请选择"
            style="width: 110px"
            clearable
          >
            <el-option
              label="待回复"
              :value="1"
            ></el-option>
            <el-option
              label="已回复"
              :value="0"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label>
          <el-button
            @click="getlist()"
            type="primary"
            size="mini"
          >
            查询
          </el-button>
        </el-form-item>
        <el-form-item v-if="statusCode === 'PRE_HANDLING'">
          <el-button
            type="success"
            size="mini"
            @click="addData"
            >新增
          </el-button>
        </el-form-item>
      </el-form>
      <div class="table-wrap" v-loading="loading">
        <table-view
          :tableColumns="tableColumns"
          :sourceData="sourceData"
          :cellClassName="cellClassName"
          :cellStyle="cellStyle"
          @sortChange="sortChange"
        >
        </table-view>
      </div>
      <div class="pagination">
        <el-pagination
          layout="sizes, total, prev, pager, next, jumper"
          background
          :total="centerPageOptions.total"
          :page-size="centerPageOptions.pageSize"
          :current-page="centerPageOptions.currentPage"
          @size-change="sizeChange"
          @current-change="onCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 详情 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="detailVisible"
      class="dialogDetail"
      :class="[
        dialogFullScreen ? 'fullscreen' : 'no_fullscreen',
      ]"
      :fullscreen="dialogFullScreen"
      @close="getlist()"
    >
      <!-- <div class="step-bar">
        step-pass 已经完成,step-active当前步骤
        <div
          class="step step-after"
          :class="{
            'step-pass':
              detail.orderStatus === 'TO_BE_ASSIGN' ||
              detail.orderStatus === 'TO_BE_CONFIRMED' ||
              detail.orderStatus === 'IN_PROGRESS' ||
              detail.orderStatus === 'CLOSED' ||
              detail.orderStatus === 'ARCHIVE',
            'step-active':
              detail.orderStatus === 'PRE_HANDLING',
          }"
        >
          <span>待受理</span>
        </div>
        <div
          class="step step-after step-before"
          :class="{
            'step-pass':
              detail.orderStatus === 'CLOSED' ||
              detail.orderStatus === 'ARCHIVE',
            'step-active':
              detail.orderStatus === 'IN_PROGRESS' ||
              detail.orderStatus === 'TO_BE_ASSIGN' ||
              detail.orderStatus === 'TO_BE_CONFIRMED',
          }"
        >
          <span>处理中</span>
        </div>
        <div
          class="step step-after step-before"
          :class="{
            'step-pass': detail.orderStatus === 'ARCHIVE',
            'step-active': detail.orderStatus === 'CLOSED',
          }"
        >
          <span>已关闭</span>
        </div>
        <div
          class="step step-before"
          :class="{
            'step-pass': detail.orderStatus === 'ARCHIVE',
            'step-active': detail.orderStatus === 'ARCHIVE',
          }"
        >
          <span>已归档</span>
        </div>
      </div> -->
      <template slot="title">
        <div class="custom_dialog_header">
          <span class="el_dialog_title">详情</span>
          <div
            class="custom_dialog_menu"
            @click="dialogFullScreen = !dialogFullScreen"
            style="text-align: right;margin-top: 11px"
          >
            <i class="el-icon-full-screen"></i>
          </div>
        </div>
      </template>
      <div class="content" v-loading="detailLoading">
        <div class="detail_list">
          <div class="item_wrap">
            <p class="item" style="width: 100%">
              <span class="label">工单标题</span>
              <span class="value" style="width: 732px">{{
                detail.title
              }}</span>
            </p>
            <p class="item">
              <span class="label">工单编码</span>
              <span class="value">{{
                detail.orderNo
              }}</span>
            </p>
            <p class="item">
              <span class="label">工单类型</span>
              <span class="value">
                {{ detail.orderTypeTxt }}
              </span>
            </p>

            <p class="item">
              <span class="label">工单状态</span>
              <span class="value">
                {{ detail.orderStatusTxt }}
              </span>
            </p>
            <p class="item">
              <span class="label">优先级</span>
              <span class="value">
                {{
                  handlePriorityStatus(
                    detail.priorityStatus,
                  )
                }}
              </span>
            </p>
            <p
              class="item"
              style="width: 100%; display: flex"
            >
              <span class="label">工单内容</span>
              <span
                style="flex: 1; display: inline-block;max-width: 84%;"
                class="value"
                @click.stop="hanldeImage($event)"
                v-html="detail.content"
              ></span>
              <el-image-viewer
                v-if="imgPreviewUrl"
                :initial-index="subscript"
                :src="imgPreviewUrl"
                :on-close="closeViewer"
                :url-list="imgList"
                style="z-index: 3000"
              ></el-image-viewer>
            </p>
          </div>
          <div
            style="padding: 5px; overflow: auto"
            v-html="detail.taskContent"
            @click="fullScreenDisplay"
          ></div>
        </div>
        <div class="record">
          <div class="title">备注</div>
          <ul class="chat_content">
            <el-input
              style="width: 94%"
              type="textarea"
              :rows="4"
              v-model="detail.remark"
              placeholder="备注"
            ></el-input>
            <el-button
              type="success"
              size="mini"
              @click="saveRemark"
              v-if="detail.remark"
              style="margin-left: 8px"
            >
              保存
            </el-button>
          </ul>
        </div>
        <div class="record">
          <div class="title">沟通记录</div>
          <ul
            class="chat_content"
            v-if="chatRecord.length > 0"
          >
            <li
              v-for="(item, index) in chatRecord"
              :key="index"
              class="chat_item"
              :class="{ chat_right: item.type === 2 }"
            >
              <div class="chat_warp" v-if="item.type === 2">
                <div class="chat_user">
                  <div class="chat_user_time">
                    {{
                      item.createTime
                    }}&nbsp;&nbsp;&nbsp;&nbsp;客服
                  </div>
                  <div class="chat_text">
                    {{ item.msg }}
                  </div>
                </div>
                <div class="chat_icon">
                  <img
                    width="100%"
                    src="http://img.alicdn.com/tfs/TB14feR0AL0gK0jSZFAXXcA9pXa-64-64.png"
                    alt=""
                  />
                </div>
              </div>
              <div v-else class="chat_warp">
                <div class="chat_icon">
                  <img
                    width="100%"
                    src="http://img.alicdn.com/tfs/TB14feR0AL0gK0jSZFAXXcA9pXa-64-64.png"
                    alt=""
                  />
                </div>
                <div class="chat_user">
                  <div class="chat_user_time">
                    {{
                      item.sendUserName
                    }}:&nbsp;&nbsp;&nbsp;&nbsp;{{
                      item.createTime
                    }}
                  </div>

                  <div class="chat_text">
                    {{ item.msg }}
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="empty-data" v-else>暂无数据</div>
        </div>
      </div>

      <div style="margin-top: 10px">
        <div>
          <el-input
            type="textarea"
            :rows="4"
            maxlength="1000"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
        </div>
        <div style="margin-top: 10px; text-align: right">
          <el-button
            size="mini"
            type="primary"
            @click="reply"
            >回复
          </el-button>
          <el-button
            size="mini"
            type="success"
            v-if="statusCode === 'PRE_HANDLING'"
            @click="confirm"
            >受理
          </el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="statusCode === 'PRE_HANDLING'"
            @click="closeForPendingDialog"
            >不受理
          </el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="statusCode === 'PRE_HANDLING'"
            @click="shelveForPendingDialog"
            >转至待定
          </el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="statusCode === 'PENDING'"
            @click="turnBackToPending"
            >转至待受理
          </el-button>
        </div>
      </div>
    </el-dialog>
    <edit
      :editDialog.sync="editDialog"
      @onSubmit="onSubmit"
      @onChangeModule="onChangeModule"
      :editForm="editForm"
      :orderTypes="orderTypes"
      :isEdit="isEdit"
      :editFlag="editFlag"
      ref="edit"
    ></edit>
    <!-- 修改参与人 -->
    <el-dialog
      title="修改参与人"
      :close-on-click-modal="false"
      :visible.sync="updateVisible"
      width="900px"
    >
      <el-form
        :inline="true"
        size="mini"
        :model="updateForm"
        ref="updateForm"
        :rules="updateFormRules"
        label-width="130px"
      >
        <el-form-item label="负责人" prop="leaders">
          <el-select
            style="width: 100%"
            size="small"
            v-model="updateForm.leaders"
          >
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.realName"
              :value="user.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参与人" prop="participator">
          <el-select
            style="width: 100%"
            size="small"
            v-model="updateForm.participator"
            multiple
          >
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.realName"
              :value="user.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="验收人"
          prop="acceptanceUserId"
        >
          <el-select
            style="width: 100%"
            size="small"
            v-model="updateForm.acceptanceUserId"
          >
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.realName"
              :value="user.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          size="mini"
          @click="updateVisible = false"
          >取消</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="submitUpdate"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- 指派 -->
    <el-dialog
      title="指派给"
      :close-on-click-modal="false"
      :visible.sync="assignVisible"
      width="900px"
    >
      <el-form
        :inline="true"
        size="mini"
        :model="assignForm"
        ref="assignForm"
        :rules="assignFormRules"
        label-width="130px"
      >
        <el-form-item label="负责人" prop="leaders">
          <el-select
            style="width: 100%"
            size="small"
            v-model="assignForm.leaders"
          >
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.realName"
              :value="user.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参与人" prop="participator">
          <el-select
            style="width: 100%"
            size="small"
            v-model="assignForm.participator"
            multiple
          >
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.realName"
              :value="user.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="验收人"
          prop="acceptanceUserId"
        >
          <el-select
            style="width: 100%"
            size="small"
            v-model="assignForm.acceptanceUserId"
          >
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.realName"
              :value="user.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          size="mini"
          @click="assignVisible = false"
          >取消</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="submitAssign"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="预计完成时间"
      :visible.sync="completeVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        size="mini"
        :rules="addRules"
        :model="ruleForm"
        ref="ruleForm"
      >
        <el-form-item
          label="预计完成时间"
          prop="estimateCompleteTime"
        >
          <el-date-picker
            style="width: 100%"
            v-model="ruleForm.estimateCompleteTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            default-time="23:59:59"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          size="small"
          @click="completeVisible = false"
          >取消</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="submitTime"
          >确认</el-button
        >
      </span>
    </el-dialog>
    <!-- 指派 -->
    <el-dialog
      title="验收"
      :close-on-click-modal="false"
      :visible.sync="acceptVisible"
      width="800px"
    >
      <el-form
        :inline="true"
        size="mini"
        :model="acceptForm"
        ref="acceptForm"
        :rules="acceptFormRules"
        label-width="110px"
      >
        <el-form-item
          label="验收结果"
          prop="acceptanceResult"
        >
          <el-radio-group
            v-model="acceptForm.acceptanceResult"
            size="small"
            style="width: 100%"
          >
            <el-radio
              :label="item.value"
              v-for="(item, index) in acceptanceResultList"
              :key="index"
              >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="验收意见"
          prop="acceptanceContent"
          :rules="[
            {
              required:
                acceptForm.acceptanceResult == 'failure'
                  ? true
                  : false,
              message: '请填写',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            type="textarea"
            :autosize="{ minRows: 4 }"
            style="width:400px"
            placeholder="请输入内容"
            v-model="acceptForm.acceptanceContent"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          size="mini"
          @click="acceptVisible = false"
          >取消</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="submitAccept"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- 不受理 -->
    <el-dialog
      :title="pendingTitle"
      :close-on-click-modal="false"
      :visible.sync="pendingVisible"
      width="800px"
    >
      <el-form
        :inline="true"
        size="mini"
        :model="pendingForm"
        ref="pendingForm"
        label-width="110px"
      >
        <el-form-item
          label="原因"
          prop="closeReason"
          :rules="[
            {
              required: true,
              message: '请填写',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            type="textarea"
            :autosize="{ minRows: 4 }"
            style="width:400px"
            placeholder="请输入"
            v-model="pendingForm.closeReason"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          size="mini"
          @click="pendingVisible = false"
          >取消</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="submitPending"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableView from '@/common/components/base/tableView.vue'
import ChooseTimePeriod from '@/components/base/chooseTimePeriod.vue'
import pagination from '../../mixins/pagination'
import Edit from './edit.vue'
import axios from '../../common/api/axios'
import {
  getOrderTree,
  workConfirmed,
  workAssigned,
  reallocate,
  startWorder,
  archiveWorkOrder,
  completeWorkOrder,
  replyTocustomer,
  acceptanWorkOrder,
  PendingWorkOrder,
  ShelveWorkOrder,
  TurnBackToPending,
  getOrderType,
  resume,
  pause,
  reject,
  closeForPending,
  close,
  getInfo,
} from '@/common/api/order'
import { getSystemUserList } from '@/common/api/system'
import { mapState } from 'vuex'
// import confirmWork from '@/assets/work/confirm.png'
import updatePatorName from '@/assets/work/PatorName.png'
import assignWork from '@/assets/work/assign.png'
import startWork from '@/assets/work/start.png'
import archiveWork from '@/assets/work/archive.png'
import completeWork from '@/assets/work/complete.png'
import rejectWork from '@/assets/work/reject.png'
import pauseWork from '@/assets/work/pause.png'
import resumetWork from '@/assets/work/resume.png'
import closetWork from '@/assets/work/close.png'
import updateWork from '@/assets/work/update.png'
import anceingWork from '@/assets/work/anceing.png'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'task_center',
  mixins: [pagination],
  components: {
    ChooseTimePeriod,
    tableView,
    Edit,
    ElImageViewer,
  },
  data() {
    const userInfo = localStorage.getItem('user')
    const validatePass2 = (rule, value, callback) => {
      const start = new Date(value)
      if (!value) {
        callback(new Error('请选择预计完成时间'))
      } else if (start < Date.now()) {
        callback(new Error('预计完成时间要大于当前时间!'))
      } else {
        callback()
      }
    }
    return {
      addRules: {
        estimateCompleteTime: [
          {
            validator: validatePass2,
            trigger: 'blur',
          },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        },
      },
      updateForm: {},
      updateVisible: false,
      updateFormRules: {
        leaders: [
          {
            required: true,
            message: '请选择负责人',
            trigger: 'blur',
          },
        ],
        fromUser: [
          {
            required: true,
            message: '请选择参与人',
            trigger: 'blur',
          },
        ],
        acceptanceUserId: [
          {
            required: true,
            message: '请选择验收人',
            trigger: 'blur',
          },
        ],
      },
      assignFormRules: {
        leaders: [
          {
            required: true,
            message: '请选择负责人',
            trigger: 'blur',
          },
        ],
        fromUser: [
          {
            required: true,
            message: '请选择参与人',
            trigger: 'blur',
          },
        ],
        acceptanceUserId: [
          {
            required: true,
            message: '请选择验收人',
            trigger: 'blur',
          },
        ],
      },
      priorityStatusList: [
        {
          value: 1,
          name: '低',
        },
        {
          value: 2,
          name: '中',
        },
        {
          value: 3,
          name: '高',
        },
      ],
      loading: false,
      detailLoading: false,
      assignForm: {},
      textarea: '',
      centerPageOptions: {
        pageSize: 100,
        currentPage: 1,
        total: 0,
      },
      userInfo: JSON.parse(userInfo),
      taskLeader: '',
      assignVisible: false,
      periodTime: [],
      selections: [],
      is_tab: '1',
      statusCode: 'PRE_HANDLING',
      searchForm: {
        timeProp: 'create_time',
        prop: 'createTime',
      },
      isEdit: false,
      editFlag: false,
      sourceData: [],
      currentRowId: '',
      editForm: {},
      commentsVisible: false,
      detail: {},
      detailVisible: false,
      dialogFullScreen: false,
      taskTypes: [],
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'statusName',
      },
      userList: [],
      orderTypes: [],
      chatRecord: [],
      cloneForm: {},
      editDialog: false,
      completeVisible: false,
      ruleForm: {
        estimateCompleteTime: '',
      },
      currentItem: null,
      acceptVisible: false,
      acceptFormRules: {
        acceptanceResult: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur',
          },
        ],
      },
      acceptForm: {},
      acceptanceResultList: [
        {
          value: 'success',
          label: '验收通过',
        },
        {
          value: 'failure',
          label: '验收不通过',
        },
      ],
      pendingVisible: false,
      pendingForm: {
        closeReason: '',
      },
      imgPreviewUrl: '',
      subscript: 0,
      imgList: [],
      pendingTitle: '',
      pendingBtn: 0
    }
  },
  mounted() {
    this.getOrderTree()
    this.getlist()
    this.getSystemUserList()
    this.getOrderTypes()
    this.cloneForm = JSON.parse(
      JSON.stringify(this.editForm),
    )
  },
  computed: {
    ...mapState(['deptStaff']),
    tableColumns() {
      return [
        {
          label: '工单标题',
          key: 'title',
          minWidth: 120,
          align: 'left',
          render: item => (
            <span style="position: relative;">
              <span>{item.title}</span>
              {item.sign === 1 &&
                item.orderStatus === 'PRE_HANDLING' && (
                  <i
                    class="el-icon-info"
                    title="待回复"
                  ></i>
                )}
            </span>
          ),
        },
        {
          label: '工单模块',
          key: 'moduleName',
          width: 110,
          align: 'left',
        },
        {
          label: '工单类型',
          key: 'orderTypeTxt',
          width: 80,
        },
        {
          label: '优先级',
          key: 'priorityStatus',
          width: 70,
          render: item => {
            if (item.orderStatus === 'TO_BE_ASSIGN') {
              item.priorityStatus = item.priorityStatus
                ? String(item.priorityStatus)
                : ''
              return (
                <div class="priorityStatus-select">
                  <el-select
                    v-model={item.priorityStatus}
                    placeholder=""
                    onChange={v => this.setStatus(item, v)}
                  >
                    <el-option
                      label=""
                      value=""
                    ></el-option>
                    <el-option
                      label="低"
                      value="1"
                    ></el-option>
                    <el-option
                      label="中"
                      value="2"
                    ></el-option>
                    <el-option
                      label="高"
                      value="3"
                    ></el-option>
                  </el-select>
                </div>
              )
            } else {
              if (item.priorityStatus) {
                return this.priorityStatusList.find(v => {
                  return v.value === item.priorityStatus
                }).name
              } else {
                return ''
              }
            }
          },
        },
        {
          label: '备注',
          key: 'remark',
          width: 80,
        },
        {
          label: '创建人',
          key: 'fromUserName',
          width: 80,
        },
        {
          label: '负责人',
          key: 'leaderNames',
          show: !(
            this.statusCode === 'PRE_HANDLING' ||
            this.statusCode === 'TO_BE_ASSIGN'
          ),
          width: 80,
        },
        {
          label: '参与人',
          key: 'participatorName',
          show: !(
            this.statusCode === 'PRE_HANDLING' ||
            this.statusCode === 'TO_BE_ASSIGN'
          ),
          width: 80,
        },
        {
          label: '验收人',
          key: 'acceptanceUserName',
          show: this.statusCode === 'ACCEPTANCEING',
          width: 80,
        },
        {
          label: '创建时间',
          key: 'createTime',
          sortable: true,
          width: 130,
        },
        {
          label: '开始时间',
          key: 'startTime',
          show: !(
            this.statusCode === 'PRE_HANDLING' ||
            this.statusCode === 'TO_BE_ASSIGN'
          ),
          width: 130,
        },
        {
          label: '期望完成时间',
          key: 'expectCompleteTime',
          width: 130,
        },
        {
          label: '预计完成时间',
          key: 'estimateCompleteTime',
          show: !(
            this.statusCode === 'PRE_HANDLING' ||
            this.statusCode === 'TO_BE_ASSIGN'
          ),
          width: 130,
        },
        {
          label: '验收时间',
          key: 'acceptanceTime',
          show: !(
            this.statusCode === 'PRE_HANDLING' ||
            this.statusCode === 'TO_BE_ASSIGN'
          ),
          width: 130,
        },
        {
          label: '完成时间',
          key: 'completeTime',
          show: !(
            this.statusCode === 'PRE_HANDLING' ||
            this.statusCode === 'TO_BE_ASSIGN'
          ),
          width: 130,
        },
        {
          label: '用户评价',
          key: 'evaluations',
          show: !(
            this.statusCode === 'PRE_HANDLING' ||
            this.statusCode === 'TO_BE_ASSIGN'
          ),
          width: 140,
        },
        {
          label: '不受理原因',
          key: 'closeReason',
          width: 130,
        },
        {
          label: '验收人',
          key: 'acceptanceUserName',
          show: !(
            this.statusCode === 'PRE_HANDLING' ||
            this.statusCode === 'TO_BE_ASSIGN' ||
            this.statusCode === 'ACCEPTANCEING'
          ),
          width: 80,
        },
        {
          label: '验收意见',
          show: !(
            this.statusCode === 'PRE_HANDLING' ||
            this.statusCode === 'TO_BE_ASSIGN'
          ),
          key: 'acceptanceContent',
          width: 80,
        },
        {
          label: '工单编号',
          key: 'orderNo',
          width: 110,
        },
        {
          label: '工单状态',
          key: 'orderStatusTxt',
          width: 80,
        },
        {
          label: '来源',
          key: 'fromBusiness',
          width: 80,
        },
        {
          label: '取消原因',
          key: 'userCanncelReason',
          show: this.statusCode === 'CLOSED',
          width: 80,
        },
        {
          label: '操作',
          fixed: 'right',
          width: this.columnWidth(),
          align: 'center',
          render: item => (
            <span>
              {
                <span
                  title="详情"
                  class="icon-view icon-tools-view"
                >
                  <i
                    class="el-icon-tickets"
                    onClick={() => this.showDetail(item)}
                  ></i>
                </span>
              }
              {item.orderStatus === 'PRE_HANDLING' && (
                <span title="修改" class="icon-view">
                  <img
                    width="24"
                    height="24"
                    src={updateWork}
                    onClick={() => this.update(item)}
                  />
                </span>
              )}
              {item.orderStatus === 'TO_BE_ASSIGN' && (
                <span title="指派给" class="icon-view">
                  <img
                    width="24"
                    height="24"
                    src={assignWork}
                    onClick={() => this.showAssign(item)}
                  />
                </span>
              )}
              {item.orderStatus === 'IN_PROGRESS' && (
                <span title="修改参与人" class="icon-view">
                  <img
                    width="24"
                    height="24"
                    src={updatePatorName}
                    onClick={() => this.showUpdate(item)}
                  />
                </span>
              )}
              {item.orderStatus === 'PAUSEING' && (
                <span title="恢复" class="icon-view">
                  <img
                    width="24"
                    height="24"
                    src={resumetWork}
                    onClick={() => this.resume(item)}
                  />
                </span>
              )}
              {item.orderStatus === 'TO_BE_CONFIRMED' &&
                item.leaders &&
                item.leaders
                  .split(',')
                  .map(e => +e)
                  .includes(this.userInfo.id) && (
                  <span title="开始" class="icon-view">
                    <img
                      width="24"
                      height="24"
                      src={startWork}
                      onClick={() =>
                        this.startWorkOrder(item)
                      }
                    />
                  </span>
                )}
              {item.orderStatus === 'CLOSED' && (
                <span title="归档" class="icon-view">
                  <img
                    width="24"
                    height="24"
                    src={archiveWork}
                    onClick={() => this.archive(item)}
                  />
                </span>
              )}
              {item.orderStatus === 'IN_PROGRESS' && (
                <span title="处理完成" class="icon-view">
                  <img
                    width="24"
                    height="24"
                    src={completeWork}
                    onClick={() => this.complete(item)}
                  />
                </span>
              )}
              {item.orderStatus === 'ACCEPTANCEING' &&
                Number(item.acceptanceUserId) ===
                  this.userInfo.id && (
                  <span title="已完成" class="icon-view">
                    <img
                      width="24"
                      height="24"
                      src={anceingWork}
                      onClick={() => this.anceing(item)}
                    />
                  </span>
                )}
              {item.orderStatus === 'IN_COMPLETE' && (
                <span title="关闭" class="icon-view">
                  <img
                    width="24"
                    height="24"
                    src={closetWork}
                    onClick={() => this.close(item)}
                  />
                </span>
              )}
              {(item.orderStatus === 'TO_BE_ASSIGN' ||
                item.orderStatus === 'TO_BE_CONFIRMED' ||
                item.orderStatus === 'IN_PROGRESS' ||
                item.orderStatus === 'IN_COMPLETE') && (
                <span title="驳回" class="icon-view">
                  <img
                    width="24"
                    height="24"
                    src={rejectWork}
                    onClick={() => this.reject(item)}
                  />
                </span>
              )}
              {item.orderStatus === 'IN_PROGRESS' && (
                <span title="暂停" class="icon-view">
                  <img
                    width="24"
                    height="24"
                    src={pauseWork}
                    onClick={() => this.pause(item)}
                  />
                </span>
              )}
            </span>
          ),
        },
      ]
    },
  },
  methods: {
    columnWidth() {
      if (this.statusCode === 'IN_PROGRESS') {
        return '160'
      } else if (this.statusCode === 'ARCHIVE') {
        return '70'
      } else if (
        this.statusCode === 'PRE_HANDLING' ||
        this.statusCode === 'PAUSEING' ||
        this.statusCode === 'ACCEPTANCEING' ||
        this.statusCode === 'CLOSED'
      ) {
        return '90'
      } else {
        return '120'
      }
    },
    // 排序
    sortChange(column) {
      if (column.order === 'asc') {
        this.searchForm.createTimeSort = 'asc'
      } else {
        this.searchForm.createTimeSort = 'desc'
      }
      this.getlist()
    },
    /*
       设置优先级
     */
    setStatus(data, i) {
      const { id, priorityStatus } = data
      axios
        .post('platform/platformWorkOrder/updatePriority', {
          id,
          priorityStatus: Number(priorityStatus),
        })
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.message)
          }
        })
    },
    handlePriorityStatus(data) {
      if (data) {
        return this.priorityStatusList.find(v => {
          return v.value === Number(data)
        }).name
      } else {
        return ''
      }
    },
    addData() {
      this.editForm = JSON.parse(
        JSON.stringify(this.cloneForm),
      )
      this.isEdit = false
      this.editDialog = true
      this.$refs.editForm &&
        this.$refs.editForm.resetFields()
    },
    update(v) {
      getInfo(v.id).then(res => {
        if (res.code === 200) {
          this.editForm = JSON.parse(
            JSON.stringify(res.data),
          )
          this.editForm.module = Number(
            this.editForm.module,
          )
          this.editFlag = !this.editFlag
          this.isEdit = true
          this.editDialog = true
          this.$refs.editForm &&
            this.$refs.editForm.resetFields()
        }
      })
    },
    onChangeModule(item) {
      this.$set(this.editForm, 'moduleName', item.name)
    },
    onSubmit() {
      this.editDialog = false
      this.getlist()
      this.getOrderTree()
    },
    cellClassName({ row, columnIndex, column }) {
      if (
        (row.orderStatus === 'TO_BE_ASSIGN' ||
          row.orderStatus === 'TO_BE_CONFIRMED' ||
          row.orderStatus === 'IN_PROGRESS') &&
        column.field === 'orderTypeTxt'
      ) {
        return 'order-blue'
      }
      if (
        row.orderStatus === 'PRE_HANDLING' &&
        column.field === 'orderTypeTxt' &&
        row.sign === 1
      ) {
        return 'order-red'
      }
      if (
        row.orderStatus === 'PRE_HANDLING' &&
        column.field === 'orderTypeTxt' &&
        row.sign === 0
      ) {
        return 'order-green'
      }
      if (column.field === 'orderTypeTxt') {
        return 'order-grey'
      }
    },
    cellStyle({ row, column }) {
      if (
        (row.orderStatus === 'PRE_HANDLING' ||
          row.orderStatus === 'TO_BE_ASSIGN' ||
          row.orderStatus === 'TO_BE_CONFIRMED' ||
          row.orderStatus === 'IN_PROGRESS') &&
        column.field === 'expectCompleteTime'
      ) {
        if (row.columnRenderColor) {
          return {
            backgroundColor: row.columnRenderColor,
            color: 'white',
          }
        } else {
          return { backgroundColor: 'white' }
        }
      }
    },
    async getOrderTypes() {
      try {
        const res = await getOrderType()
        this.orderTypes = res.data
      } catch (e) {
        console.error(e)
      }
    },
    sizeChange(pageSize) {
      this.centerPageOptions.pageSize = pageSize
      this.getlist()
    },
    onCurrentChange(currentPage) {
      this.centerPageOptions.currentPage = currentPage
      this.getlist()
    },
    async getSystemUserList() {
      try {
        const res = await getSystemUserList()
        this.userList = res.data
      } catch (e) {
        console.error(e)
      }
    },
    // 确认
    async confirm() {
      try {
        await this.$confirm('确定执行吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
      } catch {
        return
      }
      try {
        const res = await workConfirmed(this.currentRowId)
        if (res.code === 200) {
          this.getlist()
          this.getOrderTree()
          this.detailVisible = false
          this.$message.success('操作成功')
        }
      } catch (e) {
        console.error(e)
      }
    },
    async getOrderTree() {
      try {
        const res = await getOrderTree()
        if (res.code === 200) {
          this.treeData = [res.data]
        }
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.statusCode)
        })
      } catch (e) {
        console.error(e)
      }
    },
    fullScreenDisplay(e) {
      if (e.target.nodeName === 'IMG') {
        const uri = e.target.src
        console.log(uri)
        window.open(uri)
      }
    },
    // 修改参与人
    showUpdate(data) {
      const {
        id,
        leaders,
        participator,
        acceptanceUserId,
      } = data
      this.updateForm = {
        id,
        leaders: Number(leaders),
        participator: participator
          ? participator
              .split(',')
              .map(item => Number(item))
          : '',
        acceptanceUserId,
      }
      this.updateVisible = true
    },
    showAssign(item) {
      this.currentRowId = item.id
      this.taskLeader = ''
      this.assignVisible = true
      this.assignForm = JSON.parse(
        JSON.stringify({
          leaders: '',
          participator: [],
          acceptanceUserId: '',
        }),
      )
    },
    // 开始工单
    async startWorkOrder(item) {
      this.ruleForm.estimateCompleteTime = ''
      this.completeVisible = true
      this.rowId = item.id
      this.currentItem = item
    },
    closeForPendingDialog() {
      this.pendingTitle = '不受理'
      this.pendingBtn = 7
      this.pendingVisible = true
      if (this.$refs.pendingForm) {
        this.$refs.pendingForm.resetFields()
      }
    },
    shelveForPendingDialog() {
      this.pendingTitle = '转至待定'
      this.pendingBtn = 9
      this.pendingVisible = true
      if (this.$refs.pendingForm) {
        this.$refs.pendingForm.resetFields()
      }
    },
    turnBackToPending() {
      this.pendingBtn = 1
      TurnBackToPending({
        id: this.detail.id,
        ...this.pendingForm,
      }).then(res => {
        if (res.code === 200) {
          this.pendingVisible = false
          this.detailVisible = false
          this.getOrderTree()
          this.getlist()
        }
      })
    },
    submitPending() {
      this.$refs.pendingForm.validate(v => {
        if (v) {
          try {
            if (this.pendingBtn === 9) {
              ShelveWorkOrder({
                id: this.detail.id,
                ...this.pendingForm,
              }).then(res => {
                if (res.code === 200) {
                  this.pendingVisible = false
                  this.detailVisible = false
                  this.getOrderTree()
                  this.getlist()
                }
              })
            } else if (this.pendingBtn === 1) {
              TurnBackToPending({
                id: this.detail.id,
                ...this.pendingForm,
              }).then(res => {
                if (res.code === 200) {
                  this.pendingVisible = false
                  this.detailVisible = false
                  this.getOrderTree()
                  this.getlist()
                }
              })
            } else {
              PendingWorkOrder({
                id: this.detail.id,
                ...this.pendingForm,
              }).then(res => {
                if (res.code === 200) {
                  this.pendingVisible = false
                  this.detailVisible = false
                  this.getOrderTree()
                  this.getlist()
                }
              })
            }
          } catch (error) {}
        }
      })
    },
    // 待验收完成
    anceing(item) {
      this.acceptVisible = true
      this.currentItem = item
      if (this.$refs.acceptForm) {
        this.$refs.acceptForm.resetFields()
      }
    },
    // 完成验收
    submitAccept() {
      this.$refs.acceptForm.validate(v => {
        if (v) {
          try {
            acceptanWorkOrder({
              id: this.currentItem.id,
              ...this.acceptForm,
            }).then(res => {
              if (res.code === 200) {
                this.acceptVisible = false
                this.getOrderTree()
                this.getlist()
              }
            })
          } catch (error) {}
        }
      })
    },
    submitUpdate() {
      this.$refs.updateForm.validate(v => {
        if (v) {
          try {
            reallocate({
              ...this.updateForm,
              participator: this.updateForm.participator.join(
                ',',
              ),
            }).then(res => {
              if (res.code === 200) {
                this.updateVisible = false
                this.getOrderTree()
                this.getlist()
              }
            })
          } catch (e) {
            console.error(e)
          }
        }
      })
    },
    // 提交分派
    async submitAssign() {
      this.$refs.assignForm.validate(v => {
        if (v) {
          try {
            workAssigned({
              id: this.currentRowId,
              ...this.assignForm,
              participator: this.assignForm.participator.join(
                ',',
              ),
            }).then(res => {
              if (res.code === 200) {
                this.assignVisible = false
                this.getOrderTree()
                this.getlist()
              }
            })
          } catch (e) {
            console.error(e)
          }
        }
      })
    },
    handleNodeClick(data) {
      if (data.statusCode === 'IN_PROGRESS') {
        this.$set(
          this.searchForm,
          'leaderAndParticipator',
          [this.userInfo.id],
        )
      } else {
        this.$set(
          this.searchForm,
          'leaderAndParticipator',
          [],
        )
      }
      this.statusCode = data.statusCode
      this.getlist()
    },
    async getlist() {
      this.loading = true
      const {
        pageSize,
        currentPage,
      } = this.centerPageOptions
      axios
        .post('platform/platformWorkOrder/list_page', {
          pageSize,
          currentPage,
          orderStatus: this.statusCode,
          startTime: this.periodTime && this.periodTime[0],
          endTime: this.periodTime && this.periodTime[1],
          ...this.searchForm,
          leaderAndParticipator: this.searchForm
            .leaderAndParticipator
            ? this.searchForm.leaderAndParticipator.join(
                ',',
              )
            : '',
        })
        .then(res => {
          if (res.code !== 200) return
          this.sourceData = res.data.records
          this.centerPageOptions.total = res.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },
    async archive(item) {
      try {
        await this.$confirm('确定归档吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
      } catch {
        return
      }
      try {
        const res = await archiveWorkOrder(item.id)
        if (res.code === 200) {
          this.getlist()
          this.getOrderTree()
        }
      } catch (e) {
        console.error(e)
      }
    },
    async complete(item) {
      try {
        await this.$confirm('确定完成吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
      } catch {
        return
      }
      try {
        const res = await completeWorkOrder(item.id)
        if (res.code === 200) {
          this.getlist()
          this.getOrderTree()
        }
      } catch (e) {
        console.error(e)
      }
    },
    async close(v) {
      try {
        this.$confirm('确定关闭吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          if (this.statusCode === 'IN_COMPLETE') {
            close(v.id).then(res => {
              if (res.code === 200) {
                this.$message.success('已关闭')
                this.getlist()
                this.getOrderTree()
              }
            })
          } else {
            closeForPending(v.id).then(res => {
              if (res.code === 200) {
                this.$message.success('已关闭')
                this.getlist()
                this.getOrderTree()
              }
            })
          }
        })
      } catch {}
    },
    async resume(v) {
      try {
        const res = await resume(v.id)
        if (res.code === 200) {
          this.$message.success('已恢复')
          this.getlist()
          this.getOrderTree()
        }
      } catch (e) {
        console.error(e)
      }
    },
    async pause(v) {
      try {
        const res = await pause(v.id)
        if (res.code === 200) {
          this.$message.success('已暂停')
          this.getlist()
          this.getOrderTree()
        }
      } catch (e) {
        console.error(e)
      }
    },
    reject(v) {
      try {
        this.$confirm('确定驳回吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          reject(v.id).then(res => {
            if (res.code === 200) {
              this.$message.success('已驳回')
              this.getlist()
              this.getOrderTree()
            }
          })
        })
      } catch {}
    },
    async submitTime() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          startWorder(
            this.rowId,
            this.ruleForm.estimateCompleteTime,
          ).then(res => {
            if (res.code === 200) {
              this.getlist()
              this.getOrderTree()
              this.completeVisible = false
            }
          })
        }
      })
    },
    async reply() {
      if (!this.textarea) {
        return this.$message.warning('请输入内容')
      }

      try {
        this.detailLoading = true
        const res = await replyTocustomer(
          this.currentRowId,
          this.textarea,
        )
        if (res.code === 200) {
          this.showDetail(this.detail)
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.detailLoading = false
      }
    },
    getimgsrc(htmlstr) {
      const reg = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>)/g
      const arr = []
      let tem = 0
      while ((tem = reg.exec(htmlstr))) {
        arr.push(tem[2]) // eslint-disable-line
      }
      return arr
    },
    closeViewer() {
      this.imgPreviewUrl = ''
      document.documentElement.style.overflowY = 'auto'
    },
    hanldeImage(event) {
      if (
        event.target.nodeName === 'IMG' ||
        event.target.nodeName === 'img'
      ) {
        this.imgPreviewUrl = decodeURIComponent(
          event.target.currentSrc,
        )
        const subscript = this.imgList.indexOf(
          this.imgPreviewUrl,
        )
        this.subscript = subscript > -1 ? subscript : 0
        document.documentElement.style.overflowY = 'hidden'
      }
    },
    saveRemark() {
      axios
        .post('platform/platformWorkOrder/updateRemark', {
          id: this.currentRowId,
          remark: this.detail.remark,
        })
        .then(res => {
          if (res.code === 200) {
            this.$message.success('保存成功')
          }
        })
    },
    async showDetail(item) {
      this.currentRowId = item.id
      await axios
        .get(`platform/platformWorkOrder/get?id=${item.id}`)
        .then(res => {
          if (res.code === 200) {
            this.detail = res.data
            this.imgList = Object.values(
              this.getimgsrc(this.detail.content),
            )
            const subscript = this.imgList.indexOf(
              this.imgPreviewUrl,
            )
            this.subscript = subscript > -1 ? subscript : 0
          } else {
            this.detailLoading = false
          }
        })
      await axios
        .get(
          `platform/platformWorkOrderChat/getByWorkOrder?workOrderId=${item.id}`,
        )
        .then(res => {
          if (res.code === 200) {
            this.chatRecord = res.data
          } else {
            this.detailLoading = false
          }
        })
      this.detailVisible = true
      this.textarea = ''
    },
  },
}
</script>
<style lang='scss' scoped>
.wraper {
  height: 100%;
  display: flex;
  overflow: hidden;

  &::v-deep {
    .order-blue {
      background-color: #409eff !important;
      color: #fff;
    }

    .order-red {
      background-color: #f56c6c !important;
      color: #fff;
    }

    .order-green {
      background-color: #67c23a !important;
      color: #fff;
    }

    .order-orange {
      background-color: #e6a23c !important;
      color: #fff;
    }

    .order-grey {
      background-color: #909399 !important;
      color: #fff;
    }

    .el-icon-info::before {
      position: absolute;
      right: -13px;
      top: 50%;
      transform: translateY(-50%);
      color: #f56c6c;
      cursor: pointer;
    }

    .el-tree-node {
      font-size: 14px;
    }

    .high-row {
      background-color: #1565c0;
    }

    .el-tree-node__content {
      height: 32px;
      padding: 4px 0px;
      padding-left: 10px !important;
    }

    .el-tree-node__children .el-tree-node.is-current {
      .el-tree-node__content {
        position: relative;
        color: #1565c0;
        font-size: 16px;
      }

      .el-tree-node__content::before {
        position: absolute;
        content: '';
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        display: block;
        background-color: #1565c0;
      }
    }
  }
}

.page_left {
  width: 200px;
  min-width: 200px;
  background: #fff;
  border-radius: 5px;
  margin-right: 10px;
}

.page_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}

.search_form {
  margin-top: 5px;
  margin-left: 10px;
}

.search_form > .el-form-item {
  margin-bottom: 5px;
}

.content {
  max-height: 61vh;
  overflow: auto;
}

.detail_list {
  padding-top: 10px;
  background-color: #efefef;
}

.detail_list .item {
  display: inline-block;
  width: 30%;
  line-height: 24px;
  margin-bottom: 10px;
}

.detail_list .item .label {
  display: inline-block;
  color: #999;
  width: 100px;
  text-align: right;
  margin-right: 5px;
}

.detail_list .item .value {
  color: #222;

  &::v-deep img {
    width: 100%;
  }
}

.item_wrap {
  background: #efefef;
  padding-top: 10px;
}

.detail_list .item .label {
  display: inline-block;
  color: #999;
  width: 100px;
  text-align: right;
  margin-right: 5px;
}

.detail_list .item .value {
  color: #222;
}

.form_item::v-deep .el-radio {
  margin-right: 13px;
}

.form_item::v-deep .el-radio svg {
  vertical-align: text-bottom;
}

.detail_btn {
  display: inline-block;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #fff;
  padding: 3px 15px;
  cursor: pointer;
  vertical-align: bottom;
}

.detail_btn + .detail_btn {
  margin-left: 10px;
}

.table-wrap {
  background: #fff;
  flex: 1;
  overflow: hidden;
  width: 100%;
}

.step-bar {
  margin-bottom: 10px;
  display: flex;
}

.step {
  position: relative;
  flex: 1;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  background-color: #cacaca;
  z-index: 1;
  text-align: center;
}

.step,
.step span {
  display: inline-block;
}

.step span {
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-before:before {
  left: -16px;
  z-index: 8;
  border-top: 16px solid #cacaca;
  border-left: 16px solid transparent !important;
  border-bottom: 16px solid #cacaca;
}

.step-after:after {
  width: 22px;
  height: 32px;
  right: 0;
  z-index: 9;
  border-top: 16px solid transparent !important;
  border-left: 16px solid #cacaca;
  border-bottom: 16px solid transparent !important;
  background-color: #fff;
}

.step-after:after,
.step-before:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  box-sizing: border-box;
}

.step-active {
  background-color: #ff6a00;
}

.step-active:after,
.step-active:before {
  border-color: #ff6a00;
}

.step-pass {
  background-color: rgba(255, 106, 0, 0.5);
}

.step-pass:after,
.step-pass:before {
  border-color: rgba(255, 106, 0, 0.5);
}

.record {
  border: 1px solid #efefef;
  margin-top: 10px;
}

.record .title {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  padding-left: 10px;
  background: #efefef;
  border-left: 2px solid #ff6a00;
}

.chat_content {
  padding: 10px;
}

.chat_item {
  margin-bottom: 10px;
}

.chat_item.chat_right {
  text-align: right;
}

.chat_warp {
  display: flex;
}

.chat_right .chat_warp {
  justify-content: end;
}

.chat_icon {
  width: 30px;
  height: 30px;
  background: #efefef;
  border-radius: 50%;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
}

.empty-data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.dialogDetail {
  &::v-deep .el-dialog {
    margin-top: 9vh !important;
  }
}

.fullscreen {
  width: 100%;
}

.no_fullscreen {
  //width: 1300px;
}

.detail_list {
  &::v-deep {
    table {
      border-right: 1px solid #000000;
      border-bottom: 1px solid #000000;
      text-align: center;
      width: 100% !important;
      border-spacing: 0;
    }

    table th {
      border-left: 1px solid #000000;
      border-top: 1px solid #000000;
      padding: 6px;
    }

    table td {
      border-left: 1px solid #000000;
      border-top: 1px solid #000000;
      padding: 6px;
      height: 20px;
    }
  }
}

.description {
  display: flex;

  & p:not(:first-child) {
    margin-left: 6px;
  }
}

.priorityStatus-select {
  height: 30px;

  &::v-deep .el-input__inner {
    height: 30px;
  }

  &::v-deep .el-input__suffix {
    top: 4px;
  }
}
</style>
