<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="close"
    @cancel="close"
    cancelText="关闭">
  <a-card :bordered="false">
    <div>
      <div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">订单编号:{{flowInfo.code}}</div>
      <a-row style="margin-bottom: 16px">
        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <span style="color: rgba(0, 0, 0, 0.85)">创建人：{{flowInfo.createBy}}</span>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <span style="color: rgba(0, 0, 0, 0.85)">创建时间：{{flowInfo.createTime}}</span>
        </a-col>
      </a-row>
      <a-card :bordered="false"  title="流程进度">
        <a-steps style="margin-right: 14px;" :direction="isMobile() && 'vertical' || 'horizontal'" :current="flowInfo.seq-1" progressDot>
          <a-step v-for="(sa,index) in flowInfo.list" :key="index" :title="sa.auditor">
            <div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left:8px;"
                  slot="description">
              <div v-if="sa.sequence=='0'&&sa.status=='1'"  style="margin: 8px 0 4px;font-size:16px;" >
                创建单据
              </div>
              <div v-if="sa.status=='1'&&index!=flowInfo.list.length-1&&sa.sequence!='0'" style="margin: 8px 0 4px;font-size:16px;color: #00DB00">
                审核通过
              </div>
              <div v-if="sa.status=='2'" style="margin: 8px 0 4px;font-size:16px;color: red">
                审核驳回
              </div>
              <div v-if="sa.status=='0'" style="margin: 8px 0 4px;font-size:16px;color:lightseagreen">
                待审核
              </div>
              <div v-if="sa.status=='1'&&index==flowInfo.list.length-1" style="margin: 8px 0 4px;font-size:16px;color: #50bfff">
                审核完成
              </div>
              <div v-if="sa.remark!=null&&sa.remark!=''" style="margin: 8px 0 4px">
                备注:{{sa.remark}}
              </div>
              <div v-if="sa.updateTime==null" style="margin: 8px 0 4px">
                时间:{{sa.createTime}}
              </div>
              <div v-if="sa.updateTime!=null" style="margin: 8px 0 4px">
                时间:{{sa.updateTime}}
              </div>
            </div>
          </a-step>
        </a-steps>
      </a-card>
    </div>
  </a-card>
  </j-modal>
</template>

<script>

import {mixinDevice} from '@/utils/mixin.js'
import {searchAuditFlow} from '@/api/api'
const directionType = {
  horizontal: 'horizontal',
  vertical: 'vertical'
}

export default {
  name: "Success",
  components: {
  },
  mixins: [mixinDevice],
  data() {
    return {
      confirmLoading: false,
      visible: false,
      title: '审核流程进度',
      width: 1100,
      directionType,
      flowInfo:[]
    }
  },
  methods: {
    close() {
      this.$emit('close');
      this.visible = false;
      // this.$refs.form.clearValidate();
    },
    edit(record,type) {
      this.visible = true;
      let params=[];
      if (type=='1'){
         params={
          receiptId:record.id,
        }
      }else{
         params={
          shipmentId:record.id
        }
      }

      searchAuditFlow(params).then((res) => {
         this.flowInfo=res;
      });
    },
  }
}
</script>

<style >
.ant-steps-item-description{
  margin-right: 14px !important;
}
</style>