(function (window, undefined) {
  var old_onload = window.onload;
  window.onload = function () {
    const template = document.getElementsByClassName("template")[0];
    Vue.prototype.lang = Object.assign(window.lang, window.plugin_lang);
    const host = location.origin;
    const fir = location.pathname.split("/")[1];
    const str = `${host}/${fir}/`;
    new Vue({
      components: {
        comConfig,
        comTinymce,
      },
      data() {
        return {
          // 加载中
          pageLoading: false,
          // 删除对话框
          deleteVisible: false,
          replayVisible: false,
          sendLoading: false,
          isAddNotes: false,
          viewer: null,
          deliveryVisible: false,
          // 添加备注按钮的loading
          addNotesLing: false,
          top: "top",
          currency_prefix:
            JSON.parse(localStorage.getItem("common_set")).currency_prefix ||
            "¥",
          currency_suffix:
            JSON.parse(localStorage.getItem("common_set")).currency_suffix ||
            "元",
          // 工单详情
          isEditing: false, // 是否正在编辑模式
          orderDetailData: {},
          delivery_operate_type: {
            1: lang.order_text81,
            2: lang.order_text82,
            3: lang.order_text83,
          },
          deliveryLoading: false,
          params: {
            selectHostList: [], // 选择的产品
            listStr: "",
            ticket_type: "", // 产品类型
            status: "", // 工单状态
          },
          // 回复内容
          replyData: "",
          editObj: {}, // 正在编辑的对象
          // 产品列表
          hostList: [],
          // 编辑按钮loading
          editLoding: false,
          // 订单类型列表
          order_status_options: [],
          // 回复列表
          replyList: [],
          product_obj_list: [],
          prereplyList: [],
          // 日志列表
          logList: [],
          logVisible: false,
          columns: [
            {
              colKey: "description",
              title: lang.order_text39,
              cell: "description",
              ellipsis: true,
            },
            {
              colKey: "create_time",
              title: lang.order_text40,
              cell: "create_time",
              width: "157",
            },
          ],
          // 工单状态下拉框数据
          orderTypeList: [],
          // 上传附件
          attachmentList: [],
          // 预览图片地址
          preImg: "",
          // 上传附件headers设置
          uploadHeaders: {
            Authorization: "Bearer" + " " + localStorage.getItem("backJwt"),
          },
          uploadTip: "",
          img_visible: false,
          baseURL: url,
          uploadUrl: str + "v1/upload",
          /** 非受控用法：与分页组件对齐（此处注释为非受控用法示例，代码有效，勿删） */
          pagination: {
            current: 1,
            pageSize: 10,
            total: 0,
            showJumper: true,
          },
        };
      },
      computed: {
        avatar() {
          return (type) => {
            return type === "Client"
              ? `${this.baseURL}img/client.png`
              : `${this.baseURL}img/admin.png`;
          };
        },
      },
      methods: {
        formatResponse(res) {
          if (res.status !== 200) {
            this.$message.error(res.msg);
            return {error: res.msg};
          }
          return {save_name: res.data.save_name, url: res.data.image_url};
        },
        // 分页变化时触发该事件
        onPageChange(pageInfo, newData) {
          // 受控用法所需
          this.pagination.current = pageInfo.current;
          this.pagination.pageSize = pageInfo.pageSize;
        },
        // 点击预设回复弹窗
        usePrePlay(item) {
          tinyMCE.editors[0].setContent(item.content);
          this.replayVisible = false;
        },
        // 点击图片
        hanldeImage(event) {
          if (
            event.target.nodeName == "IMG" ||
            event.target.nodeName == "img"
          ) {
            const img = event.target.currentSrc;
            this.preImg = img;
            this.viewer.show();
          }
        },
        // 跳转用户信息页
        goUserPagr() {
          const url =
            str +
            `client_detail.htm?client_id=${this.orderDetailData.client_id}`;
          window.open(url);
        },
        goClientPage(id) {
          if (id) {
            const url = str + `client_detail.htm?client_id=${id}`;
            window.open(url);
          }
        },
        // 获取工单预设回复列表
        getTicketPrereply() {
          ticketPrereply()
            .then((res) => {
              this.prereplyList = res.data.data.list;
            })
            .catch((err) => {
              this.$message.error(err.data.msg);
            });
        },
        goList() {
          window.history.go(-1);
        },
        goProductDetail(item) {
          const url =
            str + `host_detail.htm?client_id=${item.client_id}&id=${item.id}`;
          window.open(url);
        },
        // 确认添加备注
        handelAddNotes() {
          this.addNotesLing = true;
          const content = tinyMCE.editors[0].getContent();
          const params = {
            id: this.orderDetailData.id,
            content: content,
          };
          addTicketNotes(params)
            .then((res) => {
              this.getOrderDetailData();
              tinyMCE.editors[0].setContent("");
              this.isAddNotes = false;
            })
            .catch((error) => {
              this.$message.warning({
                content: error.data.msg,
                placement: "top-right",
              });
            })
            .finally(() => {
              this.addNotesLing = false;
            });
        },
        // 取消添加备注
        cancelAddNotes() {
          tinyMCE.editors[0].setContent("");
          this.isAddNotes = false;
        },
        // 备注列表
        getTicketNotes() {
          const str = location.search.substr(1).split("&");
          const orderId = str[0].split("=")[1];

          ticketNotes(orderId)
            .then((res) => {
              this.notesList = res.data.data.list;
              const arr = this.orderDetailData.replies.concat(this.notesList);
              arr.sort((a, b) => {
                return a.create_time - b.create_time;
              });
              arr.forEach((item) => {
                item.isShowBtn = false;
                if (!item.type) {
                  item.type = "notes";
                }
              });
              const arrEntities = {
                lt: "<",
                gt: ">",
                nbsp: " ",
                amp: "&",
                quot: '"',
              };
              this.replyList = arr.map((item) => {
                item.content = filterXSS(
                  item.content.replace(
                    /&(lt|gt|nbsp|amp|quot);/gi,
                    function (all, t) {
                      return arrEntities[t];
                    }
                  )
                ).replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) {
                  return arrEntities[t];
                });
                item.content = item.content.replaceAll(
                  'http-equiv="refresh"',
                  ""
                );
                return item;
              });
            })
            .catch((err) => {
              console.log(err);
              this.replyList = this.orderDetailData.replies.concat([]);
              this.$message.error(err.data.msg);
            })
            .finally(() => {
              this.pageLoading = false;
              this.$nextTick(() => {
                this.scrollBotton();
              });
            });
        },
        // 编辑消息
        editItem(item) {
          this.editObj = item;
          this.isEditing = true;
          this.replyData = item.content;
          this.$refs.comTinymce.setContent(item.content);
          tinyMCE.editors[0].editorManager.get("tiny").focus();
          this.handleScrollBottom();
        },
        // 聊天列表滚动到底部
        scrollBotton() {
          const listDom = document.querySelector(".reply-list");
          const listBoxDom = document.querySelector(".t-list__inner");
          const h = listBoxDom.scrollHeight;
          listDom.scrollTop = h;
        },
        // 滚动到底部
        handleScrollBottom() {
          const detailDom = document.querySelector(".area");
          detailDom.scrollTop = detailDom.scrollHeight;
        },
        // 确认编辑
        handelEdit() {
          this.editLoding = true;
          const conten = tinyMCE.editors[0].getContent();
          if (this.editObj.type === "notes") {
            const params = {
              ticket_id: this.editObj.ticket_id,
              id: this.editObj.id,
              content: conten,
            };
            notesReplyEdit(params)
              .then((result) => {
                this.getOrderDetailData();
                tinyMCE.editors[0].setContent("");
                this.isEditing = false;
              })
              .catch((error) => {
                this.$message.warning({
                  content: error.data.msg,
                  placement: "top-right",
                });
              })
              .finally(() => {
                this.editLoding = false;
              });
          } else {
            const params = {
              id: this.editObj.id,
              content: conten,
            };
            ticketReplyEdit(this.editObj.id, params)
              .then((result) => {
                this.getOrderDetailData();
                tinyMCE.editors[0].setContent("");
                this.isEditing = false;
              })
              .catch((error) => {
                this.$message.warning({
                  content: error.data.msg,
                  placement: "top-right",
                });
              })
              .finally(() => {
                this.editLoding = false;
              });
          }
        },
        copyIp(row) {
          const allIp = (row.dedicate_ip + "," + row.assign_ip).replace(
            /,/g,
            "\n"
          );
          copyText(allIp);
        },
        // 点击添加备注
        addNotes() {
          this.isAddNotes = true;
          tinyMCE.editors[0].editorManager.get("tiny").focus();
        },
        // 取消编辑
        cancelEdit() {
          this.editObj = {};
          this.replyData = "";
          this.$refs.comTinymce.setContent("");
          tinyMCE.editors[0].setContent("");
          this.isEditing = false;
        },
        // 点击删除按钮
        deleteItem(item) {
          if (this.isEditing) {
            this.$message.error(lang.order_text41);
            return;
          }
          this.editObj = item;
          this.deleteVisible = true;
        },
        // 删除弹窗确认
        handelDelete() {
          if (this.editObj.type === "notes") {
            const params = {
              ticket_id: this.editObj.ticket_id,
              id: this.editObj.id,
            };
            orderNotesDelete(params)
              .then((result) => {
                this.getOrderDetailData();
                this.$message.success({
                  content: result.data.msg,
                  placement: "top-right",
                });
              })
              .catch((err) => {
                this.$message.error(err.data.msg);
              })
              .finally(() => {
                this.deleteVisible = false;
              });
          } else {
            const params = {
              id: this.editObj.id,
            };
            orderReplyDelete(params)
              .then((result) => {
                this.getOrderDetailData();
                this.$message.success({
                  content: result.data.msg,
                  placement: "top-right",
                });
              })
              .catch((err) => {
                this.$message.error(err.data.msg);
              })
              .finally(() => {
                this.deleteVisible = false;
              });
          }
        },
        handelDeliveryOperate() {
          this.deliveryLoading = true;
          const subApi =
            this.orderDetailData.delivery_operate === 1
              ? apiDeliveryManual
              : this.orderDetailData.delivery_operate === 2
              ? apiDeliveryActive
              : this.orderDetailData.delivery_operate === 3
              ? apiDeliveryTerminate
              : apiDeliveryManual;
          subApi({
            id: this.orderDetailData.id,
          })
            .then((res) => {
              this.deliveryLoading = false;
              this.deliveryVisible = false;
              this.$message.success(res.data.msg);
              this.getOrderDetailData();
            })
            .catch((err) => {
              this.deliveryLoading = false;
              this.$message.error(err.data.msg);
            });
        },

        // 提交回复
        submitReply() {
          this.sendLoading = true;
          const conten = tinyMCE.editors[0].getContent();
          const attachmentList = [];
          this.attachmentList.forEach((item) => {
            attachmentList.push(item.response.save_name);
          });
          const params = {
            id: this.orderDetailData.id,
            content: conten,
            attachment: attachmentList,
          };
          replyUserOrder(this.orderDetailData.id, params)
            .then((result) => {
              tinyMCE.editors[0].setContent("");
              this.attachmentList = [];
              this.getOrderDetailData();
            })
            .catch((error) => {
              this.$message.warning({
                content: error.data.msg,
                placement: "top-right",
              });
            })
            .finally(() => {
              this.sendLoading = false;
            });
        },
        goback() {
          location.href = "index.htm";
        },
        // 工单-转内部-关联产品变化
        hostChange() {
          this.$forceUpdate();
        },
        // 上传附件-返回内容
        uploadFormatResponse(res) {
          if (!res || res.status !== 200) {
            return {error: lang.upload_fail};
          }
          return {...res, save_name: res.data.save_name};
        },
        // 修改工单状态
        handelEditOrderStatus() {
          if (this.params.status == "") {
            return this.$message.warning({
              content: lang.order_text42,
              placement: "top-right",
            });
          }
          const str = location.search.substr(1).split("&");
          const orderId = str[0].split("=")[1];
          const obj = {
            id: orderId,
            status: this.params.status,
            ticket_type_id: this.params.ticket_type,
            host_ids: [this.params.listStr],
          };
          this.editLoding = true;
          editOrderStatus(obj)
            .then((result) => {
              if (obj.status == 4) {
                this.goList();
              } else {
                this.$message.success({
                  content: result.data.msg,
                  placement: "top-right",
                });
                this.getOrderDetailData();
              }
              this.editLoding = false;
            })
            .catch((err) => {
              this.editLoding = false;
              this.$message.error(err.data.msg);
            });
        },
        handelLog() {
          this.pagination.current = 1;
          this.pagination.pageSize = 10;
          this.getTicketLog();
          this.logVisible = true;
        },
        // 上传附件-进度
        uploadProgress(val) {
          if (val.percent) {
            this.uploadTip = "uploaded" + val.percent + "%";
            if (val.percent === 100) {
              this.uploadTip = "";
            }
          }
        },
        // 上传附件-成功后
        uploadSuccess(res) {
          if (
            res.fileList.filter((item) => item.name == res.file.name).length > 1
          ) {
            this.$message.warning({
              content: lang.upload_same_name,
              placement: "top-right",
            });
            this.attachmentList.splice(this.attachmentList.length - 1, 1);
          }
          this.$forceUpdate();
        },
        // 删除已上传附件
        removeAttachment(file, i) {
          this.attachmentList.splice(i, 1);
          this.$forceUpdate();
        },
        // 下载文件
        downFile(res, title) {
          let url = res.lastIndexOf("/");
          res = res.substring(url + 1, res.length);
          downloadFile({name: res})
            .then(function (response) {
              const blob = new Blob([response.data]);
              const fileName = title;
              const linkNode = document.createElement("a");
              linkNode.download = fileName; //a标签的download属性规定下载文件的名称
              linkNode.style.display = "none";
              linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
              document.body.appendChild(linkNode);
              linkNode.click(); //模拟在按钮上的一次鼠标单击
              URL.revokeObjectURL(linkNode.href); // 释放URL 对象
              document.body.removeChild(linkNode);
            })
            .catch(function (error) {
              console.log(error);
              this.$message.error(error.data.msg);
            });
        },
        // 附件下载
        clickFile(item) {
          const name = item.name;
          const url = item.url;
          const type = name.substring(name.lastIndexOf(".") + 1);
          if (
            [
              "png",
              "jpg",
              "jpeg",
              "bmp",
              "webp",
              "PNG",
              "JPG",
              "JPEG",
              "BMP",
              "WEBP",
            ].includes(type)
          ) {
            this.preImg = url;
            this.viewer.show();
          } else {
            const downloadElement = document.createElement("a");
            downloadElement.href = url;
            downloadElement.download = name; // 下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 点击下载
          }
        },
        timeago(time) {
          if (time == 0) {
            return "--";
          }
          // time 毫秒
          const dateTimeStamp = time;
          const minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
          const hour = minute * 60;
          const day = hour * 24;
          const week = day * 7;
          const month = day * 30;
          const year = month * 12;
          const now = new Date().getTime(); //获取当前时间毫秒
          const diffValue = now - dateTimeStamp; //时间差

          let result = "";
          if (diffValue < 0) {
            result = "" + lang.order_text43;
          }
          const minC = diffValue / minute; //计算时间差的分，时，天，周，月
          const hourC = diffValue / hour;
          const dayC = diffValue / day;
          const weekC = diffValue / week;
          const monthC = diffValue / month;
          const yearC = diffValue / year;

          if (yearC >= 1) {
            result = " " + parseInt(yearC) + lang.order_text44;
          } else if (monthC >= 1 && monthC < 12) {
            result = " " + parseInt(monthC) + lang.order_text45;
          } else if (weekC >= 1 && weekC < 5 && dayC > 6 && monthC < 1) {
            result = " " + parseInt(weekC) + lang.order_text46;
          } else if (dayC >= 1 && dayC <= 6) {
            result = " " + parseInt(dayC) + lang.order_text47;
          } else if (hourC >= 1 && hourC <= 23) {
            result = " " + parseInt(hourC) + lang.order_text48;
          } else if (minC >= 1 && minC <= 59) {
            result = " " + parseInt(minC) + lang.order_text49;
          } else if (diffValue >= 0 && diffValue <= minute) {
            result = lang.order_text50;
          }
          return result;
        },
        goBotoom() {
          // .area 平滑的滑到最底部
          const listDom = document.querySelector(".area");
          const h = listDom.scrollHeight;
          listDom.scrollTo({left: 0, top: h, behavior: "smooth"});
        },
        // 工单日志
        getTicketLog() {
          const str = location.search.substr(1).split("&");
          const orderId = str[0].split("=")[1];
          ticketLog(orderId)
            .then((res) => {
              this.logList = res.data.data.list;
              this.pagination.total = res.data.data.list.length;
            })
            .catch((err) => {
              this.$message.error(err.data.msg);
            });
        },
        // 获取工单详情
        async getOrderDetailData() {
          this.pageLoading = true;
          const str = location.search.substr(1).split("&");
          const orderId = str[0].split("=")[1];
          const result = await getUserOrderDetail(orderId);
          if (result.status === 200) {
            this.orderDetailData = result.data.data.ticket;
            this.orderDetailData.distanceTime = this.timeago(
              this.orderDetailData.last_reply_time * 1000
            );
            this.getOrderTypeName();
            this.getHostsName();
            this.getTicketStatus();
            this.getTicketNotes();
          }
        },
        // 获取当前工单类型名称
        getOrderTypeName() {
          getUserOrderType()
            .then((result) => {
              const orderTypeList = result.data.data.list;
              this.orderTypeList = orderTypeList;
              const orderType = orderTypeList.filter(
                (item) => item.id === this.orderDetailData.ticket_type_id
              )[0];
              this.params.ticket_type = orderType ? orderType.id : null;
            })
            .catch((err) => {
              this.$message.error(err.data.msg);
            });
        },
        // 获取当前用户关联产品名称
        getHostsName() {
          getHost({
            client_id: this.orderDetailData.client_id,
            page: 1,
            limit: 999999999,
          })
            .then((result) => {
              const data = result.data.data.list;
              data.forEach((item) => {
                item.showName = item.product_name + "(" + item.name + ")";
              });
              this.hostList = data;
              const arr = [];
              this.product_obj_list = [];
              this.orderDetailData.host_ids.forEach((id) => {
                data.forEach((item) => {
                  if (item.id == id) {
                    arr.push(item.id);
                    this.product_obj_list.push(item);
                  }
                });
              });
              this.params.selectHostList = [...arr];
              this.params.listStr = arr[0] || "";
            })
            .catch((err) => {
              this.$message.error(err.data.msg);
            });
        },
        // 获取工单状态列表
        getTicketStatus() {
          ticketStatus()
            .then((res) => {
              res.data.data.list.forEach((item) => {
                // if (item['default'] === 1) {
                //   this.order_status.push(item.id)
                // }
                if (item.name === this.orderDetailData.status) {
                  this.params.status = item.id;
                }
                delete item["default"];
              });
              this.order_status_options = res.data.data.list;
            })
            .catch((err) => {
              this.$message.error(err.data.msg);
            });
        },
        // 时间格式转换
        formatDate(dateStr) {
          const date = new Date(dateStr * 1000);
          const str1 = [
            date.getFullYear(),
            date.getMonth() + 1,
            date.getDate(),
          ].join("-");
          const str2 = [
            this.formatDateAdd0(date.getHours()),
            this.formatDateAdd0(date.getMinutes()),
          ].join(":");
          return str1 + " " + str2;
        },
        formatDateAdd0(m) {
          return m < 10 ? "0" + m : m;
        },
        initTemplate() {
          tinymce.init({
            selector: "#tiny",
            language_url: "/tinymce/langs/zh_CN.js",
            language:
              localStorage.getItem("backLang") === "zh-cn" ? "zh_CN" : "en_US",
            min_height: 400,
            width: "100%",
            plugins:
              "link lists image code table colorpicker textcolor wordcount contextmenu fullpage paste",
            toolbar:
              "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image fullpage code | removeformat",
            images_upload_url: str + "v1/upload",
            paste_data_images: true,
            convert_urls: false,
            //粘贴图片后，自动上传
            urlconverter_callback: function (url, node, on_save, name) {
              return url;
            },
            images_upload_handler: this.handlerAddImg,
          });
        },
        handlerAddImg(blobInfo, success, failure) {
          return new Promise((resolve, reject) => {
            const formData = new FormData();
            formData.append("file", blobInfo.blob());
            axios
              .post(`${location.protocol}//${str}v1/upload`, formData, {
                headers: {
                  Authorization:
                    "Bearer" + " " + localStorage.getItem("backJwt"),
                },
              })
              .then((res) => {
                const json = {};
                if (res.status !== 200) {
                  failure("HTTP Error: " + res.data.msg);
                  return;
                }
                // json = JSON.parse(res)
                json.location = res.data.data?.image_url;
                if (!json || typeof json.location !== "string") {
                  failure("Error:" + res.data.msg);
                  return;
                }
                success(json.location);
              });
          });
        },
        mouseOver(val) {
          val.isShowBtn = true;
          this.$forceUpdate();
        },
        mouseLeave(val) {
          val.isShowBtn = false;
          this.$forceUpdate();
        },
        autoRefresh() {
          setInterval(() => {
            this.getOrderDetailData();
          }, 1000 * 60);
        },
        initViewer() {
          this.viewer = new Viewer(document.getElementById("viewer"), {
            button: true,
            inline: false,
            zoomable: true,
            title: true,
            tooltip: true,
            minZoomRatio: 0.5,
            maxZoomRatio: 100,
            movable: true,
            interval: 2000,
            navbar: true,
            loading: true,
          });
        },
      },
      created() {
        this.getOrderDetailData();
        this.autoRefresh();
        this.getTicketLog();
        this.getTicketPrereply();
      },
      mounted() {
        this.initTemplate();
        this.initViewer();
      },
    }).$mount(template);
    typeof old_onload == "function" && old_onload();
  };
})(window);