<template>
  <div class="details-drawer">
    <el-drawer
      :visible="true"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      size="100%"
      direction="btt"
    >
      <div slot="title" class="flex-l">
        <sys-origin-icon :icon="row.sysOrigin" size="18px" />&nbsp;{{ $t('pages.automaticSalaryPaymentRecord.detailsDrawer.title', { dateNumber }) }}
      </div>
      <div>

        <el-table
          :data="list"
          fit
          highlight-current-row
        >
          <el-table-column :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.system')" align="center" width="80">
            <template slot-scope="scope">
              <sys-origin-icon :icon="scope.row.sysOrigin" :desc="scope.row.sysOrigin" />
            </template>
          </el-table-column>
          <el-table-column prop="teamRegionName" :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.region')" align="center" min-width="80" />
          <el-table-column prop="policyLevel" :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.policyLevel')" align="center" width="160" />
          <el-table-column prop="target" :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.target')" align="center" min-width="80" />
          <el-table-column prop="salary" :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.salary')" align="center" min-width="80" />
          <el-table-column :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.expectedReceiver')" align="center" min-width="80">
            <template slot-scope="scope">
              <user-table-exhibit :user-profile="scope.row.anchor ? scope.row.teamMemberProfile : scope.row.teamOwnProfile" :query-details="true" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.actualReceiver')" align="center" min-width="80">
            <template slot-scope="scope">
              <user-table-exhibit :user-profile="scope.row.hostSalaryToAgent ? scope.row.teamOwnProfile : (scope.row.anchor ? scope.row.teamMemberProfile : scope.row.teamOwnProfile)" :query-details="true" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.hostSalaryToAgent')" align="center" min-width="80">
            <template slot-scope="scope">
              <span v-if="!scope.row.hostSalaryToAgent">{{ $t('pages.automaticSalaryPaymentRecord.words.no') }}</span>
              <el-tag v-if="scope.row.hostSalaryToAgent" effect="plain">{{ $t('pages.automaticSalaryPaymentRecord.words.collectedByCaptain') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.recycled')" align="center" min-width="80">
            <template slot-scope="scope">
              <span v-if="!scope.row.recycled">{{ $t('pages.automaticSalaryPaymentRecord.words.no') }}</span>
              <el-tag v-if="scope.row.recycled" type="danger" effect="plain">{{ $t('pages.automaticSalaryPaymentRecord.words.recycled') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.createTime')" align="center" width="160">
            <template slot-scope="scope">
              {{ scope.row.createTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.updateTime')" align="center" width="160">
            <template slot-scope="scope">
              {{ scope.row.updateTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" :label="$t('pages.automaticSalaryPaymentRecord.detailsDrawer.table.actions')" align="center" width="140">
            <template slot-scope="scope">
              <el-button type="text" @click="clickDetailsDrawer(scope.row)">{{ $t('pages.automaticSalaryPaymentRecord.action.view') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
    <policy-details-drawer
      v-if="policyDetailsDrawerVisible"
      :row="thatRow"
      @close="policyDetailsDrawerVisible=false"
    />
  </div>
</template>
<script>
import { deepClone } from '@/utils'
import PolicyDetailsDrawer from './policy-details-drawer'
export default {
  name: 'AutomaticSalaryPaymentDetailsDrawer',
  components: { PolicyDetailsDrawer },
  props: {
    row: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  data() {
    return {
      list: [],
      thatRow: {},
      dateNumber: '',
      drawer: false,
      policyDetailsDrawerVisible: false
    }
  },
  watch: {
    row: {
      handler(newVal) {
        this.drawer = true
        if (newVal) {
          this.nativeRow = deepClone(newVal)
          if (this.nativeRow.salaryDetails) {
            this.list = this.nativeRow.salaryDetails || []
          }
          this.dateNumber = this.nativeRow.dateNumber
        }
      },
      immediate: true
    }
  },
  methods: {
    clickDetailsDrawer(details) {
      this.thatRow = details
      this.policyDetailsDrawerVisible = true
    },
    handleClose() {
      this.drawer = false
      this.$emit('close')
    }
  }
}
</script>
<style scope.d lang="scss">

  </style>
