<!-- 空节点提示（红色感叹号） -->
<script setup lang="ts" name="ErrorDialog">
import { computed } from 'vue'
import useWorkFlowStore from '@/store/modules/workFlow'
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  visible: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['update:visible', 'changeTipVisible'])

const workFlowStore = useWorkFlowStore()

const visibleDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val)
  },
})

// 点击去修改
const doAfter = () => {
  emits('changeTipVisible', false)
}
</script>

<template>
  <el-dialog v-model="visibleDialog" title="流程配置检查">
    <el-result icon="warning" :title="`校验失败（${list.length}项错误）`">
      <template #sub-title>
        <div v-if="workFlowStore.approverErrorCount > 0" class="warning-list">
          <div class="content">
            <div class="icon1">
              <el-icon :size="14">
                <circle-close />
              </el-icon>
            </div>
            <span>审批错误： 审批人不能为空<span style="color: red;">（{{ workFlowStore.approverErrorCount }}项）</span></span>
          </div>
        </div>

        <div v-if="workFlowStore.conditonErrorCount > 0" class="warning-list">
          <div class="content">
            <div class="icon1">
              <el-icon :size="14">
                <circle-close />
              </el-icon>
            </div>
            <span>条件错误： 条件分支后不能为空<span style="color: red;">（{{ workFlowStore.conditonErrorCount }}项）</span></span>
          </div>
        </div>
      </template>
      <template #extra>
        <el-button type="primary" @click="doAfter">
          去修改
        </el-button>
      </template>
    </el-result>
  </el-dialog>
</template>

<style scoped lang="scss">
.warning-list {
  display: flex;
  align-items: center;
  padding: 3px 10px;
  background-color: #f2f2f2;
  border-radius: 6px;
  margin-top: 10px;

  .content {
    display: flex;
    align-items: center;
  }

  .icon1 {
    margin-right: 16px;
    margin-top: 4px;
  }
}
</style>