<template>
  <div class="app-container">
    <div class="header_main">
      上传签字文书
      <div class="return_btn" @click="onClickLeft"></div>
    </div>

    <div class="jg"></div>

    <div class="search_box">
<!--      <p>{{form.address}}</p>-->
      <p>{{form.caseName}}</p>
    </div>

    <div>
      <van-row type="flex" align="center" v-for="(item,index) in fileList" :key="index">
        <van-col>
          <p :class="{'tt':form.caseProgress != item.caseProgress,'tt_now':form.caseProgress == item.caseProgress,}">{{item.caseProgressName}}</p>
        </van-col>
        <van-col :span="2">
          <p class="top_border" v-if="index!=0"></p>
          <i></i>
          <p class="bottom_border" v-if="index != fileList.length-1"></p>
        </van-col>
        <van-col :span="19">
          <van-uploader v-model="item.caseProgressAttach" :show-upload="index == fileList.length-1 ? true : false" :deletable="index == fileList.length-1 ? true : false" :after-read="afterRead" @delete="deleteFile" multiple preview-size="60" upload-icon="add" />
        </van-col>
      </van-row>
    </div>
<!--    $router.push({name:'lawEnforcementEnterpriseRelation'})-->
    <p style="color: #FE1313;text-align: center;margin-top: 20PX;">*请上传不超过5MB 格式为doc/xls/png/jpg/jpeg/mp4的文件</p>
    <p class="submitButton" @click="submitForm">保存</p>
  </div>
</template>

<script>
  import { getCase,attachmentList,commonUpload,attachmentEdit } from "@/api/lawEnforcement/index";
  export default {
    name: "programmeDetail",
    data() {
      return {
        fileList1:[],
        fileList:[],
        openPic:[],
        openPic2:[],
        caseProgressOptions:[],
        form:{}
      };
    },
    created() {
      this.getDicts("case_node").then(response => {
        this.caseProgressOptions = response.data;
        getCase(this.$route.query.id).then((res) => {
          res.data.caseProgressName = this.selectDictLabel(response.data, res.data.caseProgress);
          this.form = res.data;//caseProgress
        });
      });
      this.getDetail();
    },
    methods: {
      getDetail(){
        let queryParams = {
          caseId:this.$route.query.id
        }
        attachmentList(queryParams).then((response) => {
          let fileForm = response.rows;
          console.log(fileForm)
          fileForm.map((res,i)=>{
            if (res.caseProgressAttach != null && res.caseProgressAttach != ''){
              res.caseProgressAttach = res.caseProgressAttach.split(",");
            }else{
              res.caseProgressAttach = [];
            }

            res.caseProgressAttach.map((rr,index)=>{
              if (i == fileForm.length-1){
                this.openPic2.push(rr)
              }
              res.caseProgressAttach[index] = {
                url: '/api' + rr,
                isImage: true
              }
            })
            this.fileList.push(res)
          })
          console.log(this.openPic2)
        });
      },
      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        this.openPic.push(file.file);

        let params1 = new FormData();
        params1.append("file", file.file);
        commonUpload(params1).then((r1) => {
          this.openPic2.push(r1.fileName);
        })
      },
      deleteFile(file,detail) {
        this.openPic2.splice(detail.index,1);
      },
      submitForm(){
        let queryParams = {
          id: this.$route.query.id,// 案件ID
          caseProgress: this.form.caseProgress,
          attachement: this.openPic2.join(','),  // 打卡上传附件(附件的路径字符串，多个附件路径之前通过英文逗号分隔)
        };
        attachmentEdit(queryParams).then((r1) => {
          if (r1.code == 200){
            this.$notify({ type: 'success', message: '保存成功' });
          }
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 0 4%;
    height: 100vh;
    background: #ffffff;
  }
  .jg{
    height: 116px;
  }
  .header_main{
    height: 116px;
    background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 36px;
    line-height: 116px;
    text-align: center;
    color: #fff;
    z-index: 999;
    .return_btn{
      width: 24px;
      height: 43.2px;
      background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
      background-size: 20px 36px;
      position: absolute;
      left: 38px;
      top: 36px;
    }
    .add_btn{
      width: 56.4px;
      height: 40.8px;
      background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
      background-size: 47px 34px;
      position: absolute;
      right: 38px;
      top: 36px;
    }
  }
  /deep/ .van-uploader__upload{
    margin: 0;
    border: 1px dashed #C9C9C9;
    border-radius: 10px;
    background: transparent;
  }
  /deep/ .van-col{
    position: relative;
  }
  /deep/ .van-row{
    /*margin-top: 10PX;*/
  }
  /deep/ .van-col--19{
    padding-top: 10PX;
  }
  .search_box{
    width: 88%;
    margin: 10PX auto;
    color: #1D6FE9;
    font-size: 0.4rem;
    text-align: center;
  }
  .tt{
    background: url('../../../../static/images/lawEnforcement/icon/signInRecord_icon_01.png') no-repeat center;
    width: 41PX;
    height: 41PX;
    line-height: 41PX;
    text-align: center;
    color: #ffffff;
    font-size: .35rem;
  }
  .tt_now{
    background: url('../../../../static/images/lawEnforcement/icon/signInRecord_icon_03.png') no-repeat center;
    width: 41PX;
    height: 41PX;
    line-height: 41PX;
    text-align: center;
    color: #ffffff;
    font-size: .35rem;
  }
  i{
    background: url('../../../../static/images/lawEnforcement/icon/signInRecord_icon_02.png') no-repeat center;
    width: 10PX;
    height: 10PX;
    display: block;
    margin: 0 auto;
  }
  /deep/ .van-col--2{
    text-align: center;
  }
  .bottom_border{
    border-left: 2PX solid #DDDDDD;
    width: 0PX;
    height: 25PX;
    position: absolute;
    left: calc(50% - 1PX);
    top: calc(50% + 5PX);
  }
  .top_border{
    border-left: 2PX solid #DDDDDD;
    width: 0PX;
    height: 35PX;
    position: absolute;
    left: calc(50% - 1PX);
    top: -35PX;
  }
  .submitButton{
    width: 45%;
    margin: 0 auto;
    background-image: linear-gradient(to right, #2E79E9 , #77A6EF);
    text-align: center;
    color: #ffffff;
    height: 70px;
    line-height: 70px;
    border-radius: 8PX;
    margin-top: 25PX;
  }
  /deep/ .van-uploader__preview{
    margin-bottom: 0!important;
  }
  /deep/ .van-uploader{
    display: block;
  }
</style>
