<!--
 * @Description: 房屋多幢明细
 * @Autor:
 * @LastEditTime: 2023-09-01 13:29:29
-->
<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">
          <el-input
            class="item"
            :disabled="!ableOperation"
            v-model="scope.row.xmmc"
            placeholder="请输入内容"
            @input="updaterow(scope.row)">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="fwxz" label="房屋性质" min-width="100">
        <template slot-scope="scope">
          <treeselect
            v-model="scope.row.fwxz"
            :disabled="!ableOperation"
            noOptionsText="暂无数据"
            placeholder=""
            :show-count="true"
            :options="dictData['A19']"
            :normalizer="normalizer"
            :appendToBody="true"
            z-index="9999"
            @input="updaterow(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="ghyt" label="房屋用途" min-width="100">
        <template slot-scope="scope">
          <treeselect
            v-model="scope.row.ghyt"
            :disabled="!ableOperation"
            noOptionsText="暂无数据"
            placeholder=""
            :show-count="true"
            :options="dictData['A17']"
            :normalizer="normalizer"
            :appendToBody="true"
            z-index="9999"
            @input="updaterow(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="fwjg" label="房屋结构" min-width="100">
        <template slot-scope="scope">
          <treeselect
            v-model="scope.row.fwjg"
            :disabled="!ableOperation"
            noOptionsText="暂无数据"
            placeholder=""
            :show-count="true"
            :options="dictData['A46']"
            :normalizer="normalizer"
            :appendToBody="true"
            z-index="9999"
            @input="updaterow(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="jzmj" label="建筑面积" min-width="100">
        <template slot-scope="scope">
          <el-input
            maxlength="12"
            class="item"
            :disabled="!ableOperation"
            oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
            v-model="scope.row.jzmj"
            placeholder="请输入内容"
            @input="updaterow(scope.row)">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="jgsj" label="竣工时间" min-width="100">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.jgsj"
            type="date"
            :disabled="!ableOperation"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            @input="updaterow(scope.row)">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="zcs" label="总层数" min-width="100">
        <template slot-scope="scope">
          <el-input
            class="item"
            :disabled="!ableOperation"
            oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
            v-model="scope.row.zcs"
            placeholder="请输入内容"
            @input="updaterow(scope.row)">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="zts" label="总套数" min-width="100">
        <template slot-scope="scope">
          <el-input
            class="item"
            :disabled="!ableOperation"
            oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
            v-model="scope.row.zts"
            placeholder="请输入内容"
            @input="updaterow(scope.row)">
          </el-input>
        </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: [],
        normalizer (node) {
          if (node.children == null || node.children == "null") {
            delete node.children;
          }
          return {
            id: node.dcode,
            label: node.dname,
            children: node.children,
          };
        },
      };
    },
    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>
            {"序号"}
          </div>
        );
      },
      updaterow (a) {
        this.$emit("updateFdcwxmList", this.tableDataList);
      }
    }
  }
</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>