<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="80vw"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
      >
        <el-col>
          <el-row>
            <el-col :span="8">
              <el-form-item label="审批流名称" prop="name">
                <el-input
                  v-model="formData.name"
                  clearable
                  placeholder="请输入审批流名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="应用模块" prop="type">
                <el-select
                  v-model="formData.type"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option label="假勤" :value="1"></el-option>
                  <el-option label="行政" :value="2"></el-option>
                  <el-option label="财务" :value="3"></el-option>
                  <el-option label="人事" :value="4"></el-option>
                  <el-option label="其他" :value="5"></el-option>
                  <el-option label="报销" :value="6"></el-option>
                  <el-option label="发票" :value="7"></el-option>
                  <el-option label="合同" :value="8"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="审批类型" prop="flow_cate">
                <el-select
                  v-model="formData.flow_cate"
                  placeholder="审批类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option label="日常审批" :value="1"></el-option>
                  <el-option label="报销审批" :value="2"></el-option>
                  <el-option label="发票审批" :value="3"></el-option>
                  <el-option label="合同审批" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="流程说明" prop="remark">
                <el-input
                  v-model="formData.remark"
                  clearable
                  type="textarea"
                  placeholder="请输入流程说明"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="8">
          <el-form-item
            label="流程类型"
            prop="flow_detail.check_type"
            clearable
            :style="{ width: '100%' }"
          >
            <el-radio-group
              v-model="formData.flow_detail.type"
              @change="checkTypeFn"
            >
              <el-radio :label="1">固定审批</el-radio>
              <el-radio :label="2">授权审批人</el-radio>
              <el-radio :label="3">可回退审批 </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <p v-if="formData.flow_detail.type == 1">
          <el-row v-for="(item, index) in formData.flow_detail.step">
            <el-col :span="12">
              <el-form-item label="审批流程">
                <el-select
                  v-model="formData.flow_detail.step[index].type"
                  placeholder="审批类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option label="当前部门负责人" value="1"></el-option>
                  <el-option label="上一级部门负责人" value="2"></el-option>
                  <el-option label="指定用户(任意一人)" value="3"></el-option>
                  <el-option label="指定用户(多人会签)" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="item.type == '3' || item.type == '4'">
              <el-form-item label="指定人员">
                <el-input
                  clearable
                  v-model="item.user[0].name"
                  placeholder="指定人员"
                  @click="test(index)"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="24">
            <el-form-item prop="field126">
              <el-button
                type="primary"
                @click="
                  formData.flow_detail.step.push({
                    type: '',
                    user: [{ id: '', name: '' }],
                  })
                "
                >其他联系人</el-button
              >
            </el-form-item>
          </el-col>
        </p>
        <el-row v-if="formData.flow_detail.type == 2">
          <el-col :span="12">
            <el-form-item label="">
              <span>无需审批</span>
            </el-form-item>
          </el-col>
        </el-row>

        <p v-if="formData.flow_detail.type == 3">
          <el-row v-for="(item, index) in formData.flow_detail.step">
            <el-col :span="12">
              <el-form-item label="审批流程" prop="copy_uids">
                <el-input
                  v-model="item.type"
                  clearable
                  placeholder="请输入流程名称"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="指定人员">
                <el-input
                  v-model="item.user[0].name"
                  @click="test(index)"
                  clearable
                  placeholder="指定人员"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="24">
            <el-form-item prop="field126">
              <el-button
                type="primary"
                @click="
                  formData.flow_detail.step.push({
                    type: '',
                    user: [{ id: '', name: '' }],
                  })
                "
                >其他联系人</el-button
              >
            </el-form-item>
          </el-col>
        </p>

        <el-form-item label="抄送人ID" prop="copy_unames">
          <el-input
            v-model="formData.copy_to[0].name"
            clearable
            @click="isCompany = true"
            placeholder="请输入抄送人"
          />
        </el-form-item>

        <!-- <el-form-item label="创建人ID" prop="admin_id">
          <el-input
            v-model="formData.admin_id"
            clearable
            placeholder="请输入创建人ID"
          />
        </el-form-item> -->
        <!-- <el-form-item label="状态 1启用，0禁用" prop="status">
          <el-select v-model="formData.status">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="删除人ID" prop="delete_user_id">
          <el-input
            v-model="formData.delete_user_id"
            clearable
            placeholder="请输入删除人ID"
          />
        </el-form-item> -->
      </el-form>
    </popup>
    <el-dialog v-model="isCompany" title="选择人员" width="60%">
      <DialogIndex @customEvent="customEvent" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="flowEdit">
import type { FormInstance } from "element-plus";
import Popup from "@/components/popup/index.vue";
import { apiFlowCreat, apiFlowDetil } from "@/api/examined";
import { timeFormat } from "@/utils/util";
import DialogIndex from "./dialog_index.vue";
import type { PropType } from "vue";
defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({}),
  },
});
const isCompany = ref(false);
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");

// 弹窗标题
const popupTitle = computed(() => {
  return mode.value == "edit" ? "编辑审批流程表" : "新增审批流程表";
});

// 表单数据
const formData = reactive({
  //   flow_detail: {
  //     type: 1,
  //     layer: [
  //       { type: 1 },
  //       { type: 3, user: [{ id: 1, name: "sdf" }] },
  //       { name: "看见对方" },
  //     ],
  //   },

  id: "",
  name: "",
  check_type: "",
  type: "",
  flow_cate: "",
  remark: "",
  //   admin_id: "",
  flow_detail: {
    type: 1,
    step: [{ type: "", user: [{ id: "", name: "" }] }],
  },
  //   flowType: [""],
  //   flowUnamesA: [""],
  //   flowUidsA: [],
  //   flowName: [""],
  //   flowUnamesB: [""],
  //   flowUidsB: [],
  copy_to: [{ id: "", name: "" }],
});
//单选框改变时清空单选下的表单数据
const checkTypeFn = () => {
  formData.flow_detail.step = [{ type: "", user: [{ id: "", name: "" }] }];
};
// 表单验证
const formRules = reactive<any>({
  name: [
    {
      required: true,
      message: "请输入审批流名称",
      trigger: ["blur"],
    },
  ],
  check_type: [
    {
      required: true,
      message: "请输入1固定审批,2授权审批人",
      trigger: ["blur"],
    },
  ],
  type: [
    {
      required: true,
      message: "请输入应用模块,1假勤,2行政,3财务,4人事,5其他,6报销,7发票,8合同",
      trigger: ["blur"],
    },
  ],
  flow_cate: [
    {
      required: true,
      message: "请输入应用审批类型id",
      trigger: ["blur"],
    },
  ],

  remark: [
    {
      required: true,
      message: "请输入流程说明",
      trigger: ["blur"],
    },
  ],
});
// dialog弹出框选择时i=-1代表抄送人,其余为flow_detail的step下标
let i = -1;
const test = (index: number) => {
  isCompany.value = true;
  i = index;
};
function customEvent(data: any) {
  isCompany.value = false;
  if (i == -1) {
    formData.copy_to[0].id = data.id;
    formData.copy_to[0].name = data.name;
  } else {
    formData.flow_detail.step[i].user[0].id = data.id;
    formData.flow_detail.step[i].user[0].name = data.name;
  }
  i = -1;
}
// 获取详情
const setFormData = async (data: Record<any, any>) => {
  let res = await apiFlowDetil(data.id);
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = res[key];
    }
  }
  formData.flow_detail.type = Number(formData.flow_detail.type);
};

const getDetail = async (row: Record<string, any>) => {
  // const data = await apiFlowDetail({
  //     id: row.id,
  // });
  // setFormData(data);
};
const a = {};
// 提交按钮
const handleSubmit = async () => {
  await formRef.value?.validate();
  mode.value == "edit"
    ? await apiFlowCreat(formData)
    : await apiFlowCreat(formData);
  popupRef.value?.close();
  emit("success");
};

//打开弹窗
const open = (type = "add") => {
  mode.value = type;
  popupRef.value?.open();
};

// 关闭回调
const handleClose = () => {
  emit("close");
};

defineExpose({
  open,
  setFormData,
  getDetail,
});
</script>
