.

lib/app/communications/customer.js

@@ -1,7 +1,7 @@
 import "./style.scss";
 import { createElement, createElementInit } from "../../functions";
 import { r } from "../../utility/lgres";
-import { isEmail, isPhone } from "../../utility";
+import { formatUrl, isEmail, isPhone } from "../../utility";
 import { setTooltip } from "../../ui/tooltip";
 import { createIcon } from "../../ui/icon";
 import { createCheckbox } from "../../ui/checkbox";
@@ -195,32 +195,153 @@ class CustomerCommunication {
             )
         );
 
-        const message = createElement('div');
+        const message = createElement('div', 'list-bar');
         this.#message = message;
         container.appendChild(message);
         return this.#container = container;
     }
 
-    load(data, contacts) {
+    load(data, contacts, followers) {
         const children = [];
         if (data?.length > 0) {
             for (let comm of data) {
-                const div = document.createElement('div', 'txtdiv');
+                const div = createElement('div', 'item-div');
                 let name;
                 if (comm.IsReply) {
-                    const email = isEmail(comm.Sender);
-                    const c = contacts.find(c => email ?
-                        c.Email === comm.Sender :
-                        c.MobilePhone === comm.Sender);
-                    if (c != null) {
-                        name = c.Name;
+                    const c = isEmail(comm.Sender) ?
+                        contacts.find(c => c.Email === comm.Sender) :
+                        contacts.find(c => c.MobilePhone === comm.Sender);
+                    name = c?.Name;
+                }
+                name ??= comm.IsReply && String(comm.FormatSender) !== '' ? comm.FormatSender : comm.Sender;
+                let sendto = '';
+                if (!comm.IsReply && comm.OriPhoneNumbers?.length > 0) {
+                    for (let oriph of comm.OriPhoneNumbers) {
+                        let cname;
+                        const email = isEmail(oriph);
+                        if (contacts?.length > 0) {
+                            let c = email ?
+                                contacts.find(c => c.Email === oriph) :
+                                contacts.find(c => c.MobilePhone === oriph);
+                            if (c != null) {
+                                cname = `${email ? c.Email : c.MobilePhone} - ${c.Name}`;
+                            } else if (followers?.length > 0) {
+                                c = email ?
+                                    followers.find(f => f.Email === oriph) :
+                                    followers.find(f => f.MobilePhone === oriph);
+                                if (c != null) {
+                                    cname = `${email ? c.Email : c.MobilePhone} - ${c.Name}`;
+                                }
+                            }
+                        }
+                        sendto += (cname ?? oriph) + '\n';
                     }
                 }
+                if (sendto !== '') {
+                    sendto = r('sendToColon', 'Send To :') + `\n${sendto}`;
+                }
+                div.appendChild(createElementInit('div', div => {
+                    div.className = 'item-poster';
+                    div.innerText = name;
+                    if (!comm.IsReply && sendto?.length > 0) {
+                        setTooltip(div, sendto);
+                    }
+                }));
+                const content = createElement('div', 'item-content');
+                if (/https?:\/\//i.test(comm.Message)) {
+                    content.innerHTML = formatUrl(comm.Message);
+                } else {
+                    content.innerText = comm.Message;
+                }
+                if (comm.IsReply) {
+                    div.classList.add('item-other');
+                } else {
+                    const [status, statusmsg] = this.#getMessageStatus(comm);
+                    if (status !== -100) {
+                        let statustext;
+                        switch (status) {
+                            case 0:
+                                statustext = r('pending', 'Pending');
+                                content.style.backgroundColor = '#ffc107';
+                                break;
+                            case 1:
+                                statustext = r('sent', 'Sent');
+                                break;
+                            case 9:
+                                statustext = r('failed', 'Failed');
+                                content.style.backgroundColor = '#ffc107';
+                                break;
+                            case 10:
+                                statustext = r('optOut', 'Opt-Out');
+                                content.style.backgroundColor = '#ffc107';
+                                break;
+                            case 412:
+                                statustext = r('landline', 'Landline');
+                                content.style.backgroundColor = '#ffc107';
+                                break;
+                            default:
+                                statustext = r('undelivered', 'Undelivered');
+                                content.style.backgroundColor = '#ffc107';
+                                break;
+                        }
+                        const divstatus = createElementInit('div', div => {
+                            div.className = 'item-status';
+                            div.innerText = statustext;
+                            if (status == -10) {
+                                setTooltip(div, statusmsg);
+                            }
+                        });
+                        content.appendChild(divstatus);
+                    }
+                }
+                div.append(
+                    content,
+                    createElementInit('div', div => {
+                        div.className = 'item-time';
+                        div.innerText = comm.TimeStr;
+                    })
+                );
+                children.push(div);
             }
             children[0].style.marginTop = '0';
             this.#message.append(...children);
+            this.#message.scrollTop = this.#message.scrollHeight
+            // setTimeout(() => this.#message.scrollTop = this.#message.scrollHeight, 0);
         }
     }
+
+    #getMessageStatus(comm) {
+        let status = -100;  // 没有状态，页面上不显示
+        const ls = [];
+        let statusmsg = '';
+        if (!comm.StatusIncorrect && comm.Participator?.length > 0) {
+            for (let p of comm.Participator) {
+                if (!isEmail(p.CustomerNumber)) {
+                    if (ls.indexOf(p.Status) < 0) {
+                        ls.push(p.Status);
+                    }
+                    if (statusmsg.length > 0) {
+                        statusmsg += '\n';
+                    }
+                    statusmsg += `${p.CustomerNumber}: `;
+                    const st = ({
+                        0: r('undelivered', 'Undelivered'),
+                        1: r('sent', 'Sent'),
+                        9: r('failed', 'Failed')
+                    })[p.Status];
+                    if (st != null) {
+                        statusmsg += st;
+                    }
+                }
+            }
+        }
+        if (ls.length === 1) {
+            status = ls[0];
+        } else if (ls.length > 1) {
+            status = -10; // 多种状态
+        }
+        return [status, statusmsg];
+    }
 }
 
 export default CustomerCommunication;