<template>
  <div class="home">
    <div>
      <!-- 工单基础信息 -->
      <page-add
        @dataChange="getWorkBasicData"
        ref="pageModalRef"
        :defaultInfo="defaultInfo"
        :modalConfig="modalConfigRef"
      ></page-add>
      <el-form-item label="办理结果" label-width="200px" v-if="itemResultFlag">
        <el-input v-model="itemResult" type="textarea" />
      </el-form-item>
    </div>
    <el-button type="primary" @click="handleConfirmClick" style="margin: 0 auto; display: block"
      >确 定</el-button
    >
  </div>
</template>

<script setup>
  import PageAdd from '@/components/page-add';
  import { modalConfig } from './config/modal.config';
  import { usePageModal } from '@/hooks/use-page-add';
  import useSelectStore from '@/store/commonSelect/common';
  import { createPageData, editPageData, getPageListData } from '@/api/main/system/system';
  import { onMounted, ref, watch } from 'vue';
  import { getUnprefixNuber } from '@/utils';

  const { proxy } = getCurrentInstance();

  const formData = ref({});
  const itemResult = ref('');
  const itemResultFlag = ref(false);
  const workBasicData = ref({});
  const callId = ref({});
  const props = defineProps({
    OrderSource: {
      type: String,
      default: '',
    },
    getDefaultInfo: {
      type: Object,
      default: () => ({}),
    },
    inCommingData: {
      type: Object,
      default: () => ({}),
    },
    porpRecordData: {
      type: Object,
      default: () => ({}),
    },
    customerno: {
      type: String,
      default: '',
    },
  });
  watch(props, (nweProps) => {
    initMethod(nweProps);
  });
  onMounted(() => {
    initMethod(props);
  });

  function initMethod(data) {
    defaultInfo.value = { ...data.getDefaultInfo };
    itemResult.value = '';
    itemResultFlag.value = false;
    console.log(data);
    if (data.OrderSource) {
      console.log(modalConfig.formItems);
      console.log(data.OrderSource);
      if (data.OrderSource === '话务' || data.OrderSource === '客服') {
        modalConfig.formItems.map((o) => {
          if (o.field === 'source') {
            o.otherOptions = {
              ...o.otherOptions,
              disabled: true,
            };
          }
        });
      } else {
        modalConfig.formItems.map((o) => {
          if (o.field === 'source') {
            o.otherOptions = {
              ...o.otherOptions,
              disabled: false,
            };
          }
        });
      }

      defaultInfo.value.source = data.OrderSource;
    }
    if (data.inCommingData) {
      defaultInfo.value.callnum = getUnprefixNuber(data.inCommingData.Number);
      callId.value = data.inCommingData.CallID;
      if (data.inCommingData.Number) {
        customerDetail(getUnprefixNuber(data.inCommingData.Number));
      }
    }
    console.log(data.porpRecordData);
    if (JSON.stringify(data.porpRecordData) !== '{}') {
      defaultInfo.value.callnum = data.porpRecordData.caller;
      callId.value = data.porpRecordData.uuid;
    }
    if (data.customerno) {
      customerDetail(data.customerno);
    }
  }
  async function customerDetail(customerno) {
    console.log(customerno);
    const resultData = await getPageListData('/system/customer/CodeInfo/' + customerno);
    console.log(resultData.data, 'resultData.data');
    if (!defaultInfo.value.callnum) {
      defaultInfo.value.callnum = getUnprefixNuber(resultData.data.customerPhone);
      console.log(defaultInfo.value, 'defaultInfo.value');
    }
    defaultInfo.value.caller = resultData.data.customerName;
    defaultInfo.value.project = resultData.data.project;
  }
  const emit = defineEmits([
    'handleDialog',
    'handleClose',
    'handleChatDialog',
    'handleInCommingNumber',
  ]);

  const modalConfigRef = computed(() => {
    //  来源
    const processorSourceItem = modalConfig.formItems.find((item) => item.field === 'source');
    processorSourceItem.options = useSelectStore().dictSourceList;

    //  项目
    const processorProjectItem = modalConfig.formItems.find((item) => item.field === 'project');
    if (processorProjectItem) processorProjectItem.options = useSelectStore().dictProjectList;
    console.log(useSelectStore().dictProjectList);
    // 工单类型
    const workordertypeItem = modalConfig.formItems.find((item) => item.field === 'workordercate');

    workordertypeItem.options = useSelectStore().dictOrderTypeList;

    console.log(workordertypeItem.options, 'workordertypeItem.options');

    return modalConfig;
  });

  // 工单基础信息
  const getWorkBasicData = (item) => {
    if (item.isend === '1') {
      itemResultFlag.value = true;
    } else {
      itemResultFlag.value = false;
    }
    workBasicData.value = item;
  };
  defineExpose({
    getWorkBasicData,
  });
  const handleConfirmClick = () => {
    pageModalRef.value.formRef.ruleFormRef.validate((bool) => {
      if (bool) {
        formData.value = workBasicData.value;
        if (!formData.value.isend) {
          formData.value.isend = '0';
        } else if (formData.value.isend === '1') {
          formData.value.result = itemResult.value;
        }
        // formData.value.callId = callId.value
        if (props.customerno) {
          formData.value.customerno = props.customerno;
        } else {
          formData.value.customerno = formData.value.callnum;
        }

        if (JSON.stringify(props.getDefaultInfo) !== '{}') {
          formData.value.workorderId = props.getDefaultInfo.workorderId;
          editPageData('/order/workorder', formData.value).then((data) => {
            proxy.$modal.msgSuccess('编辑成功！');
            if (props.OrderSource === '自建') {
              emit('handleDialog', true);
            }
          });
        } else {
          let creatUrl = '/order/workorder';
          if (props.OrderSource === '话务') {
            creatUrl = '/order/workorder?callid=' + callId.value;
          }
          createPageData(creatUrl, formData.value).then((data) => {
            proxy.$modal.msgSuccess('新增成功！');
            if (props.OrderSource === '自建') {
              emit('handleDialog', true);
            } else if (props.OrderSource === '话务') {
              emit('handleClose', true);
            } else if (props.OrderSource === '客服') {
              emit('handleChatDialog', true);
            }
          });
        }
      }
    });
  };

  // 1.处理逻辑
  const newCallback = () => {};
  const editCallback = () => {};
  usePageModal(newCallback, editCallback);
  // 2.动态添加部门和角色列表

  // 3.调用hook获取公共变量和函数
  const [pageModalRef, defaultInfo] = usePageModal(newCallback, editCallback);
</script>

<style scoped lang="scss">
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-title {
      font-weight: bold;
    }
  }

  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
</style>
