<!--
 * @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: 100px'
          >
            <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: 120px'
            v-model='searchForm.orderNo'
            placeholder='请输入'
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label='工单标题'>
          <el-input
            style='width: 120px'
            v-model='searchForm.title'
            placeholder='请输入'
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label='工单类型'>
          <el-select
            v-model='searchForm.orderType'
            style='width: 120px'
            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='负责人'>
          <el-select
            style='width: 120px'
            placeholder='请选择'
            clearable
            v-model='searchForm.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='参与人'>
          <el-select
            style='width: 120px'
            placeholder='请选择'
            clearable
            v-model='searchForm.participator'
          >
            <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: 120px'
            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: 120px'
            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: 120px'
            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
      title='详情'
      :close-on-click-modal='false'
      :visible.sync='detailVisible'
      width='1200px'
      @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> -->
      <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>
            <p
              class='item'
              style='width: 100%; display: flex'
            >
              <span class='label'>备注</span>
              <span
                style='flex: 1; display: inline-block;padding:0 3%;'
                class='value'
                v-html='detail.remark'
              ></span>
            </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'
            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
          >
        </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='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='不受理'
      :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,
  startWorder,
  archiveWorkOrder,
  completeWorkOrder,
  replyTocustomer,
  acceptanWorkOrder,
  PendingWorkOrder,
  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 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')
    var 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
        },
      },
      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,
      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: {},
      imgPreviewUrl: '',
      subscript: 0,
      imgList: [],
    }
  },
  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: 'orderNo',
          width: 110,
        },
        {
          label: '工单模块',
          key: 'moduleName',
          width: 110,
          align: 'left',
        },
        {
          label: '工单类型',
          key: 'orderTypeTxt',
          width: 80,
        },
        {
          label: '工单状态',
          key: 'orderStatusTxt',
          width: 80,
        },
        {
          label: '优先级',
          key: 'priorityStatus',
          width: 120,
          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: 'fromBusiness',
          width: 80,
        },
        {
          label: '创建人',
          key: 'fromUserName',
          width: 80,
        },
        {
          label: '负责人',
          key: 'leaderNames',
          width: 80,
        },
        {
          label: '参与人',
          key: 'participatorName',
          width: 80,
        },
        {
          label: '验收人',
          key: 'acceptanceUserName',
          width: 80,
        },
        {
          label: '验收意见',
          key: 'acceptanceContent',
          width: 80,
        },
        {
          label: '创建时间',
          key: 'createTime',
          sortable: true,
          width: 130,
        },
        {
          label: '开始时间',
          key: 'startTime',
          width: 130,
        },
        {
          label: '期望完成时间',
          key: 'expectCompleteTime',
          width: 130,
        },
        {
          label: '预计完成时间',
          key: 'estimateCompleteTime',
          width: 130,
        },
        {
          label: '验收时间',
          key: 'acceptanceTime',
          width: 130,
        },
        {
          label: '完成时间',
          key: 'completeTime',
          width: 130,
        },
        {
          label: '用户评价',
          key: 'evaluations',
          width: 140,
        },
        {
          label: '不受理原因',
          key: 'closeReason',
          width: 130,
        },
        {
          label: '操作',
          fixed: 'right',
          width: 120,
          align: 'center',
          render: item => (
            <span>
              {(item.orderStatus === 'PRE_HANDLING' ||
                item.orderStatus === 'TO_BE_ASSIGN' ||
                item.orderStatus === 'TO_BE_CONFIRMED') && (
                <span title='修改' class='icon-view'>
                    <img
                      width='24'
                      height='24'
                      src={updateWork}
                      onClick={() => this.update(item)}
                    />
                  </span>
              )}
              {
                <span
                  title='详情'
                  class='icon-view icon-tools-view'
                >
                  <i
                    class='el-icon-tickets'
                    onClick={() => this.showDetail(item)}
                  ></i>
                </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={pauseWork}
                    onClick={() => this.pause(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' &&
                Number(item.leaders) ===
                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>
              )}
            </span>
          ),
        },
      ]
    },
  },
  methods: {
    // 排序
    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,
                  }) {
      if (
        (row.orderStatus === 'TO_BE_ASSIGN' ||
          row.orderStatus === 'TO_BE_CONFIRMED' ||
          row.orderStatus === 'IN_PROGRESS') &&
        columnIndex === 4
      ) {
        return 'order-blue'
      }
      if (
        row.orderStatus === 'PRE_HANDLING' &&
        columnIndex === 4 &&
        row.sign === 1
      ) {
        return 'order-red'
      }
      if (
        row.orderStatus === 'PRE_HANDLING' &&
        columnIndex === 4 &&
        row.sign === 0
      ) {
        return 'order-green'
      }
      if (columnIndex === 4) {
        return 'order-grey'
      }
    },
    cellStyle({
                row,
                columnIndex,
              }) {
      if (
        (row.orderStatus === 'PRE_HANDLING' ||
          row.orderStatus === 'TO_BE_ASSIGN' ||
          row.orderStatus === 'TO_BE_CONFIRMED' ||
          row.orderStatus === 'IN_PROGRESS') &&
        columnIndex === 15
      ) {
        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)
      }
    },
    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.pendingVisible = true
      if (this.$refs.pendingForm) {
        this.$refs.pendingForm.resetFields()
      }
    },
    submitPending() {
      this.$refs.pendingForm.validate(v => {
        if (v) {
          try {
            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) {
          }
        }
      })
    },
    // 提交分派
    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,
          'leaders',
          this.userInfo.id,
        )
        this.$set(
          this.searchForm,
          'participator',
          this.userInfo.id,
        )
      } else {
        this.$set(
          this.searchForm,
          'leaders',
          '',
        )
        this.$set(
          this.searchForm,
          'participator',
          '',
        )
      }
      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,
        })
        .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'
      }
    },
    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;
}

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

.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>
