<template>
  <el-dialog width="80%" title="用章申请" v-model="superVisionDialog">
    <div
      style="
        background-color: #f4f7fc;
        height: 75vh;
        padding: 20px;
        overflow: auto;
      "
    >
      <el-row>
        <el-col :span="3">
          <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="18">
          <el-tabs
            style="min-height: 600px"
            type="border-card"
            class="demo-tabs"
          >
            <el-tab-pane label="基本信息">
              <template #label>
                <span style="font-size: 15px" class="custom-tabs-label">
                  <span>
                    <el-icon><Document style="padding-top: 2px" /></el-icon
                    >基本信息</span
                  >
                </span>
              </template>
              <div
                class="grid-content ep-bg-purple-light"
                style="
                  background-color: white;
                  width: 100%;
                  border: 1px solid #e4e7ed;
                "
              >
                <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">
                  <el-form
                    ref="ruleFormRef"
                    :model="form"
                    :rules="formRules"
                    label-width="10vw"
                  >
                    <el-row>
                      <el-col :span="12">
                        <el-form-item prop="createBy" label="用章人：">
                          <el-input
                            disabled
                            v-model="form.createBy"
                          /> </el-form-item
                      ></el-col>
                      <el-col :span="12">
                        <el-form-item
                          label-width="7vw"
                          prop="deptId"
                          label="用章处室："
                        >
                          <el-tree-select
                            disabled
                            style="width: 14vw"
                            v-model="form.deptId"
                            :data="deptOptions"
                            :props="{
                              value: 'id',
                              label: 'label',
                              children: 'children',
                            }"
                            value-key="id"
                            placeholder="请选择用章处室"
                            check-strictly
                          /> </el-form-item
                      ></el-col>
                    </el-row>
                    <el-row justify="">
                      <el-col :span="12">
                        <el-form-item prop="useTime" label="用章日期：">
                          <el-date-picker
                            disabled
                            style="width: 100%"
                            v-model="form.useTime"
                          /> </el-form-item
                      ></el-col>
                      <el-col :span="12">
                        <el-form-item
                          label-width="7vw"
                          prop="signetType"
                          label="印章类型："
                        >
                          <el-select
                            disabled
                            style="width: 14vw"
                            v-model="form.signetType"
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="dict in signet_type"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            >
                            </el-option>
                          </el-select> </el-form-item
                      ></el-col>
                    </el-row>
                    <el-form-item prop="usingReason" label="用章事由：">
                      <el-input
                        disabled
                        v-model="form.usingReason"
                        style="max-width: 35vw"
                        rows="3"
                        type="textarea"
                      ></el-input>
                    </el-form-item>
                    <el-form-item prop="activeSend" label="主送单位：">
                      <el-col :span="24">
                        <el-input
                          disabled
                          v-model="form.activeSend"
                          style="max-width: 35vw"
                          rows="3"
                          type="textarea"
                        ></el-input>
                      </el-col>
                    </el-form-item>
                    <el-form-item prop="signetCopies" label="盖章份数：">
                      <el-col :span="24">
                        <el-input
                          disabled
                          v-model="form.signetCopies"
                          style="max-width: 5vw; margin-right: 5px"
                        ></el-input
                        >份
                      </el-col>
                    </el-form-item>

                    <div v-if="leaveTrue !== true">
                      <div v-if="leaveClear == true">
                        <el-form-item
                          v-if="showTable !== undefined"
                          label="下一步节点："
                        >
                          <el-select
                            v-model="selNextNode"
                            placeholder="请选择下一步节点"
                          >
                            <el-option
                              v-for="item in options"
                              :key="item.NodeID"
                              :label="item.Name"
                              :value="item.NodeID"
                          /></el-select>
                        </el-form-item>
                        <el-form-item label="销假日期：">
                          <el-date-picker
                            v-model="valDate"
                            type="date"
                            placeholder="请选择销假日期"
                            :size="size"
                          />
                        </el-form-item>
                      </div>
                      <div v-else>
                        <el-form-item
                          v-if="showTable !== undefined"
                          label="下一步节点："
                        >
                          <el-select
                            v-model="selNextNode"
                            placeholder="请选择下一步节点"
                          >
                            <el-option
                              v-for="item in options"
                              :key="item.NodeID"
                              :label="item.Name"
                              :value="item.NodeID"
                          /></el-select>
                        </el-form-item>
                        <el-form-item v-if="showTable" label="审核意见：">
                          <el-col :span="23">
                            <el-input
                              v-model="reviewMsg"
                              style="width: 20vw"
                              type="textarea"
                            />
                          </el-col>
                        </el-form-item>
                      </div>
                      <div
                        v-if="showTable !== undefined"
                        style="text-align: center"
                      >
                        <el-form-item>
                          <el-button
                            style="margin-top: 4vh"
                            type="primary"
                            @click="sendNext"
                            >提交</el-button
                          >
                          <el-button
                            style="margin-top: 4vh"
                            type="danger"
                            @click="sendBack"
                            >退回</el-button
                          >
                        </el-form-item>
                      </div>
                      <!-- <div v-else style="text-align: center; width: 100%">
                        <el-button
                          style="padding: 0 35px; margin-top: 4vh"
                          type="primary"
                          @click="onSubmit"
                          >提交</el-button
                        >
                      </div> -->
                    </div>
                  </el-form>
                  <!--  下一步提交            -->
                  <div v-if="liucheng">
                    <el-divider></el-divider>
                    <el-form v-show="submitShow" label-width="10vw">
                      <el-form-item 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 style="width: 100%" v-show="guidangBt != true">
                        <el-form-item label="审核意见:">
                          <el-col :span="24">
                            <el-input
                              style="width: 16vw"
                              type="textarea"
                              :rows="2"
                              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-if="showBack"
                            @click="sendBack"
                            type="danger"
                            >退回
                          </el-button>
                        </div>
                      </div>
                    </el-form>
                    <el-form label-width="10vw" v-show="guidangBt">
                      <el-form-item label="档案分类: ">
                        <el-tree-select
                          v-model="guidangData.typeId"
                          :data="typeList"
                          :props="{
                            value: 'archiveTypeId',
                            label: 'name',
                            children: 'children',
                          }"
                          value-key="archiveTypeId"
                          placeholder="请选择档案分类"
                        />
                      </el-form-item>
                      <div
                        style="text-align: center; align-items: center"
                        label=" "
                      >
                        <el-button
                          :disabled="false"
                          @click="sendNext"
                          type="primary"
                          >归档
                        </el-button>
                      </div>
                    </el-form>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="流转记录">
              <template #label>
                <span style="font-size: 15px" class="custom-tabs-label">
                  <el-icon><Promotion style="padding-top: 2px" /></el-icon>
                  <span>流转记录</span>
                </span>
              </template>
              <div>
                <el-table border :data="liuzhuanData" style="width: 100%">
                  <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
                    width="160"
                    align="center"
                    prop="SDT"
                    label="到达时间"
                  >
                  </el-table-column>
                  <el-table-column
                    width="160"
                    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>{{ 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 :src="tuurl" width="100%" height="500px"></iframe> -->
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="3">
          <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="12vw" 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="12vw"
            label="退回原因："
            placeholder="请输入退回原因"
          >
            <el-input v-model="returnMsg" style="width: 20vw" type="textarea" />
          </el-form-item>
        </el-form>
        <span
          style="position: relative; left: 26vw"
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogBack = false">取 消</el-button>
          <el-button type="primary" @click="submitNodeBack">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 进展情况 -->
      <el-dialog
        title="进展情况"
        style="height: 460px"
        v-model="dialogEdit"
        width="60%"
      >
        <el-form style="padding: 0 30px">
          <el-form-item label-width="6vw" label="进展情况：">
            <el-input v-model="progress" :rows="14" type="textarea" />
          </el-form-item>
        </el-form>
        <span style="float: right" slot="footer">
          <el-button @click="dialogEdit = false">取 消</el-button>
          <el-button type="primary" @click="jinDuSub">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </el-dialog>
</template>
<script>
import { addCar } from "@/api/car";
import {
  generNextStepNode1,
  node_ReturnWork,
  getReviewMsg,
  getReturnWorkNode,
  getWfGenerWorkList,
} from "@/api/liucheng";
import { ElMessage } from "element-plus";
import selectUser from "@/views/liucheng/selectUser.vue";
import { getJToken } from "@/utils/auth";
import { getInfo } from "@/api/login";
import { useDict } from "@/utils/dict";
import { deptTreeSelect } from "@/api/system/user";
import {
  selSuperVisionByWorkId,
  sendFlowToUsers1,
  updatemyselfDetail,
} from "@/api/offcial/supervision";
import Cookies from "js-cookie";
import { listType } from "@/api/archive/type";
import { saveArchive } from "@/api/archive/archive";

import { sealSel } from "@/api/sealApplicational";

export default {
  name: "YinetoaLeaveApplication",
  props: [
    "dialogVisible",
    "name",
    "showTable",
    "WorkId",
    "FK_Flow",
    "nodeName",
    "trueLeave",
    "closeDialog",
  ],
  components: { selectUser },
  data() {
    return {
      isEval: false,
      iconStyle: {
        large: "8px",
        default: "6px",
        small: "4px",
      },
      LS: {
        color: "#000",
        "text-align": "center",
        "font-weight": "600",
        height: "40px",
        "background-color": "rgba(255, 97, 2, 0.1)",
        "min-width": "110px",
        "word-break": "keep-all",
      },
      descriptionstype: "default",
      isCsfk: false,
      form: {},
      infoSourceData: useDict("info_source").info_source,
      sys_yes_no: useDict("sys_yes_no").sys_yes_no,
      progress_eva: useDict("progress_eva").progress_eva,
      signet_type: useDict("signet_type").signet_type,
      rules: {},
      returnMsg: null,
      formData: {
        reviewMsg: "同意",
        optionName: null,
        toNodeId: null,
        users: null,
        workid: null,
        progress: "",
      },
      liuzhuanData: [],
      tripFlowData: {},
      NextStepNode: [],
      guidangData: {
        archiveNo: null,
        workId: null,
        archiveFormNo: null,
        printNum: null,
        levels: null,
        typeId: null,
        name: null,
      },
      nodeValue: null,
      tuurl: "",
      dialogBack: false,
      selNextNode: "",
      superVisionDialog: false,
      submitShow: true,
      guidangBt: false,
      nodeData: [],
      typeList: [],
      showDel: null,
      liucheng: true,
      userId: null,
      dialogEdit: false,
      progress: "",
      id: "",
    };
  },

  created() {
    this.getInfo();
  },
  watch: {},

  mounted() {},

  methods: {
    jinDuSub() {
      this.dialogEdit = false;
      updatemyselfDetail({ progress: this.progress, id: this.id }).then(
        (res) => {
          console.log(res);
          this.$message.success("修改进度评价成功");
        }
      );
    },
    getInfo() {
      getInfo().then((res) => {
        console.log(res);
        this.userId = res.user.userId;
      });
    },
    editJinDu(row) {
      this.getInfo();
      console.log("edit", row);
      this.progress = row.progress;
      this.id = row.id;
      this.dialogEdit = true;
    },
    async submitNodeBack() {
      if (this.nodeValue == null) {
        this.$message.error("请选择退回节点信息");
        return;
      }
      if (this.returnMsg == null) {
        this.$message.error("请输入退回原因");
        return;
      }
      this.$modal.loading("退回中，请稍后...");
      let res = await node_ReturnWork({
        workid: this.formData.workid,
        returnToNodeID: this.nodeValue,
        returnMsg: this.returnMsg,
      });
      this.$message.success(res);
      this.dialogBack = false;
      // this.superVisionDialog = false;
      this.$emit("closeViewLeave");
      this.nodeValue = null;
      this.returnMsg = null;
      this.valDate = null;
      this.selNextNode = null;
      this.$modal.closeLoading();
      this.colsedialog();
    },
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    sumbitSupervise() {
      sendFlowToNext;
    },
    changeDate(val) {
      var d1 = new Date(val[0]);
      var d2 = new Date(val[1]);
      var diff = d2 - d1;
      var days = diff / (1000 * 60 * 60 * 24);
      this.form1.dayNum = Math.floor(days) + 1;
    },

    showDetail1(flowData) {
      console.log("flowData", flowData);
      this.superVisionDialog = true;
      this.showBack = true;
      if (flowData.FK_Node == "1601") {
        this.showBack = false;
      }
      if (flowData.FK_Node == "1605") {
        console.log(flowData.FK_Node);
        this.isCsfk = true;
      }
      if (flowData.FK_Node == "1606") {
        console.log(flowData.FK_Node);
        this.isEval = true;
      }

      this.tuurl =
        Cookies.get("jFontIp") +
        "/WF/Port.htm?DoWhat=OneWork2&WorkID=" +
        flowData.WorkID +
        "&FK_Flow=" +
        flowData.FK_Flow +
        "&Token=" +
        getJToken();
      this.tripFlowData = flowData;
      this.guidangData.typeId = "";
      this.formData.optionName = flowData.NodeName;
      if (flowData.WorkID == null || flowData.WorkID == undefined) {
        this.formData.workid = flowData.workId;
      } else {
        this.formData.workid = flowData.WorkID;
      }
      getWfGenerWorkList(getJToken(), this.formData.workid).then((res) => {
        this.liuzhuanData = res.trackList;
      });
      sealSel(this.formData.workid).then((res) => {
        console.log("res", res);
        this.form = res.data;
      });
      //获取下个节点
      generNextStepNode1("017", this.formData.workid, "", getJToken()).then(
        (res) => {
          if (res.msg == "Y") {
            this.NextStepNode = [];
            this.NextStepNode.push({ NodeID: 0, Name: "结束" });
          } else {
            this.NextStepNode = res.data;
          }
          this.selNextNode = this.NextStepNode[0].NodeID;
        }
      );
      if (flowData.WorkID != undefined) {
        if (
          this.formData.optionName.indexOf("归档") != -1 ||
          this.formData.optionName.indexOf("存档") != -1
        ) {
          this.getTypeList();
          this.formData.reviewMsg = "存档";
          this.guidangBt = true;
        }
      }
    },
    closeSendNext() {
      this.liucheng = false;
    },
    handleQuery(selUsers) {
      this.formData.users = selUsers;
      if (selUsers != undefined && selUsers != "") {
        this.onSubmit();
      }
    },
    colsedialog() {
      this.$emit("guanbi");

      this.superVisionDialog = false;
    },
    /** 查询归档类型列表 */
    getTypeList() {
      listType({}).then((response) => {
        this.typeList = this.handleTree(
          response.data,
          "archiveTypeId",
          "parentId"
        );
      });
    },
    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:绑定人员计算 7:发送给开始节点
      if (DeliveryWay == "3" || DeliveryWay == "7") {
        this.onSubmit();
      }
      //4:由发送人选择发送
      else if (DeliveryWay == "4" || DeliveryWay == "1" || DeliveryWay == "9") {
        this.openSelectUser();
        return;
      } else {
        this.onSubmit();
      }
    },
    sendBack() {
      this.dialogBack = true;
      this.getReturnWorkNode();
    },
    async getReturnWorkNode() {
      console.log(this.formData.workid);
      let nodeData = await getReturnWorkNode({ workid: this.formData.workid });
      this.nodeData = nodeData;
    },
    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);
      }
      sendFlowToUsers1(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.colsedialog();
        } else {
          this.colsedialog();
        }
      });
    },

    reset() {
      this.form1 = {
        createBy: this.form.createBy,
        phone: this.form.phone,
      };
    },
    SubmitSelect(selUsers) {
      this.form.params["toEmps"] = selUsers;
      if (selUsers != undefined && selUsers != "") {
        console.log(this.form);
        addCar(this.form).then((res) => {
          this.$modal.msgSuccess(
            "已发送到" +
              res.data.VarToNodeName +
              "节点," +
              "处理人:" +
              res.data.VarAcceptersName
          );
          this.$nextTick(() => {
            this.reset();
            this.$refs.ruleFormRef.resetFields();
          });
          this.$emit("change1");
          this.$modal.closeLoading();
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
