<!--
 * @Description: 房屋多幢明细
 * @Autor:
 * @LastEditTime: 2023年07月31日 13:32:21
-->
<template>
  <div>
    <el-table
      :data="tableDataList"
      border
      :pagination="false"
      :key="key"
      :header-cell-style="{ 'text-align': 'center' }"
      :heightNumSetting="true"
      :minHeight="150"
      height="150"
      style="width: 100%"
    >
      <el-table-column prop="index" width="50" :render-header="renderHeader">
        <template slot-scope="scope">
          <div style="text-align: center">{{ scope.$index + 1 }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="bdcdyh" label="不动产单元号" min-width="100">
        <template slot-scope="scope">
          <div style="text-align: center">{{ scope.row.bdcdyh }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="xmmc" label="项目名称" min-width="100">
        <template slot-scope="scope">
          <div style="text-align: center">{{ scope.row.xmmc }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="zcs" label="总层数" min-width="100">
        <template slot-scope="scope">
          <div style="text-align: center">{{ scope.row.zcs }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="ytmc" label="房屋用途" min-width="100">
        <template slot-scope="scope">
          <div style="text-align: center">{{ scope.row.ytmc }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="fwjgmc" label="房屋结构" min-width="100">
        <template slot-scope="scope">
          <div style="text-align: center">{{ scope.row.fwjgmc }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="jzmj" label="建筑面积" min-width="100">
        <template slot-scope="scope">
          <div style="text-align: center">{{ scope.row.jzmj }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="jgsj" label="竣工时间" min-width="100">
        <template slot-scope="scope">
          <div style="text-align: center">{{ scope.row.jgsj }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="zts" label="总套数" min-width="100">
        <template slot-scope="scope">
          <div style="text-align: center">{{ scope.row.zts }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["dictData"]),
  },
  props: {
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    ableOperation: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 键名转换，方法默认是label和children进行树状渲染
      key: 0,
      tableDataList: [],
    };
  },
  mounted() {},
  watch: {
    tableData: {
      handler: function (val, oldVal) {
        let that = this;
        this.$nextTick(() => {
          if (val.length == 0 || !val) {
            that.tableDataList = _.cloneDeep([
              {
                yt: null,
                qssj: "",
                jssj: "",
                tdsyqx: "",
              },
            ]);
          } else {
            that.tableDataList = _.cloneDeep(val);
          }
        });
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /**
     * @description: renderHeader
     * @author: renchao
     */
    renderHeader() {
      return (
        <div>
          {" "}
          {!this.ableOperation ? (
            "序号"
          ) : (
            <i
              class="el-icon-plus pointer"
              onClick={() => {
                this.addClick();
              }}
            ></i>
          )}
        </div>
      );
    },
  },
};
</script>
<style scoped lang="scss">
.el-input {
  border: none !important;
}

/deep/ .el-table__row {
  border: none !important;
}

.el-date-editor.el-input {
  width: 100%;
}

/deep/ .el-table th {
  height: 30px !important;
}
</style>