<template>
  <div>

    <table class="table">
      <tr>
        <td></td>
        <td>分类</td>
        <td>价格</td>
        <td>与上年同期比（%）</td>
        <td>当月与上月环比增长（%）</td>
      </tr>
      <tr>
        <td rowspan="4">当年期内</td>
        <td>商品房</td>
        <td><el-input-number v-model="state.form.yearPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.synYearPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.qoqYearPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>商品住房</td>
        <td><el-input-number v-model="state.form.resYearPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSynYearPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resQoqYearPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>二手房</td>
        <td><el-input-number v-model="state.form.secYearPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.secSynYearPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.secQoqYearPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>二手住房</td>
        <td><el-input-number v-model="state.form.resSecYearPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSecSynYearPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSecQoqYearPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td rowspan="4">去年同期</td>
        <td>商品房</td>
        <td><el-input-number v-model="state.form.lastYearPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.synLastYearPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.qoqLastYearPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>商品住房</td>
        <td><el-input-number v-model="state.form.resLastYearPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSynLastYearPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resQoqLastYearPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>二手房</td>
        <td><el-input-number v-model="state.form.secLastYearPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.secSynLastYearPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.secQoqLastYearPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>二手住房</td>
        <td><el-input-number v-model="state.form.resSecLastYearPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSecSynLastYearPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSecQoqLastYearPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td rowspan="4">本月</td>
        <td>商品房</td>
        <td><el-input-number v-model="state.form.monthPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.synMonthPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.qoqMonthPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>商品住房</td>
        <td><el-input-number v-model="state.form.resMonthPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSynMonthPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resQoqMonthPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>二手房</td>
        <td><el-input-number v-model="state.form.secMonthPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.secSynMonthPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.secQoqMonthPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>二手住房</td>
        <td><el-input-number v-model="state.form.resSecMonthPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSecSynMonthPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSecQoqMonthPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td rowspan="4">上月</td>
        <td>商品房</td>
        <td><el-input-number v-model="state.form.lastMonthPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.synLastMonthPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.qoqLastMonthPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>商品住房</td>
        <td><el-input-number v-model="state.form.resQoqLastMonthPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSynLastMonthPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resLastMonthPrice" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>二手房</td>
        <td><el-input-number v-model="state.form.secLastMonthPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.secSynLastMonthPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.secQoqLastMonthPro" :controls="false" style="width:150px" /></td>
      </tr>
      <tr>
        <td>二手住房</td>
        <td><el-input-number v-model="state.form.resSecLastMonthPrice" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSecSynLastMonthPro" :controls="false" style="width:150px" /></td>
        <td><el-input-number v-model="state.form.resSecQoqLastMonthPro" :controls="false" style="width:150px" /></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

import {
  reactive,
  defineProps,
  watch,
  defineExpose
} from "vue";

const setvalue = (e: any) => {
  state.form = e;
}

const getvalue = () => {
  return state.form
}

defineExpose({
  getvalue,
  setvalue
})

const props = defineProps({
  udata: {
    type: Object,
    default: {},
  },
});

const state = reactive({
  form: {
    yearPrice: 0,
    synYearPro: 0,
    qoqYearPro: 0,
    resYearPrice: 0,
    resSynYearPro: 0,
    resQoqYearPro: 0,
    secYearPrice: 0,
    secSynYearPro: 0,
    secQoqYearPro: 0,
    resSecYearPrice: 0,
    resSecSynYearPro: 0,
    resSecQoqYearPro: 0,
    lastYearPrice: 0,
    synLastYearPro: 0,
    qoqLastYearPro: 0,
    resLastYearPrice: 0,
    resSynLastYearPro: 0,
    resQoqLastYearPro: 0,
    secLastYearPrice: 0,
    secSynLastYearPro: 0,
    secQoqLastYearPro: 0,
    resSecLastYearPrice: 0,
    resSecSynLastYearPro: 0,
    resSecQoqLastYearPro: 0,
    monthPrice: 0,
    synMonthPro: 0,
    qoqMonthPro: 0,
    resMonthPrice: 0,
    resSynMonthPro: 0,
    resQoqMonthPro: 0,
    secMonthPrice: 0,
    secSynMonthPro: 0,
    secQoqMonthPro: 0,
    resSecMonthPrice: 0,
    resSecSynMonthPro: 0,
    resSecQoqMonthPro: 0,
    lastMonthPrice: 0,
    synLastMonthPro: 0,
    qoqLastMonthPro: 0,
    resQoqLastMonthPro: 0,
    resSynLastMonthPro: 0,
    resLastMonthPrice: 0,
    secLastMonthPrice: 0,
    secSynLastMonthPro: 0,
    secQoqLastMonthPro: 0,
    resSecLastMonthPrice: 0,
    resSecSynLastMonthPro: 0,
    resSecQoqLastMonthPro: 0,
  } as any
})



</script>

<style scoped lang="scss"></style>