<template>
  <div>
    <el-dialog title="归档详情" :visible="showarchiveDetails" @close="cancel" :destroy-on-close="true" center>
      <div class="loading" v-if="flagLoading">
        <i class="el-icon-loading"></i>
      </div>
      <div v-else>
        <div class="noData" v-if="noData">暂无数据！</div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="案件信息" name="first">
            <caseInfo :caseApplicationObj="caseDetail"></caseInfo>
          </el-tab-pane>
          <el-tab-pane label="案件日志" name="second">
            <caselogInfo :caselogDataArr="caseLog"></caselogInfo>
          </el-tab-pane>
          <!-- <el-tab-pane label="快递信息" name="third" v-if="false">
            <expressDeliveryInfo :deliveryDataArr="detailform"></expressDeliveryInfo>
          </el-tab-pane> -->
          <!-- <el-tab-pane label="案件视频" name="fourth"> -->
            <!-- <div @click="getVideo">chakanshipin</div> -->
            <!-- <el-empty description="暂无视频" v-if="!videoFlag"></el-empty>
            <video style="background-color: #181717;width: 400px;height: 200px;margin: 30px;" v-if="videoFlag" :src="headPath + item.annexPath" controls="controls" v-for="(item,index) in videoUrl" :key="index"></video>
          </el-tab-pane> -->
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import caseInfo from "./caseInfo.vue";
import caselogInfo from "./caselogInfo.vue";
import expressDeliveryInfo from "./expressDeliveryInfo.vue";
export default {
  props: ["showarchiveDetails", "detailform", "flagLoading", "videoList","caseDetail","caseLog"],
  components: {
    caseInfo,
    caselogInfo,
    expressDeliveryInfo,
  },
  data() {
    return {
      activeName: "first",
      caseApplicationObj: {}, //案件信息
      caselogDataArr: [], //案件日志
      deliveryDataArr: [], //快递信息
      noData: false,
      videoUrl:[],
      headPath:window.location.origin + "/API",
      videoFlag:false
    };
  },
  watch: {
    showarchiveDetails(newValue) {
      // this.headPath = ;
      if (newValue) {
        // this.caseApplicationObj = this.detailform.caseApplication;
        // this.caselogDataArr = this.detailform.caseLogRecordList;
        // this.deliveryDataArr = this.detailform.logisticsInfoVOList;
      }
    },
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      if (this.videoList) {
        this.videoFlag = true;
        // this.videoUrl = headPath + this.videoList[0].annexPath;
        this.videoUrl = this.videoList;
      }else{
        this.videoFlag = false;
      }

    },
    cancel() {
      this.$emit("cancelpaymentdetails");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 1000px;
  background: #ffffff;
  border-radius: 20px;
}

::v-deep .el-dialog__body {
  height: 700px !important;
  overflow: hidden;
}

::v-deep .el-tabs__content {
  height: 700px;
  overflow-y: scroll;
  padding-bottom: 10%;
}

.loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-icon-loading {
    font-size: 50px;
  }
}

.noData {
  width: 100%;
  height: 400px;
  font-size: 30px;
  font-weight: 700;
  color: #959595;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>