<!--
 * @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"
        highlight-current
        :node-key="'statusCode'"
        :expand-on-click-node="false"
        current-node-key="PRE_HANDLING"
        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 label="创建时间">
          <choose-time-period
            @change="getStatusTree"
            v-model="periodTime"
          ></choose-time-period>
        </el-form-item>
        <el-form-item label="工单编号">
          <el-input
            style="width: 120px"
            v-model="searchForm.taskNumber"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="工单类型">
          <el-select
            v-model="searchForm.taskType"
            style="width: 120px"
            value-key=""
            placeholder="请选择"
            clearable
            filterable
          >
            <el-option
              v-for="(type, index) in taskTypes"
              :key="index"
              :label="type.name"
              :value="type.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工单标题">
          <el-input
            style="width: 120px"
            v-model="searchForm.taskTitle"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-cascader
            clearable
            style="width: 120px"
            v-model="searchForm.taskCreator"
            :props="{ emitPath: false }"
            :options="deptStaff"
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="负责人">
          <el-cascader
            clearable
            style="width: 120px"
            v-model="searchForm.taskLeader"
            :props="{ emitPath: false }"
            :options="deptStaff"
            :show-all-levels="false"
          ></el-cascader>
        </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="primary" size="mini"
            >确认</el-button
          >
        </el-form-item>
        <el-form-item v-if="statusCode === 'TO_BE_CONFIRMED'">
          <el-button type="success" size="mini"
            >开始</el-button
          >
        </el-form-item>
        <el-form-item v-if="statusCode === 'IN_PROGRESS'">
          <el-button type="success" size="mini"
            >关闭</el-button
          >
        </el-form-item>
        <el-form-item v-if="statusCode === 'TO_BE_ASSIGN'">
          <el-button type="success" size="mini" @click="showAssign">指派给</el-button>
        </el-form-item>
        <el-form-item v-if="statusCode === 'PRE_HANDLING'">
          <el-button type="primary" size="mini"
            >评价</el-button
          >
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="danger" size="mini"
            >作废</el-button
          >
        </el-form-item> -->
        <!-- <el-form-item>
          <el-button type="danger" size="mini"
            >删除</el-button
          >
        </el-form-item> -->
        <el-form-item v-if="statusCode !== 'PRE_HANDLING'">
          <el-button
            type="warning"
            size="mini"
            @click="rejectTask"
            >驳回</el-button
          >
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" size="mini"
            >关闭</el-button
          >
        </el-form-item> -->
        <el-form-item label v-if="statusCode === 'CLOSED'">
          <el-button
            @click="archive()"
            type="success"
            size="mini"
          >
            归档
          </el-button>
        </el-form-item>
      </el-form>
      <div class="table-wrap" v-loading="loading">
        <table-view
          :tableColumns="tableColumns"
          :sourceData="sourceData"
          selection
          :selectionChange="selectionChange"
        ></table-view>
      </div>
      <div class="pagination">
        <el-pagination
          layout="sizes, total, prev, pager, next, jumper"
          background
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @size-change="sizeChange"
          @current-change="onCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 编辑 -->
    <edit
      :editDialog.sync="editDialog"
      @onSubmit="onSubmit"
      :selectOptions="selectOptions"
      :editForm="editForm"
      :taskTypes="taskTypes"
      :isEdit="isEdit"
      :employee="deptStaff"
      ref="edit"
    ></edit>

    <!-- 详情 -->
    <el-dialog
      title="详情"
      :visible.sync="detailVisible"
      width="900px"
    >
      <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.taskTitle
            }}</span>
          </p>
          <p class="item">
            <span class="label">工单编码</span>
            <span class="value">{{
              detail.taskNumber
            }}</span>
          </p>
          <p class="item">
            <span class="label">工单类型</span>
            <span class="value">
              {{ detail.taskType && detail.taskType.desc }}
            </span>
          </p>

          <p class="item">
            <span class="label">工单状态</span>
            <span class="value">
              {{
                detail.taskStatus && detail.taskStatus.desc
              }}
            </span>
          </p>
        </div>
        <div
          style="padding: 5px; overflow: auto"
          v-html="detail.taskContent"
          @click="fullScreenDisplay"
        ></div>
        <div style="margin-top: 10px">
          <div>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea"
            >
            </el-input>
          </div>
          <div style="margin-top: 10px">
            <el-button size="mini" type="success"
              >确认执行</el-button
            >
            <el-button size="mini" type="primary"
              >回复</el-button
            >
          </div>
        </div>
      </div>
      <span slot="footer">
        <!-- 确认 -->
        <span
          @click="confimTask(detail)"
          class="detail_btn"
          style="background: green"
          title="确认"
          v-if="
            this.statusCode !== '-1' &&
            detail.taskStatus &&
            detail.taskStatus.name === 'HAS_NOT_CONFIRM' &&
            (employeeId == detail.taskLeader ||
              (detail.taskCompleteUserId &&
                detail.taskCompleteUserId.indexOf(
                  employeeId,
                ) !== -1))
          "
        >
          <i
            class="el-icon-video-play"
            style="font-size: 18px"
          ></i>
          &nbsp;确认
        </span>
        <!-- 开始 -->
        <span
          @click="startTask(detail)"
          class="detail_btn"
          style="background: green"
          title="开始"
          v-if="
            this.statusCode !== '-1' &&
            detail.taskStatus &&
            detail.taskStatus.name === 'HAS_NOT_STARTED' &&
            (employeeId == detail.taskLeader ||
              (detail.taskCompleteUserId &&
                detail.taskCompleteUserId.indexOf(
                  employeeId,
                ) !== -1))
          "
        >
          <i class="el-icon-video-play"></i>
          &nbsp;开始
        </span>
        <!-- 终止 -->
        <span
          class="detail_btn"
          style="background: red"
          @click="cadence(detail)"
          title="终止"
          v-if="
            employeeId === detail.taskCreator &&
            detail.taskStatus &&
            (detail.taskStatus.name === 'PROCESSING' ||
              detail.taskStatus.name === 'REJECTED_ING')
          "
        >
          <svg
            t="1627628609045"
            style="
              margin-top: 3px;
              vertical-align: text-bottom;
            "
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2698"
            width="18"
            height="18"
          >
            <path
              d="M509.41569707 75.874304c-238.88418133 0-432.5376 193.65341867-432.5376 432.5376s193.65341867 432.5376 432.5376 432.5376c107.184128 0 205.26312107-38.98627413 280.8283136-103.55234133a435.09787307 435.09787307 0 0 0 17.56255573-15.8564352c10.69438293-8.75342507 19.63567787-18.8809216 19.63567787-33.1808768a37.70395307 37.70395307 0 0 0-9.74411094-25.346048l0.01201494-0.01201494-0.29709654-0.29709653a38.1026304 38.1026304 0 0 0-2.162688-2.162688L285.3830656 230.67579733c61.24776107-49.4665728 139.1722496-79.10741333 224.03263147-79.10741333 197.07876693 0 356.84352 159.76475307 356.84352 356.84352 0 28.71022933-3.39039573 56.6296576-9.79326294 83.37708373l0.0425984 0.01419947a37.91694507 37.91694507 0 0 0-1.1370496 9.22309973c0 20.9027072 16.9443328 37.84704 37.84704 37.84704 17.3146112 0 31.9029248-11.63154773 36.40415574-27.50327466l0.00218453-0.00436907 0.0065536-0.0294912c0.29709653-1.05294507 0.55268693-2.1233664 0.75912533-3.211264a429.9194368 429.9194368 0 0 0 4.554752-21.7546752c4.60281173-25.28815787 7.00689067-51.34199467 7.00689067-77.9583488 0.00109227-238.88418133-193.6523264-432.5376-432.53650773-432.5376z m-356.84352 432.5376c0-84.95213227 29.704192-162.95417173 79.26797653-224.23251627l501.82116693 501.82116694c-61.27834453 49.56378453-139.2934912 79.25377707-224.24562346 79.25377706-197.0798592 0.00109227-356.84352-159.76256853-356.84352-356.84242773z"
              fill="#fff"
              p-id="2699"
            ></path>
          </svg>
          &nbsp;终止
        </span>
        <!-- 完成 -->
        <span
          class="detail_btn"
          style="background: green"
          title="完成"
          @click="operation('1', detail)"
          v-if="
            this.statusCode !== '-1' &&
            detail.taskStatus &&
            detail.taskStatus.name === 'PROCESSING' &&
            (employeeId == detail.taskLeader ||
              (detail.taskCompleteUserId &&
                detail.taskCompleteUserId.indexOf(
                  employeeId,
                ) !== -1))
          "
        >
          <i class="el-icon-circle-check"></i>
          完成
        </span>
        <!-- 验收 -->
        <span
          class="detail_btn"
          @click="operation('2', detail)"
          style="background: green"
          title="验收"
          v-if="
            this.statusCode !== '-1' &&
            detail.taskStatus &&
            detail.taskStatus.name === 'FOR_ACCEPTANCE' &&
            employeeId === detail.taskAcceptanceUser
          "
        >
          <i class="el-icon-s-claim"></i>
          &nbsp;验收
        </span>
        <!-- 删除 -->
        <span
          class="detail_btn"
          @click="remove(detail)"
          style="background: green"
          title="删除"
          v-if="
            this.statusCode !== '-1' &&
            employeeId === detail.taskCreator &&
            detail.taskStatus &&
            detail.taskStatus.name === 'NOT_YET_ASSIGNED' &&
            !detail.reasonForReject
          "
        >
          <i class="el-icon-delete"></i>
          &nbsp;删除
        </span>

        <!-- 指派给 -->
        <span
          class="detail_btn"
          @click="showAssign(detail)"
          style="background: green"
          title="指派给"
          v-if="
            this.statusCode !== '-1' &&
            detail.taskStatus &&
            detail.taskStatus.name === 'NOT_YET_ASSIGNED'
          "
        >
          <svg
            t="1629105857363"
            style="
              vertical-align: middle;
              margin-bottom: 3px;
            "
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1916"
            width="18"
            height="18"
          >
            <path
              d="M865.83 328.187H545.556l21.133-26.23a34.055 34.055 0 0 0 4.407-7.141c13.433-30.053 25.274-91.855-15.716-132.846-46.246-46.167-127.854-32.84-169.003 22.115L286.08 305.329c-17.894 11.336-74.76 48.874-105.608 86.944l-105.394 6.292c-17.203 1.036-30.636 15.318-30.636 32.574v320.008c0 17.654 14.017 32.096 31.698 32.6l122.439 3.478 270.735 86.998c3.345 1.62 33.397 15.822 68.068 15.822h0.053c40.725 0 72.741-19.592 90.528-56.334a102.65 102.65 0 0 0 7.805-27.212c23.68-0.716 63.343-11.92 82.192-74.732 6.477-23.92 6.902-46.511 1.38-65.758 23.31-12.584 38.654-34.672 42.69-63.583 2.6-18.476 4.034-40.431-2.655-61.139H863.39c57.82 0 116.173-31.83 116.173-102.953-0.002-82.166-73.22-107.944-113.732-110.147z m-3.505 147.845H620.633c-17.999 0-32.6 14.601-32.6 32.627 0 18.025 14.601 32.627 32.6 32.627 54.902 0 69.821 10.327 73.697 14.76 4.832 5.549 5.84 17.787 3.132 37.326-1.009 7.169-2.708 19.194-28.777 19.194-3.982 0-6.903-0.344-7.38-0.424-17.257-2.974-34.406 8.707-37.645 26.362-3.132 17.628 8.496 34.512 26.07 37.857 2.867 0.531 3.982 1.514 4.99 3.16 3.186 5.043 5.15 17.282 0.532 34.3-8.283 27.476-18.69 27.476-22.088 27.476-7.434 0-15.451-3.796-17.575-5.07-12.265-7.7-27.875-6.133-38.76 3.372-10.884 9.478-14.017 25.38-8.017 38.521 0.265 0.558 6.212 13.91-0.053 28.194-6.371 13.141-15.451 18.504-31.327 18.504h-0.053c-19.858 0-39.344-9.186-43.697-10.939l-279.496-90.156c-2.974-0.956-6-1.487-9.132-1.567l-95.413-2.707V461.882l90.156-5.39c10.62-0.637 20.283-6.45 25.858-15.53 15.663-25.592 69.237-64.485 99.289-82.988 3.027-1.885 5.788-4.248 8.017-7.009l104.599-126.5c19.38-25.752 52.405-35.575 71.68-16.354 15.981 16.008 7.008 46.857 3.503 56.838l-60.795 75.397c-7.91 9.769-9.451 23.202-4.035 34.538a32.576 32.576 0 0 0 29.415 18.557l386.43-0.08c8.443 0.61 50.6 5.602 50.6 44.972 0 32.787-31.857 37.699-52.033 37.699z"
              fill="#fff"
              p-id="1917"
            ></path>
          </svg>
          &nbsp;指派
        </span>
        <!-- 作废 -->
        <span
          class="detail_btn"
          @click="invalid(detail)"
          style="background: red"
          title="作废"
          v-if="
            this.statusCode !== '-1' &&
            employeeId === detail.taskCreator &&
            detail.taskStatus &&
            detail.taskStatus.name === 'NOT_YET_ASSIGNED' &&
            detail.reasonForReject
          "
        >
          <svg
            t="1635313137975"
            style="
              margin-left: 3px;
              margin-top: 3px;
              margin-bottom: 1px;
              vertical-align: text-top;
            "
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4954"
            width="18"
            height="18"
          >
            <path
              d="M526.5 385.2c-17.6 0-32-14.3-32-31.9L493.9 63c0-12.8 7.6-24.4 19.4-29.5 11.8-5.1 25.4-2.6 34.7 6.2l305 290.2c9.5 9 12.5 22.9 7.7 35.1-4.9 12.2-16.6 20.1-29.7 20.1l-304.5 0.1z m31.6-247.6l0.4 183.6 192.5-0.1-192.9-183.5z"
              fill="#ffffff"
              p-id="4955"
            ></path>
            <path
              d="M799.2 353.9v469.3c0 27.9-11 54.2-30.9 74.1s-46.2 30.9-74.1 30.9H200.3c-27.9 0-54.2-11-74.1-30.9s-30.9-46.2-30.9-74.1V200.3c0-27.9 11-54.2 30.9-74.1 19.9-19.9 46.2-30.9 74.1-30.9h322.1v-64H200.3c-93.2 0-169 75.8-169 169v622.9c0 93.2 75.8 169 169 169h493.9c93.2 0 169-75.8 169-169V353.9h-64z"
              fill="#ffffff"
              p-id="4956"
            ></path>
            <path
              d="M624 497.1L314.9 806.2c-12.6 12.6-33.3 12.6-46 0-12.6-12.6-12.6-33.3 0-46L578 451.1c12.6-12.6 33.3-12.6 46 0 12.7 12.7 12.7 33.3 0 46z"
              fill="#ffffff"
              p-id="4957"
            ></path>
            <path
              d="M267 490.2l317 317c12.6 12.6 33.3 12.6 46 0 12.6-12.6 12.6-33.3 0-46l-317-317c-12.6-12.6-33.3-12.6-46 0-12.6 12.7-12.6 33.4 0 46z"
              fill="#ffffff"
              p-id="4958"
            ></path>
          </svg>
          &nbsp;作废
        </span>
        <!-- 驳回 -->
        <span
          class="detail_btn"
          @click="rejectTask(detail)"
          style="background: red"
          title="驳回"
          v-if="
            this.statusCode !== '-1' &&
            (employeeId === detail.taskLeader ||
              (detail.taskCompleteUserId &&
                detail.taskCompleteUserId.indexOf(
                  employeeId,
                ) !== -1)) &&
            detail.taskStatus &&
            (detail.taskStatus.name === 'HAS_NOT_CONFIRM' ||
              detail.taskStatus.name === 'HAS_NOT_STARTED')
          "
        >
          <i class="el-icon-s-claim"></i>
          &nbsp;驳回
        </span>
      </span>
    </el-dialog>

    <!-- 指派 -->
    <el-dialog
      title="指派给"
      :close-on-click-modal="false"
      :visible.sync="assignVisible"
      width="300px"
    >
      <el-cascader
        style="width: 100%"
        size="small"
        v-model="taskLeader"
        :props="{ emitPath: false, multiple: true }"
        :options="deptStaff"
        :show-all-levels="false"
      ></el-cascader>
      <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>
  </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 } from '@/common/api/order'
import { emptyArray, getIds } from '../../utils/commonUtil'
import { mapState } from 'vuex'

export default {
  name: 'task_center',
  mixins: [pagination],
  components: {
    Edit,
    ChooseTimePeriod,
    tableView,
  },
  data() {
    const userInfo = localStorage.getItem('userinfo')
    let employeeId
    if (userInfo) {
      employeeId = JSON.parse(userInfo).employeeId
    }

    return {
      loading: false,
      pickerOption: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7
        },
      },
      textarea: '',
      centerPageOptions: {
        pageSize: 100,
        currentPage: 1,
        total: 0,
      },
      planPageOptions: {
        pageSize: 100,
        currentPage: 1,
        total: 0,
      },
      taskLeader: '',
      assignVisible: false,
      expectedEndVisible: false,
      expectedEndTime: '',
      periodTime: [],
      assignMe: null,
      planCycle: '',
      terminationVisible: false,
      timeConsuming: '',
      terminationReason: '',
      selections: [],
      statusTree: [],
      is_tab: '1',
      statusCode: '',
      commentsForm: {},
      completeForm: {},
      searchForm: { timeProp: 'create_time' },
      expectedStartForm: {
        expectedStartDate: '',
        planCycle: '',
      },
      addrules: {
        expectedStartDate: [
          {
            required: true,
            message: '请选择预计开始时间',
            trigger: 'blur',
          },
        ],
        planCycle: [
          {
            required: true,
            message: '请输入预计工时',
            trigger: 'blur',
          },
        ],
      },
      isEdit: false,
      sourceData: [],
      planData: [],
      currentRowId: '',
      editDialog: false,
      editForm: {},
      commentsVisible: false,
      selectOptions: {
        emergencyLevel: [],
        importanceLevel: [],
        priorityLevel: [],
        taskCompletion: [],
        taskRating: [],
        taskStatus: [],
        taskType: [],
      },
      detail: {},
      detailVisible: false,
      updateVisible: false,
      employeeId,
      iconClasses: [
        'icon-rate-face-1',
        'icon-rate-face-2',
        'icon-rate-face-3',
      ],
      expectedStartDate: '',
      confimVisible: false,
      defauntIndex: 0,
      taskTypes: [],
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'statusName',
      },
      total: 0,
      pageSize: 100,
      currentPage: 1,
    }
  },
  mounted() {
    this.getOrderTree()
    this.getlist()
  },
  computed: {
    ...mapState(['deptStaff']),
    tableColumns() {
      // const employeeId = this.employeeId
      return [
        { label: '工单编号', key: 'orderNo', width: 90 },
        {
          label: '工单模块',
          key: 'taskModuleName',
          width: 110,
          align: 'left',
        },
        {
          label: '工单类型',
          key: 'orderTypeTxt',
          width: 80,
        },
        {
          label: '工单标题',
          key: 'title',
          minWidth: 120,
          align: 'left',
        },
        {
          label: '负责人',
          key: 'taskLeaderName',
          width: 80,
        },
        {
          label: '执行人',
          key: 'taskCompleteUserName',
          width: 80,
        },
        {
          label: '验收人',
          key: 'taskAcceptanceUserName',
          width: 80,
        },
        { label: '抄送人', key: 'ccName', width: 80 },
        {
          label: '创建人',
          key: 'taskCreatorName',
          width: 80,
        },

        {
          label: '工单状态',
          key: 'orderStatusTxt',
          width: 80,
        },

        {
          label: '创建时间',
          key: 'createTime',
          width: 130,
        },
        {
          label: '操作',
          fixed: 'right',
          width: 100,
          align: 'left',
          render: (item) => (
            <span>
              <span
                title="详情"
                class="icon-view icon-tools-view"
              >
                <i
                  class="el-icon-tickets"
                  onClick={() => this.showDetail(item)}
                ></i>
              </span>
              {
                <span
                  title="评价"
                  class="icon-view icon-tools-view"
                >
                  <i
                    class="el-icon-chat-dot-square"
                    onClick={() =>
                      this.operation('2', item)
                    }
                  ></i>
                </span>
              }
            </span>
          ),
        },
      ]
    },
    planTableColumns() {
      return [
        { label: '工单编号', key: 'taskNumber', width: 90 },
        {
          label: '工单模块',
          key: 'taskModuleName',
          width: 120,
          align: 'left',
        },
        {
          label: '工单类型',
          key: 'type',
          width: 120,
          render: (item) => item.taskType?.desc,
        },
        {
          label: '工单标题',
          key: 'taskTitle',
          width: 425,
          align: 'left',
        },
        {
          label: '紧急程度',
          key: 'emergencyLevel',
          width: 90,
          render: (item) => (
            <svg
              t="1627697200171"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="629"
              width="18"
              style="vertical-align: middle;"
              height="18"
            >
              <title>{item.emergencyLevel?.desc}</title>
              <path
                fill={this.setIconColor(
                  item.emergencyLevel?.value,
                )}
                d="M444.970667 850.090667l151.978666-64.512a85.290667 85.290667 0 0 1-151.978666 64.512z m231.765333-760.746667c89.002667 48.597333 155.818667 111.018667 199.765333 187.178667 43.946667 76.117333 64.64 165.205333 62.250667 266.581333a32 32 0 0 1-64-1.536c2.133333-90.069333-15.872-167.552-53.674667-233.045333-37.802667-65.536-95.957333-119.850667-175.018666-163.029334a32 32 0 1 1 30.72-56.192z m-390.4 188.629333a248.490667 248.490667 0 0 1 324.266667 117.162667l4.181333 8.917333 54.954667 123.392 72.448 62.72c3.968 3.413333 7.381333 7.381333 11.349333 13.824l2.517333 4.906667a53.333333 53.333333 0 0 1-27.178666 70.357333L288.213333 874.24A53.333333 53.333333 0 0 1 213.333333 825.472l-0.042666-99.968-52.992-119.082667A248.405333 248.405333 0 0 1 286.293333 277.973333z m380.288-34.986666c41.258667 22.442667 74.325333 55.210667 98.816 97.621333 24.490667 42.453333 36.309333 87.466667 35.157333 134.442667a32 32 0 1 1-64-1.578667c0.853333-35.029333-7.893333-68.437333-26.581333-100.864-18.688-32.384-43.264-56.661333-74.026667-73.472a32 32 0 0 1 30.634667-56.192z"
                p-id="630"
              ></path>
            </svg>
          ),
        },
        {
          label: '重要程度',
          key: 'importanceLevel',
          width: 90,
          render: (item) => (
            <svg
              t="1627697337193"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="937"
              width="18"
              style="vertical-align: middle;"
              height="18"
            >
              <title>{item.importanceLevel?.desc}</title>
              <path
                fill={this.setIconColor(
                  item.importanceLevel?.value,
                )}
                d="M858.1 315l-119 85.9c-15.8 11.4-37.8 7.7-49-8.2L541.6 181.8c-13.9-19.8-43.3-19.7-57.2 0.1L337.8 392.5c-11.1 15.9-33.1 19.7-48.9 8.4l-119.6-85.5c-25.5-18.2-60.2 3.8-54.6 34.6l68.9 380c3 16.6 17.5 28.7 34.3 28.7h598.3c17.1 0 31.7-12.4 34.4-29.3l62.3-380.7c5.1-30.5-29.6-51.9-54.8-33.7zM513.7 620.6c-43.1 0-78-34.9-78-78s34.9-78 78-78 78 34.9 78 78-34.9 78-78 78z"
                p-id="938"
              ></path>
            </svg>
          ),
        },
        {
          label: '优先级',
          key: 'priorityLevel',
          width: 90,
          render: (item) => (
            <svg
              t="1627697676079"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1266"
              width="18"
              style="vertical-align: middle;"
              height="18"
            >
              <title>{item.priorityLevel?.desc}</title>
              <path
                d="M215.4 160.6H177c-8.9 0-16 7.2-16 16V849c0 8.9 7.2 16 16 16h38.4c8.9 0 16-7.2 16-16V176.7c0.1-8.9-7.1-16.1-16-16.1zM848.1 236c-189 152.5-378-180.6-567.1-28.2-8.8 7.1-16 21.3-16 30.1v430.9c0 8.9 7.2 9 16 1.9 189-152.5 378.1 180.7 567.1 28.2 8.9-7.1 16-21.3 16-30.1V237.9c0.1-8.8-7.1-9-16-1.9z"
                fill={this.setIconColor(
                  item.priorityLevel?.value,
                )}
                p-id="1267"
              ></path>
            </svg>
          ),
        },
        {
          label: '工单状态',
          key: 'taskStatus',
          width: 120,
          render: (item) => item.taskStatus?.desc,
        },
        {
          label: '预计开始时间',
          key: 'expectedStartDate',
          width: 100,
        },
        {
          label: '期望完成时间',
          key: 'expectedCompletionTime',
          width: 100,
        },
        {
          label: '计划完成日期',
          key: 'plannedCompletionTime',
          width: 100,
        },
        {
          label: '预计工时(h)',
          key: 'planCycle',
          width: 100,
        },
        { label: '开始时间', key: 'startTime', width: 100 },
        {
          label: '实际完成时间',
          key: 'actualCompletionTime',
          width: 100,
        },
        {
          label: '操作',
          width: 140,
          align: 'left',
          render: (item) => (
            <span>
              <span
                title="详情"
                class="icon-view icon-tools-view"
              >
                <i
                  class="el-icon-tickets"
                  onClick={() => this.showDetail(item)}
                ></i>
              </span>
              {(item?.taskStatus?.name === 'PROCESSING' ||
                item?.taskStatus?.name ===
                  'REJECTED_ING') && (
                <span
                  title="完成"
                  class="icon-view icon-tools-view"
                >
                  <i
                    class="el-icon-circle-check"
                    onClick={() =>
                      this.operation('1', item)
                    }
                  ></i>
                </span>
              )}
              {item?.taskStatus?.name ===
                'HAS_NOT_STARTED' && (
                <span
                  title="修改计划"
                  class="icon-view icon-tools-view"
                >
                  <i
                    class="el-icon-edit-outline"
                    onClick={() => this.updatePlan(item)}
                  ></i>
                </span>
              )}
            </span>
          ),
        },
      ]
    },
  },
  methods: {
    sizeChange() {},
    onCurrentChange() {},
    async getOrderTree() {
      try {
        const res = await getOrderTree()
        if (res.code === 200) {
          this.treeData = [res.data]
        }
      } catch (e) {
        console.error(e)
      }
    },
    getStatusColor(type) {
      if (type === 'NOT_YET_ASSIGNED') {
        return '#CCCCCC'
      }
      if (type === 'HAS_NOT_CONFIRM') {
        return '#FF0033'
      }
      if (type === 'HAS_NOT_STARTED') {
        return '#FF9933'
      }
      if (type === 'PROCESSING' || type === 'REJECTED') {
        return '#0066FF'
      }
      if (
        type === 'FOR_ACCEPTANCE' ||
        type === 'REJECTED_ING'
      ) {
        return '#00CC33'
      }

      return '#666'
    },
    handleClick(v) {
      this.is_tab = v
      this.getlist()
    },
    invalid(item) {
      this.$confirm('确认作废吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          axios
            .post('financeTaskManagement/invalidTask', {
              id: item.id,
            })
            .then((res) => {
              this.$message.success(res.message)
              this.getStatusTree()
            })
            .catch(() => {})
        })
        .catch(() => {})
    },
    rejectTask(item) {
      this.$prompt('请输入驳回原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '驳回原因不能为空',
      })
        .then(({ value }) => {
          axios
            .post('financeTaskManagement/rejectTask', {
              id: item.id,
              reasonForReject: value,
            })
            .then((res) => {
              this.$message.success(res.message)
              this.getStatusTree()
            })
            .catch(() => {})
        })
        .catch(() => {})
    },
    submitConfim() {
      this.$refs.expectedStartForm.validate((v) => {
        if (v) {
          axios
            .get('financeTaskManagement/confirmTask', {
              taskId: this.currentRowId,
              expectedStartDate:
                this.expectedStartForm.expectedStartDate,
              planCycle: this.expectedStartForm.planCycle,
            })
            .then((res) => {
              if (res.code === 200) {
                this.confimVisible = false
                this.getStatusTree()
              } else {
                this.$confirm(res.message, '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                })
                  .then(() => {
                    axios
                      .get(
                        'financeTaskManagement/confirmContinueTask',
                        {
                          taskId: this.currentRowId,
                          expectedStartDate:
                            this.expectedStartForm
                              .expectedStartDate,
                          planCycle:
                            this.expectedStartForm
                              .planCycle,
                          isContinue: true,
                        },
                      )
                      .then(() => {
                        this.confimVisible = false
                        this.getStatusTree()
                      })
                  })
                  .catch(() => {})
              }
            })
            .catch(() => {})
        } else {
          return false
        }
      })
    },
    confimTask(item) {
      this.currentRowId = item.id
      this.expectedStartForm.expectedStartDate = ''
      this.expectedStartForm.planCycle = ''
      this.confimVisible = true
    },
    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
    },
    submitAssign() {
      axios
        .get('financeTaskManagement/assign', {
          taskId: this.currentRowId,
          taskExecutor: this.taskLeader.join(),
        })
        .then(() => {
          this.assignVisible = false
          this.getStatusTree()
        })
    },
    submitExpectedEnd() {
      axios
        .get('financeTaskManagement/startTask', {
          taskId: this.currentRowId,
          plannedCompletionTime: this.expectedEndTime,
        })
        .then((res) => {
          this.$message.success(res.message)
          this.getStatusTree()
          this.expectedEndVisible = false
        })
    },

    setAssign(v, i) {
      if (i === 1) {
        this.assignMe2 = false
        this.assignMe = v ? 'ASSIGN' : null
      } else {
        this.assignMe1 = false
        this.assignMe = v ? true : null
      }
      this.getStatusTree()
    },

    setIconColor(index) {
      if (index === 3) {
        return '#F54D66'
      }

      if (index === 2) {
        return '#FDC834'
      }
      if (index === 1) {
        return '#5DE088'
      }
      return '#ddd'
    },

    handleNodeClick(data) {
      this.statusCode = data.statusCode
      this.getlist()
    },
    getStatusTree() {
      this.detailVisible = false
      axios
        .get('financeTaskManagement/getStatusTree', {
          copyMe: this.assignMe,
        })
        .then((res) => {
          this.statusTree = res.data
          const bool = res.data.some(
            (item) =>
              item.statusCode === this.statusCode &&
              item.quantity === 0,
          )
          if (bool) {
            this.statusCode = null
          }
          for (let i = 1; i < res.data.length; i++) {
            if (
              !this.statusCode &&
              res.data[i].quantity > 0
            ) {
              this.statusCode = res.data[i].statusCode
              this.defauntIndex = i
              break
            } else if (
              this.statusCode === res.data[i].statusCode
            ) {
              this.defauntIndex = i
              break
            }
          }
          this.getlist()
        })
    },
    startTask(item) {
      if (item?.taskStatus?.name === 'REJECTED') {
        this.$confirm('确认返工？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
        }).then(() => {
          axios
            .get('financeTaskManagement/reStartTask', {
              taskId: item.id,
            })
            .then((res) => {
              this.$message.success(res.message)
              this.getStatusTree()
              this.expectedEndVisible = false
            })
        })
      } else {
        this.currentRowId = item.id
        this.expectedEndTime = ''
        this.expectedEndVisible = true
      }
    },
    async showEdit(v, callback) {
      if (v) {
        this.isEdit = true
        let res = null
        try {
          res = await axios.get(
            'financeTaskManagement/get/' + v.id,
          )
        } catch (error) {
          this.$message.warning(error.message)
          return
        }
        if (res) {
          this.editForm = res.data
          this.editDialog = true
        }
      } else {
        this.isEdit = false
        this.editForm = {
          taskAcceptanceUser: this.employeeId,
        }
        this.editDialog = true
        this.$refs.editForm &&
          this.$refs.editForm.resetFields()
      }
      callback && callback()
    },
    async getlist() {
      this.loading = true
      const { pageSize, currentPage } =
        this.centerPageOptions
      axios
        .post('platform/platformWorkOrder/list_page', {
          pageSize,
          currentPage,
          statusCode: this.statusCode,
        })
        .then((res) => {
          this.sourceData = res.data.records
          this.centerPageOptions.total = res.data.total
          this.loading = false
        })
    },
    planList() {
      const { pageSize, currentPage } = this.planPageOptions
      axios
        .get('financeTaskManagement/getFinanceTaskRecord', {
          pageSize,
          currentPage,
        })
        .then((res) => {
          if (res.code === 200) {
            this.planData = res.data.records
            this.planPageOptions.total = res.data.total
          } else {
            this.$alert(res.message, '错误提示', {
              dangerouslyUseHTMLString: true,
            })
          }
        })
    },
    onSubmit() {
      this.editDialog = false
      this.getStatusTree()
    },

    operation(type, row) {
      this.currentRowId = row.id
      this.rework = row.rework
      if (type === '1') {
        this.$confirm('确认完成？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
        })
          .then(() => {
            axios
              .post(
                'financeTaskManagement/completeTask/' +
                  row.id,
              )
              .then((res) => {
                this.$message.success(res.message)
                this.getStatusTree()
              })
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        this.commentsVisible = true
        this.commentsForm = {}
      }
    },
    commentsSubmit() {
      if (
        this.rework == null &&
        this.commentsForm.score < 4 &&
        this.commentsForm.taskRating
      ) {
        this.$alert(
          '若您不满意，请选择不通过',
          '错误提示',
          {
            dangerouslyUseHTMLString: true,
          },
        )
      } else {
        let url = 'financeTaskManagement/acceptanceTask'
        if (this.statusCode === '8') {
          url = 'financeTaskManagement/score'
        }
        axios
          .post(url, {
            id: this.currentRowId,
            rework: this.rework,
            ...this.commentsForm,
          })
          .then((res) => {
            this.$message.success(res.message)
            this.commentsVisible = false
            this.getStatusTree()
          })
      }
    },
    archive() {
      if (emptyArray(this.selections)) return
      axios
        .get('financeTaskManagement/archive', {
          ids: getIds(this.selections, true),
        })
        .then((res) => {
          this.$message.success(res.message)
          this.getStatusTree()
        })
    },
    selectionChange(selection) {
      this.selections = selection
    },
    cadence(item) {
      this.currentRowId = item.id
      this.terminationVisible = true
    },
    submitCadence() {
      axios
        .post('financeTaskManagement/terminateTheTask', {
          id: this.currentRowId,
          reasonForTermination: this.terminationReason,
          timeConsuming: this.timeConsuming,
        })
        .then((res) => {
          this.$message.success(res.message)
          this.terminationVisible = false
          this.getStatusTree()
        })
    },
    remove(item) {
      this.$confirm('确定删除选中的信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          axios
            .post(
              'financeTaskManagement/deleteTask/' + item.id,
            )
            .then((res) => {
              this.$message.success(res.message)
              this.getStatusTree()
            })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    showDetail(item) {
      this.detailVisible = true
      // axios
      //   .get('financeTaskManagement/get/' + item.id)
      //   .then((res) => {
      //     this.detail = res.data
      //     this.detailVisible = true
      //   })
    },
    updatePlan(item) {
      axios
        .get('financeTaskManagement/get/' + item.id)
        .then((res) => {
          this.expectedStartDate =
            res.data.expectedStartDate
          this.planCycle = res.data.planCycle
        })
      this.updateVisible = true
      this.currentRowId = item.id
    },
    updateTime() {
      axios
        .get('financeTaskManagement/editTaskTime', {
          taskId: this.currentRowId,
          expectedStartDate: this.expectedStartDate,
          planCycle: this.planCycle,
        })
        .then((res) => {
          this.$message.success(res.message)
          this.planList()
          this.updateVisible = false
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.wraper {
  height: 100%;
  display: flex;
  overflow: hidden;

  &::v-deep {
    .el-tree-node {
      font-size: 14px;
    }
    .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;
}
.top_wrap {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.tab_bar {
  width: 220px;
  margin-right: 6px;
  box-sizing: border-box;
  font-size: 0;
  display: flex;
  margin-bottom: -1px;
}
.tab_bar li {
  flex: 1;
  height: 38px;
  line-height: 38px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}

.tab_bar span {
  display: block;
  text-align: center;
  color: #333;
  font-size: 16px;
}
.tab_bar li + li {
  border-left: 1px solid #ddd;
}
.tab_bar li:nth-last-child(1) {
  border-right: 1px solid #ddd;
}
.tab_bar li.active {
  border-bottom: 1px solid #fff;
}
.tab_bar li.active span {
  color: #3366ff;
}
.search_form {
  margin-top: 5px;
  margin-left: 10px;
}
.search_form >>> .el-form-item {
  margin-bottom: 5px;
}
.page_content {
  display: flex;
  height: calc(100% - 40px);
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  flex-direction: column;
}

.main {
  height: 100%;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}
.detail_list {
  max-height: 68vh;
  overflow: auto;
}
.item_wrap {
  background: #efefef;
  padding-top: 10px;
}
.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;
}
.form_item >>> .el-radio {
  margin-right: 13px;
}
.form_item >>> .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;
}
.split_line {
  height: 1px;
  background: #ddd;
  margin-bottom: 10px;
}
.log_item {
  display: flex;
}
.log_item > div:nth-of-type(1) {
  width: 130px;
}
.log_item > div:nth-of-type(2) {
  flex: 1;
  margin-right: 10px;
}
.table-wrap {
  background: #fff;
  flex: 1;
  overflow: hidden;
  width: 100%;
}
</style>
