<template>
  <div style="padding-top: 13vw">
    <TopNav navTitle="指令详情" :showRight="false" :showLeft="true" />
    <div class="people_detail" ref="zlxq">
      <div class="p_qb_info" v-if="zlDetail">
        <div class="p_title">{{ zlDetail.zlbt }}</div>
        <div class="p_info">
          <div class="p_img_box" v-if="zlDetail.zltp">
            <van-image width="75px" height="82px" fit="fill" :class="_getBase64(zlDetail)" :src="zlDetail.baseUrl"
              @click="onClickImg(zlDetail.baseUrl)">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
          <div class="p_text_info">
            <div class="first_line">
              <div class="first_line_text">
                <span>指令等级</span> &emsp;
                <span :class="{
                  text_red: zlDetail.zldj == '10',
                  text_orange: zlDetail.zldj == '20',
                  text_yellow: zlDetail.zldj == '30',
                  text_bule: zlDetail.zldj == '40',
                }">{{
                  zlDetail.zldj == "10"
                    ? "红"
                    : zlDetail.zldj == "20"
                      ? "橙"
                      : zlDetail.zldj == "30"
                        ? "黄"
                        : "蓝"
                }}</span>
              </div>
              <template style="display: flex" v-if="!['92', '93', '94'].includes(dqzt)">
                <van-button round type="primary" style="padding: 0 5vw" size="mini" color="#009944" v-if="dqzt == '01'"
                  @click="onClickQs('签收')">
                  签收
                </van-button>
                <van-button round type="primary" style="padding: 0 5vw" size="mini" color="#009944"
                  v-if="(dqzt == '02' || dqzt == '03') && zlDetail.zllx != '07'" @click="onClickQs('到达现场')">
                  到达现场
                </van-button>
                <!-- trs研判 -->
                <van-button round type="primary" color="#009944" style="padding: 0 5vw" size="mini" v-if="
                  dqzt == '11' ||
                  dqzt == '21' ||
                  dqzt == '22' ||
                  dqzt == '23' ||
                  dqzt == '24' ||
                  dqzt == '25' ||
                  (dqzt == '31' && zlDetail.zllx != '07')
                " @click="onClickQs('处置完成')">
                  处置完成
                </van-button>
                <van-button round type="primary" color="#009944" style="padding: 0 5vw" size="mini" v-if="dqzt == '32'"
                  @click="onClickQs('完结')">
                  完结
                </van-button>
              </template>
            </div>
            <div class="other_line">
              来源: {{ setDict(zlDetail.zlly, D_BZ_ZLLY) }} &emsp; &emsp; 类型:
              {{ setDict(zlDetail.zllx, D_BZ_ZLLX) }}
            </div>
            <div class="other_line">时间: {{ zlDetail.zlfqsj }}</div>
            <div class="other_line" v-if="fjList.length > 0">
              附件:
              <span style="color:blue;margin-right：2px;" v-for="(item, index) in fjList" :key="index + 'file'">
                <a @click="getPreviewText(item)" style="text-decoration: underline;margin-right：2px;">附件{{ index +
                  1}}</a>
              </span>
            </div>
            <div class="video_line"></div>
          </div>
        </div>
        <div class="nr_text">内容: {{ zlDetail.zlnr }}</div>
        <div class="check_box">
          <div class="check_btn" @click="onClickPr">盘查人员</div>
          <div class="check_btn" @click="onClickPc">盘查车辆</div>
        </div>
      </div>
      <div class="chat_box">
        <MesssageList :list="zlMessage.messageList" :mesHeight="mesHeight" :audioSc="audioSc"
          @click:video="onClickVideoUrl" />
      </div>
    </div>
    <div class="bottom_box" :style="{ background: themeType == 'light' ? '' : '#092556' }"
      v-if="dqzt != '92' && dqzt != '93' && dqzt != '94'">
      &nbsp;<van-icon :name="require('../../../assets/images/audio_h.png')" size="35"
        @click="(showAudio = !showAudio), (voiceCanael = false)"></van-icon>

      <div class="message_box">
        <van-config-provider :theme-vars="themeVars" v-if="!showAudio">
          <van-field v-model="message" label-width="60px" placeholder="请输入你描述的内容..." type="textarea" autosize>
            <template #button>
              <van-button size="small" type="primary" @click="onClickSend">发送</van-button>
            </template>
          </van-field>
        </van-config-provider>
        <div class="azsh_btn" @touchstart="onTouchstart" @touchmove="onTouchmove" @touchend="onTouchchend" v-else>
          <van-button type="default" block>按住说话</van-button>
        </div>
      </div>
      &nbsp;<van-icon name="add-o" size="35" @click="showShare = true"></van-icon>
      &nbsp;
    </div>
    <!-- 附件弹窗 -->
    <van-popup v-model:show="showShare" position="bottom" round>
      <div class="addfj_box">
        <van-uploader :after-read="afterRead">
          <div class="fj_item">
            <img src="../../../assets/images/images.png" alt="" />
            <div>图片</div>
          </div>
        </van-uploader>
        <div class="fj_item" @click="onSelectShare">
          <img src="../../../assets/images/videos.png" alt="" />
          <div>视频</div>
        </div>
      </div>
      <div class="fj_cancel" @click="(showShare = false), Toast.clear()">
        取消
      </div>
    </van-popup>
    <!-- 盘人 -->
    <checkedPeople ref="peo" :zlId="zlDetail.id" />
    <!-- 盘车 -->
    <checkedCar ref="car" :zlId="zlDetail.id" />
    <van-dialog v-model:show="isWjShow" title="完结说明" show-cancel-button confirm-button-color="#3e6ee8"
      @cancel="isWjShow = false" @confirm="onConfirmWjsm">
      <van-field v-model="wjsmVal" type="textarea" placeholder="请输入完结说明"></van-field>
    </van-dialog>
    <van-overlay :show="showAudio">
      <Voice ref="voices" :key="voiceIndex" :isCancel="voiceCanael" />
    </van-overlay>
    <input type="file" accept="video/*" capture="camcorder" style="display: none" id="getVideo" @change="changeVideo" />
    <div class="video_play_box" v-show="showLangVideoUrl">
      <video style="width: 100%; height: 100vh" controls id="langVideo"></video>
      <div class="cross_box" @click="onCloseVideo">
        <van-icon name="cross" size="15" color="#fff"></van-icon>
      </div>
    </div>
    <Iframe :url="fillFrams" :isPreviw="isPreviw" @closePre="isPreviw = false"></Iframe>
  </div>
</template>
<script setup>
import axios from "axios";
import Base64 from "base-64";
import { getMyTaskDetail, getFjInfo } from "../../../api/rwzx.js";
import {
  trsGetRequest,
  trsPostRequest,
  trs2PostRequest,
  timeValidate,
} from "../../../utils/tools";
import Voice from "./components/voice.vue";
import { ImagePreview } from "vant";
import { baseUrl2 } from "../../../utils/request.js";
import TopNav from "../../../components/topNav.vue";
import checkedCar from "../../spsHome/components/checkCar.vue";
import checkedPeople from "../../spsHome/components/checkPeople.vue";
import { ref, reactive, onMounted, onUnmounted, onBeforeUnmount } from "vue";
import MesssageList from "./components/messsageList.vue";
import upVideo from "../../../utils/fpsc.js";
import Iframe from "../../../assets/html/filePreview.vue";
import {
  dateFormat,
  getDistance,
  IS_PNG,
  IS_MP3,
  IS_MP4,
  getBase64,
  hintToast,
  dataQc,
} from "../../../utils/tools.js";
import emitter from "../../../utils/eventBus.js";
import { Dialog, Toast } from "vant";
import { useRoute } from "vue-router";
import {
  getZlczData,
  getZlDetail,
  addZxjl,
  updateZlStatus,
  zlHandleRygk,
  getToken,
} from "../../../api/zlzx.js";
import { endTaskStatus } from "../../../api/yyzxApi.js";
import { upImage, bigDataUpload } from "../../../api/common.js";
import { getDictList, setDict } from "../../../utils/dict";
const { D_BZ_ZLLY, D_BZ_ZLLX, D_BZ_ZXZTAI } = getDictList(
  "D_BZ_ZLLY",
  "D_BZ_ZLLX",
  "D_BZ_ZXZTAI"
); //字典信息
const baseUrl = `${baseUrl2}/mosty-api/mosty-base/minio/image/download/`;
const themeType = ref(getStorage("themeSetting"));
const themeVars = {
  cellBackgroundColor: themeType.value == "light" ? "#ffffff" : "#092556",
  cellHorizontalPadding: "8px",
  cellVerticalPadding: "8px",
  fieldRightIconColor: themeType.value == "light" ? "#333" : "#fff",
  FieldIconSize: "28px",
};
const URL = window.URL || window.webkitURL;
const audioSc = ref("");
const voiceIndex = ref(1);
const caEnevt = ref(null); //按住说话事件
const showAudio = ref(false); //是否显示录音弹窗
const peo = ref(); //盘查人员组件对象
const car = ref(); //盘查车辆组件对象
const zlxq = ref(""); //指令详情dom
const message = ref(""); //消息类容
const mesHeight = ref(47); //聊天盒子高度
const mesIndex = ref(1); //消息盒子组件KEY
const id = ref(""); //指令ID
const lastTime = ref(""); //最后一条流程时间
const zlDetail = ref({}); //指令详情
const userInfo = JSON.parse(getStorage("userInfo"));
// const token = getStorage("TRS") && JSON.parse(getStorage("TRS"));
const mesTime = ref(null); // 消息记录轮询时间函数
const isArriveTime = ref(null); //是否到达时间函数
const isWjShow = ref(false); //是否显示完结说明弹窗
const wjsmVal = ref(""); //完结说明内容
const fjid = ref(""); //上传成功的附件ID
const yp = ref(false); // 研判弹框
const ypText = ref("");
const voices = ref(); //语音组件
const showShare = ref(false); //显示附件弹窗
const showLangVideoUrl = ref(false); //是否显示大视频
const isPreviw = ref(false);
const fillFrams = ref(null);
//手指触摸开始位置
const startBtn = ref({
  s_x: 0,
  s_y: 0,
});
//手指触摸结束位置
const endBtn = ref({
  e_x: 0,
  e_y: 0,
});
const voiceCanael = ref(false); //是否取消发送语音
const zlMessage = reactive({
  //消息数据
  messageList: [], //消息记录
});
const sptpid = ref(""); //视频第一帧图片ID
const toast3 = ref(""); //视频上传时间提示
const toast4 = ref(""); //消息发送提示
Toast.allowMultiple();
onMounted(() => {
  id.value = useRoute().query.id;
  //点击盘查功能
  emitter.on("onClickPc", (res) => {
    if (res == "pr") {
      checkPeople();
    } else {
      checkCar();
    }
  });
  Promise.all([_getZlczData(true), _getZlDetail(id.value)]).then((res) => {
    mesTime.value = setInterval(() => {
      //获取做最后一条数据的时间
      if (zlMessage.messageList.length > 0) {
        lastTime.value =
          zlMessage.messageList[zlMessage.messageList.length - 1].time;
        _getZlczData();
      }
    }, 1500);
    //获取语音时长
    emitter.on("getAudio", (res) => {
      audioSc.value = res.durationSeconds;
      message.value = `${res.fjid}.wav`;
      fjid.value = res.fjid;
      submitMessage("audio");
    });
    //自动结束关闭语音窗口
    emitter.on("hideAudio", (res) => {
      showAudio.value = false;
      voiceIndex.value++;
      message.value = "";
    });
  });
  scrollToBottom();
});
onBeforeUnmount(() => {
  clearInterval(mesTime.value);
  mesTime.value = null;
  clearInterval(isArriveTime.value);
  isArriveTime.value = null;
});
onUnmounted(() => {
  emitter.off("onClickPc");
  emitter.off("getAudio");
});
//  获取预览文件
function getPreviewText(item) {
  let url = item.url; //要预览文件的访问地址
  let Base64Url = Base64.encode(url);
  fillFrams.value =
    "http://10.64.201.126:8012/onlinePreview?url=" +
    encodeURIComponent(Base64Url);
  isPreviw.value = true;
}
//关闭大视频
function onCloseVideo() {
  let videos = document.getElementById("langVideo");
  videos.pause();
  showLangVideoUrl.value = false;
}
//获取放大视频地址
function onClickVideoUrl(url) {
  if (url) {
    let videos = document.getElementById("langVideo");
    videos.src = url;
    videos.play();
    showLangVideoUrl.value = true;
  }
}
//调用
function onSelectShare() {
  window.addEventListener("message", receivePost);
  // let videos = document.getElementById("getVideo");
  // videos.click();
  // toast3.value = Toast({
  //   message: "拍摄视频请不要超过20s",
  //   position: "bottom",
  //   duration: 6000,
  // });
  try {
    bridge.recordVideo(
      `${baseUrl2}/mosty-api/mosty-base/minio/image/upload/id`,
      30
    );
  } catch (error) { }
}
//接收postMessage消息（由安卓上传的视频 返回ID）
function receivePost(mes) {
  try {
    let str = mes.data.type;
    switch (str) {
      case "videoId":
        fjid.value = mes.data.data;
        message.value = `${new Date().getTime()}_video.mp4`;
        showShare.value = false;
        submitMessage("video");
        window.removeEventListener("message", receivePost);
        break;
    }
  } catch (error) { }
}

//长按事件
function onTouchstart(item) {
  //获取起点位置
  startBtn.value.s_x = item.touches[0].pageX;
  startBtn.value.s_y = item.touches[0].pageY;
  item.stopPropagation();
  //长按事件后执行录音
  caEnevt.value = setTimeout(() => {
    caEnevt.value = 0;
    voices.value.startAudioRecord();
  }, 800);
  return false;
}
//手指移动
function onTouchmove(item) {
  //手指离开的位置
  let e_x = item.changedTouches[0].pageX;
  let e_y = item.changedTouches[0].pageY;
  //计算出偏移度
  let direction = getDirection(
    startBtn.value.s_x,
    startBtn.value.s_y,
    e_x,
    e_y
  ).toFixed(0);
  //手指滑动到取消范围内 取消高亮
  if (direction < -110 && direction > -150) {
    voiceCanael.value = true;
  }
}
//释放事件
function onTouchchend(item) {
  //手指离开的位置
  endBtn.value.e_x = item.changedTouches[0].pageX;
  endBtn.value.e_y = item.changedTouches[0].pageY;
  //计算出偏移度
  let direction = getDirection(
    startBtn.value.s_x,
    startBtn.value.s_y,
    endBtn.value.e_x,
    endBtn.value.e_y
  ).toFixed(0);
  item.stopPropagation();
  showAudio.value = false;
  voiceIndex.value++;
  //在取消范围取消语音发送
  if (direction < -110 && direction > -150) {
    clearTimeout(caEnevt.value);
    voices.value.cancelRecord();
  } else {
    //松开手指或者不在取消范围 就发送语音
    if (caEnevt.value != 0) {
      hintToast("说话时间太短！！");
      clearTimeout(caEnevt.value);
    } else {
      voices.value.stopRecording();
    }
  }

  clearTimeout(caEnevt.value);
  return false;
}
//获得角度
function getAngle(angx, angy) {
  return (Math.atan2(angx, angy) * 180) / Math.PI;
}
//计算偏移量
function getDirection(startX, startY, endX, endY) {
  let angx = endX - startX;
  let angy = endY - startY;
  let result = 0;
  if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
    return result;
  }
  let angle = getAngle(angx, angy);
  result = angle;
  return result;
}

//预览图片
function onClickImg(fjid) {
  ImagePreview([fjid]);
}
//结束任务
function _endTaskStatus(rwxl, ywid, rwzt, rwxxlx) {
  let data = { rwxl, ywid, rwzt, rwxxlx };
  try {
    let location = JSON.parse(bridge.getLocation());
    data.jd = location.app_x;
    data.wd = location.app_y;
  } catch (error) { }
  endTaskStatus(data).then((res) => { });
}
//获取base64地址
function _getBase64(item) {
  getBase64((res) => {
    item.baseUrl = res;
  }, item.zltp);
}
// 滚动条始终在最底部
function scrollToBottom() {
  var container = document.getElementsByClassName("check_box")[0];
  container.scrollTop = container.scrollHeight;
}
//获取指令详情
const dqzt = ref();
function _getZlDetail(id) {
  getZlDetail(id).then((res) => {
    zlDetail.value = res;
    dqzt.value = res.zxrVo.dqzt;
    _getFile(res.fjId);
    if (res.zlzxzt == "02" || res.zlzxzt == "03") {
      countJl();
      isArriveTime.value = setInterval(() => {
        countJl();
      }, 30e3);
    } else {
      clearInterval(isArriveTime.value);
      isArriveTime.value = null;
    }
  });
}

const fjList = ref([]);
function _getFile(fjid) {
  try {
    const requestArr = fjid.split(",").map((item) => {
      return getFjInfo(item);
    });
    Promise.all(requestArr).then((resArr) => {
      resArr.forEach((res) => {
        if (IS_PNG(res.suffix.substring(1, res.suffix.length))) {
          res.fileFormat = "png";
        } else {
          res.fileFormat = "file";
        }
        fjList.value.push(res);
      });
    });
  } catch (error) { }
}

//获取指令处置流程
function _getZlczData(flag) {
  let data = {
    zlid: id.value,
    time: lastTime.value,
  };
  getZlczData(data).then((res) => {
    if (res && res.length > 0) {
      res.forEach((item) => {
        let fileFormat = "";
        if (item.zxnr && item.fjid) {
          //判断是那种文件类型.
          let fjIndex = item.zxnr.lastIndexOf(".");
          if (fjIndex != -1) {
            let file_Format = item.zxnr.substring(
              fjIndex + 1,
              item.zxnr.length
            );
            if (IS_PNG(file_Format)) {
              fileFormat = "png";
            } else if (IS_MP3(file_Format)) {
              fileFormat = "mp3";
            } else if (IS_MP4(file_Format)) {
              fileFormat = "mp4";
            } else {
              fileFormat = "file";
            }
          }
        }
        zlMessage.messageList.push({
          time: item.zxsj,
          type: userInfo.id == item.xtCjrId ? 2 : 1, //1为 对方的数据 2为自己的数据
          text: item.zxnr,
          yysc: item.yysc,
          name: item.xtCjr || "系统",
          fjid: item.fjid,
          sptpid: item.sptpid,
          fileFormat,
        });
        dataQc(zlMessage.messageList, "id");
      });
    }
  });
}
//点击盘人
function onClickPr() {
  peo.value.handleOpen();
}
//点击盘车
function onClickPc() {
  car.value.handleOpen();
}
//确认完结说明
function onConfirmWjsm() {
  isWjShow.value = false;
  _updateZlStatus("04");
}
//签收
const ypflag = ref(true);
const fkFlag = ref(true);

// 处理状态
function onClickQs(text) {
  if (text == "完结") return isWjShow.value = true;
  Dialog.confirm({ title: "提示", message: `是否${text}!`, }).then((res) => {
    switch (text) {
      case "签收":
        _updateZlStatus("01");
        break;
      case "到达现场":
        _updateZlStatus("02", 1);
        break;
      case "处置完成":
        _updateZlStatus("03");
        break;
    }
  }).catch((err) => { });
}
//计算用户与指令地址距离
function countJl() {
  try {
    let location = JSON.parse(bridge.getLocation());
    let jl = getDistance(
      zlDetail.value.jd,
      zlDetail.value.wd,
      location.app_x,
      location.app_y
    );
    //小于100米 自动到达现场
    if (jl < 100) {
      _updateZlStatus("02", 0);
    }
  } catch (error) { }
}
//修改指令状态
function _updateZlStatus(type, sfsddd) {
  let { zxrVo, ssbmid, zlfsdd, zljsdx } = zlDetail.value;
  let data = {
    ssbmid: ssbmid,
    zlzxdd: zlfsdd,
    zljsdx: zljsdx,
    zlzxrDh: zxrVo.zxrDh,
    zlzxrId: zxrVo.zxrId,
    zlzxrSfz: zxrVo.zxrSfz,
    zlzxrXm: zxrVo.zxrXm,
    zlzxrXzid: zxrVo.zxrXzid,
    zlzxzt: type,
    zlId: zxrVo.zlId,
    zlwjsm: wjsmVal.value,
    sfsddd,
  };
  try {
    let location = JSON.parse(bridge.getLocation());
    data.jd = location.app_x;
    data.wd = location.app_y;
  } catch (error) {
    data.jd = 104.065637;
    data.wd = 30.592008;
  }
  updateZlStatus(data).then((res) => {
    hintToast("成功");
    _getZlDetail(id.value);
    _getZlczData();
    _endTaskStatus("05", zlDetail.value.id, "2", type);
  });

}
//获取文件
function afterRead(file) {
  toast4.value = Toast({
    message: "图片发送中。。。",
    forbidClick: true,
  });
  showShare.value = false;
  const data = new FormData();
  data.append("file", file.file);
  upImage(data).then((res) => {
    if (res) {
      fjid.value = res;
      message.value = file.file.name;
      submitMessage("img");
    }
  });
}
//发送消息
function onClickSend() {
  if (!message.value) return;
  lastTime.value = zlMessage.messageList[zlMessage.messageList.length - 1].time;
  submitMessage();
}
//提交聊天数据到后台
function submitMessage(type) {
  if (type == "audio") {
    toast4.value = Toast({
      message: "语音发送中。。。",
      forbidClick: true,
    });
  }
  let data = {
    zlId: id.value,
    zlzxdd: zlDetail.value.zlfsdd,
    zxnr: message.value,
    fjid: fjid.value,
    yysc: audioSc.value,
    sptpid: sptpid.value,
  };
  message.value = "";
  try {
    let location = JSON.parse(bridge.getLocation());
    data.jd = location.app_x;
    data.wd = location.app_y;
  } catch (error) { }
  addZxjl(data).then((res) => {
    fjid.value = "";
    message.value = "";
    _getZlczData();
  })
}
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

::v-deep .van-field__control {
  @include border_color($border-color-theme);
  @include user_function_item_color($user-function-item-theme);
  @include font_size($font_medium_s);
  padding: 1vw;
  height: 35px !important;
  border-radius: 5px;
}

.top {
  padding: 3vw;
  margin: 2vw;
}

.basic-info {
  color: #4d4d4d;
  display: flex;
  flex-direction: row;

  .img-box {
    flex: 1;
  }

  .IDcard-info {
    flex: 3;
    @include font_size($font_medium_s);

    .text {
      @include font_size($font_medium);
      font-weight: bold;
      color: #1f6cec;
    }
  }
}

.but_box {
  display: flex;
  justify-content: space-between;
  margin-top: 1vw;
}

.bottom_box {
  position: fixed;
  width: 100vw;
  bottom: 0;
  max-height: 21vw;
  background-color: #eff0f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #cac9c9;
  z-index: 1001;

  .message_box {
    flex: 1;
  }
}

.zldj_item {
  display: inline-block;
  width: 3.5vw;
  height: 3.5vw;
  border-radius: 50%;
}

.contact-way {
  margin-top: 3.5vw;
  @include font_size($font_medium_s);

  .zl_detail {
    height: 14vw;
    overflow: auto;
    margin-bottom: 1vw;
  }

  .fjsp {
    display: flex;
    justify-content: space-between;

    .fjsp_item {
      display: flex;
      align-items: center;
    }
  }
}

.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

.fj_box {
  padding: 20px;
  font-size: 12px;
}

.yp_btn {
  margin: 40px 10px 10px 10px;
  display: flex;
  justify-content: center;
}

.people_detail {
  @include font_size($font_medium_s);
  display: flex;
  flex-direction: column;

  .p_qb_info {
    background-image: linear-gradient(to bottom,
        #b7dafc 0%,
        #ffffff 35%,
        #ffffff 100%);
    padding: 12px 17px 17px 17px;
  }

  .p_title {
    @include font_size($font_medium);
    font-weight: bold;
    color: #004cab;
    word-wrap: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .p_info {
    display: flex;
    margin-top: 1vh;

    .p_text_info {
      position: relative;
      flex: 1;

      .first_line {
        display: flex;
        justify-content: space-between;

        .first_line_text {
          @include font_size($font_medium);
          font-weight: bold;

          .text_red {
            color: #e20000;
          }

          .text_orange {
            color: #fa5200;
          }

          .text_yellow {
            color: #f18608;
          }

          .text_bule {
            color: #013791;
          }
        }
      }

      .other_line {
        line-height: 3vh;
      }

      .video_line {
        position: absolute;
        right: 0;
        bottom: 0.5vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .video_text {
          color: #0289fe;
          @include font_size($font_medium_s);
        }
      }
    }
  }

  .nr_text {
    color: #555;
  }

  .check_box {
    display: flex;
    justify-content: space-between;
    overflow-anchor: none;

    .check_btn {
      width: 44vw;
      height: 6vh;
      text-align: center;
      line-height: 6vh;
      background-color: #f7e4e0;
      @include font_size($font_medium);
      font-weight: bold;
      border-radius: 3px;
      margin-top: 2vh;
    }
  }

  .chat_box {
    padding: 17px;
    box-sizing: border-box;
    height: 61vh;
    overflow: hidden;
    overflow-y: auto;
    background-color: #eff0f2;
  }
}

::v-deep .van-divider {
  border-color: #cac9c9;
}

::v-deep .van-cell {
  background-color: #eff0f2;
}

::v-deep .trs.van-button--block {
  width: unset;
}

::v-deep .van-field__right-icon {
  padding-top: 2vw;
}

::v-deep .van-overlay {
  z-index: 1000;
}

.azsh_btn {
  background: #e1e1e1;
  text-align: center;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none;
}

.addfj_box {
  display: flex;
  @include font_size($font_medium);

  .fj_item {
    text-align: center;
    padding: 7vw;

    &>img {
      width: 12vw;
      height: 11.8vw;
    }
  }
}

.fj_cancel {
  border-top: 3vw solid #eff0f2;
  text-align: center;
  padding: 4vw;
}

.video_play_box {
  position: fixed;
  z-index: 9999999999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 1);

  .cross_box {
    position: fixed;
    z-index: 999999999912;
    top: 5vw;
    right: 5vw;
    width: 7vw;
    height: 7vw;
    background: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
}
</style>