<template>
  <el-dialog
    title="短信回复列表"
    :visible.sync="msgisShow"
    :close-on-click-modal="false"
    width="1366px"
    class="MsginfoDialog"
    @close="handleclose"
  >
    <div class="msgTbale">
      <div class="msgHead">
        <el-descriptions :column="4" border size="small">
          <el-descriptions-item label="装置编号">{{
            termInfo.cmdid
          }}</el-descriptions-item>
          <el-descriptions-item label="iccid">{{
            termInfo.iccid
          }}</el-descriptions-item>
          <el-descriptions-item label="运营商">{{
            msgCompany
          }}</el-descriptions-item>
          <el-descriptions-item label="规约">{{
            termInfo.protocolName
          }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="tableBox">
        <!-- 大汉移动 -->
        <el-table
          v-if="msgtype == 1"
          :data="msgListData"
          style="width: 100%"
          border
        >
          <el-table-column prop="phone" label="物联卡号码或手机号码">
          </el-table-column>
          <el-table-column prop="smsType" label="短信类型" width="80px">
            <template slot-scope="scope">
              <span v-if="scope.row.smsType == 1">下行短信</span>
              <span v-if="scope.row.smsType == 2">上行短信</span>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="短信内容"> </el-table-column>
          <el-table-column prop="submitState" label="提交状态" width="80px">
            <template slot-scope="scope">
              <span v-if="scope.row.submitState == 0">提交成功</span>
              <span v-else>{{ cope.row.submitState }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sendState" label="发送状态" width="120px">
            <template slot-scope="scope">
              <span v-if="scope.row.sendState == 2">运营商网关故障</span>
              <span v-else-if="scope.row.sendState == 0">发送成功</span>
              <span v-else>{{ cope.row.sendState }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="submitTime" label="提交时间">
          </el-table-column>
          <el-table-column prop="receiveTime" label="接收/报告时间">
          </el-table-column>
        </el-table>
        <!-- 公田移动rabchase -->
        <el-table
          v-if="msgtype == 2"
          :data="msgListData.list"
          style="width: 100%"
          border
        >
          <el-table-column prop="iccid" label="ICCID"> </el-table-column>
          <el-table-column prop="msisdn" label="MSISDN"> </el-table-column>
          <el-table-column prop="tenantName" label="企业名称">
          </el-table-column>
          <el-table-column prop="msg" label="短信内容"> </el-table-column>
          <el-table-column prop="createTime" label="接收时间">
          </el-table-column>
        </el-table>
        <!-- 公田m2m10086 -->
        <el-table
          v-if="msgtype == 3"
          :data="msgListData.records"
          style="width: 100%"
          border
        >
          <el-table-column prop="isSend" label="短信类型" width="80px">
            <template slot-scope="scope">
              <span v-if="scope.row.isSend == 0">平台->终端 </span>
              <span v-if="scope.row.isSend == 1">终端->平台</span>
            </template>
          </el-table-column>
          <el-table-column prop="sender" label="发送方"> </el-table-column>
          <el-table-column prop="receive" label="接收方"> </el-table-column>
          <el-table-column prop="smsContent" label="内容"> </el-table-column>
          <el-table-column prop="smsSendStatus" label="状态" width="80px">
            <template slot-scope="scope">
              <span v-if="scope.row.smsSendStatus == '0'">等待回执</span>
              <span v-if="scope.row.smsSendStatus == '1'">成功</span>
              <span v-if="scope.row.smsSendStatus == '2'">失败</span>
            </template>
          </el-table-column>
          <el-table-column prop="smsType" label="发送类型" width="80px">
            <template slot-scope="scope">
              <span v-if="scope.row.smsType == 1">首发</span>
              <span v-else>{{ scope.row.smsType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="提交时间">
          </el-table-column>
          <el-table-column prop="smsReportTime" label="实际接收时间">
            <template slot-scope="scope">
              <span v-if="scope.row.smsReportTime">{{
                scope.row.smsReportTime
              }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 安徽 -->
        <div class="anhui" v-if="msgtype == 4">
          <iframe
            :srcdoc="modifiedMsgListData"
            style="width: 100%; height: 380px; border: none"
            class="iframeBox"
          ></iframe>
          <!-- <iframe
            src="/wulw/message/history"
            style="width: 100%; height: 500px; border: none"
          ></iframe> -->
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="msgisShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: ["msgListData", "msgCompany", "multipleSelection", "msgtype"],
  components: {},
  data() {
    return {
      msgisShow: false,
      termInfo: "",
      modifiedMsgListData: "", //安徽替换css后的代码
    };
  },
  mounted() {},
  computed: {},
  watch: {},
  created() {},
  methods: {
    display() {
      console.log(this.multipleSelection);
      this.msgisShow = true;
      this.termInfo = this.multipleSelection[0];
      //安徽的短信平台
      if (this.msgtype == 4) {
        // 创建一个新的DOM解析器
        const parser = new DOMParser();
        // 将HTML字符串解析为文档对象
        const doc = parser.parseFromString(this.msgListData, "text/html");
        console.log(doc);

        // 查找并删除指定的<div>元素
        const divToRemove = doc.getElementsByClassName("larry-personal");

        while (divToRemove.length > 0) {
          // elements[elements.length - 1] 获取最后一个元素
          // 因为我们从后往前删除，所以索引不会受到前面删除操作的影响
          divToRemove[divToRemove.length - 1].parentNode.removeChild(
            divToRemove[divToRemove.length - 1]
          );
        }
        // 返回修改后的HTML字符串
        console.log(doc.documentElement.outerHTML);
        //console.log(this.msgListData);
        this.modifiedMsgListData = doc.documentElement.outerHTML
          .replace(
            /\/wulw\/static\/layui\/css\/layui\.css\?v=26/g,
            "https://www.lwwlkj.com/wulw/static/layui/css/layui.css?v=26"
          )
          .replace(
            /\/wulw\/static\/bootstrap\/css\/bootstrap\.css/g,
            "https://www.lwwlkj.com/wulw/static/bootstrap/css/bootstrap.css"
          )
          .replace(
            /\/wulw\/static\/css\/personal\.css\?v=26/g,
            "https://www.lwwlkj.com/wulw/static/css/personal.css?v=26"
          )
          .replace(
            /\/wulw\/static\/css\/global\.css\?v=26/g,
            "https://www.lwwlkj.com/wulw/static/css/global.css?v=26"
          );
        console.log(this.modifiedMsgListData);
      }
    },

    handleclose() {
      this.msgisShow = false;
    },
  },
};
</script>
<style lang="less">
.MsginfoDialog {
  .el-dialog__body {
    padding: 12px;
    .msgTbale {
      .msgHead {
        margin-bottom: 8px;
      }
    }
    .tableBox {
      .el-table__cell {
        text-align: center;
        .cell {
          padding: 0px;
        }
      }
      .anhui {
        iframe {
          background-color: #fcc;
          .larry-personal {
            display: none;
          }
        }
      }
    }
  }
}
</style>
