<template>
  <div class="owner-detail-his">
    <el-table
      :data="ownerDetailHisInfo.owners"
      border
      style="width: 100%"
      v-loading="loading">
      <el-table-column
        :label="$t('ownerDetailHis.operate')"
        align="center">
        <template slot-scope="scope">
          {{ _getHisOwnerOperate(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('ownerDetailHis.userName')"
        align="center">
        <template slot-scope="scope">
          {{ scope.row.userName || '-' }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('ownerDetailHis.createTime')"
        align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('ownerDetailHis.name')"
        align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}({{ scope.row.link }})
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('ownerDetailHis.sex')"
        align="center">
        <template slot-scope="scope">
          {{ scope.row.sex === 0 ? $t('ownerDetailHis.male') : $t('ownerDetailHis.female') }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('ownerDetailHis.idCard')"
        align="center">
        <template slot-scope="scope">
          {{ scope.row.idCard || '-' }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('ownerDetailHis.address')"
        align="center">
        <template slot-scope="scope">
          {{ scope.row.address || '-' }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item,index) in ownerDetailHisInfo.listColumns"
        :key="index"
        :label="item"
        align="center">
        <template slot-scope="scope">
          {{ scope.row.listValues[index] || '-' }}
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
import { queryHisOwner, getAttrSpec } from '@/api/system/operateDataLogApi'

export default {
  name: 'OwnerDetailHis',
  data() {
    return {
      loading: false,
      ownerDetailHisInfo: {
        owners: [],
        ownerId: '',
        ownerName: '',
        carNum: '',
        listColumns: [],
        logStartTime: '',
        logEndTime: '',
        ownerNameLike: '',
        staffNameLike: ''
      },
      page: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  methods: {
    async open(conditions) {
      this.ownerDetailHisInfo = {
        ...this.ownerDetailHisInfo,
        ...conditions
      }
      await this._getColumns()
      this._loadOwnerDetailHisData()
    },
    async _loadOwnerDetailHisData() {
      try {
        this.loading = true
        const params = {
          page: this.page.current,
          row: this.page.size,
          memberId: this.ownerDetailHisInfo.ownerId,
          ownerNameLike: this.ownerDetailHisInfo.ownerNameLike,
          logStartTime: this.ownerDetailHisInfo.logStartTime,
          logEndTime: this.ownerDetailHisInfo.logEndTime,
          staffNameLike: this.ownerDetailHisInfo.staffNameLike
        }
        
        const { data, total } = await queryHisOwner(params)
        this.ownerDetailHisInfo.owners = data
        this._dealOwnerAttr(data)
        this.page.total = total
      } catch (error) {
        console.error('Failed to load owner history:', error)
      } finally {
        this.loading = false
      }
    },
    _getHisOwnerOperate(owner) {
      const ownerCount = this.ownerDetailHisInfo.owners.filter(item => item.bId === owner.bId).length
      
      if (ownerCount <= 1) {
        if (owner.operate === 'ADD') return this.$t('ownerDetailHis.add')
        if (owner.operate === 'DEL') return this.$t('ownerDetailHis.delete')
        return '-'
      }
      
      if (owner.operate === 'ADD') return this.$t('ownerDetailHis.modifyNew')
      if (owner.operate === 'DEL') return this.$t('ownerDetailHis.modifyOld')
      return '-'
    },
    async _getColumns() {
      try {
        const data = await getAttrSpec('building_owner_attr')
        this.ownerDetailHisInfo.listColumns = data
          .filter(item => item.listShow === 'Y')
          .map(item => item.specName)
      } catch (error) {
        console.error('Failed to get columns:', error)
      }
    },
    _dealOwnerAttr(owners) {
      if (!owners) return
      
      owners.forEach(item => {
        this._getColumnsValue(item)
      })
    },
    _getColumnsValue(owner) {
      owner.listValues = []
      if (!owner['ownerAttrDtos'] || owner.ownerAttrDtos.length < 1) {
        this.ownerDetailHisInfo.listColumns.forEach(() => {
          owner.listValues.push('')
        })
        return
      }
      
      this.ownerDetailHisInfo.listColumns.forEach(value => {
        let tmpValue = ''
        owner.ownerAttrDtos.forEach(attrItem => {
          if (value === attrItem.specName) {
            tmpValue = attrItem.valueName
          }
        })
        owner.listValues.push(tmpValue)
      })
    },
    handleSizeChange(size) {
      this.page.size = size
      this._loadOwnerDetailHisData()
    },
    handleCurrentChange(current) {
      this.page.current = current
      this._loadOwnerDetailHisData()
    }
  }
}
</script>

<style scoped>
.owner-detail-his {
  padding: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>