<%--
  Created by IntelliJ IDEA.
  User: wuxuan
  Date: 2022/2/8
  Time: 13:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<form name="userForm" id="editContent" target="result" method="post">
    <input type="hidden" name="taskId" value="${task.task_id}">
    <input type="hidden" name="spId" value="${task.sp_id}">
    <input type="hidden" id="startEditType" value="${contentType}">

    <table border="0" cellpadding="0" cellspacing="0" width="550px">
        <tr class="info">
            <th>修改类型:</th>
            <td>
                <label><input type="radio" name="editType" value="0">普通短信</label>
                <label><input type="radio" name="editType" value="1">动态短信</label>
            </td>
        </tr>
        <tr class="info">
            <th>企业ID:</th>
            <td>
                ${task.sp_id}
            </td>
        </tr>
        <tr class="info">
            <th>任务ID:</th>
            <td>
                ${task.task_id}
            </td>
        </tr>
        <tr class="info">
            <th>运营商:</th>
            <c:if test="${taskInfo.otype == 1}">
                <td>联通</td>
            </c:if>
            <c:if test="${taskInfo.otype == 2}">
                <td>移动</td>
            </c:if>
            <c:if test="${taskInfo.otype == 3}">
                <td>电信</td>
            </c:if>
            <c:if test="${taskInfo.otype == 0}">
                <td>全部</td>
            </c:if>
        </tr>
        <tr class="info static">
            <th>原始内容:</th>
            <td>
                    <textarea id="sourceContent_static" name="sourceContent" style="width: 300px;margin-top: 10px;"
                              readonly rows="5" class="form_control form_white"
                              cols="150">${task.content}</textarea>
                <span id="sourceContent_static1"></span>
            </td>
        </tr>
        <tr class="info static">
            <th>修改内容:</th>
            <td>
                    <textarea id="newContent_static" name="newContent" style="width: 300px;margin-top: 10px;" rows="5"
                              class="form_control form_white"
                              cols="150">${task.content}</textarea>
                <span id="newContent_static1"></span>
            </td>
        </tr>
        <tr class="info dynamic" style="display: none;">
            <th class="new_active">
                动态短信内容：
            </th>
            <td><textarea style="width: 300px;margin-top: 10px;" rows="5" cols="30" class="form_control formtemplateContent_white"
                          name="template2" id="template2" minlength="1" readonly>${task.content}</textarea>
            </td>
        </tr>
        <tr class="info dynamic" style="display: none;">
            <th class="new_active">
                动态短信模板：
            </th>
            <td><textarea style="width: 300px;margin-top: 10px;" rows="5" cols="30" class="form_control form_white"
                          name="template" id="template" minlength="1" readonly>${templateContent}</textarea>
            </td>
        </tr>
        <tr class="info dynamic" style="display: none;">
            <th class="old_active">
                待修改字符串:
            </th>
            <td><textarea
                    style="width: 300px;margin-top: 10px;" rows="5" cols="30" class="form_control form_white"
                    name="sourceContent_dynamic" id="sourceContent" minlength="1"></textarea>
                <span id="sourceContent1"></span>
            </td>
        </tr>

        <tr class="info dynamic" style="display: none;">
            <th class="new_active">
                修改后字符串:
            </th>
            <td><textarea style="width: 300px;margin-top: 10px;" rows="5" cols="30" class="form_control form_white"
                          name="newContent_dynamic" id="newContent" minlength="1"></textarea>
                <span id="newContent1"></span>
            </td>
        </tr>
        <tr class="info">
            <th>备注：</th>
            <td><textarea style="width: 300px;margin-top: 10px;" rows="5" cols="30" class="form_control form_white"
                          name="remark" id="remark" minlength="1"></textarea>
            </td>
        </tr>
        <tr class="info dynamic" style="display: none;">
            <th>温馨提醒(动态内容例子):</th>
            <td>
                <p style="margin-top: 10px;">修改前内容为：【签名】<span style="color: red;font-weight:bold;">网关</span>测试，验证码：09432
                </p>
                <p style="margin-top: 10px;">修改后内容为：【签名】<span style="color: red;font-weight:bold;">短信</span>测试，验证码：09432
                </p>
                <p style="margin-top: 10px;">动态短信模板：【签名】网关测试，验证码： {x}</p>
                <p style="margin-top: 10px;">修改前字符串：<span style="color: red;">网关</span></p>
                <p style="margin-top: 10px;">修改后字符串：<span style="color: red;">短信</span></p>
            </td>
        </tr>

    </table>

</form>

<iframe name="result" id="result" src="about:blank" frameborder="0" width="0" height="0"></iframe>

<style>

</style>

<script>
    $(function () {

        $("input[name=editType]").change(function () {
            let val = $(this).val();
            if ("0" === val) {
                $(".static").show();
                $(".dynamic").hide();
            } else {
                $(".dynamic").show();
                $(".static").hide();
            }
        })

        let oldType = $("#startEditType").val()
        if (oldType === "0") {
            $("input[name='editType'][value='0']").attr("checked", true);
            $(".static").show();
            $(".dynamic").hide();
        } else {
            $("input[name='editType'][value='1']").attr("checked", true);
            $(".dynamic").show();
            $(".static").hide();
        }



        let srcContentStaticLength = $("#sourceContent_static").val()
        if (srcContentStaticLength) {
            setSmsLengthInfo(srcContentStaticLength.length, "sourceContent_static1")
        }
        let newContentStaticLength = $("#newContent_static").val()
        if (newContentStaticLength) {
            setSmsLengthInfo(newContentStaticLength.length, "newContent_static1")
        }

        let sourceContentLength = $("#sourceContent").val()
        if (sourceContentLength) {
            setSmsLengthInfo(sourceContentLength.length, "sourceContent1")
        }
        let newContentLength = $("#newContent").val()
        if (newContentLength) {
            setSmsLengthInfo(newContentLength.length, "newContent1")
        }

        $("#newContent_static").on('input propertychange', function () {
            let val = $(this).val()
            if (val) {
                let length = val.length
                setSmsLengthInfo(length, 'newContent_static1')
            } else {
                alert("修改后字符串不能为空")
            }
        })

        $("#template").on('input propertychange', function () {
            let val = $(this).val()
            if (!val) {
                alert("动态短信模版不能为空")
            }
        })

        $("#newContent").on('input propertychange', function () {
            let val = $(this).val()
            if (val) {
                let length = val.length
                setSmsLengthInfo(length, 'newContent1')
            } else {
                alert("修改后字符串不能为空")
            }
        })
    })

    function setSmsLengthInfo(length, domId) {
        let num;
        if (length === 0) {
            num = 0;
        } else if (length <= 70) {
            num = 1;
        } else {
            num = ((length - 1) / 67 + 1).toFixed(0);
        }
        $("#" + domId).text("共" + length + "字,共" + num + "条")
    }
</script>