<script lang="ts" setup name="ProcessNode">
import {
  Aim, Rank, Remove,
} from '@element-plus/icons-vue'
import chooseLab from './chooseLab.vue'

// 逻辑代码
const props = defineProps({
  // 默认数据
  default: {
    type: Object,
    default: () => {
      return {
        id: '',
        step: 1,
        executiveItem: '',
        executiveDept: '',
        executivePerson: '',
        measureState: '',
        currentCertifications: '',
        requireCertifications: '',
        updateTime: '',
        backPerson: '',
        backReason: '',
        backTime: '',
        distributePerson: '',
        distributeTime: '',
        startTime: '',
        overTime: '',
      }
    },
  },
  // 检定环节可编辑
  deptEdit: {
    type: Boolean,
    default: true,
  },
  // 人员和证书数可编辑
  personEdit: {
    type: Boolean,
    default: true,
  },
  // 步骤
  step: {
    type: Number,
    default: 1,
  },
})

const processNodeData = ref({
  id: '',
  step: 1,
  executiveItem: '',
  executiveDept: '',
  executivePerson: '',
  measureState: '',
  measureStateName: '',
  currentCertifications: 0,
  requireCertifications: 0,
  updateTime: '',
  backPerson: '',
  backReason: '',
  backTime: '',
  distributePerson: '',
  distributeTime: '',
  startTime: '',
  overTime: '',
})

// 选择实验室
const chooseLabDialog = ref()
const clickChoose = () => {
  chooseLabDialog.value.initDialog(false)
}
</script>

<template>
  <div class="process-node">
    <div class="header">
      <div class="step">
        {{ props.step }}
      </div>
      <div class="buttons">
        <el-icon class="icon-button" title="移除">
          <remove />
        </el-icon>
        <el-icon class="icon-button handle" title="移动">
          <rank />
        </el-icon>
      </div>
    </div>
    <div>
      <div class="line">
        <span class="label">检定环节</span>
        <el-input v-model="processNodeData.executiveDept" class="process-input" size="small" :disabled="!props.deptEdit">
          <template #append>
            <el-button :icon="Aim" size="small" link @click="clickChoose" />
          </template>
        </el-input>
      </div>
      <div class="line">
        <span class="label">检定人员</span><el-input v-model="processNodeData.executivePerson" class="process-input" size="small" :disabled="!props.personEdit" />
      </div>
      <div class="line">
        <span class="label">应出具证书</span><el-input-number v-model="processNodeData.requireCertifications" class="process-input" size="small" :disabled="!props.personEdit" /><span class="unit"> 份</span>
      </div>
      <div v-show="processNodeData.measureStateName" class="line">
        <span class="label">当前状态</span><span class="process-input">{{ processNodeData.measureStateName }}</span>
      </div>
      <div v-show="processNodeData.updateTime" class="line">
        <span class="label">更新时间</span><span class="process-input">{{ processNodeData.updateTime }}</span>
      </div>
    </div>
    <choose-lab ref="chooseLabDialog" />
  </div>
</template>

<style lang="scss" scoped>
.process-node {
  // display: inline-block;
  margin-right: 10px;
  width: 250px;
  height: 215px;
  border: 1px solid #e0e0e0;
  padding: 5px 15px;
  border-radius: 5px;
  background-color: #fafafa;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .step {
      line-height: 28px;
      font-size: 16px;
      color: #3d7eff;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .icon-button {
      color: #999;
      margin-left: 5px;
      font-size: 16px;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;

    .label {
      width: 80px;
      font-size: 14px;
    }

    .process-input {
      flex: 1;
      font-size: 14px;
    }

    .unit {
      margin-left: 5px;
      font-size: 14px;
    }
  }
}
</style>