<script setup lang="ts">
import {
  queryFlowRecord,
} from "@/api/flow";

const dialogVisible = ref(false);
const dialogTitle = ref("审核流程");

const close = () => {
  dialogVisible.value = false;
};

const recordList = ref<any[]>([]);
const openFlowStepDrawer = (insId: string) => {
  queryFlowRecord(insId).then((res) => {
    recordList.value = res.data;
  });
  dialogVisible.value = true;
};

defineExpose({
  openFlowStepDrawer,
  close,
});
</script>

<template>
  <el-drawer
    v-model="dialogVisible"
    direction="rtl"
    size="400"
    append-to-body
    destroy-on-close
  >
    <template #header>
      <h4 v-text="dialogTitle"></h4>
    </template>
    <template #default>
      <el-scrollbar>
        <div class="check-container">
          <el-timeline style="max-width: 600px">
            <el-timeline-item
              v-for="(activity, index) in recordList"
              :key="index"
              :timestamp="activity.created"
            >
              <el-card>
                <h4><el-text class="mx-1">{{activity.currentStep}}</el-text>
                  <el-tag v-if="activity.currentType === 'wf-start'" type="success">发起</el-tag>
                  <el-tag v-if="activity.currentType === 'wf-end'" type="success">结束</el-tag>
                  <el-tag v-if="activity.currentType === 'wf-flow' && activity.state === '0'" type="info">待审核</el-tag>
                  <el-tag v-if="activity.currentType === 'wf-flow' && activity.state === '1'" type="success">通过</el-tag>
                  <el-tag v-if="activity.currentType === 'wf-flow' && activity.state === '-1'" type="error">驳回</el-tag>
                  <el-tag v-if="activity.currentType === 'wf-flow' && activity.state === '2'" type="error">已撤回</el-tag>
                </h4>
                <p>
                  <el-text class="mx-1" v-if="activity.currentStep=='开始'">发起人员:{{activity.auditUser}}</el-text>
                  <el-text class="mx-1" v-if="activity.currentStep !== '结束' && activity.currentStep !=='开始'">接收人员:{{activity.auditUser}}</el-text>
                </p>
                <p><el-text class="mx-1">接收时间:{{activity.created}}</el-text></p>
                <p><el-text class="mx-1" v-if="activity.auditTime">办理时间:{{activity.auditTime}}</el-text></p>
                <p><el-text class="mx-1" v-if="activity.auditTime">办理意见:{{activity.opinion}}</el-text></p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-scrollbar>
    </template>
    <template #footer>
      <!--      <div style="flex: auto">-->
      <!--        <el-button @cl1ick="close">取消</el-button>-->
      <!--        <el-button type="primary" @click="sureToSave">保存</el-button>-->
      <!--      </div>-->
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
:deep(.el-drawer__header) {
  margin: 0;
}
.check-container {
  font-size: 14px;
}
</style>
