<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div>{{ viewTitle }}</div>
      <div>
        <el-button type="primary" size="small" :disabled="submitdisabled" @click="submit()">提交下一环节</el-button>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
    </div>
    <div class="listconadd">
      <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><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list1" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">房屋照片</div>
                <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list2" :limit="50" bucket="map" :upload-data="{ type: '0002' }"/></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">门口照片</div>
                <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list3" :limit="50" bucket="map" :upload-data="{ type: '0003' }"/></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">客厅卧室照片</div>
                <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list4" :limit="50" bucket="map" :upload-data="{ type: '0004' }"/></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">合影照等</div>
                <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list5" :limit="50" bucket="map" :upload-data="{ type: '0005' }"/></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><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list6" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">房产</div>
                <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list7" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="span-sty colSty">车辆</div>
                <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list8" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="公司合同类" name="3">
            <el-table :key="tableKey" :data="formobj.loanXdCons" :index="index" border style="width: 100%">
              <el-table-column width="80" label="序号" type="index" :index="index + 1" align="center"/>
              <el-table-column label="贷款人(合同号)" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.loanCotractNoShow }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <div style="display: flex;flex-direction: row;justify-content: center;align-items: center">
                    <upload ref="upload" v-show="scope.row.loanCotractNo !== ''" v-model="file_list1" @change="changeFile($event, scope.row)" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/>
                    <el-button style="margin-left: 10px" v-if="scope.row.loanCotractImages.length > 0" type="primary" size="mini" @click="lookFile(scope.row.loanCotractImages)">查看</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="证明文件" name="4">
            <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><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list9" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">户口本</div>
                      <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list10" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">婚姻证明</div>
                      <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list11" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">驾驶本</div>
                      <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list12" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">银行流水</div>
                      <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list13" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></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><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list14" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">户口本</div>
                      <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list15" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></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><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list16" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="span-sty colSty">户口本</div>
                      <el-form-item><upload-img ref="uploadImg" class="addinputInfo" v-model="image_list17" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/></el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-collapse-item>
          <el-collapse-item title="对存在的问题反馈:" name="5">
            <el-row>
              <el-col :span="24">
                <el-form-item>
                  <el-input v-model="formobj.remarks" clearable placeholder=""/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </div>
    <!-- 查看公司合同类 附件 -->
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <el-image style="width: 150px;height: 150px" v-for="(item, index) in dialog_list" :key="index" :src="item" :preview-src-list="dialog_list"/>
    </el-dialog>
  </div>
</template>

<script>
import req from '@/api/homevisitdatareview/homevisitdatareview'
import upload from '@/components/uploadFile/upload'
import uploadImg from '@/components/uploadFile/uploadImg'

export default {
  name: 'HomeVisitDataReviewAdd',
  components: {
    upload,
    uploadImg
  },
  data() {
    return {
      viewTitle: '',
      tableKey: 0,
      index: 0,
      submitdisabled: false,
      dialogVisible: false,
      dialog_list: [],
      activeNames: '1',
      activeName: '1',
      file_list1: [],
      image_list1: [],
      image_list2: [],
      image_list3: [],
      image_list4: [],
      image_list5: [],
      image_list6: [],
      image_list7: [],
      image_list8: [],
      image_list9: [],
      image_list10: [],
      image_list11: [],
      image_list12: [],
      image_list13: [],
      image_list14: [],
      image_list15: [],
      image_list16: [],
      image_list17: [],
      formobj: {
        carProperty: [],
        doorway: [],
        groupPhoto: [],
        guarantorAccount: [],
        guarantorIdCard: [],
        homeVisitSid: '',
        house: [],
        houseProperty: [],
        indoor: [],
        lenderAccount: [],
        lenderBankStatement: [],
        lenderDriverBook: [],
        lenderIdCard: [],
        lenderMarriageCertificate: [],
        loanXdCons: [],
        loanZfCons: [],
        location: [],
        remarks: '',
        saleOrderSid: '',
        sid: '',
        spouseAccount: [],
        spouseIdCard: [],
        yhkImages: []
      }
    }
  },
  methods: {
    showEdit(sid) {
      this.viewTitle = '家访资料审核'
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      req.fetchDetailsBySid(sid).then((res) => {
        if (res.success) {
          this.formobj = res.data
          // 定位信息
          if (this.formobj.location.length > 0) {
            this.formobj.location.forEach((e) => {
              this.image_list1.push({
                name: '',
                url: e
              })
            })
          }
          // 房屋照片
          if (this.formobj.house.length > 0) {
            this.formobj.house.forEach((e) => {
              this.image_list2.push({
                name: '',
                url: e
              })
            })
          }
          // 门口照片
          if (this.formobj.doorway.length > 0) {
            this.formobj.doorway.forEach((e) => {
              this.image_list3.push({
                name: '',
                url: e
              })
            })
          }
          // 客厅卧室照片
          if (this.formobj.indoor.length > 0) {
            this.formobj.indoor.forEach((e) => {
              this.image_list4.push({
                name: '',
                url: e
              })
            })
          }
          // 合影照等
          if (this.formobj.groupPhoto.length > 0) {
            this.formobj.groupPhoto.forEach((e) => {
              this.image_list5.push({
                name: '',
                url: e
              })
            })
          }
          // 银行卡
          if (this.formobj.yhkImages.length > 0) {
            this.formobj.yhkImages.forEach((e) => {
              this.image_list6.push({
                name: '',
                url: e
              })
            })
          }
          // 房产
          if (this.formobj.houseProperty.length > 0) {
            this.formobj.houseProperty.forEach((e) => {
              this.image_list7.push({
                name: '',
                url: e
              })
            })
          }
          // 车辆
          if (this.formobj.carProperty.length > 0) {
            this.formobj.carProperty.forEach((e) => {
              this.image_list8.push({
                name: '',
                url: e
              })
            })
          }
          // 证明文件 -- 贷款人 -- 身份证
          if (this.formobj.lenderIdCard.length > 0) {
            this.formobj.lenderIdCard.forEach((e) => {
              this.image_list9.push({
                name: '',
                url: e
              })
            })
          }
          // 证明文件 -- 贷款人 -- 户口本
          if (this.formobj.lenderAccount.length > 0) {
            this.formobj.lenderAccount.forEach((e) => {
              this.image_list10.push({
                name: '',
                url: e
              })
            })
          }
          // 证明文件 -- 贷款人 -- 婚姻证明
          if (this.formobj.lenderMarriageCertificate.length > 0) {
            this.formobj.lenderMarriageCertificate.forEach((e) => {
              this.image_list11.push({
                name: '',
                url: e
              })
            })
          }
          // 证明文件 -- 贷款人 -- 驾驶本
          if (this.formobj.lenderDriverBook.length > 0) {
            this.formobj.lenderDriverBook.forEach((e) => {
              this.image_list12.push({
                name: '',
                url: e
              })
            })
          }
          // 证明文件 -- 贷款人 -- 银行流水
          if (this.formobj.lenderBankStatement.length > 0) {
            this.formobj.lenderBankStatement.forEach((e) => {
              this.image_list13.push({
                name: '',
                url: e
              })
            })
          }
          // 证明文件 -- 配偶 -- 身份证
          if (this.formobj.spouseIdCard.length > 0) {
            this.formobj.spouseIdCard.forEach((e) => {
              this.image_list14.push({
                name: '',
                url: e
              })
            })
          }
          // 证明文件 -- 配偶 -- 户口本
          if (this.formobj.spouseAccount.length > 0) {
            this.formobj.spouseAccount.forEach((e) => {
              this.image_list15.push({
                name: '',
                url: e
              })
            })
          }
          // 证明文件 -- 担保人 -- 身份证
          if (this.formobj.guarantorIdCard.length > 0) {
            this.formobj.guarantorIdCard.forEach((e) => {
              this.image_list16.push({
                name: '',
                url: e
              })
            })
          }
          // 证明文件 -- 担保人 -- 户口本
          if (this.formobj.guarantorAccount.length > 0) {
            this.formobj.guarantorAccount.forEach((e) => {
              this.image_list17.push({
                name: '',
                url: e
              })
            })
          }
        }
      })
    },
    // 公司合同类 -- 上传附件
    changeFile(val, row) {
      if (val.length > 0) {
        const aa = []
        val.forEach((e) => {
          aa.push(e.url)
        })
        row.loanCotractImages = aa
      } else {
        row.loanCotractImages = []
      }
    },
    // 公司合同类 -- 查看附件
    lookFile(row) {
      this.dialogVisible = true
      this.dialog_list = row
    },
    submit() {
      this.$refs['form_obj'].validate((valid) => {
        if (valid) {
          this.getUrl()
          this.submitdisabled = true
          req.save(this.formobj).then((resp) => {
            if (resp.success) {
              this.$message({ showClose: true, type: 'success', message: '操作成功' })
              this.handleReturn('true')
            } else {
              this.submitdisabled = false
            }
          }).catch(() => {
            this.submitdisabled = false
          })
        }
      })
    },
    getUrl() {
      if (this.image_list1.length > 0) {
        const aa = []
        for (var a = 0; a < this.image_list1.length; a++) {
          aa.push(this.image_list1[a].url)
        }
        this.formobj.location = aa
      } else {
        this.formobj.location = []
      }
      if (this.image_list2.length > 0) {
        const bb = []
        for (var b = 0; b < this.image_list2.length; b++) {
          bb.push(this.image_list2[b].url)
        }
        this.formobj.house = bb
      } else {
        this.formobj.house = []
      }
      if (this.image_list3.length > 0) {
        const cc = []
        for (var c = 0; c < this.image_list3.length; c++) {
          cc.push(this.image_list3[c].url)
        }
        this.formobj.doorway = cc
      } else {
        this.formobj.doorway = []
      }
      if (this.image_list4.length > 0) {
        const dd = []
        for (var d = 0; d < this.image_list4.length; d++) {
          dd.push(this.image_list4[d].url)
        }
        this.formobj.indoor = dd
      } else {
        this.formobj.indoor = []
      }
      if (this.image_list5.length > 0) {
        const ee = []
        for (var e = 0; e < this.image_list5.length; e++) {
          ee.push(this.image_list5[e].url)
        }
        this.formobj.groupPhoto = ee
      } else {
        this.formobj.groupPhoto = []
      }
      if (this.image_list6.length > 0) {
        const ff = []
        for (var f = 0; f < this.image_list6.length; f++) {
          ff.push(this.image_list6[f].url)
        }
        this.formobj.yhkImages = ff
      } else {
        this.formobj.yhkImages = []
      }
      if (this.image_list7.length > 0) {
        const gg = []
        for (var g = 0; g < this.image_list7.length; g++) {
          gg.push(this.image_list7[g].url)
        }
        this.formobj.houseProperty = gg
      } else {
        this.formobj.houseProperty = []
      }
      if (this.image_list8.length > 0) {
        const hh = []
        for (var h = 0; h < this.image_list8.length; h++) {
          hh.push(this.image_list8[h].url)
        }
        this.formobj.carProperty = hh
      } else {
        this.formobj.carProperty = []
      }
      if (this.image_list9.length > 0) {
        const ii = []
        for (var i = 0; i < this.image_list9.length; i++) {
          ii.push(this.image_list9[i].url)
        }
        this.formobj.lenderIdCard = ii
      } else {
        this.formobj.lenderIdCard = []
      }
      if (this.image_list10.length > 0) {
        const jj = []
        for (var j = 0; j < this.image_list10.length; j++) {
          jj.push(this.image_list10[j].url)
        }
        this.formobj.lenderAccount = jj
      } else {
        this.formobj.lenderAccount = []
      }
      if (this.image_list11.length > 0) {
        const kk = []
        for (var k = 0; k < this.image_list11.length; k++) {
          kk.push(this.image_list11[k].url)
        }
        this.formobj.lenderMarriageCertificate = kk
      } else {
        this.formobj.lenderMarriageCertificate = []
      }
      if (this.image_list12.length > 0) {
        const ll = []
        for (var l = 0; l < this.image_list12.length; l++) {
          ll.push(this.image_list12[l].url)
        }
        this.formobj.lenderDriverBook = ll
      } else {
        this.formobj.lenderDriverBook = []
      }
      if (this.image_list13.length > 0) {
        const mm = []
        for (var m = 0; m < this.image_list13.length; m++) {
          mm.push(this.image_list13[m].url)
        }
        this.formobj.lenderBankStatement = mm
      } else {
        this.formobj.lenderBankStatement = []
      }
      if (this.image_list14.length > 0) {
        const nn = []
        for (var n = 0; n < this.image_list14.length; n++) {
          nn.push(this.image_list14[n].url)
        }
        this.formobj.spouseIdCard = nn
      } else {
        this.formobj.spouseIdCard = []
      }
      if (this.image_list15.length > 0) {
        const pp = []
        for (var p = 0; p < this.image_list15.length; p++) {
          pp.push(this.image_list15[p].url)
        }
        this.formobj.spouseAccount = pp
      } else {
        this.formobj.spouseAccount = []
      }
      if (this.image_list16.length > 0) {
        const qq = []
        for (var q = 0; q < this.image_list16.length; q++) {
          qq.push(this.image_list16[q].url)
        }
        this.formobj.guarantorIdCard = qq
      } else {
        this.formobj.guarantorIdCard = []
      }
      if (this.image_list17.length > 0) {
        const rr = []
        for (var r = 0; r < this.image_list17.length; r++) {
          rr.push(this.image_list17[r].url)
        }
        this.formobj.guarantorAccount = rr
      } else {
        this.formobj.guarantorAccount = []
      }
    },
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.formobj = {
        carProperty: [],
        doorway: [],
        groupPhoto: [],
        guarantorAccount: [],
        guarantorIdCard: [],
        homeVisitSid: '',
        house: [],
        houseProperty: [],
        indoor: [],
        lenderAccount: [],
        lenderBankStatement: [],
        lenderDriverBook: [],
        lenderIdCard: [],
        lenderMarriageCertificate: [],
        loanXdCons: [],
        loanZfCons: [],
        location: [],
        remarks: '',
        saleOrderSid: '',
        sid: '',
        spouseAccount: [],
        spouseIdCard: [],
        yhkImages: []
      }
      this.image_list1 = []
      this.image_list2 = []
      this.image_list3 = []
      this.image_list4 = []
      this.image_list5 = []
      this.image_list6 = []
      this.image_list7 = []
      this.image_list8 = []
      this.image_list9 = []
      this.image_list10 = []
      this.image_list11 = []
      this.image_list12 = []
      this.image_list13 = []
      this.image_list14 = []
      this.image_list15 = []
      this.image_list16 = []
      this.image_list17 = []
      this.submitdisabled = false
      this.$refs['form_obj'].resetFields()
      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>
