<template>
  <el-dialog v-model="dialog.visible" :title="dialog.title" width="90%" :before-close="handleClose" append-to-body>
    <el-form ref="recodeRef" :model="recodeForm" label-width="80%">
      <el-row>
        <el-form-item label="发起时间" prop="operationDate" label-width="60px">
          <el-date-picker v-model="recodeForm.operationDate" clearable type="date" value-format="YYYY-MM-DD" placeholder="请选择发起时间" disabled>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发起系统" prop="fromSystem" label-width="100px" style="margin-left: 10px">
          <el-select v-model="recodeForm.fromSystem" placeholder="发起系统" style="width: 200px" disabled>
            <el-option v-for="dict in sys_from_system" :key="dict.value" :label="dict.label" :value="dict.value" :disabled="true"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否存在异常" prop="isError" label-width="120px" style="margin-left: 10px">
          <el-input v-model="recodeForm.isError" placeholder="是否存在异常" disabled />
        </el-form-item>
      </el-row>
    </el-form>
    <el-card shadow="never">
      <el-table v-loading="loading" :data="callbackList">
        <el-table-column label="发起时间" align="center" prop="operationDate" width="160">
          <template #default="scope">
            <span>{{ parseTime(scope.row.operationDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发起系统" align="center" prop="fromSystem">
          <template #default="scope">
            <dict-tag :options="sys_from_system" :value="scope.row.fromSystem" />
          </template>
        </el-table-column>
        <el-table-column label="变更内容" align="center" prop="changeMsg" width="180" />
        <el-table-column label="变更前姓名" align="center" prop="oldName" width="140" />
        <el-table-column label="变更前性别" align="center" prop="oldGender">
          <template #default="scope">
            <dict-tag :options="sys_user_sex" :value="scope.row.oldGender" />
          </template>
        </el-table-column>
        <el-table-column label="变更前出生日期" align="center" prop="oldBirthday" width="140">
          <template #default="scope">
            <span>{{ parseTime(scope.row.oldBirthday, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变更前证件类型" align="center" prop="oldIdType" >
          <template #default="scope">
            <dict-tag :options="sys_id_type" :value="scope.row.oldIdType" />
          </template>
        </el-table-column>
        <el-table-column label="变更前证件号码" align="center" prop="oldIdNo" width="180"/>

        <el-table-column label="变更后姓名" align="center" prop="newName" width="140"/>
        <el-table-column label="变更后性别" align="center" prop="newGender" >
          <template #default="scope">
            <dict-tag :options="sys_user_sex" :value="scope.row.newGender" />
          </template>
        </el-table-column>
        <el-table-column label="变更后出生日期" align="center" prop="newBirthday" width="140">
          <template #default="scope">
            <span>{{ parseTime(scope.row.newBirthday, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变更后证件类型" align="center" prop="newIdType" >
          <template #default="scope">
            <dict-tag :options="sys_id_type" :value="scope.row.newIdType" />
          </template>
        </el-table-column>
        <el-table-column label="变更后证件号码" align="center" prop="newIdNo" width="180"/>

      </el-table>
    </el-card>
    <el-card shadow="hover">
      <el-steps :active="active" finish-status="finish" :status="changeStaus">
        <el-step v-for="(step, index) in steps" :key="index" :title="step.title" :description="step.description" :icon="step.icon">
          <template v-if="step.subSteps" #description>
            <div>
              {{ step.description }}
              <div v-for="subStep in step.subSteps">
                <el-steps :active="subStep.subActive" finish-status="finish" class="mt-2">
                  <el-step
                    v-for="(step, subIndex) in subStep.Steps"
                    :key="subIndex"
                    :title="step.title"
                    :description="step.description"
                    :icon="step.icon"
                    :status="subStep.status"
                  ></el-step>
                </el-steps>
              </div>
            </div>
          </template>
        </el-step>
      </el-steps>
    </el-card>
  </el-dialog>
</template>
<script setup="CustomerChangeView" lang="ts">

import {getChangeInventoryDetail} from "@/api/customer/customerChange";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_from_system } = toRefs<any>(proxy?.useDict('sys_from_system'));
const { sys_id_type } = toRefs<any>(proxy?.useDict('sys_id_type'));
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const recodeRef = ref<ElFormInstance>();
const loading = ref(false);
const callbackList = ref<any[]>([]);
const emit = defineEmits(['update:detailVisible']);
const changeStaus = ref('');

const props = defineProps({
  detailVisible: Boolean,
  changeId: String
});

const recodeForm = reactive({
  operationDate: undefined,
  fromSystem: undefined,
  isError: undefined
});
const dialog = reactive<DialogOption>({
  visible: false,
  title: '客户重要资料变更追踪清单'
});
//步骤条设置
const active = ref(1);
const steps = ref([
  { title: '客户重要资料变更发起', description: '', icon: 'Edit' },
  {
    title: '各系统处理流程',
    description: '',
    icon: 'Upload',
    subSteps: [
      {
        subActive: 1,
        Steps: [
          { title: '', description: '', icon: 'Edit' },
          { title: '', description: '', icon: 'Upload' },
          { title: '', description: '', icon: 'Picture' }
        ],
        status: ''
      }
    ]
  },
  { title: '处理结果', description: '', icon: 'Picture' }
]);

const rest = () => {
  recodeRef.value?.resetFields();
  callbackList.value = [];
  steps.value = [];
};
const updateDialog = async () => {
  const { detailVisible, changeId } = props;
  if (detailVisible) {
    rest();
    const res = await getChangeInventoryDetail(changeId);
    recodeForm.operationDate = res.data.record.operationDate;
    recodeForm.fromSystem = res.data.record.fromSystem;
    recodeForm.isError = res.data.record.errorMessage ? '是' : '否';
    callbackList.value = res.data.recordList;
    stepsValue(res.data.record, res.data.callback);
    dialog.visible = true;
  }
};

const stepsValue = (record: any, callbackData: any) => {
  active.value = record.changeStatus === '1' ? 2 : record.changeStatus === '10' ? 3 : 1;
  changeStaus.value = record.changeStatus === 'process' ? 2 : record.changeStatus === '10' ? 'success' : 'error';
  steps.value = [
    { title: '客户重要资料变更发起', description: record.operationDate, icon: 'Edit' },
    {
      title: '各系统处理流程',
      description: active.value === 1 ? '' : record.operationDate,
      icon: 'Upload',
      subSteps: getSubSteps(callbackData)
    },
    { title: '处理结果', description: active.value === 3 ? record.completionDate : '', icon: 'Picture' },
  ];

};

const getSubSteps = (callbackData: any) => {
  const subSteps = [];
  callbackData.forEach((item: any) => {
    let active = item.status === '0' ? 1 : 2;
    subSteps.push({
      subActive: active,
      Steps: [
        {
          title: item.system === 'IND' ? '个险核心信息接收' : item.system === 'GRP' ? '团险核心信息接收' : '健康险核心信息接收',
          description: item.sendTime,
          icon: 'Edit'
        },
        { title: '处理结果', description: active == 1 ? '' : item.calBackTime + ' ' + (active === 1 ? '' : item.status === '1' ? '处理成功' : '处理失败'), icon: 'Picture' }
      ],
      status: item.status === '0' ? 'process' : item.status === '1' ? '' : 'error'
    });
  });
  return subSteps;
};
//关闭弹窗
const handleClose = (done: () => void) => {
  dialog.visible = false;
  emit('update:detailVisible', false);
  done();
};

watch(
  () => ({
    detailVisible: props.detailVisible,
    changeId: props.changeId
  }),
  (detailVisible, changeId) => {
    updateDialog();
  },
  { deep: true, immediate: true }
);

// 确保 dialog.value.visible 和父组件的 visible 属性同步
watch(
  () => props.detailVisible,
  (newVal) => {
    emit('update:detailVisible', newVal);
    dialog.visible = newVal;
  }
);

//监听dialog.visible变化传递父组件
watch(dialog.visible, (newVal) => {
  emit('update:detailVisible', newVal);
});
</script>
