<template>
  <div class="resi-container">
    <el-card ref="searchCard" class="search-card">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="fmData"
        class="demo-form-inline"
      >
        <!-- <el-form-item
          v-if="communityList.length > 0"
          label="所在社区"
          prop="orgId"
        >
          <el-select
            v-model.trim="fmData.orgId"
            placeholder="所在社区"
            size="small"
            clearable
            class="resi-cell-input"
          >
            <el-option
              v-for="item in communityList"
              :key="item.orgId"
              :label="item.orgName"
              :value="item.orgId"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="居住地址" prop="address">
          <el-input
            v-model="fmData.address"
            class="resi-cell-input"
            size="small"
            clearable
            placeholder="请输入"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="户籍地址" prop="domicilePlace">
          <el-input
            v-model="fmData.domicilePlace"
            class="resi-cell-input"
            size="small"
            clearable
            placeholder="请输入"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="填写时间" prop="startTime">
          <el-date-picker
            v-model="timeRange"
            type="daterange"
            clearable
            size="small"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            class="diy-button--search"
            size="small"
            @click="handleSearch"
            >查询</el-button
          >
          <el-button
            class="diy-button--reset"
            size="small"
            @click="resetForm('searchForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="resi-card-table">
      <div class="resi-row-btn">
        <el-button @click="handleChu" class="diy-button--reset" size="small"
          >导出</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="resi-table"
        :height="tableHeight"
        :span-method="arraySpanMethod"
      >
        <el-table-column label="序号" prop="desc" align="center" width="50" />
        <el-table-column
          prop="houseHolderName"
          width="100"
          label="户主姓名"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="address"
          align="center"
          min-width="140"
          label="居住地址"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.homeId == 'other'" class="badge">房屋缺失</span>
            <span>{{scope.row.address}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="houseType"
          align="center"
          width="100"
          label="房屋状态"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.houseType == 1">出租</span>
            <span v-if="scope.row.houseType == 2">闲置</span>
            <span v-if="scope.row.houseType == 3">未售出</span>
            <span v-if="scope.row.houseType == 0">自住</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="totalResi"
          width="80"
          align="center"
          label="居住人数"
        />
        <el-table-column
          prop="memberName"
          width="100"
          label="成员姓名"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="memberIdNum"
          width="180"
          align="center"
          label="成员身份证"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="memberMobile"
          width="140"
          align="center"
          label="成员手机号"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="relationship"
          min-width="120"
          align="center"
          label="与户主关系"
          :show-overflow-tooltip="true"
        >
        <template slot-scope="scope">
          <span>{{getRelationshipName(scope.row.relationship)}}</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="heSuanCount"
          width="120"
          align="center"
          label="核酸检测次数"
        />

        <el-table-column
          prop="ymjz"
          width="140"
          align="center"
          label="疫苗接种情况"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.ymjz == 1">全程接种</span>
            <span v-if="scope.row.ymjz == 2">未全程接种</span>
            <span v-if="scope.row.ymjz == 0">未接种</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="domicilePlace"
          min-width="140"
          align="center"
          label="户籍地址"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="workPlace"
          min-width="120"
          align="center"
          label="单位名称"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="remark"
          align="center"
          label="备注"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="faceImg"
          min-width="120"
          align="center"
          label="人脸"
        >
        <template slot-scope="scope">
          <el-image 
            style="max-height: 50px; max-width: 50px;"
            :src="scope.row.faceImg" 
            :preview-src-list="[scope.row.faceImg]">
            <div slot="error" class="image-slot">
              <!-- <i class="el-icon-picture-outline"></i> -->
            </div>
          </el-image>
        </template>
        </el-table-column>
        <el-table-column
          prop="checkState"
          min-width="120"
          align="center"
          label="状态"
          :show-overflow-tooltip="true"
        >
        <template slot-scope="scope">
          <span v-if="scope.row.checkState === '0'">未审核</span>
          <span v-else-if="scope.row.checkState === '1'">未通过</span>
          <span v-else-if="scope.row.checkState === '2'">已通过</span>
          <span v-else></span>
        </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="div-table-button--detail"
              size="small"
              @click="handleWatch('look', scope.row)"
              >查看</el-button
            >
            <el-button
              type="text"
              class="div-table-button--detail"
              size="small"
              v-if="scope.row.checkState === '0'"
              @click="handleWatch('check', scope.row)"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="parseInt(pageSize)"
          layout="sizes, prev, pager, next, total"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="formShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="信息详情"
      width="1100px"
      top="5vh"
      class="dialog-h"
      @closed="handleClose"
    >
      <div class="scroll-h">
        <el-form
          ref="ref_form"
          :inline="true"
          :model="dataForm"
          :disabled="true"
          class="form"
        >
          <el-form-item
            label="户主姓名:"
            prop="houseHolderName"
            label-width="150px"
          >
            <!-- <el-input class="item_width_1"
                        v-model="dataForm.houseHolderName">
              </el-input> -->
            <div class="wd50">{{ dataForm.houseHolderName }}</div>
          </el-form-item>
          <el-form-item label="居住地址:" prop="address" label-width="150px">
            <!-- <el-input class="wd50" v-model="dataForm.address">
              </el-input> -->
            <div class="wd50">{{ dataForm.address }}</div>
          </el-form-item>
          <div>
            <el-form-item
              label="自有/租住:"
              prop="houseType"
              label-width="150px"
            >
              <!-- <el-input class="item_width_1"
                          v-model="dataForm.houseType">
                </el-input> -->
              <div class="wd50">{{ dataForm.houseType }}</div>
            </el-form-item>
            <el-form-item
              label="居住人数:"
              prop="totalResi"
              label-width="150px"
            >
              <!-- <el-input class="item_width_1"
                          v-model="dataForm.totalResi">
                </el-input> -->
              <div class="wd50">{{ dataForm.totalResi }}</div>
            </el-form-item>
          </div>
        </el-form>
        <el-table
          :data="dataForm.list"
          border
          style="width: 1060px; margin: 20px"
          class="resi-table"
          :height="dialogTableHeight"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="50"
          />
          <el-table-column
            prop="memberName"
            width="100"
            label="成员姓名"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="memberIdNum"
            width="180"
            align="center"
            label="成员身份证"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="memberMobile"
            width="140"
            align="center"
            label="成员手机号"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="heSuanCount"
            width="120"
            align="center"
            label="核酸检测次数"
          />

          <el-table-column
            prop="ymjz"
            width="140"
            align="center"
            label="疫苗接种情况"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.ymjz == 1">全程接种</span>
              <span v-if="scope.row.ymjz == 2">未全程接种</span>
              <span v-if="scope.row.ymjz == 0">未接种</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="domicilePlace"
            min-width="140"
            align="center"
            label="户籍所在地 "
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="workPlace"
            min-width="120"
            align="center"
            label="单位或学校 "
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="remark"
            align="center"
            label="备注"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
        <div class="resi-btns">
          <el-button @click="formShow = false">{{ $t('cancel') }}</el-button>
          <el-button v-if="dialogType == 'check'" type="danger" @click="checkHandle('1')">{{ $t('checkBTGBtn') }}</el-button>
          <el-button v-if="dialogType == 'check'" type="danger" @click="showAddHouse">{{ $t('checkTGBtn') }}</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 新增房屋弹出框 -->
    <el-dialog :visible.sync="addHouseShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               title="新增房屋"
               width="900px"
               top="5vh"
               class="dialog-h"
               @closed="addHouseShow = false">
      <room-form ref="ref_form"
                 @dialogCancle="addHouseShow = false"
                 @dialogOk="roomFormOk"></room-form>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";
import axios from "axios";
import roomForm from './roomForm'

export default {
  data() {
    return {
      openSearch: false,

      formShow: false,
      formTitle: "组织信息",

      pageNo: 1,
      pageSize: window.localStorage.getItem("pageSize") || 20,
      total: 1,

      tableData: [],
      timeRange: "",
      fmData: {
        orgId: "",
        startTime: "",
        endTime: "",
        address: "",
        domicilePlace: "",
      },
      dataForm: {},
      communityList: [],
      spanIndex: [], // 合并的行
      importBtnTitle: "导入",
      importLoading: false,
      addHouseShow: false,
      dialogType: 'look', // 对话框是check审核还是look查看
      relationshipOptions: []
    }
  },
  components: {
    roomForm
  },
  computed: {
    ...mapGetters(["clientHeight", "iframeHeight"]),
    tableHeight() {
      const h = this.clientHeight - 360 + this.iframeHeigh;
      const _h = this.clientHeight - 360;
      return this.$store.state.inIframe ? h : _h;
    },
    dialogTableHeight() {
      const h = this.clientHeight - 460 + this.iframeHeigh;
      const _h = this.clientHeight - 460;
      return this.$store.state.inIframe ? h : _h;
    },
  },
  watch: {
    timeRange(val) {
      if (Array.isArray(val) && val.length == 2) {
        this.fmData.startTime = val[0];
        this.fmData.endTime = val[1];
      } else {
        this.fmData.startTime = "";
        this.fmData.endTime = "";
      }
    },
  },
  mounted() {
    // this.getcommunityList();
    this.getDictList()
    this.getTableData()
  },
  methods: {
    async getDictList() {
      const url = "/sys/dict/data/relationship"
      const { data, code, msg } = await requestPost(url, { formCode: "resi_base_info" })

      if (code === 0) {
        this.relationshipOptions = [ ...data ]
      } else {
        this.$message.success("操作失败！")
      }
    },
    getRelationshipName (value) {
      let label = ''
      this.relationshipOptions.forEach(item => {
        if (item.value == value) {
          label = item.label
        }
      })
      return label
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log('row-----r', row)
      // console.log('column-----c', column)
      if (
        columnIndex === 0 ||
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 4 ||
        columnIndex === 15 ||
        columnIndex === 16
      ) {
        let index = this.spanIndex.findIndex(
          (item) => item.firstIndex === rowIndex
        );
        if (index > -1) {
          return {
            rowspan: this.spanIndex[index].len,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    async handleChu() {
      const url = "/epmetuser/icresicollect/export";
      const { pageSize, pageNo, fmData } = this;
      axios({
        url: window.SITE_CONFIG["apiURL"] + url,
        method: "post",
        data: {
          pageSize,
          pageNo,
          ...fmData,
        },
        responseType: "blob",
      })
        .then((res) => {
          let fileName = window.decodeURI(
            res.headers["content-disposition"].split(";")[1].split("=")[1]
          );
          console.log("filename", fileName);
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          var url = window.URL.createObjectURL(blob);
          var aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = url;
          aLink.setAttribute("download", fileName);
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        })
        .catch((err) => {
          console.log("获取导出情失败", err);
          return this.$message.error("网络错误");
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.getTableData();
    },

    handleClose() {
      this.formShow = false;
    },
    handleSearch(val) {
      console.log(this.fmData);
      this.pageNo = 1;
      this.getTableData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.timeRange = "";
      this.handleSearch();
    },

    async handleWatch(type, row) {
      this.dialogType = type
      // this.formShow = true;
      await nextTick();
      const url = "/epmetuser/icresicollect/detail";

      const { data, code, msg } = await requestPost(url, {
        id: row.id,
      });

      if (code === 0) {
        console.log("data----de", data);
        this.dataForm = {
          ...data,
          houseType: data.houseType == "1" ? "自有" : "租住",
        };
        // this.getTableData();
        this.formShow = true;
      } else {
        this.$message.success("操作失败！");
      }
    },

    async handleEdit(rowIndex) {
      this.formShow = true;
      await nextTick();
      this.$refs.eleEditForm.initForm("edit", this.tableData[rowIndex]);
    },
    handleEditSuccess() {
      this.handleClose();
      this.getTableData();
    },

    async handleDel(rowData, rowIndex) {
      console.log(rowData, rowIndex);
      const url =
        "/heart/iccommunityselforganization/delcommunityselforganization";
      const { tableData } = this;

      const { data, code, msg } = await requestPost(url, {
        orgId: tableData[rowIndex].orgId,
      });

      if (code === 0) {
        this.$message.success("删除成功！");
        this.getTableData();
      } else {
        this.$message.success("操作失败！");
      }
    },
    async getcommunityList() {
      const url = "/gov/org/agency/community-list";
      const { data, code, msg } = await requestPost(url);
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.communityList = data;
      } else {
      }
    },
    async getTableData() {
      const url = "/epmetuser/icresicollect/list"
      const { pageSize, pageNo, fmData } = this
      const { data, code, msg } = await requestPost(url, {
        pageSize,
        pageNo,
        ...fmData,
      })
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！")
        this.total = data.total || 0
        let _i = 0
        let arr = []
        this.spanIndex =
          data.list &&
          data.list.map((item, index) => {
            if (index == 0) _i = 0
            else _i = _i + data.list[index - 1].list.length;
            arr.push(_i)
            // console.log("_i-----", _i, arr)
            // if (index === data.list.length - 1) firstIndex = _i - item.list.length
            return {
              firstIndex: _i,
              len: item.list.length,
            }
          })
        this.tableData = data.list && this.formatArr(data.list)
        console.log("tableData----0", this.spanIndex)
      } else {
      }
    },
    // 数组扁平化
    formatArr(arr) {
      let res = [];
      let arr1 = arr.map((n, index) => {
        return {
          ...n,
          list:
            n.list.length > 0
              ? n.list.map((i) => {
                  return {
                    ...n,
                    ...i,
                    desc: index + 1,
                    list: [],
                  };
                })
              : [],
        };
      });
      arr1.forEach((item) => {
        if (item.list && item.list.length > 0) {
          res = res.concat(this.formatArr(item.list));
        } else res.push(item);
      });
      return res;
    },
    showAddHouse () {
      if (this.dataForm.homeId == 'other') {
        this.addHouseShow = true
        this.$nextTick(() => {
          this.$refs.ref_form.initForm('add', null, this.dataForm.id)
        })
      } else {
        this.checkHandle('2')
      }
    },
    // 审核提交方法
    checkHandle (type) {
      const params = {
        id: this.dataForm.id,
        checkState: type, // 0-未审核 1-未通过 2-已通过
        checkReason: '',
        buildingUnitId: this.dataForm.buildingUnitId || '',
        doorName: this.dataForm.doorName || ''
      }
      if (type == '1') {
        this.$prompt('请输入不通过的原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          params.checkReason = value
          this.$http.post('/epmetuser/icresicollect/collectCheck', params).then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.formShow = false
            this.getTableData()
            // 调用文件下发权限接口
            // this.fileJurisdiction(params)
          }).catch(() => {})
        }).catch(() => {
          // 取消输入原因  
        })
      } else {
        this.$http.post('/epmetuser/icresicollect/collectCheck', params).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.addHouseShow = false
          this.formShow = false
          this.getTableData()
          // 调用文件下发权限接口
          // this.fileJurisdiction(params)
        }).catch(() => {})
      }
    },
    // 文件下发权限接口
    fileJurisdiction (params) {
      this.$http.post('/pli/power/rentContractInfo/send', 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.disabledBtn = false
              this.checkVisible = false
              this.visible = false
              this.$emit('refreshDataList')
            }
        })
      }).catch(() => {})
    },
    roomFormOk (e) {
      this.dataForm.buildingUnitId = e.buildingUnitId
      this.dataForm.doorName = e.doorName
      this.checkHandle('2')
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";

.resi-container .resi-card-table {
  ::v-deep .el-table th {
    color: #fff;
    background-color: rgba(33, 149, 254, 1);
    // border-right: 1px solid rgba(33, 149, 254, 1);
  }
}
.resi-table {
  ::v-deep .el-button--text {
    text-decoration: underline;
  }
}
.resi-card-table {
  margin-top: 20px;
}
.resi-row-btn {
  margin-bottom: 13px;
  .upload-btn {
    display: inline-block;
    margin: 0 10px;
  }
}

.resi-btns {
  margin-top: 20px;
  text-align: center;
}

.resi-container .resi-card {
  position: relative;
  overflow: visible;
}
.wd50 {
  min-width: 200px;
}
.badge {
  display: block;
  color: #F1F2E5;
  background-color: #D7000F;
  border-radius: 12px;
  width: 70px;
}
</style>
