<template>
  <!-- 审批待办 -->
  <div id="approvalPend">
    <FilterTable
      ref="table"
      :columns="columns"
      :searchInput="searchInput"
      :dataSource="dataSource"
      :total="total"
      @changeParams="changeParams"
    />

    <div class="btn-list">
      <a-button type="stop" style="margin-right: 20px;" @click="handleOk">
        取消
      </a-button>
      <a-button type="add" @click="onSubmit">
        确定
      </a-button>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import FilterTable from '@/components/filterTable'
import { getPendingApproveList } from '@/api/index/index'

export default {
  components: {
		FilterTable
  },
  data() {
    return {
      columns: [
				{
					title: '序号',
					dataIndex: 'orderNum',
					key: 'orderNum',
					width: 120,
					align: 'center',
					scopedSlots: { customRender: 'orderNum' },
					customCell: this.clickRow
				},
				{
					title: '待办类型',
					dataIndex: 'processStatus',
					key: 'processStatus',
					align: 'center',
					scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender'
					},

					customRender: (text, record, index) => {
						if (text === '2') {
							return <span style="color:#2d60d6">待审批</span>
						} else if (text === '4') {
							return <span style="color:red">审批驳回</span>
						}
					},
					customCell: this.clickRow
				},
				{
					title: '所属模型',
					dataIndex: 'modelCode',
					key: 'modelCode',
					align: 'center',
					scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender'
					},
					customCell: this.clickRow
				},
				{
					title: '操作人',
					dataIndex: 'createBy',
					key: 'createBy',
					align: 'center',
					customCell: this.clickRow
				},
				{
					title: '操作时间',
					dataIndex: 'createTime',
					key: 'createTime',
					align: 'center',
					customCell: this.clickRow
				}

			],
			dataSource: [],

      searchInput: null,
			total: 0,
      params: {
				page: 1,
				pageSize: 10
			}

    }
  },
  mounted() {
		this.getPendingApproveList()
  },
  methods: {
		// 磁贴-审批待办
		getPendingApproveList() {
      if (this.params.pageNum) {
        this.params.page = this.params.pageNum
      }
			getPendingApproveList(this.params).then((res) => {
        if (res.code === 200) {
          const resRows = res.rows
          resRows.forEach((item, index) => {
            item.orderNum = index + 1
          })
          this.total = res.total
          this.dataSource = resRows
        }
        // console.log('审批待办:', res)
      })
		},

		clickRow(record) {
			return {
				on: {
					click: () => {
						this.goPath(record)
					}
				}
			}
		},

		goPath(item) {
				const { modelId, modelCode, tableStatus } = item
					var id = modelId
				if (!(+tableStatus)) {
					this.$router.push({
						path: '/model/attribute/',
						query: {
							id,
							modelCode
						}
					})
				} else {
					this.$message.info('模型数据表未创建')
				}
			},

    handleOk() {
      this.$emit('handleOk')
    },
    changeParams(key, value) {
			this.$set(this.params, key, value)
		},
    onSubmit() {
      this.$emit('handleOk')
    }

  },
  watch: {
		params: {
			deep: true,
			immediate: true,
			handler(val) {
				this.getPendingApproveList(0)
			}
		}
	}
}
</script>

<style lang='less' scoped>
#approvalPend{
  .btn-list{
    margin: 30px 0 0 0;
    text-align: center;
  }

}
</style>
