<template>
  <div>
    <div class="mb-16 flex-row justify-content-between">
      <span class="f-weight500 f18">案件文书</span>
      <div class="case-office-btn">

        <span v-if="tableData.find(item =>{ return (item.documentStaus.code == 2 && item.signStatus != null && item.signStatus.code == 1) })" class="cursor-pointer border-E5E6EB" @click="CancelSignatureClick"><i class="el-icon-edit-outline"></i> 撤销签字</span>

        <el-popover 
            placement="bottom"
            width="500"
            v-model="singleofficevisible"
            title="发起签字"
            trigger="click">
            
            <singleofficeWritPopover :caseId="caseId" :singleofficevisible.sync="singleofficevisible" @handleUpdate='getSetTimeWritCaseList'/>

            <span slot="reference" class="cursor-pointer border-E5E6EB"><i class="el-icon-edit-outline"></i> 发起签字</span>
        </el-popover>

        <el-popover 
            placement="bottom"
            width="500"
            v-model="singlesealvisible"
            title="发起签章"
            trigger="click">
            
            <singleofficeSealPopover :caseId="caseId" :singlesealvisible.sync="singlesealvisible"/>

            <span slot="reference" class="cursor-pointer border-E5E6EB"><i class="el-icon-medal"></i> 文书签章</span>
        </el-popover>

        <!-- <span class="cursor-pointer border-E5E6EB"><i class="el-icon-medal"></i> 文书签章</span> -->
      </div>
    </div>
    <div class="case-detail-des flex-column mb-16 border-E5E6EB" v-for="(item, index) in tableData" :key="index">
      <div class="background-color-F5F5F5 p-16 flex-row align-items-center border-radius-8">
        <a class="case-img"><img :src="$util.reg_img(item.documentUrl)"/></a>
        <div class="flex-column pl-8">
          <a class="f-weight500">{{item.fileName}}
            <span class="case-lable">
              <!-- documentStaus   0 未生成文书 1 生成中 2 完成生成 3 生成失败 -->
              <!-- signStatus  0 未发起  1签字中 2签字完成  3签字失败  -->
                <a class="case-status0" v-if="item.documentStaus.code == 1">生成中</a>
                <a class="result-status0" v-if="item.documentStaus.code == 3">生成失败</a>
                <a class="case-status3" v-if="item.documentStaus.code == 2 && (item.signStatus == null || item.signStatus.code == 4)">已生成</a>
                <a class="case-status0" v-if="item.documentStaus.code == 2 && item.signStatus != null && item.signStatus.code == 1">签字中</a>
                <a class="case-status3" v-if="item.documentStaus.code == 2 && item.signStatus != null && item.signStatus.code == 2">已签字</a>
                <a class="result-status0" v-if="item.signStatus == 3">签字失败</a>
            </span>
          </a>
          <!-- sealStatus 签章状态
          handleBy 操作人
          handleTime 操作时间 -->
          <a class="color-86909C f12 pt-6 pb-6">{{item.handleBy}}&nbsp;&nbsp;{{ $util.formatDate(item.handleTime, 'YYYY-MM-DD HH:mm:ss')}}</a>
          <div class="flex-row align-items-center color-86909C" v-if="(item.signList.length > 0 || item.unsignList.length > 0)&&(item.signStatus != null && item.signStatus.code == 1)">
            <div>签字</div>
            <div class="flex-row" v-for="(item1, index1) in item.unsignList" :key="index1">
              <el-tag v-if="item1.signStatus.code == 2" class="ml-4" size="small" type="success" effect="plain">{{item1.signName}}</el-tag>
              <el-tag v-if="item1.signStatus.code == 0" class="ml-4" size="small" type="info" effect="plain">{{item1.signName}}</el-tag>
            </div>
            <!-- <el-tag class="ml-4" size="small" type="success" effect="plain"
              v-for="(item1, index1) in item.signList" :key="index1">{{item1.signName}}</el-tag>
            <el-tag class="ml-4" size="small" type="info" effect="plain"
                v-for="(item2, index2) in item.unsignList" :key="index2">{{item2.signName}}</el-tag> -->
          </div>
        </div>
      </div>
      <div class="color-86909C mt-8">
        <upload-file v-if="item.documentStaus.code == 0 || item.documentStaus.code == 1" :max-count="1" :show-file-name="false"
              uploadName="支持文件大小不超过10M"
              accept=".docx,.doc"
              :span="6"
              :fileSize="10"
              :documentType="item.type"
              :caseId="caseId"
              @handleUploadFile="handleUploadFile">
        </upload-file>
        <!-- <a class="mr-16 ml-16 cursor-pointer"><i class="el-icon-plus"></i>上传模板</a> -->
        <!-- documentStaus   0 未生成文书 1 生成中 2 完成生成 3 生成失败 -->
        <!-- signStatus  0 未发起  1签字中 2签字完成  3签字失败  -->
        <a class="mr-16 cursor-pointer" v-if="item.documentStaus.code == 0" @click="handleFileGenerate(item)"><i class="el-icon-document"></i>生成文书</a>
        <a class="mr-16 cursor-pointer" v-if="item.documentStaus.code == 1 || item.documentStaus.code == 3" @click="handleFileAgain(item)"><i class="el-icon-document"></i>重新生成文书</a>
        <a class="mr-16 cursor-pointer" v-if="(item.documentStaus.code == 2 || item.documentStaus.code == 3) && (item.signStatus == null ? true : (item.signStatus.code != 1))" @click="handleDelete(item)"><i class="el-icon-delete"></i>删除</a>
        <a class="mr-16 cursor-pointer" v-if="item.documentStaus.code == 2" @click="handlePreview(item)"><i class="el-icon-view"></i>预览</a>
        <a class="mr-16 cursor-pointer" v-if="item.documentStaus.code == 0 || item.documentStaus.code == 1" @click="handleTemplateDownload(item)"><i class="el-icon-download"></i>下载模板</a>
        <a class="mr-16 cursor-pointer" v-else @click="handleDownload(item)"><i class="el-icon-download"></i>下载文件</a>
      </div>
    </div>

    <pdfPreview v-if="editPdfFlag" :visible.sync="editPdfFlag" :previewUrl="previewPath"/>
  </div>
</template>

<script>
import caseManagement from "@/services/caseManagement";
export default {
  components: {
    pdfPreview: () => import('@/components/pdfPreview.vue'),//查看PDF文件
    uploadFile: () => import('@/components/uploadSingleFile.vue'),//上传
    singleofficeWritPopover: () => import('./singleofficeWritPopover.vue'),//发起签字
    singleofficeSealPopover: () => import('./singleofficeSealPopover.vue'),//发起签章
  },
  name: "cassWrit",
  props: {
    caseId: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
  data() {
    return{
      singlesealvisible:false,
      singleofficevisible:false,
      tableData: [],
      previewPath: '',
      editPdfFlag: false,

      officeOptions:[{label:'调解告知书',value:'1'},{label:'调解申请书',value:'2'},
                {label:'送达地址确认书',value:'3'},{label:'调解笔录',value:'4'},{label:'调解协议',value:'5'}],
      ObjectInfo:{
          methodIds:['调解告知书','调解申请书','送达地址确认书'],
          users:'',
          content:''
      },
    }
  },
  async created() {
    await this.getWritCaseList();
  },
  methods: {

    // 列表数据
    getSetTimeWritCaseList() {
      let _this = this
      setTimeout(() => {
        _this.getWritCaseList()
      }, 1500);
    },

    // 列表数据
    getWritCaseList() {
      let dataJson = {
        // size: 9999,
        // current: 1,
        id: this.caseId
      }
      caseManagement.getCaseGenerateList(dataJson).then(res => {
        if (!res.code) {
          this.tableData = res;
        }
      })
    },
    // 上传文书模板
    handleUploadFile(){
      this.$message.success("上传模板成功");
      this.getWritCaseList()
    },
    // 生成文书
    handleFileGenerate(item){
      this.$confirm("请确定是否生成文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(!this.$clickThrottle()) { return }//防止重复点击
        let data = {caseId: this.caseId,documentTypes:[item.type]}
        caseManagement.traceGenerateCreate(data).then((res) => {
          this.$message.success("生成文件成功");
          this.getWritCaseList()
        });
      }).catch(() => {});
    },
    // 重新生成文书
    handleFileAgain(item){
      this.$confirm("请确定是否生成文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let data = {id: item.generateLogId}
        caseManagement.traceGenerateRetry(data).then((res) => {
          this.$message.success("重新生成文件成功");
          this.getWritCaseList()
        });
      }).catch(() => {});
    },
    handleDelete(item) {
      this.$confirm("请确定是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let data = {id: item.generateLogId}
        caseManagement.traceGenerateDelete(data).then((res) => {
          this.$message.success("文书删除成功");
          this.getWritCaseList()
        });
      }).catch(() => {});
    },
    CancelSignatureClick() {
      this.$confirm("请确定是否撤销签字?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let data = {id: this.caseId}
        caseManagement.traceSignBatchCancel(data).then((res) => {
          this.$message.success("撤销签字成功");
          this.getWritCaseList()
        });
      }).catch(() => {});
    },
    async handlePreview(item) {
      let previewUrl = `/mediate/minio/preview/${item.fullUrl}`
      if(item.fullUrl.includes('http')){previewUrl = item.fullUrl}
      this.previewPath = previewUrl
      this.editPdfFlag = true;
    },
    handleDownload(item) {
      const downloadTask = this.$TrydoFiles.download(item.fullUrl, item.name)
          .build()
          .start();
      // fetchApi.downFile({
      //   path: item.url,
      //   fileName: item.name
      // }).then(res => {
      //   console.log(res)
      //   this.$util.downloadFileByBlob(res, item.name)
      // })
    },
    handleTemplateDownload(item){
      this.$fetchApi.viewFullFile({path: item.documentUrl}).then((res) => {
        const downloadTask = this.$TrydoFiles.download(res, item.name)
          .build()
          .start();

      });

    }
   
  },
}
</script>

<style scoped lang="scss">
.case-office-btn{
  margin-top: 6px;
  margin-right: 2px;
 span{color: #BC6F60; padding: 3px 5px; border-radius: 5px;margin-right: 5px;}
}
.background-color-F5F5F5 {
  background-color: #F5F5F5;
}
.border-E5E6EB {
  border: solid 1px #E5E6EB;
}
.case-detail-des {
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;

  .case-img {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;

    img {
      max-width: 50px;
      max-height: 50px;
    }
  }

  i {
    margin-right: 4px;
  }
}

</style>
