<template>
  <div class="audit-business-address">
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="经营地址相关">
          <template slot-scope="scope">
            <div class="address-box">
              <div>经营地址：</div>
              {{ detailsInfo.businessAddress }}
            </div>
            <div class="address-box">
              <div>地点定位图：</div>
              <cy-upload
                ref="fileStorage"
                :upload-params="{}"
                disabled
                :file-data="detailsInfo.mapFiles"
              />
            </div>
            <div class="address-box">
              <div>租房合同：</div>
              <cy-upload
                ref="fileStorage"
                :upload-params="{}"
                disabled
                :file-data="detailsInfo.rentalFiles"
              />
            </div>
            <div class="address-box">
              <div>房租缴纳流水：</div>
              <cy-upload
                ref="fileStorage"
                :upload-params="{}"
                disabled
                :file-data="detailsInfo.waterFiles"
              />
            </div>
            <div class="address-box">
              <div>办公环境图：</div>
              <cy-upload
                ref="fileStorage"
                :upload-params="{}"
                disabled
                :file-data="detailsInfo.officeFiles"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="是否达标" label-class-name="rule-required" width="200">
          <template slot-scope="scope">
            <div class="address-box">
              <!-- <el-select v-model="addressCompliance" placeholder="请选择是否达标" :disabled="disabled">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select> -->
            </div>
            <div class="address-box">
              <el-select v-model="mapFilesCompliance" placeholder="请选择是否达标" :disabled="disabled">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </div>
            <div class="address-box">
              <el-select v-model="rentalFilesCompliance" placeholder="请选择是否达标" :disabled="disabled">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </div>
            <div class="address-box">
              <el-select v-model="waterFilesCompliance" placeholder="请选择是否达标" :disabled="disabled">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </div>
            <div class="address-box">
              <el-select v-model="officeFilesCompliance" placeholder="请选择是否达标" :disabled="disabled">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      addressCompliance: '',
      mapFilesCompliance: '',
      rentalFilesCompliance: '',
      waterFilesCompliance: '',
      officeFilesCompliance: '',
      tableData: [
        { date: '', addressCompliance: '' }
      ]
    }
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (newV === undefined) return
        const { mapFilesCompliance, rentalFilesCompliance, waterFilesCompliance, officeFilesCompliance } = JSON.parse(JSON.stringify(this.detailsInfo))
        // this.addressCompliance = JSON.parse(JSON.stringify(this.detailsInfo.addressCompliance))
        this.mapFilesCompliance = mapFilesCompliance
        this.rentalFilesCompliance = rentalFilesCompliance
        this.waterFilesCompliance = waterFilesCompliance
        this.officeFilesCompliance = officeFilesCompliance
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getParams() {
      return {
        mapFilesCompliance: this.mapFilesCompliance,
        rentalFilesCompliance: this.rentalFilesCompliance,
        waterFilesCompliance: this.waterFilesCompliance,
        officeFilesCompliance: this.officeFilesCompliance
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.audit-business-address {
  .address-box {
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f0f0f0;
    padding-right: 10px;
    padding-left: 10px;
    & > div {
      &:first-child {
        min-width: 100px;
        font-size: 14px;
      }
    }
  }
}
</style>

<style lang="scss">
.audit-business-address {
  .el-table .cell {
    padding-left: 0px;
    padding-right: 0px;
  }
}
</style>
