<template>
  <!-- 已审核 -->
  <div id="approval-wrap">
    <div class="table-operations">
      <a-button type="view" :disabled="$refs.table&&$refs.table.selectedRows.length!==1" @click="getShowPopup" >审批日志</a-button>
    </div>
    <div class="table-content">
      <FilterTable
        ref="table"
        :columns="columns"
        :dataSource="approveedDataSource"
        :total="total"
        @changeParams="changeParams"/>
    </div>
    <a-modal
      class="popupBox"
      v-model="showPopup"
      :title="'审批日志'"
      :footer="null"
    >
      <Journal
        :columns="logColumns"
        :params="params"
        @handleOk="handleOk"
      />

    </a-modal>
  </div>
</template>

<script type="text/ecmascript-6">
import Journal from './Journal'
import FilterTable from '@/components/filterTableScroll'
import { getApproveedList } from '@/api/auditMasterData/approve'

export default {
  components: {
    FilterTable,
    Journal
  },
  props: {
    columns: {
      type: Array,
      required: true
    },
    logColumns: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      approveedDataSource: [],
      selectedRows: [],

      // 日志
      showPopup: false,
      logDataSource: [],
      total: 0,
      params: {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  mounted() {
    this.getApproveedList() // 已经审批表数据
    this.$EventBus.$on('changeApproved', () => {
      this.getApproveedList()
    })
  },
  methods: {
    // 审批日志
    getShowPopup() {
      this.showPopup = true
      const selectedRows = this.$refs.table.selectedRows
      selectedRows.forEach((item) => {
        this.params.recordId = item.recordId
        this.params.id = item.id
      })
    },
    changeParams(key, value) {
      this.$set(this.params, key, value)
    },

   // 已审批表数据
    getApproveedList() {
      this.params.modelId = this.$route.query.id

      getApproveedList(this.params).then((res) => {
        if (res.rows !== undefined) {
          const resRows = res.rows
          const dataSource = []
          resRows.forEach((item, index) => {
            item.operationType = this.operationTypeFun(item.operationType)
            item.key = index + 1
            const logJson = JSON.parse(item.logJson)
            switch (item.processStatus) {
              case '':
                item.processStatus = ''
                break
              case '3':
                item.processStatus = '通过'
                break
              case '4':
                item.processStatus = '驳回'
                break
            }
            dataSource.push(Object.assign(item, logJson)
            )
          })

          this.approveedDataSource = dataSource
          this.total = res.total
          // console.log('已审核: ', res)
        }
      })
    },

    operationTypeFun(operationType) {
      switch (operationType) {
        case '0':
          operationType = '新增'
          break
        case '1':
          operationType = '变更'
          break
        case '2':
          operationType = '启用'
          break
        case '3':
          operationType = '停用'
          break
        case '4':
          operationType = '删除'
          break
      }
      return operationType
    },
    // 审批日志
    handleOk() {
      this.showPopup = false
    }

  },
  watch: {
    params: {
      deep: true,
      immediate: true,
      handler(val) {
        this.getApproveedList(0)
      }
    }
  }

}
</script>

<style lang='less' scoped>
.table-operations {
  margin: 5px 0 15px;
}
</style>
