<template>
  <div>
    <div class="detail-body">
      <div class="title">{{data.approveTitle }}</div>
      <!-- 基础信息 -->
      <div class="baseInfo">
        <div style="padding-top:5px;font-size:13px;">
          <p class="detail-item"><span class="detail-label">审批编号：</span><span class="detail-val">{{data.auditItemId}}</span></p>
          <p class="detail-item" v-if="processDetail.contractCode">
            <span class="detail-label">合同编号：</span>
            <span class="detail-val">{{processDetail.contractCode}}</span>
          </p>
          <p class="detail-item"><span class="detail-label">审批类型：</span><span class="detail-val">{{data.approveTypeText }}</span></p>
          
          <p class="detail-item" v-if="processDetail.title"><span class="detail-label">副标题：</span><span class="detail-val">{{processDetail.title}}</span></p>
          <p class="detail-item"><span class="detail-label">客户名称：</span><span class="detail-val">{{data.customerName}}</span></p>
          <p class="detail-item" v-if="data.approveType == 'kfAccessCard'||
            data.approveType == 'kfTenantNameplate'||
            data.approveType == 'kfDisplayScreen'||
            data.approveType == 'kfDecorationRestoration'||
            data.approveType == 'kfCustomerDemands'||
            data.approveType == 'kfCommunicationBusiness'||
            data.approveType == 'kfSporadicCharges'||
            data.approveType == 'kfRenovation'"><span class="detail-label">应收含税总额：</span><span class="detail-val">{{approveParam.countCharge}}</span></p>
          <p class="detail-item" v-if="data.approveType == 'kfRefundOfDeposit'"><span class="detail-label">应退押金总金额：</span><span class="detail-val">{{approveParam.refundableAmount}}</span></p>
          <p class="detail-item" v-if="data.approveType == 'fwContractChange'||data.approveType == 'fwContractAdd' "><span class="detail-label">房间信息：</span><span class="detail-val">{{approveParam.roomCodes}}</span></p>
          <p class="detail-item" v-if="data.approveType == 'cwContractTZ'||data.approveType == 'cwContractAdd' "><span class="detail-label">车位信息：</span><span class="detail-val">{{approveParam.parkingNumbers}}</span></p>
          <div style="position:absolute;z-index:200;right:14px;top:50px;">
            <img v-if="data.approveState=='1'" src="../../assets/images/havePass.png" height="83px" width="99px">
            <img v-if="data.approveState=='2'" src="../../assets/images/haveRejected.png" height="83px" width="99px">
          </div>
        </div>
        <div class="drawer-time">
          <ul class="line-list">
            <li>
              <div class="line-date">{{formDate(data.createDate )}}</div>
              <div class="dot-line">
                <div :class="data.approveState=='3'?'dot-gray':'dot-large'">
                  <div>v</div>
                </div>
                <div :class="data.approveState=='3'?'line-hidden':'line'"></div>
              </div>
              <div class="info-box">
                <span class="line-state2">发起人 <span v-if="data.approveState=='3'">撤回</span></span>
                <div class="line_desc">{{data.approveLaunchUserName}}</div>
              </div>
            </li>
            <li v-if="data.approveState !='3'" v-for="(item, index) in  data.auditRecordGroup" :key="index">
              <div class="line-date">{{formDate(item.groupCreateDate)}}</div>
              <div class="dot-line">
                <div v-if="item.groupState=='2'" class="dot-red">
                  <div>×</div>
                </div>
                <div v-else :class="item.groupState=='1' ||item.groupState =='3'?'dot-large':'dot'">
                  <div v-if="item.groupState=='1' ||item.groupState =='3'">v</div>
                  <div v-else>...</div>
                </div>
                <div :class="(index+1)==data.auditRecordGroup.length?'line-hidden':'line'"></div>
              </div>
              <div class="info-box">
                <div>
                  <span class="line-state2" v-if="item.groupState=='2'">驳回</span>
                  <span class="line-state2" v-if="item.groupState=='1'">同意</span>
                  <span class="line-state2" v-if="item.groupState=='0'">审批中</span>
                  <div class="line_desc" v-for="(items,i) in item.detail " :key="i">
                    <span>{{ items.approveUserName}}({{items.approveFlagText}})</span>
                    <span v-if="items.approveContent&&items.approveContent!=''">(</span>
                    <span> {{items.approveContent}} </span>
                    <span v-if="items.approveContent&&items.approveContent!=''">)</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <Mark :type="type" />
        
      </div>
      <!--基本信息结束-->
      <div style="height:70px;" v-if="(doneOrNotDone==1&&type=='1') || (doneOrNotDone==undefined && data.approveState==0 && type=='1')"></div>
      <div class="drawer-footer" v-if="doneOrNotDone==1&&type=='1'">
        <Button style="background-color:rgba(230,0,19,1);width:47%;" @click="executeApprove('2')">驳回</Button>
        <Button style="margin-left:15px;width:47%;" @click="executeApprove('1')">同意</Button>
      </div>
      <!-- 只要有一个节点是审批通过的就不可以撤回 -->
      <div class="drawer-footer" v-if="doneOrNotDone==undefined && data.approveState==0 && type=='1'">
        <Button v-if="flag==true" @click="revokeProcess()">撤销</Button>
      </div>
    </div>
  </div>
</template>
<script>
import mixin from './mixin.js'
import {
  getApproveDetailById, //根据审批项ID获取详情
  getApproveComment, //根据审批项ID获取备注详情
  saveComment, //添加备注
  deleteComment, //删除备注
  executeApprove, //审批人进行审批操作
  revokeProcess, //撤销一个流程
  listFormFeeItem, //查询费项
  upLoad,
  getByProcessKeyAndSerialNum,
  getByProcessKeyAndId

} from "./service/getData.js"
import {
  error
} from 'util';
export default {
  mixins: [mixin],
  data() {

    return {
      tabName: 'baseInfo',
      url: '/landcrm/rest/uploadFileInfo/uploadMutiFile',
      data: {},
      getData: {},
      jimaoData: {},
      upLoadData: [],
      tipData: [], //备注
      departmentName: [],
      uploadFiles: [],
      actTaskId: [],
      operateDate: {},
      comments: '', //备注内容
      num: '',
      isChoose: false, //图片放大缩小类的添加
      addStatus: false, //备注里的添加显示状态
      userId: localStorage.userId,
      doneOrNotDone: '',
      flag: true,
      type: '', //代办或已办
      approveParam: {},
      processDetail:{}, // 合同
      processKey: this.$route.query.processKey,
      columns_contract: [{
          title: "序号",
          type: "index",
          align: "center",
          width: 80
        },
        {
          title: "车位编号",
          key: "parkingNumber",
          align: "center",
          width: 100
        },
        {
          title: "费项",
          key: "fiName",
          align: "center",
          width: 100
        },
        {
          title: "每期应收",
          key: "receivableAmount",
          align: "center",
          width: 100
        },
        {
          title: "开始日期",
          key: "startDate",
          align: "center"
        },
        {
          title: "结束日期",
          key: "endDate",
          align: "center"
        }
      ], // 合同表头
      contractList: [], // 合同列表
      columns_attachment: [{
          type: "index",
          title: "序号",
          width: 80,
          align: "left"
        },
        {
          title: "附件内容",
          key: "fileName",
          align: "left",
          render: (h, params) => {
            return h("div", [
              h(
                "a", {
                  style: {
                    width: "100%",
                    color: "#2761FF"
                  },
                  // attrs: {
                  //   href: params.row.filePath
                  // }
                  on: {
                    click: event => {
                      this.clickSuccess(params.row);
                    }
                  }
                },
                params.row.fileName
              )
            ]);
          }
        }
      ], // 附件列表表头
      attachmentList: [], // 附件列表


    }
  },
  created() {
    if (process.env.NODE_ENV == 'production') {
      this.url = process.env.Url + '/landcrm/rest/uploadFileInfo/uploadMutiFile'
    }
    // 获取记录
    this.getApproveDetailById(this.$route.query.auditItemId);
    // this.getByProcessKeyAndId();
    // 获取备注
    // this.getApproveComment(this.$route.query.auditItemId);
    this.doneOrNotDone = this.$route.query.doneOrNotDone
  },
  methods: {
    isPic(flag) {
      var reg = /\.(png|jpg|gif|jpeg|webp)$/;
      return reg.test(flag);
    },
    upLoadImg() {
      // this.$refs.file.click();
    },
    readFile(e) {
      if (!e.target.files[0]) return;
      let _this = this;
      let file = e.target.files[0];
      console.log(file)
      let formData = new FormData();
      formData.append("file", file);
      fetch(this.url, {
          method: "POST",
          body: formData
        })
        .then(res => res.json())
        .then(data => {
          this.upLoadData = data.fileInfo
          //   console.log('this.upLoadData是',this.upLoadData)
          this.uploadSuccess()
        })
      //   this.uploadSuccess()
      //   upLoad(formData).then(res=>{
      //       if(res.status == 200){
      //           console.log(res)
      //       }
      //   })
    },
    // 图片放大缩小
    imgScc: function(filePath) {
      this.isChoose = !this.isChoose
    },
    // 根据附件格式判断是图片还是文件
    fileNameForm(fileName) {
      //    console.log(fileName)
      //     console.log('x是',fileName)
      if (fileName.indexOf("png") > 0 || fileName.indexOf("jpg") > 0 || fileName.indexOf("jpeg") > 0 || fileName.indexOf(
          "gif") > 0) {
        return true;
      } else {
        return false;
      }

    },
    // 根据附件为文件跳转查看
    viewFile(url) {
      window.open(url)
    },

    // 根据审批项ID获取详情
    getApproveDetailById(approveItemId) {
      getApproveDetailById({
        approveItemId: approveItemId,
        currentAuditFlag: '0'
      }).then(res => {
        if (res.status == 200) {
          this.data = res.data;
          this.actTaskId = this.data.auditRecords[0].actTaskId
          // this.jimaoData = JSON.parse(res.data.approveParam);
          this.type = res.data.state
          let departx = JSON.parse(res.data.approveParam)
          // this.operateDate = res.data.auditRecordGroup[0].detail[0].operateDate
          if (this.data.approveParam && this.data.approveParam != '') {
            this.approveParam = JSON.parse(this.data.approveParam)
            if (this.approveParam.projectId && this.approveParam.serialNumber) {
              this.listFormFeeItem(this.approveParam.serialNumber, this.approveParam.projectId)
            }
            // 审批节点中第一个节点知道有一个审批过，就不可以撤销
            if (this.data.auditRecordGroup && this.data.auditRecordGroup.length > 0) {
              this.data.auditRecordGroup.sort(this.sortBy("groupCreateDate"));
              if (this.data.approveState == '0') {
                if (this.data.auditRecordGroup[0].groupState == '0') {
                  var i = 0;
                  this.data.auditRecordGroup[0].detail.forEach(item => {
                    if (item.approveFlag == "1") {
                      i = i + 1;
                    }
                  })
                  if (i == 0) {
                    this.flag = true;
                  } else {
                    this.flag = false;
                  }
                } else {
                  this.flag = false;
                }
              } else {
                this.flag = true;
              }
            }

          }
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    // 漕河泾详情
    getByProcessKeyAndSerialNum() {
      getByProcessKeyAndSerialNum({
        processKey: this.$route.query.processKey,
        serialNumber: this.$route.query.serialNumber
      }).then(res => {
        if (res.status == 200) {
          this.getData = res.data;
        } else {
          this.$Message.error(res.message)
          this.getData = {}
        }
      })
    },
    // 金茂详情
    getByProcessKeyAndId() {
      getByProcessKeyAndId({
        processKey: this.$route.query.processKey,
        serialNumber: this.$route.query.serialNumber
      }).then(res => {
        if (res.status == 200) {
          this.getData = res.data;
        } else {
          this.$Message.error(res.message)
          this.getData = {}
        }
      })
    },
    //审批的节点按照时间排序
    sortBy(props) {
      return function(a, b) {
        return new Date(a[props]) - new Date(b[props]);
      }
    },
    changeAddStatus() {
      if (this.comments && this.comments != '') {
        this.addStatus = true;
      } else {
        this.addStatus = false;
      }
    },
    uploadSuccess(file, fileList) { //附件上传成功
      this.$Message.success("添加附件成功");
      let uploadFiles = {
        fileId: "",
        fileName: "",
        filePath: ""
      }
      // console.log('uploadFiles',uploadFiles)
      // console.log('21321',typeof(this.upLoadData))
      this.uploadFiles = uploadFiles
      uploadFiles.fileId = this.upLoadData.fid
      uploadFiles.fileName = this.upLoadData.fName
      uploadFiles.filePath = this.upLoadData.resPath
      this.uploadFiles = JSON.stringify(uploadFiles);
      this.uploadImg();

    },
    // 上传图片备注
    uploadImg() {
      let self = this;
      var saveData = {
        auditItemId: this.$route.query.auditItemId,
        commentUserId: localStorage.getItem('memberId'), // 审批任务的代办人ID
        commentUserAccount: localStorage.getItem('userAccount'), //备注人账号
        commentUserName: localStorage.getItem('userName'), // 操作人
        attachment: self.uploadFiles,
        comments: '上传附件'
      }
      saveComment(saveData).then(res => {
        if (res.status == 200) {
          self.uploadFiles = '';
          self.tipData = []
          self.getApproveComment(this.$route.query.auditItemId)
        }
      })
    },
    uploadError(error, file, fileList) { //文件上传失败时的钩子
      this.$Modal.warning({
        title: '错误',
        content: '文件上传失败',
      });
    },
    listFormFeeItem(serialNumber, projectId) {
      listFormFeeItem({
        serialNumber: serialNumber,
        projectId: projectId
      }).then(res => {
        if (res.status == 200) {
          this.dataTable = res.data;
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    //添加备注
    saveComment() {

      var self = this;
      var saveData = {
        auditItemId: this.$route.query.auditItemId, // 审批项ID
        // commentUserId :localStorage.user_id,//备注人ID
        // commentUserAccount : localStorage.userAccount  ,//备注人账号
        comments: self.comments, //备注人内容
        // commentUserId :'2052392',//备注人ID
        commentUserId: localStorage.getItem('memberId'), // 审批任务的代办人ID
        // commentUserAccount : 'shjmadmin'  ,//备注人账号
        commentUserAccount: localStorage.getItem('userAccount'), //备注人账号
        // commentUserName : 'ceshi'  ,//备注人名称
        commentUserName: localStorage.getItem('userName') // 操作人
      }
      console.log('up', self.uploadFiles)
      if (self.uploadFiles && self.uploadFiles != '') {
        saveData.attachment = self.uploadFiles
      }
      if (self.comments && self.comments != "") {
        saveComment(saveData).then(res => {
          if (res.status == 200) {
            self.tipData = []
            self.getApproveComment(this.$route.query.auditItemId)
          }
        })
      } else {
        self.$Message.error("备注内容不能为空")
      }

    },
    // 根据审批项ID获取备注详情
    getApproveComment(id) {
      var self = this;
      var searchForm = {
        auditItemId: id, //审批项ID
      }
      getApproveComment(searchForm).then(res => {
        if (res.status == 200) {
          let data = res.data || [];
          data.forEach(item => {
            if (item.attachment) {
              let attachment = JSON.parse(item.attachment);
              if (Array.isArray(attachment)) {
                item.attachmentArr = attachment;
              } else {
                item.attachmentArr = [attachment];
              }
            }
          })
          self.tipData = data;
          self.comments = "";
          self.num = self.tipData.length;
        } else {
          self.$Message.error(res.message)
        }
      })
    },
    // 设置时间轴时间
    formDate(date) {
      if (date && date != "") {
        var str = "";
        var arr = date.split(" ");
        str += arr[0].match(/\d{2}-\d{2}$/) + " " + arr[1].match(/^\d{2}:\d{2}/);
        return str
      }
    },
    //审批人进行审批操作
    executeApprove(apvFlag) {
      var self = this;
      var data = {
        // approveItemId:'201912181576661530626',
        // actTaskId: '102825' ,//任务ID
        approveItemId: self.$route.query.auditItemId,
        actTaskId: self.$route.query.actTaskId, //任务ID
        // approveUserId :localStorage.user_id ,// 审批任务的代办人ID
        approveUserId: localStorage.getItem('memberId'), // 审批任务的代办人ID
        // approveUserId :'2052392',//备注人ID
        apvFlag: apvFlag, //审批结果(1:通过,2:驳回)
        // operator:localStorage.userName ,// 操作人
        // operator:localStorage.getItem('userName') // 操作人
        //approveContent:   //审批内容
      }
      executeApprove(data).then(res => {
        if (res.status == 200) {
          /* getApproveDetailById({
            approveItemId: approveItemId,
            currentAuditFlag: '-1'
          }).then(res => {
            if (res.status == 200) {
              this.data = res.data;
              this.actTaskId = this.data.auditRecords[0].actTaskId
              this.getData = JSON.parse(res.data.approveParam);
              this.type = res.data.state
              let departx = JSON.parse(res.data.approveParam)
              if (this.data.approveParam && this.data.approveParam != '') {
                this.approveParam = JSON.parse(this.data.approveParam)
                if (this.approveParam.projectId && this.approveParam.serialNumber) {
                  this.listFormFeeItem(this.approveParam.serialNumber, this.approveParam.projectId)
                }
                // 审批节点中第一个节点知道有一个审批过，就不可以撤销
                if (this.data.auditRecordGroup && this.data.auditRecordGroup.length > 0) {
                  this.data.auditRecordGroup.sort(this.sortBy("groupCreateDate"));
                  if (this.data.approveState == '0') {
                    if (this.data.auditRecordGroup[0].groupState == '0') {
                      var i = 0;
                      this.data.auditRecordGroup[0].detail.forEach(item => {
                        if (item.approveFlag == "1") {
                          i = i + 1;
                        }
                      })
                      if (i == 0) {
                        this.flag = true;
                      } else {
                        this.flag = false;
                      }
                    } else {
                      this.flag = false;
                    }
                  } else {
                    this.flag = true;
                  }
                }

              }
            } else {
              this.$Message.error(res.message)
            }
          }) */
          this.$Message.success('操作成功');
          this.$router.back();
        } else {
          self.$Message.error(res.message)
          console.log(res.message)
        }
      })
    },
    //撤销一个流程
    revokeProcess() {
      var self = this;
      var data = {
        approveItemId: self.data.auditItemId, // 审批项ID
        //    approveLaunchUserId :localStorage.user_id,  //申请发起人ID
        // approveLaunchUserId :'2052392',//备注人ID
        approveLaunchUserId: localStorage.getItem('memberId'), // 审批任务的代办人ID
      }
      revokeProcess(data).then(res => {
        if (res.status == 200) {
          self.$Message.success("操作成功");
          self.$router.back();
        } else {
          self.$Message.error(res.message)
        }
      })

    },
    clickSuccess(url) {
      let apiUrl = "";
      // window.open(
      //   process.env.Url +
      //   "/neikong/fileInfo/exportFile?fileId=" +
      //   url.fileId +
      //   "&fileName=" +
      //   url.fileName +
      //   "&fileUrl=" +
      //   url.filePath
      // );
      // console.log('111')
      try{
        this.$vux.loading.show({
          text:'正在加载中'
          })
        EbeiPlugins.downloadFile(url.filePath,url.fileId, url.fileName,()=>{
          this.$vux.loading.hide()
          EbeiPlugins.previewFile(url.fileId);
        },()=>{
          this.$vux.loading.hide()
          this.$Message.error("下载失败");
        });
        }catch(err){
          console.log(err)
        }
    }
  }

}

</script>
<style scoped>
.attachment {
  display: inline-block;
  position: relative;
}

.attachment img {
  transform: scale(1);
  /*图片原始大小1倍*/
  transition: all ease 0.5s;
  /*图片放大所用时间*/
}

.attachment img.active {
  transform: scale(3);
  /*图片需要放大3倍*/
  position: absolute;
  /*是相对于前面的容器定位的，此处要放大的图片，不能使用position：relative；以及float，否则会导致z-index无效*/
  z-index: 100;
}


.detail-body {
  padding: 5px 10px;

}

.title {
  border-bottom: 1px solid #e8eaec;
  font-size: 15px;
  line-height: 30px;
  font-weight: bold;
  padding: 5px 0px;
}

.line-list {
  background: #FFFFFF;
  border-radius: 4px;
  padding: 28px 0;
}

.line-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  color: #222222;
  font-size: 14px;
}

.inp {
  /* position:relative;
        left:10px; */
  float: left !important;
  width: 93%;
}

.inp /deep/ .ivu-input {
  border-radius: 0px 3px 0px 0px !important;
  border-left-style: none !important;
}

.line-date {
  color: #6A6A6A;
  font-size: 12px;
  padding: 0 0 5px;
  text-align: right;
}

.dot-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 12px;
}

.dot-large {
  height: 15px;
  width: 15px;
  background: #2760FF;
  border-radius: 15px;
  border: #FCE5E7 solid 2px;
}

.dot-large div {
  text-align: center;
  color: #FFFFFF;
  line-height: 8px;
  font-size: 12px;
}

.dot-red {
  height: 15px;
  width: 15px;
  background: #e12d2c;
  border-radius: 15px;
  border: #ECECEC solid 2px;
  margin: 0;
}

.dot-red div {
  text-align: center;
  color: #FFFFFF;
  line-height: 9px;
  font-size: 12px;
}

.dot-gray {
  height: 15px;
  width: 15px;
  background: #9e9e9e;
  border-radius: 15px;
  border: #ECECEC solid 2px;
  margin: 0;
}

.dot-gray div {
  text-align: center;
  color: #FFFFFF;
  line-height: 9px;
  font-size: 12px;
}

.dot {
  height: 15px;
  width: 15px;
  background: #faad13;
  border-radius: 15px;
  border: #ECECEC solid 2px;
  margin: 0;
}

.dot div {
  text-align: center;
  color: #FFFFFF;
  line-height: 4px;
  font-size: 12px;
}

.line-hidden {
  width: 1px;
  background-color: #FFFFFF;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.line {
  width: 1px;
  background-color: #DDDDDD;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.line_desc {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  padding: 0 5px
}

.line-state2 {
  color: rgba(0, 0, 0, 0.8);
  font-size: 14px;
  padding: 0 5px;
  display: inline-block;
}

.info-box {
  padding: 0 0 10px 0;
  width: calc(100% - 30px);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1) !important;
}

.line-list li:last-child .info-box {
  border-bottom: none;
}

/* 操作按钮 */
.blue_link {
  color: #2D8CF0;
  display: inline-block;
  margin-right: 3px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;

  .left_icon {
    float: left;
    font-size: 20px;
    margin: -2px 5px 0 0;
  }
}

.blue_link:hover {
  color: #1860ad;

}

.drawer-tip /deep/ .ivu-input-suffix {
  right: 10px;
  top: 5px;
}

.addbeizhu {
  height: 32px;
  flex: 1;
  /* background-color: red; */
}

.drawer-footer {
  /* height: 50px; */
  width: 100%;
  /* float: left; */
  padding: 10px;
  text-align: center;
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 999;
  /* align-content:flex-start; */
  /* display: flex; */
  /* margin-top:50px; */
  /* align-items: flex-end; */

}

.drawer-footer Button {
  color: #fff;
  font-size: 15px;
  float: left;
  width: 100%;
  height: 40px;
  border-radius: 5px;
  background: rgba(0, 74, 179, 1);
}

.inputfile {
  position: absolute;
  /*left:-99999px;*/
  opacity: 0;
  width: 25px;
  height: 32px;
  z-index: 2;
}

.detail-item {
  margin-top: 5px;
}

.detail-item .detail-label {
  flex-shrink: 0;
  width: 90px;
  /* flex-shrink:none; */
}

.detail-item .detail-val {
  flex: 1;
  flex-wrap: wrap;
}

.detail-item .detail-val .img {
  width: 50px;
  height: 50px;
  margin-right: 5px;
}

.detail-item .detail-val.attachment {
  display: flex;
  align-items: center;
}

.detail-item .detail-val.attachment .attachment-item {
  margin-right: 5px;
}

.tab {
  display: flex;
  margin-top: 10px;
}

.tab span {
  flex: 1;
  text-align: center;
  height: 30px;
  border: solid 1px #dcdcdc;
  margin-left: -1px;
  line-height: 30px;


}

.tab span.on {
  background: rgba(129, 211, 248, 1);
  color: #fff;
}

.section {
  margin-bottom: 10px;
}

.section .section-title {
  margin-bottom: 5px;
}

</style>
