<template>
  <div class="report">
    <div class="box-bottom">
      <div class="report-box" v-show="reportBox">
        <div class="left-box">
          <div class="reportMsg">
            <h3 @click="openMsgBox()">投诉举报</h3>
          </div>
        </div>
        <div class="right-box">
          <div class="reportList">
            <h3 @click="openMsgList()">历史举报信息</h3>
          </div>
        </div>
      </div>
      <div class="msgList" v-show="msgList">
        <div class="thisTitle2">
          <span><i @click="return1()" >返回</i>&nbsp;>&nbsp;<em>历史举报信息</em></span>
        </div>
        <ul class="module1">
          <li>
            <input id="phoneList" type="text" placeholder="请输入手机号码" autocomplete="off" @blur="losephone2()">
            <!-- <span id="getCode" @click="getCode2()" v-bind:disabled="isCounting2">
              {{ isCounting2 ? `${countdown}s后重试` : '获取验证码' }}
            </span> -->

            <!-- 历史查询模块按钮 -->
            <span 
              id="getCode"
              :class="{ disabled: isCounting2 }"
              :disabled="isCounting2"
              @click="!isCounting2 && getCode('history')">
              {{ isCounting2 ? `${countdown}s后重试` : '获取验证码' }}
            </span>
          </li>
          <li>
            <input id="inputyzmList" type="text" placeholder="请输入验证码" autocomplete="off" @blur="loseinputyzm2()">
          </li>
          <li>
            <button id="inquire" type="button" @click="inquire()">查询</button>
          </li>
        </ul>
        <div class="module2">
          <!-- 分页数据 -->
          <div class="dataList">
            <el-table 
              :data="pagedTableData" 
              :cell-style="{'text-align':'center'}" 
              :header-cell-style="{'text-align':'center', background:'#F5F5F5', color:'#606266'}"  
              style="width: 100%"
            >
              <el-table-column type="index" label="序号" width="80" :index="indexMethod" />
              <el-table-column prop="content" label="举报事由" show-overflow-tooltip />
              <el-table-column prop="phone" width="180" label="手机号" />
              <el-table-column 
                prop="feedbackStatus" 
                label="反馈状态" 
                width="120" 
                :formatter="formatFeedbackStatus" 
              />
              <el-table-column prop="gmtCreate" width="200" label="举报时间" />
              <el-table-column prop="handleContent" label="处理结果" show-overflow-tooltip />
            </el-table>
          </div>
          <!-- 分页插件 -->
          <div class="pagination" v-show="pagination">
            <el-pagination
              @current-change="handlePageChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="tableData.length">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="box" v-show="msgBox">
        <div class="thisTitle1">
          <span><i @click="return1()" >返回</i>&nbsp;>&nbsp;<em>投诉举报</em></span>
        </div>
        <div class="report-content">
          <textarea name="" id="jbtext" cols="50" rows="10" autocomplete="off" placeholder="举报事由..." @blur="loseinputtext()"></textarea>
        </div>
        <ul>
          <li>
            <input id="phone" type="text" placeholder="请输入手机号码" autocomplete="off" @blur="losephone()">
            <!-- <span id="getCode" @click="getCode()" v-bind:disabled="isCounting2">
              {{ isCounting2 ? `${countdown}s后重试` : '获取验证码' }}
            </span> -->

            <!-- 投诉举报模块按钮 -->
            <span 
              id="getCode"
              :class="{ disabled: isCounting }"
              :disabled="isCounting"
              @click="!isCounting && getCode('report')">
              {{ isCounting ? `${countdown}s后重试` : '获取验证码' }}
            </span>
          </li>
          <li>
            <input id="inputyzm" type="text" placeholder="请输入验证码" autocomplete="off" @blur="loseinputyzm()">
          </li>
          <li>
            <button type="button" @click="submit()">投诉举报</button>
          </li>
        </ul>
      </div>
      <!-- <div class="success" v-show="isSuccessVisible"> -->
      
    </div>
  </div>
  <div class="mask" v-show="isMaskVisible">
    <div class="success">
      <i></i>
      <p>投诉举报成功！</p>
      <button type="button" @click="closeMask()">返回首页</button>
      <em class="again" @click="again()">继续投诉</em>
  </div>
  </div>

</template>

<script>
import $ from 'jquery'; 
import axios from 'axios'
import { layer } from "vue3-layer"
// import { onBeforeRouteLeave } from 'vue-router'
export default {
  data() {
    return {
      reportBox: true,
      msgBox: false,
      msgList: false,
      pagination: false,
      isMaskVisible: false,
      // isComplaintVisible: true, // 控制投诉表单的显示
      // isSuccessVisible: false // 控制成功消息的显示
      countdown: 180, // 倒计时时间
      isCounting: false,   // 投诉举报模块倒计时状态
      isCounting2: false,  // 历史举报模块倒计时状态
      timer: null,         // 定时器引用
      timer2: null,
      tableData: [],
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的条数

    }
  },
  methods: {

      // 公共倒计时方法
  startCountdown(type) {
    const target = type === 'report' ? 'timer' : 'timer2'
    const stateKey = type === 'report' ? 'isCounting' : 'isCounting2'
    
    this[stateKey] = true
    this.countdown = 180
    
    this[target] = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--
      } else {
        this.clearTimer(type)
        this[stateKey] = false
        this.countdown = 180
      }
    }, 1000)
  },

  // 清除定时器
  clearTimer(type) {
    const target = type === 'report' ? 'timer' : 'timer2'
    if (this[target]) {
      clearInterval(this[target])
      this[target] = null
    }
  },

   // 修改后的获取验证码方法
   getCode(type) {
    const phoneSelector = type === 'report' ? '#phone' : '#phoneList'
    const phoneVal = $(phoneSelector).val()
    
    if (!phoneVal) {
      layer.msg('请填写手机号', { icon: 2 })
      return
    }

    const apiUrl = `https://www.aimzhu.com/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}`
    // const apiUrl = `http://192.168.0.15:8099/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}` 
    
    axios.get(apiUrl).then(res => {
      layer.msg('验证码已发送', { icon: 1 })
      this.startCountdown(type)  // 统一调用倒计时
    }).catch(err => {
      layer.msg(err.response?.data?.msg || '发送失败')
    })
  },


    openMsgBox() {
      this.reportBox = false;
      this.msgBox = true;
    },
    openMsgList() {
      this.reportBox = false;
      this.msgList = true;
    },
    // 1 验证举报事由
    loseinputtext() {
      var jbtext = document.querySelector('#jbtext')
      if(jbtext.value == '') {
        layer.tips('X 输入内容不能为空', '#jbtext', {
          // id: 'tips1-1',
          shadeClose: false,
          tips: [2, 'red'],
          time: 2000,
          area: ['auto', '40px'],
        })
        return false;
      } else {
        layer.tips('√', '#jbtext', {
          // id: 'tips1-1',
          shadeClose: false,
          tips: [2, 'green'],
          time: 2000,
          area: ['auto', '40px'],
        })
        return true;
      }
    },
    // 2 验证手机号
    losephone() {
      // alert(11)
      var phone = document.getElementById('phone');
      var reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (phone.value == '') {
        layer.tips('X 请您填写手机号', '#phone', {
          // id: 'tips1-1',
          shadeClose: false,
          tips: [2, 'red'],
          time: 2000,
          area: ['auto', '40px'],
        })
        return false;
      } else {
        if (!reg.test(phone.value)) {
          layer.tips('X 请输入正确的手机号', '#phone', {
            // id: 'tips1-2',
            shadeClose: false,
            tips: [2, 'red'],
            time: 2000,
            area: ['auto', '40px'],

          })
          return false;
        } else {
          layer.tips('√', '#phone', {
            // id: 'tips1-3',
            shadeClose: false,
            tips: [2, 'green'],
            time: 2000,
            area: ['auto', '40px'],
          })
          return true;
        }
      }
    },
    // 3 输入短信验证码
    loseinputyzm() {
      var inputyzm = document.querySelector('#inputyzm')
      var yzmcode = /^[0-9]\d{5}$/;
      if (inputyzm.value == '') {
        layer.tips('X 请您填写验证码', '#inputyzm', {
          // id: 'tips2-1',
          tips: [2, 'red'],
          time: 2000,
          area: ['auto', '40px'],
        })
        return false;
      } else {
        if (!yzmcode.test(inputyzm.value)) {
          //验证不成功
          layer.tips('X 请您正确填写验证码', '#inputyzm', {
            // id: 'tips2-2',
            tips: [2, 'red'],
            time: 2000,
            area: ['auto', '40px'],
          })
          return false;
        } else {
          //验证成功
          layer.tips('√', '#inputyzm', {
            // id: 'tips2-3',
            tips: [2, 'green'],
            time: 2000,
            area: ['auto', '40px'],
          })
          return true;
        }
      }
    },
    // // 获取验证码
    // getCode() {
    //   let phoneVal = $("#phone").val()
    //   // console.log(phoneVal);
    //   if (phoneVal === '') {
    //     layer.msg('请填写手机号', {
    //       icon: 2,
    //       time: 2000,
    //       offset: '50px',
    //     })
    //   } else {
    //     // let phoneResult = `https://www.aimzhu.com/operator/app/complaint/sendmsgrelease/${phoneVal}`  

    //     let phoneResult = `https://www.aimzhu.com/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}`  
    //     // let phoneResult = `http://192.168.0.115:8099/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}` 
    //     axios.get(phoneResult).then(response => {
    //       // console.log(response.data)
    //       layer.msg('验证码已发送', {
    //         icon: 1,
    //         time: 2000,
    //         offset: '50px',
    //       });
    //       this.startCountdown(); // 开始倒计时
    //     })
    //   }
    // },

    // startCountdown() {
    //   this.isCounting = true; // 设置正在倒计时
    //   let interval = setInterval(() => {
    //     if (this.countdown > 0) {
    //       this.countdown--;
    //       $('#getCode').text(`${this.countdown}s后重试`); // 更新按钮文本
    //     } else {
    //       clearInterval(interval); // 清除定时器
    //       this.isCounting = false; // 设置倒计时结束
    //       this.countdown = 180; // 重置倒计时时间
    //       $('#getCode').text('获取验证码'); // 重置按钮文本
    //     }
    //   }, 1000);
    // },

    submit() {
      if(this.loseinputtext() && this.losephone() && this.loseinputyzm()) {
        this.submitComplaint()
      } else {
        // alert("请正确填写对应项的内容")
      } 
    },
    // 投诉举报
    submitComplaint() {
      // 当点击投诉举报按钮时，应该执行的操作
      var jbtextVal = $("#jbtext").val();
      var phoneVal = $("#phone").val();
      var inputyzmValue = $('#inputyzm').val();
      var url = 'https://www.aimzhu.com/operator-plugin/app/complaint/saverelease'
      // var url = 'http://192.168.0.15:8099/operator-plugin/app/complaint/saverelease'
      axios({
        url,
        // data: qs.stringify(data),
        method: 'post',
        data: {
          content: jbtextVal,
          phone: phoneVal,
          code: inputyzmValue
        }
      }).then(res => {
        this.clearTimer('report')  // 成功时立即清除定时器
        this.isCounting = false
        this.countdown = 180
        // console.log(res);
        // 
        layer.closeAll('tips');
        this.isMaskVisible = true; // 显示蒙层
        document.body.style.overflow = 'hidden';
      })
      .catch(error => {
        const msg = error.response?.data?.msg
        if (msg.includes('验证码')) {
          layer.msg(msg, { icon: 2 })
          this.clearTimer('report')
          this.isCounting = false
          this.countdown = 180
        }
      })
    },

    // // 投诉举报
    // submitComplaint() {
    //   // 当点击投诉举报按钮时，应该执行的操作
    //   var jbtextVal = $("#jbtext").val();
    //   var phoneVal = $("#phone").val();
    //   var inputyzmValue = $('#inputyzm').val();
    //   // var url = 'https://www.aimzhu.com/operator/app/complaint/saverelease'

    //   var url = 'https://www.aimzhu.com/operator-plugin/app/complaint/saverelease'

    //   // var url = 'http://192.168.0.115:8099/operator-plugin/app/complaint/saverelease'

    //   // var url = 'http://192.168.0.115:8099/operator-plugin/app/complaint/sendmsgrelease/'

    //   axios({
    //     url,
    //     // data: qs.stringify(data),
    //     method: 'post',
    //     data: {
    //       content: jbtextVal,
    //       phone: phoneVal,
    //       code: inputyzmValue
    //     }
    //   }).then(res => {
    //     console.log(res);
    //     // console.log(res.status);
    //     // 假设这里进行一些验证和处理后
    //     layer.closeAll('tips');
    //     this.isMaskVisible = true; // 显示蒙层
    //     document.body.style.overflow = 'hidden';
    //   })
    //   .catch(error => {
    //     console.error('There was an error!', error);
    //   })
    // },

    closeMask() {
      this.isMaskVisible = false; // 隐藏蒙层
      // 重新启用页面滚动
      document.body.style.overflow = '';
      // if (this.isCounting) {
      //   clearInterval(this.interval); // 清除倒计时定时器
      //   this.isCounting = false; // 设置倒计时结束
      //   this.countdown = 180; // 重置倒计时时间
      //   $('#getCode').text('获取验证码'); // 重置按钮文本
      // }
      // 重置倒计时状态
      this.clearTimer('report');
      this.isCounting = false;
      this.countdown = 180;
      this.reportBox = true;
      this.msgList = false;
      this.msgBox = false;
      // 跳转到首页
      window.location.href = 'http://www.aimzhu.com';

    },
    closeTips() {
      layer.closeAll('tips');
    },

    again() {
      this.isMaskVisible = false; // 隐藏蒙层
      // 重新启用页面滚动
      document.body.style.overflow = '';

      // 清空表单内容
      $('#jbtext').val('');       // 清空举报事由
      $('#phone').val('');        // 清空手机号
      $('#inputyzm').val('');     // 清空验证码
      
      // 关闭所有验证提示
      layer.closeAll('tips');
      
      // 重置倒计时状态
      this.clearTimer('report');
      this.isCounting = false;
      this.countdown = 180;
      
      // 保持投诉表单可见状态
      this.msgBox = true;
      this.msgList = false;
      this.reportBox = false;
    },

return1() {
  this.msgBox = false;
  this.msgList = false;
  this.reportBox = true;
  layer.closeAll('tips');
},


// 2 验证手机号
losephone2() {
      // alert(11)
      var getCode = document.getElementById('phoneList');
      var reg2 = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (getCode.value == '') {
        layer.tips('X 请您填写手机号', '#getCode', {
          // id: 'tips1-1',
          shadeClose: false,
          tips: [2, 'red'],
          time: 2000,
          area: ['auto', '40px'],
        })
        return false;
      } else {
        if (!reg2.test(getCode.value)) {
          layer.tips('X 请输入正确的手机号', '#phoneList', {
            // id: 'tips1-2',
            shadeClose: false,
            tips: [2, 'red'],
            time: 2000,
            area: ['auto', '40px'],

          })
          return false;
        } else {
          layer.tips('√', '#phoneList', {
            // id: 'tips1-3',
            shadeClose: false,
            tips: [2, 'green'],
            time: 2000,
            area: ['auto', '40px'],
          })
          return true;
        }
      }
    },
    // 3 输入短信验证码
    loseinputyzm2() {
      var inputyzm = document.querySelector('#inputyzmList')
      var yzmcode2 = /^[0-9]\d{5}$/;
      if (inputyzm.value == '') {
        layer.tips('X 请您填写验证码', '#inputyzmList', {
          // id: 'tips2-1',
          tips: [2, 'red'],
          time: 2000,
          area: ['auto', '40px'],
        })
        return false;
      } else {
        if (!yzmcode2.test(inputyzm.value)) {
          //验证不成功
          layer.tips('X 请您正确填写验证码', '#inputyzmList', {
            // id: 'tips2-2',
            tips: [2, 'red'],
            time: 2000,
            area: ['auto', '40px'],
          })
          return false;
        } else {
          //验证成功
          layer.tips('√', '#inputyzmList', {
            // id: 'tips2-3',
            tips: [2, 'green'],
            time: 2000,
            area: ['auto', '40px'],
          })
          return true;
        }
      }
    },

//  // 获取验证码
//  getCode2() {
//       let phoneVal = $("#phoneList").val()
//       // console.log(phoneVal);
//       if (phoneVal === '') {
//         layer.msg('请填写手机号', {
//           icon: 2,
//           time: 2000,
//           offset: '50px',
//         })
//       } else {  
//         let phoneResult = `https://www.aimzhu.com/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}` 
//         // let phoneResult = `http://192.168.0.115:8099/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}` 
//         axios.get(phoneResult).then(response => {
//           // console.log(response.data)
//           layer.msg('验证码已发送', {
//             icon: 1,
//             time: 2000,
//             offset: '50px',
//           });
//           this.startCountdown2(); // 开始倒计时
//         })
//       }
//     },

    // startCountdown2() {
    //   this.isCounting2 = true; // 设置正在倒计时
    //   let interval = setInterval(() => {
    //     if (this.countdown > 0) {
    //       this.countdown--;
    //       $('#getCode').text(`${this.countdown}s后重试`); // 更新按钮文本
    //     } else {
    //       clearInterval(interval); // 清除定时器
    //       this.isCounting2 = false; // 设置倒计时结束
    //       this.countdown = 180; // 重置倒计时时间
    //       $('#getCode').text('获取验证码'); // 重置按钮文本
    //     }
    //   }, 1000);
    // },

    // inquire() {
    //   if(this.loseinputtext() && this.losephone() && this.loseinputyzm()) {
    //     this.submitComplaint()
    //   } else {
    //     // alert("请正确填写对应项的内容")
    //   } 
    // },


    // 查询
    inquire() {
       // 手动触发验证
      const isPhoneValid = this.losephone2();
      const isYzmValid = this.loseinputyzm2();

      // if (!isPhoneValid || !isYzmValid) {
      //   layer.msg('请正确填写信息', { icon: 2 });
      //   return;
      // }

      // 当点击查询按钮时，应该执行的操作
      var phoneList = $("#phoneList").val();
      var inputyzmList = $('#inputyzmList').val();
      var url = `https://www.aimzhu.com/operator-plugin/app/complaint/listrelease/${phoneList}/${inputyzmList}`
      // var url = `http://192.168.0.15:8099/operator-plugin/app/complaint/listrelease/${phoneList}/${inputyzmList}`

      axios.get(url).then(response => {
        this.clearTimer('history')  // 成功时清除定时器
        this.isCounting2 = false
        this.countdown = 180
        // 
        this.tableData = response.data
        console.log('完整数据',this.tableData);
        if(this.tableData == '') {
          this.pagination = false
        } else {
          this.pagination = true
        }
        // 重置当前页码为1，因为每次查询都是新的数据集
        this.currentPage = 1;
      })
      .catch(error => {
        // // console.error('There was an error!', error.response.data.msg);
        // console.error('There was an error!', error.response.data.msg);
        layer.msg(error.response?.data?.msg || '发送失败')
      }) 
    },

    // // 查询
    // inquire() {
    //   // 当点击查询按钮时，应该执行的操作
    //   var phoneList = $("#phoneList").val();
    //   var inputyzmList = $('#inputyzmList').val();
    //   var url = `https://www.aimzhu.com/operator-plugin/app/complaint/listrelease/${phoneList}/${inputyzmList}`
    //   // var url = `http://192.168.0.115:8099/operator-plugin/app/complaint/listrelease/${phoneList}/${inputyzmList}`

    //   axios.get(url).then(response => {
    //     this.tableData = response.data
    //     console.log('完整数据',this.tableData);
    //     if(this.tableData == '') {
    //       this.pagination = false
    //     } else {
    //       this.pagination = true
    //     }
    //     // 重置当前页码为1，因为每次查询都是新的数据集
    //     this.currentPage = 1;
    //   })
    //   .catch(error => {
    //     // console.error('There was an error!', error.response.data.msg);
    //     console.error('There was an error!', error.response.data.msg);
    //   }) 
    // },

    indexMethod(index) {
      // 计算序号，考虑到当前页和每页显示的数量
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },
    handlePageChange(newPage) {
      this.currentPage = newPage; // 更新当前页码
    },
    // getStatusColor({ row }) {
    //   console.log('当前行数据:', row) // 确保能正确读取到数据
    //   return row.feedbackStatus === "1" ? { color: '#67C23A !important' } : { color: '#F56C6C !important' };
    // },
    formatFeedbackStatus(row, column, cellValue) {
      // console.log('Cell value:', cellValue); // 添加这一行来调试
      // 根据 feedbackStatus 的值返回相应的字符串
      return cellValue === "1" ? '已处理' : '未处理';
    },
    

    // onBeforeRouteLeave() {
    // // 在路由离开之前关闭layer.tips
    // this.closeTips();
    // }
  },

  computed: {
    // 计算属性，用于分页显示数据
    pagedTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    }
  },

    beforeUnmount() {
    this.clearTimer('report')
    this.clearTimer('history')
    // 清理DOM残留
    $('.layui-layer-tips').remove();
  },

  beforeRouteLeave(to, from, next) {
    // 在路由离开之前关闭layer.tips
    this.closeTips();
    next(); // 确保调用next()以继续导航
  },

}
</script>

<style scoped>

.disabled {
  cursor: not-allowed !important;
  opacity: 0.7;
}

#getCode:not(.disabled) {
  cursor: pointer;
}

.report {
  position: relative;
}

/* .report .box-top {
  width: 100%;
  height: 400px;
  background: url(/assets/img/report-bj.png) no-repeat;
  background-size: cover;
} */
.report .box-bottom {
  width: 100%;
  /* height: 12.5rem; */
  height: 100vh;
  background-color: #f7f7f7;
}
.report .box-bottom .report-box {
  display: flex;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15rem;
  height: 9.4rem;
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
  -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
  box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.report .box-bottom .report-box .left-box,
.report .box-bottom .report-box .right-box{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 7.5rem;
  height: 9.4rem;
}
.report .box-bottom .report-box .reportMsg {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* background-color: #fed289; */
  background-color: #ffefd5;
}
.report .box-bottom .report-box .reportMsg h3 {
  padding: .25rem .5rem;
  border-radius: .5rem;
  /* background-color: #fca43a; */
  background-color: #FFDEAD;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
}
.report .box-bottom .report-box .reportMsg h3:hover {
  font-size: 20px;
}
.report .box-bottom .report-box .reportList {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #FFDEAD;
}
.report .box-bottom .report-box .reportList h3 {
  padding: .25rem .5rem;
  border-radius: .5rem;
  background-color: #ffefd5;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
}
.report .box-bottom .report-box .reportList h3:hover {
  font-size: 20px;
}
.report .box-bottom .msgList {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15rem;
  height: 9.4rem;
  padding: .25rem .375rem;
  border-radius: .25rem;
  background-color: #FFEFD5;
  border-radius: .25rem;
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
  -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
  box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.report .box-bottom .msgList .thisTitle2 {
  width: 14.25rem;
  height: .5rem;
  line-height: .5rem;
}
.report .box-bottom .msgList .thisTitle2 span i {
  cursor: pointer;
}
.report .box-bottom .msgList .thisTitle2 span i:hover {
  color: red;
}
.report .box-bottom .msgList .module1 {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 14.25rem;
  height: 1.25rem;
}
.report .box-bottom .msgList .module1 li {
  position: relative;
  height: .75rem;
  margin: .25rem 0;
  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
}
.report .box-bottom .msgList .module1 li #phoneList,
.report .box-bottom .msgList .module1 li #inputyzmList {
  width: 4.375rem;
  height: .75rem;
  padding: .25rem;
  border: none;
  border-radius: .05rem;
  background-color: #FFF;
  font-size: .2rem;
  color: #999999;
}
.report .box-bottom .msgList .module1 li #getCode {
  position: absolute;
  right: 0;
  width: 1.5rem;
  height: .75rem;
  line-height: .75rem;
  text-align: center;
  cursor: pointer;
  color: #f77437;
}
.report .box-bottom .msgList .module1 li #inquire {
  width: 3.75rem;
  height: .75rem;
  border: none;
  border-radius: .05rem;
  background-color: #fcbb53;
  font-size: .25rem;
  color: #FFF;
  cursor: pointer;
}
.report .box-bottom .msgList .module2 {
  position: relative;
  width: 14.25rem;
  height: 7.125rem;
  background-color: #fff;
}
.report .box-bottom .msgList .module2 .dataList {
  position: absolute;
  top: 0;
  width: 14.25rem;
  height: 5.75rem;
  /* background-color: skyblue; */
}
::v-deep .el-table__inner-wrapper {
  width: 14.25rem;
  height: 5.75rem;
}
::v-deep .el-table__row {
  height: .8rem;
}
::v-deep thead {
  height: .8rem;
  background: pink !important;
}
/* ::v-deep .el-table_1_column_1 {
  width: 1rem;
} */
.report .box-bottom .msgList .module2 .pagination {
  position: absolute;
  bottom: 0;
  width: 14.25rem;
  height: 1rem;
  padding-left: 0.2rem;
  /* background-color: skyblue; */
}
.report .box-bottom .msgList .module2 .pagination ::v-deep .el-pagination {
  height: 1rem;
}
.report .box-bottom .box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15rem;
  height: 9.4rem;
  padding: .25rem .375rem;
  background-color: #FFEFD5;
  border-radius: .25rem;
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
  -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
  box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.box .thisTitle1 {
  width: 14.25rem;
  height: .5rem;
  line-height: .5rem;
  /* background-color: pink; */
}
.box .thisTitle1 span i {
  cursor: pointer;
}
.box .thisTitle1 span i:hover {
  color: red;
}
.box .report-content {
  width: 14.25rem;
  height: 7.15rem;
  /* border: 1px solid red; */
}
.box .report-content textarea {
  resize: none;
  width: 14.25rem;
  height: 7.15rem;
  background-color: #FFF;
  font-size: .225rem;
  color: #333;
  border-radius: .05rem;
  border: .0125rem solid transparent;
  padding: .25rem;
  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
  /* margin-bottom: 12px; */
  /* -webkit-appearance: none; */
  outline: 0;
}
.box ul {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 14.25rem;
  height: 1.25rem;
  /* background-color: pink; */
}
.box ul li {
  /* border: 1px solid red; */
  width: 4.375rem;
  height: .75rem;
  margin: .25rem 0;
  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
}
.box ul li input {
  width: 4.375rem;
  height: .75rem;
  padding: .25rem;
  border: none;
  border-radius: .05rem;
  background-color: #FFF;
  font-size: .2rem;
  /* background-color: transparent; */
  /* margin-bottom: 12px; */
  color: #999999;
}
.box ul li input::-webkit-input-placeholder {
    color: #999999
}
.box ul li:nth-child(1) {
  position: relative;
  /* width: 440px; */
  height: .75rem;
  /* margin-bottom: 12px; */
  /* background-color: pink; */
}
.box ul li:nth-child(2) {
  /* width: 440px; */
  height: .75rem;
  /* margin-bottom: 12px; */
}
.box ul li:nth-child(1) input {
  position: absolute;
}
.box ul li:nth-child(1) span {
  position: absolute;
  right: 0;
  display: block;
  width: 1.5rem;
  height: .75rem;
  line-height: .75rem;
  text-align: center;
  /* background-color: pink; */
  cursor: pointer;
  color: #f77437;
}
.box ul li:nth-child(1) span:hover {
  opacity: 0.5;
}
.box ul li:nth-child(3) {
  width: 3.75rem;
  height: .75rem;
  margin: .25rem 0;
  /* margin-top: 30px; */
}
.box ul li:nth-child(3) button {
  width: 3.75rem;
  height: .75rem;
  border: none;
  border-radius: .05rem;
  background-color: #fcbb53;
  font-size: .25rem;
  color: #FFF;
  cursor: pointer;
}
.box ul li:nth-child(3) button:hover,
.success button:hover {
  font-size: .3rem;
  font-weight: 700;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000;
  overflow: hidden;
}
.success {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.75rem;
  height: 5.75rem;
  padding: .25rem .375rem;
  background-color: #fff;
  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
}
.success i {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: .1875rem 1.25rem;
  background: url(/assets/img/report-icon.png) no-repeat;
  background-size: cover;
  /* border: 1px solid red; */
}
.success p {
  display: block;
  height: .375rem;
  line-height: .375rem;
  text-align: center;
  font-size: .225rem;
}
.success button {
  width: 5rem;
  height: .625rem;
  margin-top: .5rem;
  border: none;
  border-radius: .05rem;
  background-color: #01b2aa;
  font-size: .25rem;
  color: #FFF;
  cursor: pointer;
}
.success button a {
  color: #FFF;
}
.success .again {
  position: absolute;
  bottom: .3rem;
  right: .375rem;
  color: #333;
  cursor: pointer;
}
.success .again:hover {
  color: red;
}
</style>