<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <!--标题-->
      <div>{{ viewTitle }}</div>
      <!--start 添加修改按钮-->
      <div>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
    </div>
    <div class="">
      <el-form ref="form_obj" :model="formobj" class="formaddcopy02">
        <el-collapse v-model="activeNames" accordion>
          <el-collapse-item title="家访见证类" name="1">
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">定位信息</div>
                <el-form-item><span class="addinputInfo">{{ formobj.locationStr }}</span></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">小区/村口照片</div>
                <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.house" :key="index" :src="item" :preview-src-list="formobj.house"/></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">住所照片</div>
                <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.doorway" :key="index" :src="item" :preview-src-list="formobj.doorway"/></el-form-item>
              </el-col>
            </el-row>
<!--            <el-row>-->
<!--              <el-col :span="24">-->
<!--                <div class="span-sty colSty">客厅卧室照片</div>-->
<!--                <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.indoor" :key="index" :src="item" :preview-src-list="formobj.indoor"/></el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">签字合影照</div>
                <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.groupPhoto" :key="index" :src="item" :preview-src-list="formobj.groupPhoto"/></el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="资产类" name="2">
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">银行卡</div>
                <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.yhkImages" :key="index" :src="item" :preview-src-list="formobj.yhkImages"/></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">房产</div>
                <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.houseProperty" :key="index" :src="item" :preview-src-list="formobj.houseProperty"/></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">车辆</div>
                <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.carProperty" :key="index" :src="item" :preview-src-list="formobj.carProperty"/></el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="证明文件" name="3">
            <div class="collapse">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item title="贷款人" name="1">
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">身份证</div>
                      <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.lenderIdCard" :key="index" :src="item" :preview-src-list="formobj.lenderIdCard"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">户口本</div>
                      <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.lenderAccount" :key="index" :src="item" :preview-src-list="formobj.lenderAccount"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">婚姻证明</div>
                      <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.lenderMarriageCertificate" :key="index" :src="item" :preview-src-list="formobj.lenderMarriageCertificate"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">驾驶本</div>
                      <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.lenderDriverBook" :key="index" :src="item" :preview-src-list="formobj.lenderDriverBook"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">银行流水</div>
                      <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.lenderBankStatement" :key="index" :src="item" :preview-src-list="formobj.lenderBankStatement"/></el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="配偶" name="2">
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">身份证</div>
                      <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.spouseIdCard" :key="index" :src="item" :preview-src-list="formobj.spouseIdCard"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">户口本</div>
                      <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.spouseAccount" :key="index" :src="item" :preview-src-list="formobj.spouseAccount"/></el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="担保人" name="3">
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">身份证</div>
                      <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.guarantorIdCard" :key="index" :src="item" :preview-src-list="formobj.guarantorIdCard"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">户口本</div>
                      <el-form-item><el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.guarantorAccount" :key="index" :src="item" :preview-src-list="formobj.guarantorAccount"/></el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </div>
  </div>
</template>

<script>
import req from '@/api/overduevehicle/overduevehicle'

export default {
  name: 'MaterialInfo',
  data() {
    return {
      viewTitle: '',
      activeNames: '1',
      activeName: '1',
      formobj: {
        carProperty: [],
        doorway: [],
        groupPhoto: [],
        guarantorAccount: [],
        guarantorIdCard: [],
        homeVisitSid: '',
        house: [],
        houseProperty: [],
        indoor: [],
        lenderAccount: [],
        lenderBankStatement: [],
        lenderDriverBook: [],
        lenderIdCard: [],
        lenderMarriageCertificate: [],
        loanXdCons: [],
        loanZfCons: [],
        locationStr: '',
        remarks: '',
        saleOrderSid: '',
        sid: '',
        spouseAccount: [],
        spouseIdCard: [],
        yhkImages: []
      }
    }
  },
  methods: {
    showInfo(row) {
      this.viewTitle = '家访资料详情'
      req.details2({ sid: row.kczlSid }).then((resp) => {
        if (resp.success) {
          this.formobj = resp.data
        }
      })
    },
    handleReturn() {
      this.formobj = {
        carProperty: [],
        doorway: [],
        groupPhoto: [],
        guarantorAccount: [],
        guarantorIdCard: [],
        homeVisitSid: '',
        house: [],
        houseProperty: [],
        indoor: [],
        lenderAccount: [],
        lenderBankStatement: [],
        lenderDriverBook: [],
        lenderIdCard: [],
        lenderMarriageCertificate: [],
        loanXdCons: [],
        loanZfCons: [],
        locationStr: '',
        remarks: '',
        saleOrderSid: '',
        sid: '',
        spouseAccount: [],
        spouseIdCard: [],
        yhkImages: []
      }
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.span-sty {
  width: 100px !important;
}

.addinputInfo {
  margin-left: 90px !important;
}

.colSty {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

/deep/ .el-collapse-item__header {
  height: 40px;
  padding: 10px;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  color: #ffffff;
  background-color: #0294d7;
}

/deep/ .el-collapse-item__content {
  padding-bottom: 0;
}

.collapse {
  padding: 0 10px;
}

/deep/ .collapse .el-collapse-item__header {
  height: 40px;
  padding: 10px;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  color: #ffffff;
  background-color: #87CEFA;
}
</style>
