<template>
  <com-dialog
    v-if="show"
    title="審核記錄"
    :show="show"
    hideFloor
    @update:show="val => $emit('update:show', val)">
    
    <div style="width: 100%; overflow: hidden">
      <el-table ref="multipleTable" :data="dataList.state" style="width: 100%" >
        <el-table-column label="姓名" prop="auditorName"></el-table-column>
        <el-table-column label="操作類型"  v-slot:default="{ row }">
          {{row.auditType === 0 ? '提審' : '審核'}}
        </el-table-column>
        <el-table-column label="公司" prop="belongCompanyName"></el-table-column>
        <el-table-column label="更新時間" prop="auditTime"></el-table-column>
        <el-table-column label="狀態" prop="auditStatus"  v-slot:default="{ row }">
          <span>{{getExamineName(row.auditStatus)}}</span>
        </el-table-column>
        <el-table-column label="審核備註" prop="auditRemark"  v-slot:default="{ row }">
          <div class="remark">
            {{!row.auditType ? '' : row.auditRemark}}
          </div>
        </el-table-column>
      </el-table>
    </div>

    <div class="pag-block no-sizes">
      <el-pagination
        @current-change="pag.currentChange"
        :current-page="pag.state.currPage"
        :page-size="pag.state.size"
        layout="total, prev, pager, next, jumper"
        :total="pag.state.total">
      </el-pagination>
    </div>

  </com-dialog>
</template>

<script>
import getTableState from '@/state/tableRef'
import comDialog from "@/components/dialog";
import { getExamineList } from '@/request/config'
import { 
  AUTH_COM_VIEW,
  getName 
} from '@/constant'

export default {
  props: ['show', 'data', 'url'],
  setup(props) {
    const state = getTableState({
      getUrl: props.url || getExamineList,
      searchAttr: { houseId: props.data }
    })

    state.pag.value.sizeChange(8)

    return { ...state }
  },
  methods: {
    getExamineName: getName(AUTH_COM_VIEW),
  },
  watch: {
    data() {
      this.search.state.houseId = this.props.data
    }
  },
  components: {
    "com-dialog": comDialog
  }  
}
</script>

<style lang="scss" scoped>
.remark {
  max-height: 100px;
  overflow-y: auto;
}
</style>