<template>
  <div>
    <div class="grid-content ep-bg-purple">
      <el-tabs style="min-height: 80vh" type="border-card">
        <el-tab-pane label="基本信息">
          <el-row>
            <el-col :span="24">
              <div style="border: 1px solid #dcdfe6; padding: 40px">
                <el-form label-width="60">
                  <el-form-item style="display: flex" label="标题" prop="title">
                    <el-input
                      disabled
                      style="width: 860px"
                      v-model="form.title"
                      placeholder="请输入标题"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="reveal" label="附件集">
                    <template v-if="fjFiles.length !== 0">
                      <el-link
                        type="primary"
                        v-for="(item, index) in fjFiles"
                        :key="index"
                        @click="openUrl(item.url)"
                      >
                        <div style="margin-right: 20px">
                          <el-icon>
                            <Document></Document>
                          </el-icon>
                          {{ item.name }}
                        </div>
                      </el-link>
                    </template>
                    <!-- <div class="uploadfile">
                        <el-upload
                          :on-success="handleSuccessFiles"
                          v-model:file-list="fjFiles"
                          style="width: 50.5vw; padding: 0px"
                          class="upload-demo"
                          drag
                          :on-remove="romveFile"
                          :headers="upload.headers"
                          :action="upload.url"
                          name="file"
                          multiple
                        >
                          <div class="el-upload__text">
                            <em>点击或拖拽上传</em>
                          </div>
                        </el-upload>
                      </div> -->
                  </el-form-item>

                  <el-form-item v-if="reveal" label="正文" prop="content">
                    <Editor1
                      width="20vw"
                      :min-height="200"
                      height="200px"
                      v-model="form.content"
                    /> </el-form-item
                ></el-form>
              </div>
            </el-col>
            <!-- <el-col :span="6">
                  <div
                    style="
                      padding: 20px 10px 0 0;
                      border: 1px solid #dcdfe6;
                      margin-left: 20px;
                      min-height: 400px;
                    "
                    class="form-item-container"
                  >
                    <el-form :model="form">
                      <el-form-item
                        class="item"
                        label-width="100px"
                        label="栏目："
                        prop="columnId"
                      >
                        <el-tree-select
                          :disabled="showColumn !== undefined"
                          style="width: 14vw"
                          v-model="form.columnId"
                          :props="{
                            value: 'id',
                            label: 'columnName',
                            children: 'children',
                          }"
                          @current-change="parentIdChange"
                          :data="columnOptions"
                          value-key="id"
                          check-strictly
                        />
                      </el-form-item>
                      <el-form-item label-width="100" label="下一步节点：">
                        <el-select
                          style="width: 14vw"
                          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>
                      <div v-show="guidangBt">
                        <el-form-item label-width="100" label="审核意见：">
                          <el-input
                            placeholder="请输入审核意见"
                            v-model="reviewMsg"
                            style="width: 14vw"
                            type="textarea"
                          />
                        </el-form-item>
                        <el-form-item style="margin-left: 6vw">
                          <el-button
                            style="margin-top: 5vh"
                            type="primary"
                            @click="sendNext"
                            >提交</el-button
                          >
                          <el-button
                            v-if="showNode"
                            style="margin-top: 5vh"
                            type="danger"
                            @click="sendBack"
                            >退回</el-button
                          >
                        </el-form-item>
                      </div>
                    </el-form>
                    <el-from v-show="!guidangBt">
                      <el-form-item label-width="100" label="档案分类: ">
                        <el-tree-select
                          v-model="guidangData.typeId"
                          :data="typeList"
                          :props="{
                            value: 'archiveTypeId',
                            label: 'name',
                            children: 'children',
                            disabled: (data) => {
                              return data.children !== undefined ? true : false;
                            },
                          }"
                          value-key="archiveTypeId"
                          placeholder="请选择档案分类"
                          check-strictly
                        />
                      </el-form-item>
                      <el-form-item label-width="100" label=" ">
                        <el-button
                          :disabled="false"
                          @click="sendNext"
                          type="primary"
                          >归档
                        </el-button>
                      </el-form-item>
                    </el-from>
                  </div>
                </el-col> -->
          </el-row>
        </el-tab-pane>
        <el-tab-pane>
          <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%">
              <el-table-column
                align="center"
                label="序号"
                width="180"
                type="index"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="NDFromT"
                label="	节点名称"
                width="180"
              >
              </el-table-column>
              <el-table-column
                align="center"
                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.ActionType == 2">
                    退回原因：{{ scope.row.Msg }}
                  </div>
                  <div v-else-if="scope.row.ActionType == 3">
                    移交原因：{{ scope.row.Msg }}
                  </div>
                  <div v-else-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>{{ scope.row.Msg }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <iframe :src="tuurl" width="100%" height="500px"></iframe> -->
        </el-tab-pane>
      </el-tabs>
    </div>

    <select-user
      @ok="handleQuery"
      @closeDialogf="closeSelUser"
      ref="selectRef"
    ></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="dialogBack = false">取 消</el-button>
        <el-button type="primary" @click="submitNodeBack">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  startExamine,
  updateInform,
  selWorkId,
} from "@/api/liucheng/information";
import Editor1 from "/src/components/Editor1.vue";
import {
  leave,
  getLeave,
  getReturnWorkNode,
  WorkProgressBar,
  NodeReturnWork,
} from "@/api/clocking/leave";
import {
  listColumn,
  getColumn,
  delColumn,
  addColumn,
  listByColumnId,
  updateColumn,
} from "@/api/system/column";
import selectUser from "@/views/liucheng/selectUser.vue";
import { getJToken, getToken } from "@/utils/auth";
import { ElMessage } from "element-plus";
import { listType } from "@/api/archive/type";
import {
  generNextStepNode1,
  sendFlowToNext1,
  node_ReturnWork,
  getWfGenerWorkList,
} from "@/api/liucheng";
import { saveArchive } from "@/api/archive/archive";
import Cookies from "js-cookie";
export default {
  name: "YinetoaWjwWebInfoarticle",
  props: ["WorkId1", "showcolumn", "FK_Flow", "nodeName", "fldata"],
  components: { selectUser, Editor1 },
  data() {
    return {
      showNode: true,
      // 遮罩层
      loading: false,
      guidangBt: false,
      guidangShow: false,
      showInfo: null,
      uurl: "",
      tuurl: "",
      nodeValue: null,
      nodeData: [],
      liuzhuanData: [],
      returnMsg: null,
      dialogBack: false,
      guidangData: {
        archiveNo: null,
        workId: null,
        archiveFormNo: null,
        printNum: null,
        levels: null,
        typeId: null,
        name: null,
      },
      reveal: true,
      upload: {
        headers: { Authorization: "Bearer " + getToken() },
        url: import.meta.env.VITE_APP_BASE_API + "/system/file/fileupload",
      },
      formData: {
        optionName: null,
        toNodeId: null,
        users: null,
        workid: null,
        reviewMsg: null,
      },
      flowDatas: {
        FK_Flow: null,
        toNodeId: "",
        WorkID: "",
      },
      wzflowDatas: {},
      reviewMsg: null,
      selNextNode: null,
      queryParams1: {
        pageNum: 1,
        pageSize: 30,
      },
      form: {},
      files: [],
      typeList: [],
      title1: "",
      publishTime: "",
      createBy: "",
      views: "",
      responseData: "",
      fjFiles: [],
      options: [],
      columnOptions: [],
    };
  },
  watch: {
    WorkId1: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.workId = newValue;
          this.selWorkId();
        }
      },
      deep: true,
      immediate: true,
    },
    nodeName: {
      handler(newValue, oldValue) {
        this.showNode = true;
        if (newValue) {
          this.NodeName = newValue;
          // this.selWorkId();
        }
        if (this.NodeName == "开始") {
          this.showNode = false;
        }
        this.guidangBt = true;
        if (this.NodeName == "处室负责人审核") {
          this.guidangBt = true;
        }
        if (this.NodeName == "领导签发") {
          this.guidangBt = false;
        }
        if (this.NodeName == "归档") {
          this.showNode = false;
        }
      },
      deep: true,
      immediate: true,
    },
    FK_Flow: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.FK_flow = newValue;
        }
      },
      deep: true,
      immediate: true,
    },
    showcolumn: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.showColumn = newValue;
          this.selWorkId();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.getTreeselect();
    // this.huoquTuurl(this.fldata);
    // this.selWorkId();
    // this.getTypeList();
    this.getLiuzhuanData();
  },
  mounted() {},

  methods: {
    getLiuzhuanData() {
      getWfGenerWorkList(getJToken(), this.workId).then((res) => {
        this.liuzhuanData = res.trackList;
      });
    },
    openUrl(url) {
      window.open(url, "_blank");
    },
    // async submitNodeBack() {
    //   if (this.nodeValue == null) {
    //     this.$message.error("请选择退回节点信息");
    //     return;
    //   }
    //   if (this.returnMsg == null) {
    //     this.$message.error("请输入退回原因");
    //     return;
    //   }
    //   let res = await NodeReturnWork(
    //     this.workId,
    //     this.nodeValue,
    //     this.returnMsg
    //   );
    //   this.$message.success(res);
    //   this.dialogBack = false;
    //   this.$emit("closeViewLeave");
    //   this.nodeValue = null;
    //   this.returnMsg = null;
    //   this.valDate = null;
    // },
    async getReturnWorkNode() {
      let nodeData = await getReturnWorkNode(getJToken(), this.workId);
      this.nodeData = nodeData;
    },

    // sendBack() {
    //   this.dialogBack = true;
    //   this.getReturnWorkNode();
    // },
    huoquTuurl(flowData) {
      this.wzflowDatas = flowData;
      this.tuurl =
        Cookies.get("jFontIp") +
        "/WF/Port.htm?DoWhat=OneWork2&WorkID=" +
        flowData.WorkID +
        "&FK_Flow=" +
        flowData.FK_Flow +
        "&Token=" +
        getJToken();
    },
    /** 选择用户后进行下一步 */
    handleQuery(selUsers) {
      this.formData.users = selUsers;
      if (selUsers != undefined && selUsers != "") {
        this.nextSubmit();
      }
    },
    //下一步提交
    // async nextSubmit() {
    //   //   this.formData.jtoken = getJToken();
    //   console.log("formData", this.formData);
    //   this.formData.workid = this.workId;
    //   this.formData.toNodeId = this.selNextNode;
    //   //   if (this.leaveClear == true) {
    //   //     this.formData.reviewMsg = "同意";
    //   //   } else {
    //   this.formData.reviewMsg = this.reviewMsg;
    //   //   }
    //   this.formData.optionName = this.NodeName;
    //   //console.log("this.formData", this.formData);
    //   if (this.guidangBt) {
    //     this.guidangData.archiveFormNo = this.wzflowDatas.FK_Flow;
    //     this.guidangData.workId = this.wzflowDatas.WorkID;
    //     let { archiveRes } = await saveArchive(this.guidangData);
    //     //console.log(archiveRes);
    //   } else {
    //     let updata = await updateInform(this.form);
    //     //console.log(updata);
    //   }

    //   let response = await sendFlowToNext1(this.formData);
    //   //console.log(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.$refs["selectRef"].closeView();
    //     this.$emit("closeViewLeave");
    //     this.selNextNode = null;
    //     this.reviewMsg = null;
    //   }
    // },
    //获取下一节点的接收人信息
    // async sendNext() {
    //   if (this.selNextNode == undefined) {
    //     this.$modal.msgWarning("请选择下一节点");
    //     return;
    //   }
    //   if (this.NodeName !== "领导签发") {
    //     if (this.reviewMsg == null) {
    //       this.$modal.msgWarning("请填写审批意见！");
    //       return;
    //     }
    //   } else {
    //     if (this.guidangData.typeId == "") {
    //       this.$modal.msgWarning("请选择档案分类！");
    //       return;
    //     }
    //   }

    //   //   this.flowDatas.token = getJToken();
    //   this.flowDatas.WorkID = this.workId;
    //   this.flowDatas.FK_Flow = this.FK_Flow;
    //   this.flowDatas.toNodeId = this.selNextNode;

    //   let DeliveryWay = "";
    //   //查看当前是选择的那个节点
    //   this.options.forEach((item, index) => {
    //     //console.log(item);
    //     if (item.NodeID == this.selNextNode) {
    //       DeliveryWay = item.DeliveryWay;
    //     }
    //   });
    //   //console.log(DeliveryWay);
    //   //判断当前节点是哪一个节点
    //   //DeliveryWay 3:绑定人员计算
    //   if (DeliveryWay == "3") {
    //     this.nextSubmit();
    //   }
    //   //4:由发送人选择发送
    //   else if (DeliveryWay == "4" || DeliveryWay == "1" || DeliveryWay == "9") {
    //     this.openSelectUser();
    //     return;
    //   } else {
    //     this.nextSubmit();
    //   }
    // },

    // openSelectUser() {
    //   this.$refs["selectRef"].show1(this.flowDatas);
    // },
    // async generNextStepAllNode() {
    //   let res = await generNextStepNode1(
    //     this.FK_flow,
    //     this.workId,
    //     "",
    //     getJToken()
    //   );
    //   if (res.msg == "Y") {
    //     this.options.push({ NodeID: 0, Name: "结束" });
    //   } else {
    //     this.options = res.data;
    //   }
    //   this.selNextNode = this.options[0].NodeID;
    //   if (this.NodeName.indexOf("归档") != -1) {
    //     this.getTypeList();
    //     this.reviewMsg = "归档";
    //     this.guidangBt = true;
    //   }
    // },
    // /** 查询归档类型列表 */
    // getTypeList() {
    //   listType({}).then((response) => {
    //     console.log("response", response);
    //     this.typeList = this.handleTree(
    //       response.data,
    //       "archiveTypeId",
    //       "parentId"
    //     );
    //   });
    // },
    /** 查询文章所属的栏目下拉树结构 */
    // getTreeselect() {
    //   //console.log("11111111111");
    //   this.columnOptions = [];
    //   listColumn(this.queryParams1).then((response) => {
    //     this.columnOptions = this.handleTree(response.rows, "id");
    //   });
    // },
    //解析图片
    // getImagesFromData(data) {
    //   // 在这里解析数据，提取图片信息并返回一个包含图片相关属性的数组
    //   // 例如，假设数据中的图片信息是以<img>标签的形式呈现的：
    //   //console.log("data", data);
    //   const imagePattern =
    //     /<img\s*src="([^"]+)"\s*alt="([^"]+)"\s*width="(\d+)"\s*height="(\d+)"\s*\/?>/g;
    //   const images = [];
    //   let match;
    //   while ((match = imagePattern.exec(data)) !== null) {
    //     const src = match[1];
    //     const alt = match[2];
    //     const width = parseInt(match[3], 10);
    //     const height = parseInt(match[4], 10);
    //     images.push({ src, alt, width, height });
    //     //console.log("image", images);
    //   }
    //   return images;
    // },
    async selWorkId() {
      this.loading = true;
      let { data } = await selWorkId(this.workId);

      if (data.urlLink == null) {
        this.showInfo = false;
        this.form = data;
        this.title = data.title;
        this.publishTime = data.publishTime;
        this.createBy = data.createBy;
        this.views = data.views;
        this.responseData = data.content;
        this.fjFiles = data.fjFiles == null ? [] : data.fjFiles;

        this.form.columnId = data.columnId;
        this.form.content = data.content;
      } else {
        this.showInfo = true;
        this.uurl = data.urlLink;
        this.form.columnId = data.columnId;
      }
      this.generNextStepAllNode();
      this.loading = false;
    },
  },
};
</script>

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