<template>
  <el-dialog
    style="min-height: 80vh"
    width="80%"
    title="出差备案"
    v-model="tripDialog"
  >
    <div style="background-color: #f4f7fc; min-height: 80vh; padding: 20px">
      <el-row>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="16">
          <el-tabs type="border-card" class="demo-tabs">
            <el-tab-pane label="基本信息">
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon>
                    <Document />
                  </el-icon>
                  <span>基本信息</span>
                </span>
              </template>
              <div
                class="grid-content ep-bg-purple-light"
                style="
                  background-color: white;
                  border: 1px solid #e4e7ed;
                  min-height: 600px;
                "
              >
                <div
                  style="
                    height: 60px;
                    line-height: 60px;
                    text-align: center;
                    color: red;
                    font-weight: 700;
                    font-size: 20px;
                    border-bottom: 1px solid #e4e7ed;
                  "
                >
                  中层出差备案
                </div>
                <div style="padding: 20px; margin-top: 20px">
                  <el-form
                    ref="ruleFormRef"
                    :model="form"
                    :rules="formRules"
                    label-width="10vw"
                  >
                    <div style="display: flex">
                      <el-form-item prop="name" label="出差处室：">
                        <el-input
                          :disabled="true"
                          v-model="form.outWorkDept"
                          style="width: 12vw"
                        />
                      </el-form-item>
                      <el-form-item
                        label-width="8vw"
                        prop="name"
                        label="出差人："
                      >
                        <el-input
                          :disabled="true"
                          v-model="form.userName"
                          style="width: 11vw"
                        />
                      </el-form-item>
                    </div>
                    <el-form-item prop="leaveReason" label="出差事由：">
                      <el-col :span="23">
                        <el-input
                          :disabled="tuihuiShow"
                          style="width: 31vw"
                          v-model="form.reason"
                          type="textarea"
                        />
                      </el-col>
                    </el-form-item>
                    <div style="display: flex">
                      <el-form-item prop="name" label="目的地：">
                        <el-radio-group
                          :disabled="!tuihuiShow"
                          v-model="form.provinceType"
                          class="ml-4"
                        >
                          <el-radio label="0" size="large">省内</el-radio>
                          <el-radio label="1" size="large">省外</el-radio>
                        </el-radio-group>
                        <el-input
                          :disabled="tuihuiShow"
                          v-model="form.destination"
                          style="width: 12vw; margin-left: 20px"
                        />
                      </el-form-item>
                    </div>
                    <el-form-item prop="leaveTime" label="出差起止日期：">
                      <el-col :span="24">
                        <el-date-picker
                          :disabled="tuihuiShow"
                          style="width: 20vw"
                          v-model="dateRange1"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="请选择起始日期"
                          end-placeholder="请选择截止日期"
                          :size="size"
                        />
                      </el-col>
                    </el-form-item>

                    <!-- <el-form-item
                      prop=""
                      label="领导意见："
                      v-if="form.provinceType == '0'"
                    >
                      <el-col :span="23">
                        <el-input
                          :disabled="true"
                          style="width: 31vw"
                          v-model="jzMsg"
                          type="textarea"
                        />
                      </el-col>
                    </el-form-item> -->
                  </el-form>
                  <el-divider />
                  <el-form v-show="submitShow" label-width="10vw">
                    <el-form-item prop="" label="主管领导意见：">
                      <el-col :span="23">
                        <el-input
                          :disabled="true"
                          style="width: 31vw"
                          v-model="zgjzMsg"
                          type="textarea"
                        />
                      </el-col>
                    </el-form-item>
                    <el-form-item label-width="10vw" label="下一步节点:">
                      <el-select
                        v-model="selNextNode"
                        placeholder="请选择下一步节点"
                      >
                        <el-option
                          v-for="item in NextStepNode"
                          :key="item.NodeID"
                          :label="item.Name"
                          :value="item.NodeID"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <div v-show="guidangBt != true">
                      <el-form-item label-width="10vw" label="审核意见:">
                        <el-col :span="24">
                          <el-input
                            type="textarea"
                            :rows="2"
                            style="width: 31vw"
                            placeholder="请输入审核意见"
                            v-model="formData.reviewMsg"
                          />
                        </el-col>
                      </el-form-item>

                      <div style="text-align: center; width: 100%">
                        <el-button
                          :loading="loadingWebLoad"
                          @click="sendNext"
                          type="primary"
                          >提交
                        </el-button>
                        <el-button
                          v-show="tuihuiShow"
                          @click="sendBack"
                          type="danger"
                          >退回
                        </el-button>
                      </div>
                    </div>
                    <!--   归档操作       -->
                    <div v-show="guidangBt">
                      <!-- <el-form-item label="档案编号: ">
                        <el-input
                          placeholder="请输入档案编号"
                          v-model="formData.archiveNo"
                        ></el-input>
                      </el-form-item> -->

                      <el-form-item label="档案分类: " label-width="10vw">
                        <el-tree-select
                          v-model="formData.typeId"
                          :data="typeList"
                          :props="{
                            value: 'archiveTypeId',
                            label: 'name',
                            children: 'children',
                          }"
                          value-key="archiveTypeId"
                          placeholder="请选择档案分类"
                        />
                      </el-form-item>
                      <div style="text-align: center; width: 100%">
                        <el-button
                          :disabled="false"
                          @click="sendNext"
                          type="primary"
                          >归档
                        </el-button>
                      </div>
                    </div>
                  </el-form>
                </div>
              </div> </el-tab-pane
            ><el-tab-pane label="流转记录">
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon>
                    <Promotion />
                  </el-icon>
                  <span>流转记录</span>
                </span>
              </template>
              <div>
                <el-table
                  border
                  :data="liuzhuanData"
                  style="
                    width: 100%;
                    min-height: 60vh;
                    max-height: 65vh;
                    overflow: auto;
                  "
                >
                  <el-table-column
                    align="center"
                    label="序号"
                    width="60"
                    type="index"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="NDFromT"
                    label="	节点名称"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    width="80"
                    prop="ActionTypeText"
                    label="办理状态"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="EmpFromT"
                    label="办理人"
                  >
                  </el-table-column>
                  <el-table-column align="center" prop="SDT" label="到达时间">
                  </el-table-column>
                  <el-table-column align="center" prop="RDT" label="处理时间">
                  </el-table-column>

                  <el-table-column
                    align="center"
                    prop="ActionType22"
                    label="审核意见"
                  >
                    <template #default="scope">
                      <div v-if="scope.row.ActionType22 != undefined">
                        <div v-for="item in scope.row.ActionType22" :key="item">
                          <!-- <div></div> -->
                          <div>{{ item.Msg }}</div>
                        </div>
                      </div>
                      <div v-else>
                        <div v-if="scope.row.ActionTypeText == '退回'">
                          退回原因：{{ scope.row.Msg }}
                        </div>
                        <div v-if="scope.row.ActionTypeText == '移交'">
                          移交原因：{{ scope.row.Msg }}
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- <iframe style="padding-left: 4vw" :src="tuurl" width="100%" height="500px"></iframe> -->
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" />
        </el-col>
      </el-row>

      <select-user
        ref="selectRef"
        @ok="handleQuery"
        @closeDialogf="closeSelUser"
      ></select-user>
      <!-- 退回 -->
      <el-dialog title="退回" v-model="dialogBack" width="40%">
        <el-form>
          <el-form-item label-width="200" label="退回节点：">
            <el-select
              v-model="nodeValue"
              placeholder="请选择退回节点信息"
              style="width: 240px"
            >
              <el-option
                v-for="item in nodeData"
                :key="item.No"
                :label="item.Name"
                :value="item.No"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label-width="200"
            label="退回原因："
            placeholder="请输入退回原因"
          >
            <el-input v-model="returnMsg" style="width: 20vw" type="textarea" />
          </el-form-item>
        </el-form>
        <span
          style="position: relative; left: 28vw"
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitNodeBack">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
import { startOutWork, getWorkDetail } from "@/api/office/work";
import { getInfo } from "@/api/login";
import selectUser from "@/views/liucheng/selectUser";
import { ElMessage } from "element-plus";
import { listType } from "@/api/archive/type";
import { saveArchive } from "@/api/archive/archive";
import { getJToken } from "@/utils/auth";
import {
  generNextStepNode1,
  sendFlowToNext1,
  node_ReturnWork,
  getReviewMsg,
  getWfGenerWorkList,
} from "@/api/liucheng";

import {
  leave,
  getLeave,
  getReturnWorkNode,
  WorkProgressBar,
  NodeReturnWork,
} from "@/api/clocking/leave";
import Cookies from "js-cookie";
export default {
  name: "businessTripRecord",
  selected: false,
  components: {
    selectUser,
  },
  data() {
    var validator2 = (rule, val, callback) => {
      if (!val) {
        callback(new Error("请输入请假天数"));
      } else {
        const reg = /^([0-9])*$/; //
        if (reg.test(val)) {
          return callback();
        } else {
          callback(new Error("格式错误，仅支持输入纯数字"));
        }
      }
    };

    return {
      tuihuiShow: true,
      guidangData: {
        archiveFormNo: null,
        workId: null,
      },
      nodeValue: null,
      returnMsg: null,
      guidangBt: false,
      tuurl: "",
      dialogBack: false,
      typeList: [],
      nodeData: [],
      selectedIndex: 0,
      tripDialog: false,
      dateRange1: [],
      jzMsg: "",
      zgjzMsg: "",
      formData: {
        reviewMsg: "同意",
        optionName: null,
        toNodeId: null,
        users: null,
        workid: null,
      },
      showSearch: true,
      submitShow: true,
      ids: [],
      deptOptions: [],
      fontIndex: 0,
      userList: [],
      tripFlowData: {},
      NextStepNode: [],
      selNextNode: "",
      selUserNames: "",
      delPeopleInfo: {
        groupId: undefined,
        userId: undefined,
      },
      dialogVisible2: false,
      dialogVisible1: false,
      contactsOptions: undefined,
      forwardInfo: {
        mailId: null,
        userIds: [],
      },
      groupInfo: {
        groupName: "",
      },

      selection: [],
      contactsList: [],
      liuzhuanData: [],

      dialogVisible11: false,
      ruleForm: {
        mailUserIds: [],
        isRead: "N",
        isDel: "N",
        mailState: "1",
        mailType: null,
        sendTime: "",
        files: [],
      },
      mailUserIds: [],
      show: true,
      total: 0,

      input: "",
      form: {},

      leaveTime: "",
      formRules: {},
    };
  },
  created() {
    // this.getUserInfo();
  },
  mounted() {},

  methods: {
    async submitNodeBack() {
      if (this.nodeValue == null) {
        this.$message.error("请选择退回节点信息");
        return;
      }
      if (this.returnMsg == null) {
        this.$message.error("请输入退回原因");
        return;
      }
      let res = await NodeReturnWork(
        this.formData.workid,
        this.nodeValue,
        this.returnMsg
      );
      this.$message.success(res);
      this.dialogBack = false;
      this.tripDialog = false;
      this.$emit("guanbi");
      this.$emit("closeViewLeave");
      this.nodeValue = null;
      this.returnMsg = null;
      this.valDate = null;
      this.selNextNode = null;
    },
    sendBack() {
      this.dialogBack = true;
      this.getReturnWorkNode();
    },
    async getReturnWorkNode() {
      let nodeData = await getReturnWorkNode(getJToken(), this.formData.workid);
      this.nodeData = nodeData;
    },
    closeSendNext() {
      this.submitShow = false;
    },
    showDetail1(flowData) {
      this.tripDialog = true;
      this.tuihuiShow = true;
      console.log("flowData", flowData);

      if (flowData.FK_Node == "601") {
        this.tuihuiShow = false;
      }
      this.tuurl =
        Cookies.get("jFontIp") +
        "/WF/Port.htm?DoWhat=OneWork2&WorkID=" +
        flowData.WorkID +
        "&FK_Flow=" +
        flowData.FK_Flow +
        "&Token=" +
        getJToken();
      this.tripFlowData = flowData;
      this.formData.optionName = flowData.NodeName;
      this.formData.workid = flowData.WorkID;
      getWfGenerWorkList(getJToken(), this.formData.workid).then((res) => {
        this.liuzhuanData = res.trackList;
      });
      getWorkDetail(this.formData.workid).then((res) => {
        this.dateRange1 = [];
        this.form = res.data;
        this.dateRange1.push(res.data.startTime);
        this.dateRange1.push(res.data.endTime);
      });
      //获取下个节点
      generNextStepNode1(
        this.tripFlowData.FK_Flow,
        this.tripFlowData.WorkID,
        "",
        getJToken()
      ).then((res) => {
        if (res.msg == "Y") {
          this.NextStepNode.push({ NodeID: 0, Name: "结束" });
        } else {
          this.NextStepNode = res.data;
        }
        this.selNextNode = this.NextStepNode[0].NodeID;
      });
      if (this.formData.optionName.indexOf("归档") != -1) {
        this.getTypeList();
        this.formData.reviewMsg = "归档";
        this.guidangBt = true;
      }
      this.getReviewMsg1();
    },
    /** 查询归档类型列表 */
    getTypeList() {
      listType({}).then((response) => {
        this.typeList = this.handleTree(
          response.data,
          "archiveTypeId",
          "parentId"
        );
      });
    },
    getReviewMsg1() {
      getReviewMsg(
        this.tripFlowData.FK_Flow,
        this.tripFlowData.WorkID,
        602
      ).then((res) => {
        if (res != null) {
          this.zgjzMsg = res;
        }
      });
      getReviewMsg(
        this.tripFlowData.FK_Flow,
        this.tripFlowData.WorkID,
        603
      ).then((res) => {
        if (res != null) {
          this.jzMsg = res;
        }
      });
    },
    handleQuery(selUsers) {
      this.formData.users = selUsers;
      if (selUsers != undefined && selUsers != "") {
        this.onSubmit();
      }
    },
    sendNext() {
      if (this.formData.reviewMsg == "" || this.formData.reviewMsg == null) {
        this.$modal.msgWarning("请填写审核意见");
        return;
      }
      this.formData.toNodeId = this.selNextNode;
      let DeliveryWay = "";
      //查看当前是选择的那个节点
      this.NextStepNode.forEach((item, index) => {
        if (item.NodeID == this.selNextNode) {
          DeliveryWay = item.DeliveryWay;
        }
      });
      //判断当前节点是哪一个节点
      //DeliveryWay 3:绑定人员计算
      if (DeliveryWay == "3" || DeliveryWay == "7") {
        this.onSubmit();
      }
      //4:由发送人选择发送
      else if (DeliveryWay == "4" || DeliveryWay == "1" || DeliveryWay == "9") {
        this.openSelectUser();
        return;
      } else {
        this.onSubmit();
      }
    },
    openSelectUser() {
      this.tripFlowData.toNodeId = this.selNextNode;
      this.$refs["selectRef"].show1(this.tripFlowData);
    },
    async onSubmit() {
      if (this.guidangBt) {
        this.guidangData.archiveFormNo = this.tripFlowData.FK_Flow;
        this.guidangData.workId = this.tripFlowData.WorkID;
        let { archiveRes } = await saveArchive(this.guidangData);
      }
      sendFlowToNext1(this.formData).then((response) => {
        if (response.code == 200) {
          if (
            response.data.VarAcceptersName != "" &&
            response.data.VarAcceptersName != "结束"
          ) {
            ElMessage({
              message:
                "已发送到" +
                response.data.VarToNodeName +
                "节点，接收人：" +
                response.data.VarAcceptersName,
              type: "success",
            });
          } else if (response.data.VarAcceptersName == "结束") {
            ElMessage({
              message: response.data.Message,
              type: "success",
            });
          } else {
            ElMessage({
              message: response.data.Message.replaceAll("@", ""),
              type: "success",
            });
          }
          this.$emit("guanbi");
          this.tripDialog = false;
        } else {
          this.$emit("guanbi");
          this.tripDialog = false;
        }
      });
    },

    colsedialog() {
      this.$emit("guanbi");
      this.tripDialog = false;
    },
    handleSelect() {
      //   this.mailUserIds = [];
      this.toggle(0);
      this.getContactsTree();
      this.dialogVisible11 = true;
    },
    reset() {
      this.form = {
        outWorkDept: undefined,
        userId: undefined,
        userName: undefined,
        reason: undefined,
        destination: undefined,
        provinceType: undefined,

        params: {},
      };
      this.dateRange1 = [];
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep img {
  max-width: 790px;
}

::v-deep .el-tree-node__content {
  display: flex;
  align-items: center;
  height: 26px;
  cursor: pointer;
  font-size: 16px;
}

::v-deep .el-dialog__body {
  padding: 20px 30px;
  color: var(--el-text-color-regular);
  font-size: var(--el-dialog-content-font-size);
  word-break: break-all;
}

.hover-li:hover {
  background-color: #f5f7fa;
}

.selected {
  font-size: 17px;
  margin-left: 25px;
  padding-right: 25px;
  border-right: 1px solid #e7eaec;
  color: #3792f4; // 字体颜色变为蓝色
}

.lineStyle.active {
  background-color: #ebf5ff;
}

#bg:hover {
  background-color: #f5f7fa;
}
</style>
