<template>
  <!-- 主数据审核 -->
  <div id="audit-wrap">
    <div class="header">
      <div class="title">主数据审核</div>
      <div>模型:{{ modelName }}</div>
      <div>代码:{{ modelCode }}</div>
      <div class="change-view" @click="goModelView"><a-icon type="swap" /></div>
    </div>
    <div class="main">
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="待审批">
          <PendApproval :columns="columns" :logColumns="logColumns"/>
        </a-tab-pane>
        <a-tab-pane key="2" tab="已审批" force-render>
          <Approved :columns="columns" :logColumns="logColumns"/>
        </a-tab-pane>
      </a-tabs>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
import PendApproval from './components/PendApproval'
import Approved from './components/Approved'

import { getColumnsByModelId } from '@/api/auditMasterData/approve'
const basePath = '/modelView/modelView'
var id = null
var modelName = null
var Code = null
export default {
  beforeRouteEnter(to, from, next) {
    id = to.query.id
    modelName = to.query.modelName
    Code = to.query.modelCode

    if (!id) {
      next(
        {
          path: basePath,
          query: {
            redirectPath: to.path
          }
        }
      )
    } else {
      next()
    }
  },
  beforeRouteLeave(to, from, next) {
    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
    this.$destroy(true)
    next()
  },

  data() {
    return {
      modelName,
      id: '',
      modelCode: Code,

      columns: [
        {
          title: '序号',
          dataIndex: 'key',
          key: 'key',
          align: 'center',
          fixed: 'left',
          width: 100
        },
        {
          title: '审批结果',
          dataIndex: 'processStatus',
          key: 'processStatus',
          align: 'center',
          scopedSlots: { customRender: 'processStatus' },
          fixed: 'left',
          width: 100
        },
        {
          title: '审批意见',
          dataIndex: 'approveDesc',
          key: 'approveDesc',
          align: 'center',
          scopedSlots: { customRender: 'approveDesc' },
          fixed: 'left',
          width: 100
        },
        {
          title: '操作类型',
          dataIndex: 'operationType',
          key: 'operationType',
          align: 'center',
          scopedSlots: { customRender: 'operationType' },
          // fixed: 'left',
          width: 100
        }
      ],
      logColumns: [
        {
          title: '序号',
          dataIndex: 'key',
          key: 'key',
          align: 'center',
          fixed: 'left',
          width: 100
        },
        {
          title: '操作类型',
          dataIndex: 'operationType',
          key: 'operationType',
          align: 'center'

        },
        {
          title: '审批结果',
          dataIndex: 'processStatus',
          key: 'processStatus',
          align: 'center',
           customRender: (text, record, index) => {
            if (text === '通过') {
              return <span style="color:#2d60d6">通过</span>
            } else if (text === '驳回') {
              return <span style="color:red">驳回</span>
            }
          }
        },
        {
          title: '审批意见',
          dataIndex: 'approveDesc',
          key: 'approveDesc',
          align: 'center',
          scopedSlots: { customRender: 'approveDesc' }
        },
        {
          title: '审批人',
          dataIndex: 'approver',
          key: 'approver',
          align: 'center',
          scopedSlots: { customRender: 'approver' }
        },
        {
          title: '审批人电话',
          dataIndex: 'approverTel',
          key: 'approverTel',
          align: 'center',
          scopedSlots: { customRender: 'approverTel' }
        },
        {
          title: '送审时间',
          dataIndex: 'createTime',
          key: 'createTime',
          align: 'center'
        },
        {
          title: '审批时间',
          dataIndex: 'updateTime',
          key: 'updateTime',
          align: 'center'
        }
      ],
      dataSource: []
    }
  },
  components: {
    PendApproval,
    Approved
  },
  mounted() {
    this.id = this.$route.query.id
    this.selectColumnsByModelId()
  },
  methods: {
    // 表头
    selectColumnsByModelId() {
      getColumnsByModelId(this.id).then((res) => {
        if (res.data !== undefined) {
          var resData = res.data
          var newarr = resData.filter((item) => item.COLUMN_NAME !== 'record_id' && item.COLUMN_NAME !== 'dataStatus')
          newarr.forEach((item) => {
            var columnsIndex = {}
            columnsIndex.title = item.COLUMN_COMMENT
            columnsIndex.dataIndex = item.COLUMN_NAME
            columnsIndex.key = item.COLUMN_NAME
            columnsIndex.align = 'center'
            columnsIndex.scopedSlots = {}
            columnsIndex.scopedSlots.customRender = item.COLUMN_NAME
            this.columns.push(columnsIndex)
          })
          // console.log('表头this.columns: ', res)
        }
      })
    },

    goModelView() {
      this.$router.push(
        { path: basePath,
          query: {
            redirectPath: this.$route.path
          }
        }
      )
    },

    callback(key) {
    }

  }
}
</script>

<style lang='less' scoped>
#audit-wrap {
  // width: 100%;
  margin: 0 20px;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 25px 0;
  box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
  .header{
		display: flex;
		align-items: center;
		position: relative;
		padding: 0px 20px;
		&::before{
			content: '';
			width: 4px;
			height: 26px;
			background-color: #3b75f5;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		>div{
			font-size: 18px;
			color: #777;
			margin-right: 14px;
			font-weight: 700;
		}
		.title{
			color: #000;
			font-weight: 700;
			font-size: 20px;
			margin-right: 20px;
		}
		.change-view{
			width: 32px;
			height: 32px;
			background: #fff;
      cursor: pointer;
			border-radius: 50%;
			text-align: center;
			line-height: 32px;
			font-size: 1.5em;
			font-weight: 700;
		}
	}
  .main {
    padding: 0 40px;
    margin-top: 20px;
    .table-operations {
      margin: 30px 0 35px;
    }
  }
}
</style>
