<template>
  <el-form :model="formData" label-width="auto" label-position="left">
    <!-- 处置接收单位 -->

    <FormMessage
      v-model="listQuery"
      :formList="formData"
      ref="elform"
      :rules="rules"
    >
      <!-- 自定义插槽（人员标签） -->
      <template #czJsdwdm>
        <el-select
          v-model="listQuery.czJsdwdm"
          placeholder="请选择处置接收单位"
          style="width: 240px"
          :disabled="true"
        >
          <el-option
            v-for="item in deptList"
            :key="item.value"
            :label="item.label"
            :value="item.value.toString()"
          />
        </el-select>
      </template>
    </FormMessage>

    <!-- 审批流程 -->
    <div class="approval-flow">
      <div class="approval-flow">
        <div class="step" v-for="(item, index) in step" :key="`${index}step`">
          <div class="icon">
            <div class="circle"></div>
            <div class="line"></div>
          </div>
          <div>
            <div>{{ item.title }}</div>
            <div class="desc">
              <div class="description flexcc">
                <!-- 使用方案1 + 方案2 -->
                <div
                  class="description-item"
                  :class="{ 'disabled-item': item.default }"
                >
                  {{ item.fqr }}
                </div>
                <div class="description-item">{{ item.fqbm }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckPost, qcckPut } from "@/api/qcckApi.js";
import { fa } from "element-plus/es/locale.mjs";
import { selectUserDeptPage } from "@/api/user-manage";
const { proxy } = getCurrentInstance();
const { D_GS_BK_CZJSDWLX, D_GS_BK_TJFS } = proxy.$dict(
  "D_GS_BK_CZJSDWLX",
  "D_GS_BK_TJFS"
); //获取字典数据
const listQuery = ref({}); //表单
const deptList = ref([]); //部门列表
const formData = ref([
  {
    label: "处置接收单位",
    prop: "czJsdwdm",
    type: "slot"
  },
  {
    label: "处置接收单位类型",
    prop: "czJsdwlx",
    type: "select",
    options: D_GS_BK_CZJSDWLX,
    disabled: true
  },
  // {
  //   label: "提交方式",
  //   prop: "bkTjfs",
  //   type: "radio",
  //   options: D_GS_BK_TJFS,
  //   disabled: true
  // },
  {
    label: "签收时间",
    prop: "bkSjQs",
    type: "datetime",
    disabled: true
  }
]);
const rules = reactive({
  bkBt: [{ required: true, message: "请选择处置接收单位", trigger: "blur" }],
  // bkObj: [{ required: true, message: "请选择提交方式", trigger: "blur" }],
  bkSjQs: [{ required: true, message: "请选择签收时间", trigger: "change" }]
});
const step = ref([
  { fqr: "发起人", fqbm: "发起部门", title: "发起申请", default: true },
  { fqr: "发起人", fqbm: "发起部门", title: "审核确认", default: false },
  { fqr: "发起人", fqbm: "发起部门", title: "审批确认", default: false }
]);

onMounted(() => {
  getdepartmentList();
});
// 获取部门列表
const getdepartmentList = () => {
  selectUserDeptPage().then((res) => {
    deptList.value = res?.records.map((item) => ({
      label: item.deptName,
      value: item.deptId
    }));

    console.log(deptList.value, D_GS_BK_CZJSDWLX);
    // tableData.value = res?.records;
  });
};

// 接收父组件传入的数据并回显
const setFormData = (data) => {
  listQuery.value = {
    ...data // 假设 data 包含所有需要的字段
  };
  step.value = [
    { fqr: "发起人", fqbm: "发起部门", title: "发起申请", default: true },
    {
      fqr: data.bkshrXm || "系统管理", // 审核人姓名
      fqbm: data.bkshrSsbmmc || "西藏", // 审核部门
      title: "审核确认"
    },
    {
      fqr: data.bksprXm || "测试", // 审批人姓名
      fqbm: data.bksprSsbmmc || "西藏", // 审批部门
      title: "审批确认"
    }
  ];
};

// 3. 暴露方法给父组件
defineExpose({
  setFormData
});
</script>

<style lang="scss" scoped>
.step {
  //   position: relative;
  display: flex;
  gap: 5px;
  box-sizing: border-box;
  .desc {
    margin: 5px;
    color: #929090;
    width: 350px;
  }
  .icon {
    // position: absolute;
    // top: 0;
    // left: 0;
    text-align: center;
    .circle {
      height: 14px;
      width: 14px;
      border-radius: 50%;
      background-color: rgb(196, 219, 240);
    }
    .line {
      margin: 0 auto;
      width: 0;
      height: calc(100% - 14px);
      border: 1px dashed rgb(196, 219, 240);
    }
  }
}

.unit-selection {
  display: flex;
  align-items: center;
  gap: 20px;
}
.description {
  gap: 10px;
}
.description-item {
  width: 300px;
  height: 30px;
  padding: 0 20px;
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: rgb(131, 132, 135);
  box-sizing: border-box;
}
.disabled-item {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
</style>
