<template>
  <el-dialog v-loading="loading" :close-on-click-modal="false" :title="title" :visible.sync="visible">
    <el-steps v-show="list.length" :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>审核人: {{ item.auditUserName }}</div>
          <div>审核时间: {{ item.auditTime | date }}</div>
          <div>
            结果:
            <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>意见:{{ item.result }}</div>
        </div>
      </el-step>
    </el-steps>
    <el-table border fit size="small" :data="list" :row-class-name="rowClassName" class="m-b-10">
      <el-table-column prop="index" label="顺序" align="center" />
      <el-table-column prop="name" label="步骤名称" align="center" />
      <el-table-column prop="name" label="审核状态" align="center">
        <template slot-scope="{ row }">
          <span v-show="row.isAudited">已审</span>
          <span v-show="!row.isAudited">未审</span>
        </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 | date }}</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-form ref="dataForm" class="m-t-10" :model="audit" label-position="right" label-width="80px">
      <el-form-item label="意见" prop="note" class="form-item">
        <el-input v-model="audit.note" type="textarea" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-waves type="primary" size="small" icon="el-icon-circle-close" @click="handleAgree">同意</el-button>
      <el-button v-waves type="danger" size="small" icon="el-icon-circle-check" @click="handleFallback">退回再报</el-button>
    </div>
  </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,
      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: {
    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
      })
    },
    rowClassName(data, rowIndex) {
      return data.row.id === this.progressId ? 'current' : ''
    },
    handleAgree() {
      this.audit.isPass = true
      this.loading = true
      flowApi.audit(this.audit).then(() => {
        this.getList()
        this.loading = false
        this.$emit('input', false)
        this.$emit('audited')
      })
    },
    handleFallback() {
      this.audit.isPass = false
      this.loading = true
      flowApi.audit(this.audit).then(() => {
        this.getList()
        this.loading = false
        this.$emit('input', false)
        this.$emit('audited')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  ::v-deep tr.current {
    background: #fff38c !important;
  }
}
</style>
