<template>
  <el-dialog class="rent" :visible.sync="visible" :title="dataForm.flag === '1' ? '查看详情' : '审核'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm"
             @keyup.enter.native="dataFormSubmitHandle()" label-width="140px" disabled>
        <div v-if="dataForm.flag === '2'">
            <div style="margin-left: 50px;height: 30px;font-weight: bold;">房屋信息</div>
            <el-form-item label="所属社区" prop="gridName">
                <el-input v-model="dataForm.gridName" placeholder="网格"></el-input>
            </el-form-item>
            <el-form-item label="所属网格" prop="gridName">
                <el-input v-model="dataForm.gridName" placeholder="所属网格"></el-input>
            </el-form-item>
            <br/>
            <el-form-item label="房屋" prop="homeName">
                <el-input v-model="dataForm.homeName" placeholder="房屋"></el-input>
            </el-form-item>
            <el-form-item label="房主姓名" prop="ownerName">
                <el-input v-model="dataForm.ownerName" placeholder="房主姓名"></el-input>
            </el-form-item>
            <br/>

            <div style="margin-left: 50px;height: 30px;font-weight: bold;">居住成员信息</div>
            <el-table v-loading="dataListLoading" :data="dataForm.tenantList" border style="width: 100%">
                <el-table-column label="序号" header-align="center" align="center" width="50px">
                    <template slot-scope="scope">
                        {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
                <el-table-column prop="yfzgx" label="与户主关系" header-align="center" align="center"></el-table-column>
                <el-table-column prop="mobile" label="手机" header-align="center" align="center"></el-table-column>
                <el-table-column prop="idCard" label="身份证号" header-align="center" align="center"></el-table-column>
                <el-table-column prop="imgList" label="照片" header-align="center" align="center">
                    <template slot-scope="scope">
                        <div v-for="(item,index) in scope.row.imgList" :key="index">
                            <img :src="item.fileUrl" @click="imgShow(item.fileUrl)" width="40" height="40"  />
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <br/>
        </div>

        <div style="margin-left: 50px;height: 30px;font-weight: bold;">合同信息</div>
        <div style="margin-left: 50px;height: 30px;">出租人信息</div>
        <el-form-item label="出租人姓名" prop="lessorName">
            <el-input v-model="dataForm.lessorName" placeholder="出租人姓名"></el-input>
        </el-form-item>
        <el-form-item label="出租人身份证" prop="lessorIdCard">
            <el-input v-model="dataForm.lessorIdCard" placeholder="出租人身份证"></el-input>
        </el-form-item>
        <br/>
        <el-form-item label="出租人手机" prop="lessorMobile">
            <el-input v-model="dataForm.lessorMobile" placeholder="出租人手机"></el-input>
        </el-form-item>
        <br/>

        <div style="margin-left: 50px;height: 30px;">承租人信息</div>
        <el-form-item label="承租人姓名" prop="lesseeName">
            <el-input v-model="dataForm.lesseeName" placeholder="承租人姓名"></el-input>
        </el-form-item>
        <el-form-item label="承租人身份证" prop="lesseeIdCard">
            <el-input v-model="dataForm.lesseeIdCard" placeholder="承租人身份证"></el-input>
        </el-form-item>
        <br/>
        <el-form-item label="承租人手机" prop="lesseeMobile">
            <el-input v-model="dataForm.lesseeMobile" placeholder="承租人手机"></el-input>
        </el-form-item>
        <br/>

        <div style="margin-left: 50px;height: 30px;font-weight: bold;">合同内容</div>
        <el-form-item label="签署日期" prop="signDate">
            <el-input v-model="dataForm.signDate" placeholder="签署日期"></el-input>
        </el-form-item>
        <br/>
        <el-form-item label="合同开始日期" prop="startDate">
            <el-input v-model="dataForm.startDate" placeholder="合同开始日期"></el-input>
        </el-form-item>
        <el-form-item label="合同结束日期" prop="endDate">
            <el-input v-model="dataForm.endDate" placeholder="合同结束日期"></el-input>
        </el-form-item>
        <br/>

        <el-form-item label="合同附件" prop="fileList">
            <template slot-scope="scope">
                <label v-for="(item,index) in dataForm.fileList" :key="index">
                    <img :src="item.fileUrl" @click="imgShow(item.fileUrl)" width="100" height="100" />
                </label>
            </template>
        </el-form-item>

      </el-form>
    <template slot="footer">
        <div class="resi-btns">
        <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
        <el-button v-if="dataForm.state === '0'" type="danger" @click="checkHandle('2')">{{ $t('checkBTGBtn') }}</el-button>
        <el-button v-if="dataForm.state === '0'" type="primary" @click="checkHandle('1')">{{ $t('checkTGBtn') }}</el-button>
        </div>
    </template>
      <el-dialog :visible.sync="dialogVisible" :modal="false">
          <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        id: '',
        flag: '',
        gridId: '',
        gridName: '',
        buildId: '',
        buildName: '',
        unitId: '',
        unitName: '',
        homeId: '',
        homeName: '',
        ownerName: '',
        state: '',
        lessorName: '',
        lessorIdCard: '',
        lessorMobile: '',
        lesseeName: '',
        lesseeIdCard: '',
        lesseeMobile: '',
        signDate: '',
        startDate: '',
        endDate: ''
      },
        dataListLoading: false,
        dialogVisible: false,
        dialogImageUrl: ''
    }
  },
  computed: {
    dataRule () {
      return {
        gridId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        gridName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        buildId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        buildName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        unitId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        unitName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        homeId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        homeName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        ownerName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        state: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        lessorName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        lessorIdCard: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        lessorMobile: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        lesseeName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        lesseeIdCard: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        lesseeMobile: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        signDate: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        endDate: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
      // 查看大图
      imgShow(url){
        this.dialogImageUrl = url
          this.dialogVisible = true
      },
    // 获取信息
    getInfo () {
      this.$http.get(`/pli/power/rentContractInfo/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {})
    },
      // 审核提交方法
      checkHandle: function (type) {
        const params = {
          id: this.dataForm.id,
          state: type,
          homeId: this.dataForm.homeId
        }
        this.$http.post('/pli/power/rentContractInfo/review', params).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http[!this.dataForm.id ? 'post' : 'put']('/pli/power/rentContractInfo/', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style lang="scss" scoped>
    .resi-btns {
        margin-top: 20px;
        text-align: center;
    }
</style>
<style lang="scss">
.rent {
  .el-form--inline .el-form-item__content {
    width: 280px;
  }
}
</style>
