<template>
  <el-dialog
    title="公积金信息"
    v-model="visible"
    :width="width"
    append-to-body
    draggable
    @close="close"
    class="dialog-form"
    :close-on-click-modal = "false"
  >
    <!-- 功能按钮 -->
    <div style="padding: 8px 24px 16px 24px">
      <el-form size="small" label-width="120px" v-model="form">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="客户名称">
              <div>{{ form.companyName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务状态">
              <el-select
                v-model="form.status"
                :disabled="isDisabled"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in selectStatus"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="form-btns-container" style="height: 40px">
      <el-button size="small" style="float: right" icon="close" @click="close">
        取消</el-button
      >
    </div>
    <el-image-viewer
      v-if="showViewer"
      :url-list="currentFileList"
      @close="closeImages"
      :initial-index="showIndex"
    />
  </el-dialog>
</template>
<script setup>
import {
  getOnceDetail,
  saveOnceDetail,
  updateDetail,
} from "@/api/business/crm/serviceWorkOrder";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const visible = ref(false);
const width = ref(800);
const selections = ref([]);
const currentSource = ref(null);
const showViewer = ref(false);

const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});
const selectStatus = ref([
  {
    label: "未开始",
    value: 0,
    color: "#fff",
  },
  {
    label: "进行中",
    value: 1,
    color: "#FFB836",
  },
  {
    label: "已完成",
    value: 3,
    color: "#2FCB81",
  },
]);
const { getList } = toRefs(props);
const total = ref(0);

const employeeEmptyData = {
  id: null,
  title: "",
  remark: "",
  employeeName: "",
  departmentName: "",
  idCardImage: "",
  idCardImageBack: "",
  idiograph: "",
  details: [],
  editStatus: true,
};

const form = ref({});

const emptyForm = {
  housingFundConfirm: {},
  housingFundDeclare: {},
};

function isDisabled() {
  return form.value.status === 3;
}

function open(detail) {
  visible.value = true;
  form.value = { ...emptyForm, ...detail };
  loadData();
}

function loadData() {
  getOnceDetail(form.value).then((res) => {
    form.value = { ...proxy.deepClone(emptyForm), ...res.data };
  });
}

function close() {
  visible.value = false;
  reset();
}

function reset() {
  form.value = proxy.deepClone(emptyForm);
}

function handleSave() {
  proxy.$modal
    .confirm("确认保存么？")
    .then(() => {
      const saveValue = proxy.deepClone(form.value);
      saveOnceDetail(saveValue).then((res) => {
        proxy.$modal.msgSuccess("保存成功");
        reset();
        close();
        getList.value();
      });
    })
    .catch((err) => {
      proxy.$modal.msg("取消保存");
    });
}

// 暴露给父组件的方法
defineExpose({
  open,
});
</script>