<template>
  <el-dialog :title="title" :visible.sync="visible">
    <el-steps v-show="list.length" class="steps" :active="active" :space="200" finish-status="success" style="padding:16px;padding-top:0px;" align-center>
      <el-step v-for="item in list" :key="item.id" :title="item.name">
        <div slot="description">
          <div v-show="item.isAudited">审核人: {{ item.auditUserName }}</div>
          <div v-show="!item.isAudited">可审核人: {{ item.userNames }}</div>
          <div v-show="!item.isAudited">可审核角色: {{ item.roleNames }}</div>
          <div v-show="item.isAudited">审核时间: {{ item.auditTime | datetime }}</div>
          <div v-show="item.isAudited">
            结果:
            <el-tag v-show="item.auditUserId && item.isPassed" type="success" size="mini">同意</el-tag>
            <el-tag v-show="item.auditUserId && !item.isPassed" type="danger" size="mini">退回再报</el-tag>
          </div>
          <div v-show="item.isAudited">意见:{{ item.result }}</div>
        </div>
      </el-step>
    </el-steps>
    <el-divider v-if="hisList.length" content-position="left">已撤回审核记录</el-divider>
    <el-table v-if="hisList.length" border fit size="small" :data="hisList" class="m-b-10">
      <el-table-column type="index" label="顺序" align="center" width="60" />
      <el-table-column prop="name" label="步骤名称" align="center" />
      <el-table-column prop="name" label="审核状态" align="center">
        <template slot-scope="{ row }">
          <span v-show="row.auditTime">已审</span>
          <span v-show="!row.auditTime">未审</span>
        </template>
      </el-table-column>
      <el-table-column prop="auditTime" label="提交时间" align="center">
        <template slot-scope="{ row }">{{ row.creationTime | datetime }}</template>
      </el-table-column>
      <el-table-column prop="auditUserName" label="审核人" align="center" />
      <el-table-column prop="auditTime" label="审核时间" align="center">
        <template slot-scope="{ row }">{{ row.auditTime | datetime }}</template>
      </el-table-column>
      <el-table-column prop="isPassed" label="审核结果" align="center">
        <template slot-scope="{ row }">
          <el-tag v-show="row.auditUserId && row.isPassed" type="success" size="mini">同意</el-tag>
          <el-tag v-show="row.auditUserId && !row.isPassed" type="danger" size="mini">退回再报</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="result" label="意见" align="center" />
    </el-table>

    <el-divider content-position="left">当前提交审核记录</el-divider>
    <el-table v-loading="loading" border fit size="small" :data="list" :row-class-name="rowClassName" class="m-b-10">
      <el-table-column prop="index" label="顺序" align="center" width="60" />
      <el-table-column prop="name" label="步骤名称" align="center" />
      <el-table-column prop="name" label="审核状态" align="center">
        <template slot-scope="{ row }">
          <span v-show="row.auditTime">已审</span>
          <span v-show="!row.auditTime">未审</span>
        </template>
      </el-table-column>
      <el-table-column prop="auditTime" label="提交时间" align="center">
        <template slot-scope="{ row }">{{ row.creationTime | datetime }}</template>
      </el-table-column>
      <el-table-column prop="auditUserName" label="审核人" align="center" />
      <el-table-column prop="auditTime" label="审核时间" align="center">
        <template slot-scope="{ row }">{{ row.auditTime | datetime }}</template>
      </el-table-column>
      <el-table-column prop="isPassed" label="审核结果" align="center">
        <template slot-scope="{ row }">
          <el-tag v-show="row.auditUserId && row.isPassed" type="success" size="mini">同意</el-tag>
          <el-tag v-show="row.auditUserId && !row.isPassed" type="danger" size="mini">退回再报</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="result" label="意见" align="center" />
    </el-table>
  </el-dialog>
</template>

<script>
import * as flowApi from '@/api/audit-flow'
import waves from '@/directive/waves' // waves directive
export default {
  directives: { waves },
  props: {
    title: {
      type: String,
      default: '审核'
    },
    value: {
      type: Boolean,
      default: false
    },
    progressId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      hisList: [],
      list: [],
      audit: {},
      loading: false,
      active: 0
    }
  },
  watch: {
    value(val) {
      this.visible = val
    },
    visible(val) {
      this.$emit('input', val)
    },
    progressId(newVal) {
      if (newVal) {
        this.getList()
        this.audit.currentProgressId = newVal
      } else {
        this.list = []
      }
    }
  },
  methods: {
    load() {
      this.getList()
    },
    getList() {
      this.loading = true
      flowApi.getProgresses(this.progressId).then(res => {
        this.list = res
        this.active = res.findIndex(t => t.id === this.progressId)
        if (res.length && this.active === res.length - 1 && res[res.length - 1].isPassed) {
          this.active++
        }
        this.loading = false
      })
      flowApi.getHistoryProgresses(this.progressId).then(res => {
        this.hisList = res
      })
    },
    rowClassName(data) {
      return data.row.id === this.progressId ? 'current' : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  ::v-deep tr.current {
    background: #fff38c !important;
  }
}
.steps {
  ::v-deep .el-step.is-center .el-step__description {
    padding-left: 10%;
    padding-right: 10%;
  }
}
</style>
