<template>
  <el-dialog
    v-model="visible"
    :width="width"
    append-to-body
    draggable
    show-close
    :close-on-click-modal = "false"
  >
    <template #header>
      <div class="dialog-title-container">
        <span class="title-label" style="color: #fff">
          <el-icon>
            <Document />
          </el-icon>
          委托单信息</span
        >
        <!-- <el-icon @click="close">
          <Close />
        </el-icon> -->
      </div>
    </template>

    <div style="padding: 8px 24px 16px 24px">
      <el-form size="small" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="签约主体" required>
              <span>{{ form.signingSubject }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="往来单位" required>
              <el-autocomplete
                v-if="form.id == null && view"
                style="width: 100%"
                :fetch-suggestions="querySearchContactCompanyAsync"
                :trigger-on-focus="true"
                v-model="form.contactCompany"
                placeholder="请输入往来单位"
                popper-class="my-autocomplete"
                @select="handleSelectContactCompany"
              >
                <template #default="{ item }">
                  <div
                    style="
                      display: flex;
                      flex-direction: row;
                      justify-content: space-between;
                    "
                  >
                    <div class="name" style="font-size: 12px">
                      {{ item.accountName }}
                    </div>
                  </div>
                </template>
              </el-autocomplete>
              <span v-else>{{ form.contactCompany }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同日期" required>
              <el-date-picker
                v-if="form.id == null && view"
                clearable
                v-model="form.formDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择签约日期"
              >
              </el-date-picker>
              <span v-else>{{ form.formDate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同编号" required>
              <el-input
                v-model="form.formNo"
                placeholder="请输入合同编号"
                v-if="form.id == null && view"
              />
              <span v-else>{{ form.formNo }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          icon="Finished"
          @click="handleSave"
          v-if="form.status == 0 && view"
        >
          保存</el-button
        >

        <el-button @click="close" icon="close" size="small">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { reactive, ref } from "vue";
import {
  getEntrustOrder,
  listTenant,
} from "@/api/business/entrust/entrustOrder";
import { uploadFile } from "@/api/tool/file";
import {
  addEntrustOrder,
  updateEntrustOrder,
} from "../../../../api/business/entrust/entrustOrder";
import useUserStore from "@/store/modules/user";
const { proxy } = getCurrentInstance();
const view = ref(true);
const permissions = useUserStore().permissions;
const all_permission = "*:*:*";
const emptyData = {
  id: null,
  status: 0,
  formDate: proxy.moment().format("YYYY-MM-DD"),
};

const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
  width: {
    type: String,
    default: "800px",
  },
});
const { getList, width } = toRefs(props);

const data = reactive({
  visible: false,
  list: [],
  total: 0,
  query: {
    name: "",
    total: 0,
    pageSize: 15,
    pageNum: 1,
  },
  files: [],
  months: [],
  form: {},
  selection: [],
  baseUrl: import.meta.env.VITE_APP_BASE_API,
  options: {},
});
const { visible, baseUrl, options, files, form, months } = toRefs(data);

function viewable() {
  return (
    permissions.includes(all_permission) ||
    permissions.includes("business:entrustOrder:edit") ||
    permissions.includes("business:entrustOrder:add")
  );
}

function open(id) {
  visible.value = true;
  view.value = viewable();

  reset();
  form.value.id = id;
  form.value.signingSubject = useUserStore().tenant.accountName;
  form.value.tenantId = useUserStore().tenant.id;
  if (id != null) {
    getEntrustOrder(form.value.id).then((res) => {
      if (res.data != null) {
        form.value = res.data;
      }
    });
  }
}
/**
 * 对话框关闭 事件
 */
function close() {
  visible.value = false;
}
/**
 * 加载数据
 */
const loadData = async () => {
  const res = await getEntrustOrder(form.value.id);
  if (res.data != null) {
    form.value = res.data;
    console.log(form.value);
  }
};

function handleSave() {
  if (form.value.tenantId == null || form.value.tenantId === "") {
    proxy.$modal.msgError("请输入签约主体");
    return;
  }
  if (form.value.fromTenantId == null || form.value.fromTenantId === "") {
    proxy.$modal.msgError("请输入往来单位");
    return;
  }
  if (form.value.formNo == null || form.value.formNo === "") {
    proxy.$modal.msgError("请输入合同编号");
    return;
  }
  if (form.value.formDate == null || form.value.formDate === "") {
    proxy.$modal.msgError("请输入合同日期");
    return;
  }
  if (form.value.id != null) {
    updateEntrustOrder(form.value).then((res) => {
      getList.value();
      reset();
      close();
    });
  } else {
    addEntrustOrder(form.value).then((res) => {
      getList.value();
      reset();
      close();
    });
  }
}

function querySearchSigningSubjectAsync(queryString, cb) {
  const query =
    queryString.length > 0
      ? { keyword: queryString, versionId: 4, pageSize: 20, pageNum: 1 }
      : { pageSize: 20, pageNum: 1, versionId: 4 };
  listTenant(query).then((res) => {
    cb(res.rows);
  });
}

function handleSelectSingingSubject(item) {
  form.value.signingSubject = item.accountName;
  form.value.tenantId = item.id;
}

function querySearchContactCompanyAsync(queryString, cb) {
  const query =
    queryString.length > 0
      ? {
          keyword: queryString,
          exceptVersionIds: [0, 4],
          pageSize: 20,
          pageNum: 1,
        }
      : { pageSize: 20, pageNum: 1, exceptVersionIds: [0, 4] };
  listTenant(query).then((res) => {
    cb(res.rows);
  });
}

function handleSelectContactCompany(item) {
  form.value.contactCompany = item.accountName;
  form.value.fromTenantId = item.id;
}

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

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