<template>
  <div class="content">
    <div class="content-left">
      <div class="content-header"><span></span>投诉审核过程</div>
      <div class="content-box" style="height:calc(100% - 40px)">
         <ul class="progress-ul">
           <li v-for="item in progressList">
             <p>{{item.tm}}</p>
             <p>{{item.flow}}</p>
             <p>{{item.content}}</p>
           </li>
         </ul>
      </div>
    </div>
    <div class="content-right">
      <div class="content-header"><span></span>投诉内容</div>
      <div class="content-box" style="height:calc(30% - 80px);overflow: auto">

      </div>
      <div class="content-header"><span></span>投诉佐证材料</div>
      <div class="content-box" style="height:calc(70% - 80px);overflow: auto">
        <a-tabs style="margin:5px;">
          <a-tab-pane :tab="picturetabName" key="1" style="height: 240px;">
            <div class="upload-container">
              <div class="image-preview image-app-preview">
                <viewer class="image-preview-wrapper" :images="pictureArray">
                  <img title="点击查看大图" v-for="item in pictureArray" :key="item.id" :src="`${hostUrl}${item.filePath}`" >
                </viewer>
                <p v-if="pictureArray.length==0" style="text-align: center">暂无图片信息</p>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane :tab="audiotabName" key="2">
            <elaudio
                v-for="(audio,index) in audioArray"
                :key="index"
                style="margin-left:15%"
                :theUrl="`${hostUrl}/${audio.filePath}`"></elaudio>
            <p v-if="audioArray.length==0" style="text-align: center">暂无音频信息</p>
          </a-tab-pane>
          <a-tab-pane :tab="videotabName" key="3">
            <a-carousel autoplay style="height:350px;">
              <div v-for="(item,index) in videoArray" :key="index">
                <video-player class="vjs-custom-skin" ref="videoPlayer" :options="item" :playsinline="true">
                </video-player>
              </div>
              <div v-if="videoArray.length==0">
                <p  style="text-align: center">暂无视频信息</p>
              </div>
            </a-carousel>
          </a-tab-pane>
          <a-tab-pane :tab="filetabName" key="4">
            <a-table :columns="fileArrayColumns" bordered :data-source="fileArray" style="width: 100%;margin: 0 auto;">
                  <span slot="action" slot-scope="text">
                    <p>
                      <a :href="`${hostUrl}/${text.filePath}`" target="_blank" rel="noopener noreferrer">
                        {{ text.fileName }}
                      </a>
                    </p>
                  </span>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="content-box" style="height:80px;border-top:1px solid #e4e3e3;display: flex;align-items: center">
          <a-button style="margin: 0px 5px" type="primary" v-if="(hasStat=='001' || hasStat=='002') && activeName=='approval'" @click="submit(1)">设为有效并推送预警</a-button>
          <a-button style="margin: 0px 5px" type="primary" v-if="(hasStat=='001' || hasStat=='002') && activeName=='approval'" @click="submit(2)">仅设为有效</a-button>
          <a-button style="margin: 0px 5px" type="primary" v-if="(hasStat=='001' || hasStat=='002') && activeName=='approval'" @click="submit(3)">设为无效</a-button>
          <a-button style="margin: 0px 5px" type="primary" v-if="(hasStat=='001' || hasStat=='002') && activeName=='approval'" @click="submit(4)">设为无效并删除</a-button>
          <a-button style="margin: 0px 5px" type="primary" v-if="hasStat=='002' && activeName=='approval'" @click="submit(5)">退回修改</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import elaudio from '@/widgets/elAudio.vue';
import { hostUrl } from '../../utils/global_variable.js';
import request from '../../utils/gw_ajax_request.js';
export default {
  components: {
    elaudio,
  },
  props: ['hasStat', 'activeName'],
  data() {
    return {
      currentObj: {},
      progressList: [
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试"},
        // {tm:"2025-06-04 11:11:11",flow:"测试测试",content:"测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试"}
      ],
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],
      audiotabName: '音频(0)',
      videotabName: '视频(0)',
      picturetabName: '图片(0)',
      filetabName: '文件(0)',
      fileArrayColumns: [
        {
          title: '文档',
          dataIndex: 'fileName',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
    };
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
    hasPriv() {
      return this.ownPriv('manage');
    },
    organCode() {
      return localStorage.getItem('currentRlcode')
        ? localStorage.getItem('currentRlcode')
        : '';
    },
    organNm() {
      return localStorage.getItem('currentOrgNm')
        ? localStorage.getItem('currentOrgNm')
        : '';
    },
    orgId() {
      return localStorage.getItem('currentOrgId')
        ? localStorage.getItem('currentOrgId')
        : '';
    },
    hostUrl() {
      return hostUrl;
    },
  },
  created() {},
  mounted() {
    this.initDetail();
  },
  methods: {
    submit(v) {
      this.$emit('submitBtn', v);
    },
    initDetail() {
      request
        .post(`/detail`, this.params)
        .then((res) => {
          if (res.success) {
            this.currentObj = res.data;
            if (res.data.gwComFiles) {
              res.data.gwComFiles.forEach((item) => {
                if (
                  item.fileExt == 'mp3' ||
                  item.fileExt == 'MP3' ||
                  item.fileExt == 'm4a'
                ) {
                  this.audioArray.push(item);
                } else if (
                  item.fileExt == 'jpg' ||
                  item.fileExt == 'JPG' ||
                  item.fileExt == 'png' ||
                  item.fileExt == 'PNG'
                ) {
                  this.pictureArray.push(item);
                } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
                  this.videoArray.push({
                    height: '350',
                    autoplay: false,
                    muted: true,
                    language: 'en',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    sources: [
                      {
                        type: 'video/mp4',
                        // mp4
                        src: `${this.hostUrl}/${item.filePath}`,
                        // src: "http://sv.goldenwater.com.cn/" + item.filePath,
                        // webm
                        // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                      },
                    ],
                  });
                } else {
                  this.fileArray.push(item);
                }
              });
              this.picturetabName =
                '图片资料(' + this.pictureArray.length + ')';
              this.audiotabName = '音频资料(' + this.audioArray.length + ')';
              this.videotabName = '视频资料(' + this.videoArray.length + ')';
              this.filetabName = '文件资料(' + this.videoArray.length + ')';
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {
          this.$message.error('上传文件失败!');
        });
    },
  },
};
</script>

<style lang='less' scoped>
   .content{
     width: 100%;
     height:100%;
     display: flex;
     padding: 10px;
   }
   .content-left{
     width: 50%;
     height:100%;
     border:1px solid #f1f1f1;
   }
   .content-right{
     width: 50%;
     height:100%;
     border:1px solid #f1f1f1;
   }
   .content-header{
     width: 100%;
     height:40px;
     text-indent: 10px;
     border-bottom:1px solid #f1f1f1;
     background: #e6f7ff;
     font-size: 15px;
     font-weight: bold;
     display: flex;
     align-items: center;
     span{
       display: block;
       width: 10px;
       height:20px;
       background: #00A3EF;
       margin-left: 10px;
       margin-right: 10px;
     }
   }
   .content-box{
     width: 100%;
     padding: 10px;
   }
   .progress-ul{
     margin: 0;
     padding: 0;
     list-style: none;
     width: 100%;
     height:100%;
     overflow: auto;
     li{
        padding: 0px 5px;
        width: 100%;
        border:1px solid #e4e3e3;
        margin-top: 10px;
        p{
          width:100%;
          margin: 0;
          padding: 0;
        }
     }
   }
   .file-ul{
     width: 100%;
     height:100%;
     overflow: auto;
     margin: 0;
     padding: 0;
     list-style: none;
     li{
       width: 100%;
       height:35px;
       display: flex;
       border: 1px solid #e4e3e3;
       padding: 0px 5px;
       span:first-child{
         display: block;
         width: calc(100% - 40px);
         white-space: nowrap;
         overflow:hidden;
         text-overflow:ellipsis;
         height:100%;
         display: flex;
         align-items: center;
       }
       span:nth-child(2){
         display: block;
         width: 40px;
         height:100%;
         display: flex;
         align-items: center;
         a{
           color:#00A3EF;
         }
       }
     }
   }
</style>
