<template>
  <div class="page-content">
    <a-spin :spinning="confirmLoading">
      <h4 style="padding:20px 0 0 30px;line-height:30px;font-weight:600;">缴费详情</h4>
      <j-form-container :disabled="true">
        <a-form-model ref="form" :model="model" slot="detail">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="收费类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargeTypeName">
                <a-input v-model="model.chargeTypeName" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="收费项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargeItem">
                <a-input v-model="model.chargeItem" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="房屋" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="roomAllName">
                <a-input v-model="model.roomAllName" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="业主" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ownerName">
                <a-input v-model="model.ownerName" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="与业主关系" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="relationShip">
                <!-- <a-input v-model="model.relationShip" placeholder="请输入"></a-input> -->
                <a-select v-model="model.relationShip" placeholder="请选择与业主关系">
                  <a-select-option v-for="item in relationShipList" :key="item.value"
                    :value="item.value">{{item.label}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="住户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="residentName">
                <a-input v-model="model.residentName" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="收费标准" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargeTypeCodeName">
                <a-input v-model="model.chargeTypeCodeName" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="收费周期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargeCycle">
                <a-select style="width: 100%" v-model="model.chargeCycle" placeholder="请选择付费周期">
                  <a-select-option v-for="item in dictOptions" :key="item.value"
                    :value="item.value">{{item.label}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <template v-if="model.designFormulas === 2">
              <a-col :span="12">
                <a-form-model-item label="房屋面积" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="floorSpace">
                  <a-input v-model="model.floorSpace" placeholder="请输入房屋面积" style="width:100%"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="单价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unitPrice">
                  <a-input v-model="model.unitPrice" placeholder="请输入单价" style="width:100%"></a-input>
                </a-form-model-item>
              </a-col>
            </template>
            <template v-if="model.designFormulas === 3">
              <a-col :span="12">
                <a-form-model-item label="上期度数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lastDegrees">
                  <a-input v-model="model.lastDegrees" placeholder="请输入上期度数" style="width:100%"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="本期度数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="currentDegrees">
                  <a-input-number v-model="model.currentDegrees" placeholder="请输入本期度数"
                    style="width:100%"></a-input-number>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="用量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="useAmount">
                  <a-input v-model="model.useAmount" placeholder="请输入用量" style="width:100%"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="单价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unitPrice">
                  <a-input v-model="model.unitPrice" placeholder="请输入单价" style="width:100%"></a-input>
                </a-form-model-item>
              </a-col>
            </template>
            <a-col :span="12">
              <a-form-model-item label="金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalAmount">
                <a-input v-model="model.totalAmount" placeholder="请输入金额" style="width:100%"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="抄表时间" :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }" :wrapperCol="wrapperCol"
                prop="meterReadingTime">
                <j-date placeholder="请选择抄表时间" v-model="model.meterReadingTime" :showTime="true"
                  dateFormat="YYYY-MM-DD HH:mm:ss" style="width: 50%;" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>

      <a-divider />
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <h4 style="padding:0 0 0 30px;line-height:30px;font-weight:600;">历史记录</h4>
        <p style="padding-right:50px;color:#EC808D">总缴费金额: {{totalAmount}}</p>
      </div>
      <div>
        <a-table ref="table" size="middle" :scroll="{ x: 1500, y: 300 }" bordered rowKey="id" :columns="columns"
          :dataSource="dataSource" :pagination="pagination" :loading="loading" class="j-table-force-nowrap">
          <span slot="roomId" slot-scope="text, record">
            <span>{{record.buildingName}}{{record.unitName}}{{record.roomName}}</span>
          </span>
        </a-table>
      </div>
    </a-spin>

    <div style="text-align:center">
      <a-button @click="onReturn">返回</a-button>
    </div>
  </div>
</template>

<script>
import { queryDetailByIdApi, ajaxGetDictItems, getDictItemsFromCache, getHistoryListdApi } from '@/api/api'
import { RELATION_SHIP } from '@/assets/static.js'

const columns = [
  {
    title: '收费类型',
    dataIndex: 'chargeTypeName',
    key: 'chargeTypeName',
    width: 120,
    align: 'center',
  },
  {
    title: '收费项目',
    dataIndex: 'chargeItem',
    key: 'chargeItem',
    width: 120,
    align: 'center',
  },
  {
    title: '房屋编号',
    dataIndex: 'roomId',
    scopedSlots: { customRender: 'roomId' },
    key: 'roomId',
    width: 140,
    align: 'center',
  },
  {
    title: '用量',
    dataIndex: 'useAmount',
    key: 'useAmount',
    width: 120,
    align: 'center',
  },
  {
    title: '金额（元）',
    dataIndex: 'totalAmount',
    key: 'totalAmount',
    width: 120,
    align: 'center',
  },
  {
    title: '缴费单号',
    dataIndex: 'paymentNum',
    key: 'paymentNum',
    width: 120,
    align: 'center',
  },
  {
    title: '缴费日期',
    dataIndex: 'paymentTime',
    key: 'paymentTime',
    width: 120,
    align: 'center',
  },
  {
    title: '创建日期',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 120,
    align: 'center',
  },
]
export default {
  name: 'PropertyChargruleForm',
  inject: ['closeCurrent'],
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      relationShipList: RELATION_SHIP,
      dictOptions: [],
      model: {
        chargeCycle: '',
        chargeItem: '',
        chargingStandardId: '',
        chargeTypeCode: '',
        chargeTypeId: '',
        chargeTypeName: '',
        unitPrice: '',

        ownerId: '',
        buildingId: '',
        buildingName: '',
        unitId: '',
        unitName: '',
        roomId: '',
        roomName: '',
        floorSpace: '',
        ownerName: '',
        ownerPhone: '',
        residentName: '',
        residentPhone: '',
        relationShip: '',

        lastDegrees: '',
        currentDegrees: '',
        useAmount: '',
        totalAmount: '',
        meterReadingTime: '',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      totalAmount: '',
      confirmLoading: false,
      columns: columns,
      dataSource: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
      },
      loading: false,
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.getDetail()
    this.initDictData()
  },
  methods: {
    async getDetail() {
      this.confirmLoading = true
      let { result } = await queryDetailByIdApi({ id: this.$route.query.id })
      result['chargeTypeCodeName'] = `${result.chargeTypeCode}-${result.chargeTypeName}`
      result['roomAllName'] = `${result.buildingName}${result.unitName}${result.roomName}`
      this.model = { ...result }
      this.confirmLoading = false
      this.getHistoryList(this.model.ownerId)
    },
    initDictData() {
      //优先从缓存中读取字典配置
      if (getDictItemsFromCache('chargingCycle')) {
        this.dictOptions = getDictItemsFromCache('chargingCycle')
        return
      }
      // //根据字典Code, 初始化字典数组
      ajaxGetDictItems('chargingCycle', null).then((res) => {
        if (res.success) {
          this.dictOptions = res.result
        }
      })
    },
    async getHistoryList(ownerId) {
      this.loading = true
      let { result } = await getHistoryListdApi({ ownerId })
      this.totalAmount = result.totalAmount
      let data = result.pageList
      this.pagination.total = data.total
      this.pagination.current = data.current
      this.pagination.pageSize = data.size
      this.dataSource = data.records
      this.loading = false
    },
    onReturn() {
      // if(this.model.lastDegrees || this.model.lastDegrees == 0) {
      //   this.model.useAmount = (value - Number(this.model.lastDegrees)).toFixed(2)
      //   this.model.totalAmount = (Number(this.model.useAmount) * this.amount).toFixed(2)
      // }
      this.closeCurrent()
      // this.$store.dispatch('tags/delView', this.$route.path)
      // this.$router.go(-1)
    },
  },
}
</script>

<style scoped lang="less">
.page-content {
  min-height: 430px;
  background-color: #fff;
  padding: 0 15px 50px 5px;
}
</style>