<template>
  <el-dialog
    :title="$t('pages.userAccountStatusLogDrawer.dialog.title')"
    :visible="true"
    width="70%"
    :before-close="handleClose"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :modal-append-to-body="true"
    :append-to-body="true"
  >
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      height="400"
    >
      <el-table-column :label="$t('pages.userAccountStatusLogDrawer.table.approvalType')" prop="statusName" align="center" />
      <el-table-column :label="$t('pages.userAccountStatusLogDrawer.table.approver')" prop="approvalUserName" align="center">
        <template slot-scope="scope">
          <span
            v-if="scope.row.originType"
          >{{ scope.row.approvalUserName }} {{ $t('pages.userAccountStatusLogDrawer.suffix.app') }}</span>
          <span
            v-if="!scope.row.originType"
          >{{ scope.row.approvalUserName }} {{ $t('pages.userAccountStatusLogDrawer.suffix.admin') }}</span>
          <span v-else>{{ $t('pages.userAccountStatusLogDrawer.word.pending') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('pages.userAccountStatusLogDrawer.table.approvalTime')" prop="createTime" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('pages.userAccountStatusLogDrawer.table.remarks')" prop="description" align="center" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.cursor"
      :limit.sync="listQuery.limit"
      @pagination="renderData"
    />
  </el-dialog>
</template>

<script>
import { getUserStatusLogTable } from '@/api/approval'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      list: [],
      listQuery: {
        cursor: 1,
        limit: 20,
        beApprovalUser: ''
      },
      total: 0,
      listLoading: false
    }
  },
  watch: {
    row: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.listQuery.beApprovalUser = newVal.id
        this.renderData()
      }
    }
  },
  methods: {
    renderData() {
      const that = this
      that.listLoading = true
      getUserStatusLogTable(that.listQuery)
        .then(res => {
          const { body } = res
          that.total = body.total || 0
          that.list = body.records
          that.listLoading = false
        })
        .catch(er => {
          that.listLoading = false
        })
    },
    changeActive($event) {
      $event.currentTarget.play()
    },
    removeActive($event) {
      $event.currentTarget.pause()
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>
