<template>
  <div class="pageya"  ref="snb">
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="AI销售参谋"/>
    </div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <van-pull-refresh
        v-model="loading"
        success-text="加载成功"
        @refresh="onLoad"
    >
<!--    <van-list class="myList" v-model="loading" :finished="finished" finished-text="&#45;&#45;已经到底了&#45;&#45;" @refresh="onLoad">-->
      <div id="snb" ref="snb1">
      <div style="font-size: 14px" v-for="(item,index)  in Ggreet">
        <div style="margin: 14px" v-if="item.chatRecordFrom=='ai'||item.chatRecordFrom==2">
          <van-row>
            <van-col span="4" @click="clears"><van-image :src="aiselect" style="float: right;background-color: #fff;
    border-radius: 6px;    width: 46px;
    height: 46px;" /></van-col>
            <van-col span="16">
              <div style="text-align: left;background-color: white; min-height: 44px;margin:0 10px;padding: 10px;border-radius: 6px"  v-for="(itemChild,itemIndex) in item.aiResponseMobiles" :key="itemIndex">
                <p style="word-break: break-all;" >{{itemChild.voiceText}}</p>
                <p style="word-break: break-all;"  >{{itemChild.description}}</p>
                <p v-for="(sbpm,pmsb)  in itemChild.textList" :key="pmsb" v-html="sbpm"></p>
                <div v-if="itemChild.type='answer_radio'">
                  <div v-for="(sbpm,pmsb)  in itemChild.optionsList" :key="pmsb" style="margin-top: 10px" >
                    <p style="text-decoration: underline;color:#1c84c6;word-break: break-all"  @click="choiceSelct(sbpm,itemChild)"><img src="./../../assets/Icon/clcik.png"  style="width: 20px;float: left;"><span v-html="sbpm.radioName"></span></p>
                  </div>
                </div>
              </div>
            </van-col>
            <van-col span="4"></van-col>
          </van-row>
        </div>
        <div style="margin: 14px" v-if="item.chatRecordFrom==1">
          <van-row>
            <van-col span="4"></van-col>
            <van-col span="16">
              <div style="text-align:left;background-color: #A0E75A;min-height: 44px; margin:0 10px;padding: 10px;border-radius: 6px;display: inline-block;float: right">
                <p style="word-break: break-all" @click="voiceText(item)">{{item.chatRecordText}}</p>
              </div>
            </van-col>
            <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;
    height: 44px;
    border-radius: 6px;"/></van-col>
          </van-row>
        </div>
        <!--      <div style="margin: 14px" v-if="one1">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;" /></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: white;-->
        <!--    min-height: 44px;-->
        <!--  margin:0 10px;-->
        <!--    padding: 10px;border-radius: 6px">-->
        <!--              <p>符合您要求的有20家</p>-->
        <!--              <p style="line-height: 24px">-->
        <!--                <a style="display: block;text-decoration: underline;color:#1c84c6;" @click="goFn(4)"><img src="./../../assets/Icon/clcik.png"  style="width: 22px;float: left;">请点击查看门店列表</a>-->
        <!--              </p>-->
        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="one9">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px; margin:0 10px;padding: 10px;border-radius: 6px">-->
        <!--              我的分销店中，哪些还没参加碰瓷专案？-->
        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;"/></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="one10">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;" /></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: white;-->
        <!--    min-height: 44px;-->
        <!--    margin:0 10px;-->
        <!--    padding: 10px;border-radius: 6px">-->
        <!--              <p>符合您要求的有8家</p>-->
        <!--             <p style="line-height: 24px">-->
        <!--                           <a style="display: block;text-decoration: underline;color:#1c84c6;" @click="goFn(2)"><img src="./../../assets/Icon/clcik.png"  style="width: 22px;float: left;">请点击查看门店列表</a>-->
        <!--                    </p>-->
        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="one11">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px; margin:0 10px;padding: 10px;border-radius: 6px">-->
        <!--              我的门店中，本月还没进货专业时时丽的有哪些?-->
        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;"/></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="one12">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;" /></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: white;-->
        <!--    min-height: 44px;-->
        <!-- margin:0 10px;-->
        <!--    padding: 10px;border-radius: 6px">-->
        <!--              <p>您指的是哪种门店类型？</p>-->
        <!--              <p style="line-height: 24px">-->
        <!--                <a style="display: block;text-decoration: underline;color:#1c84c6;" @click="typw(1)">1.金牌店</a>-->
        <!--                <a style="display: block;text-decoration: underline;color:#1c84c6;" @click="typw(2)">2.所有分销店</a>-->
        <!--&lt;!&ndash;                @click="typw(3)&ndash;&gt;-->
        <!--                <a style="display: block;text-decoration: underline;color:#1c84c6;" >3.以上都不是，请具体描述门店类型</a>-->
        <!--              </p>-->

        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="one14">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px;margin:0 10px;;padding: 10px;border-radius: 6px;float: right;">-->
        <!--              <p>-->
        <!--                1.金牌店-->
        <!--              </p>-->
        <!--            </div>-->

        <!--          </van-col>-->
        <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;"/></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="one15">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;" /></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: white;-->
        <!--    min-height: 44px;-->
        <!-- margin:0 10px;-->
        <!--    padding: 10px;border-radius: 6px">-->
        <!--              <p>-->
        <!--                符合您要求的有15家-->
        <!--              </p>-->
        <!--              <p @click="goFn(3)">-->
        <!--                <a style="display: block;text-decoration: underline;color:#1c84c6"  ><img src="./../../assets/Icon/clcik.png"  style="width: 20px;float: left;">请点击查看门店列表。</a>-->
        <!--              </p>-->
        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="one16">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px;margin:0 10px;;padding: 10px;border-radius: 6px;    float: right;">-->
        <!--              <p>-->
        <!--                2.所有分销店-->
        <!--              </p>-->

        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;"/></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="one17">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;" /></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: white;-->
        <!--    min-height: 44px;-->
        <!-- margin:0 10px;-->
        <!--    padding: 10px;border-radius: 6px">-->
        <!--              <p>-->
        <!--                符合您要求的有15家-->
        <!--              </p>-->
        <!--              <p @click="goFn(3)">-->
        <!--                <a style="display: block;text-decoration: underline;color:#1c84c6"  ><img src="./../../assets/Icon/clcik.png"  style="width: 20px;float: left;">请点击查看门店列表。</a>-->
        <!--              </p>-->
        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="one18">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px;margin:0 10px;;padding: 10px;border-radius: 6px">-->
        <!--              2个月业绩小于20000元的金牌店-->
        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;"/></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="one19">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;" /></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: white;-->
        <!--    min-height: 44px;-->
        <!-- margin:0 10px;-->
        <!--    padding: 10px;border-radius: 6px">-->
        <!--              <p>-->
        <!--                已为您筛选20家2个月业绩小于20000元的金牌店-->
        <!--              </p>-->
        <!--              <p @click="goFn(3)">-->
        <!--                <a style="display: block;text-decoration: underline;color:#1c84c6"  ><img src="./../../assets/Icon/clcik.png"  style="width: 20px;float: left;">请点击此条信息查看门店。</a>-->
        <!--              </p>-->
        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="two">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px;margin:0 10px;;padding: 10px;border-radius: 6px">-->
        <!--              我想邀请销量高的金牌店，参加线下订货会-->
        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;"/></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->
        <!--      <div style="margin: 14px" v-if="two1">-->
        <!--        <van-row>-->
        <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
        <!--    height: 44px;-->
        <!--    border-radius: 6px;" /></van-col>-->
        <!--          <van-col span="16">-->
        <!--            <div style="text-align: left;background-color: white;-->
        <!--    min-height: 44px;-->
        <!-- margin:0 10px;-->
        <!--    padding: 10px;border-radius: 6px">-->
        <!--              <p>-->
        <!--                已为您筛选销量前10的金牌店-->
        <!--              </p>-->
        <!--              <p @click="goFn(1)">-->
        <!--                <a style="display: block;text-decoration: underline;color:#1c84c6"  ><img src="./../../assets/Icon/clcik.png"  style="width: 20px;float: left;">请点击此条信息查看门店。</a>-->
        <!--              </p>-->
        <!--            </div>-->
        <!--          </van-col>-->
        <!--          <van-col span="4"></van-col>-->
        <!--        </van-row>-->
        <!--      </div>-->

      </div>
      </div>
<!--    </van-list>-->
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    </van-pull-refresh>
    <div style="position: fixed;bottom: 50px;left: 0;width: 100%;background-color: white"  >
      <van-field
          v-model="content"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入文字"
      >
        <template #left-icon>
          <van-icon :name="yy" style="margin-top: 10px;padding: 0 20px" @click="showFn"/>
        </template>
        <template #button>
          <van-button size="small" :disabled="!btnclik" type="primary" color="#1c84c6" @click="Submit">发送</van-button>
        </template>
      </van-field>

    </div>
    <tab-bar tabBarActive="ai"></tab-bar>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block" style="   position: absolute;bottom: 0;background-color: white;width: 100%;height: 360px">
          <div class="audio" v-if="shows">
            <div class="wave"></div>
            <div class="wave"></div>
            <div class="wave"></div>
            <div class="wave"></div>
            <div class="wave"></div>
          </div>
          <div style="background-color: rgb(0, 87, 186);left: 50%; width: 80px;height: 80px;border-radius: 100px;margin-left: -40px;position: absolute;bottom: 90px;"   >
            <div style="position: absolute;width: 100%;height: 80px;z-index: 999999;"  @touchstart="lujin" @touchend="endlujin" > </div>
            <van-icon :name="yt" size="40" style=" top: 20px;left: 50%;margin-left: -20px;"/>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import avatar from "@/assets/avatar2.png";
import yy from "@/assets/Icon/yy.png";
import yt from "@/assets/Icon/yt.png";
import aiselect from "@/assets/Icon/avatar1.png";
import tabBar from "@/components/tabBar";
import {getReportInfo} from "@/api";
import {aiDialogue} from "@/api/inventory";
import axios from "axios";
export default {
  name: "ai",
  components: {tabBar},
  data() {
    return {
      loading:false,
      finished: false,
      pageNum:1,
      avatar: avatar,
      yy:yy,
      yt:yt,
      aiselect:aiselect,
      Ggreet:[{textList:[]}],
      content:"",
      btnclik:true,
      message:"",
      num:0,
      show:false,
      shows:false,
      one:false,
      two:false,
      one1:false,
      one9:false,
      one10:false,
      one11:false,
      one12:false,
      one14:false,
      one15:false,
      one16:false,
      one17:false,
      one18:false,
      one19:false,
      two1:false,
      dataList:[
        {
          type:1,
          text:"厨卫店中，本月进货不满50包超好贴的门店有哪些？"
        },
        {
          type:2,
          text:"点击此条信息进入推荐门店页面。"
        }
      ]
    }
  },
  watch: {
    $route(to, from) {
      if (to.path == "/ai") {
        this.onLoad()
      }
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    garbageManager(){
      this.$nextTick(() => {
        this.$refs.snb.scrollTop = this.$refs.snb.scrollHeight
      })
    },
    onLoad(){
      this.aiDialogueGgreet()

    },
    choiceSelct(val,val2){
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '发送中...',
        forbidClick: true,
      });
      aiDialogue({type:4,content:val.radioName,radioIndex:val.radioIndex,radioActionId:val2.radioActionId,radioAnswerId:val.radioAnswerId,radioValue:val.radioValue,radioName:val.radioName}).then(response=>{
        loading1.clear()
        if(response.code==200){
          this.pageNum=1
          this.Ggreet=[]
          this.aiDialogueGgreet()
        }
      })
    },
    aiDialogueGgreet(){
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '发送中...',
        forbidClick: true,
      });
      if (this.refreshing) {
        this.Ggreet = [];
        this.refreshing = false;
      }
      aiDialogue({type:3,pageNum:this.pageNum,pageSize:20}).then(response=>{
        loading1.clear()
        this.loading = false;
        if(response.code==200){
          this.Ggreet = response.rows.concat(this.Ggreet)
          if(this.Ggreet.length >=response.total) {
            this.finished = true;
          }else{
            this.finished = false;
          }
          if(this.pageNum==1){
            this.garbageManager()
          }
          this.pageNum=this.pageNum+1
        }
      })
    },
    Submit(){
      if(this.content.trim()==""){
        this.$toast("请输入内容！")
      }
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '发送中...',
        forbidClick: true,
      });
      this.btnclik=false
      aiDialogue({type:1,content:this.content}).then(response=>{
        loading1.clear()
        this.btnclik=true
        if(response.code==200){
          this.content=""
          this.pageNum=1
          this.Ggreet=[]
          this.aiDialogueGgreet()
          this.garbageManager()
        }
      })
    },
    lujin(){
      let url = window.location.href;
      let that = this;
      let wx = this.wx
      let qiyeData
      const instance = axios.create();
      instance.defaults.headers.common['userId'] = localStorage.getItem("loginName");
      instance.get(process.env.VUE_APP_BASE_API + 'mobile/wx/ticket',
          {
            params: {
              url: url
            }
          }).then(response => {
        if (response.status == 200) {
          qiyeData = response.data.data;
          wx.config({
            beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: qiyeData.appId, // 必填，企业微信的corpID
            timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
            nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
            signature: qiyeData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
            jsApiList: ["ready", "startRecord","stopRecord","onVoiceRecordEnd"] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
          });
          wx.ready(function () {
            wx.startRecord();
            that.shows=true;
            wx.onVoiceRecordEnd({
              complete: function (res) {
                var localId = res.localId;
                that.shows=false
                wx.uploadVoice({
                  localId: localId,
                  isShowProgressTips: 1, // 默认为1，显示进度提示
                  success: function (res) {
                    aiDialogue({type:2,content:res.serverId}).then(response=>{
                      if(response.code==200){
                        that.pageNum=1
                        that.Ggreet=[]
                        that.aiDialogueGgreet()
                        that.garbageManager()
                      }
                      that.show=false
                    })
                  }
                });
              }
            });
          })
        }
      });
    },
    endlujin(){
      let wx = this.wx
      var that=this;
      wx.stopRecord({
        success: function (res) {
          var localId = res.localId;
          wx.uploadVoice({
            localId: localId,
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
              aiDialogue({type:2,content:res.serverId}).then(response=>{
                if(response.code==200){
                  that.pageNum=1
                  that.Ggreet=[]
                  that.garbageManager()
                  that.aiDialogueGgreet()
                }
                that.shows=false
                that.show=false
              })
            }
          });
        }
      });
    },
    typw(val){
      if(val==1){
        this.one14=true
        setTimeout(()=>{
          this.one15=true
        },1000)
      }
      if(val==2){
        this.one16=true
        setTimeout(()=>{
          this.one17=true
        },1000)
      }
      if(val==3){
        this.one18=true
        setTimeout(()=>{
          this.one19=true
        },1000)
      }
    },
    send(){
      this.one=false
      this.two=false
      this.one1=false
      this.one9=false
      this.one10=false
      this.one11=false
      this.one12=false
      this.one14=false
      this.one15=false
      this.one16=false
      this.one17=false
      this.one18=false
      this.one19=false
      this.two1=false
      if(this.message.indexOf("销量")!=-1||this.num==1){
        this.one=true
        setTimeout(()=>{
          this.one1=true
        },1000)
      }
      if(this.message.indexOf("专业时时丽")!=-1||this.num==2){
        this.one11=true
        setTimeout(()=>{
          this.one12=true
        },1000)
      }
      if(this.message.indexOf("碰瓷专案")!=-1||this.num==3){
        this.one9=true
        setTimeout(()=>{
          this.one10=true
        },1000)
      }
      this.message=""
    },
    showFn(){
      this.shows=false
      this.show=true
    },
    mousedownFN(){
      this.shows=true;
    },
    clears(){
      this.show=false
      // this.two=true
      //
      // setTimeout(()=>{
      //   this.two1=true
      // },1000)
      this.one=false
      this.two=false
      this.one1=false
      this.one9=false
      this.one10=false
      this.one11=false
      this.one12=false
      this.one14=false
      this.one15=false
      this.one16=false
      this.one17=false
      this.one18=false
      this.one19=false
      this.two1=false
    },
    mouseupfN(){
      this.show=false
      // this.two=true
      //
      // setTimeout(()=>{
      //   this.two1=true
      // },1000)
      this.one=false
      this.two=false
      this.one1=false
      this.one9=false
      this.one10=false
      this.one11=false
      this.one12=false
      this.one14=false
      this.one15=false
      this.one16=false
      this.one17=false
      this.one18=false
      this.one19=false
      this.two1=false
      if(this.num>2){
        this.num=0
      }
      this.num=this.num+1
      this.send()
    },
    goFn(row) {
      this.$router.push({
        path: "/aipage",
        query: {type: row}
      })
    },
    getReportInfo() {
      this.deptLevel = localStorage.getItem("deptLevel")
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getReportInfo({isContent: false}).then(res => {
        loading1.clear()
        this.list = res.data.summaryTasks
        this.historyButton=res.data.historyButton
        localStorage.setItem("powerGrade", res.data.positionId)
        this.existReject=res.data.existReject
        this.powerGrade = res.data.positionId
        this.showButton = res.data.showButton
        this.deptLevel = res.data.deptLevel
        this.reportTargetAll = res.data.reportTargetAll
        this.updataTime = res.data.reportTargetAll.updateTime
      })
    },
  }
}
</script>
<style lang="scss" scoped>
p{
  margin: 0;
  line-height: 22px;
}
.audio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 60px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 86px;
  margin-left: -34px;
  .wave {
    height: 40px;
    display: block;
    width: 10px;
    height: 6px;
    border-radius: 8px;
    background: orange;
  }
}
.audio {
  .wave {
    animation: audio-wave 2s ease-in-out infinite;

    &:nth-child(1) {
      animation-delay: 0.1s;
    }

    &:nth-child(2) {
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      animation-delay: 0.3s;
    }

    &:nth-child(4) {
      animation-delay: 0.4s;
    }

    &:nth-child(5) {
      animation-delay: 0.5s;
    }
  }
}

@keyframes audio-wave {
  0% {
    height: 6px;
    transform: translateY(0px);
    background: #ff8e3a;
  }

  25% {
    height: 6px;
    transform: translateY(0px);
    background: #9c73f8;
  }

  50% {
    height: 30px;
    transform: translateY(-5px) scaleY(1.5);
    background: #ed509e;
  }

  75% {
    height: 6px;
    transform: translateY(0px);
    background: #9c73f8;
  }

  100% {
    height: 6px;
    transform: translateY(0px);
    background: #0fccce;
  }
}
.pageya{
  overflow-y: auto;
  height: 700px;
}
</style>