<template>
  <div>
    <a-form
      ref="formRef"
      :model="scriptForm"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
      style="margin-left: 2.4rem"
      autocomplete="off"
    >
      <a-form-item
        v-if="deviceTypeStr !== 'SENSOR'"
        label="鉴权脚本"
        name="'params'"
        :rules="[{ required: true, message: '请选择鉴权脚本' }]"
      >
        <div style="display: flex; align-items: center">
          <div>
            <Select
              @change="handleAuthChange"
              placeholder="请选择"
              v-model:value="scriptForm.authScriptId"
              style="width: 305px"
              show-search
              :options="selectAuthOptions"
              :filter-option="handleAuthSearch"
              allowClear
            />
          </div>
          <div>
            <span
              @click="handleCreateOrEditAuth('add')"
              class="ml-2"
              style="color: #409eff; cursor: pointer"
              size="small"
              >新建转换脚本</span
            >
          </div>
        </div>
        <a-button @click="handleCreateOrEditAuth('test')" class="mt-4" type="primary"
          >测试脚本</a-button
        >
      </a-form-item>
      <a-form-item
        label="上行脚本"
        name="'params'"
        :rules="[{ required: true, message: '请选择上行脚本' }]"
      >
        <div style="display: flex; align-items: center">
          <div>
            <Select
              @change="handleUpChange"
              placeholder="请选择"
              v-model:value="scriptForm.upScriptId"
              style="width: 305px"
              show-search
              :options="selectUpOptions"
              :filter-option="handleSearch"
              allowClear
            />
          </div>
          <div>
            <span
              @click="handleCreateOrEdit('add')"
              class="ml-2"
              style="color: #409eff; cursor: pointer"
              size="small"
              >新建转换脚本</span
            >
          </div>
        </div>
        <a-button @click="handleCreateOrEdit('test')" class="mt-4" type="primary"
          >测试脚本</a-button
        >
      </a-form-item>
    </a-form>
    <ConverScriptModal @register="registerModal" @success="handleSuccess" />
    <ConverScriptModal @register="registerAuthModal" @success="handleAuthSuccess" />
  </div>
</template>
<script lang="ts" setup name="index">
  import { ref, Ref, onMounted, reactive } from 'vue';
  import { SelectTypes } from 'ant-design-vue/es/select';
  import { Select } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
  import ConverScriptModal from '/@/views/scriptmanage/converscript/ConverScriptModal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  const props = defineProps({
    deviceTypeStr: { type: String, default: '' },
  });

  const scriptForm = reactive({
    authScriptId: '',
    upScriptId: '',
  });
  const selectUpOptions: Ref<SelectTypes['options']> = ref([]);

  const selectAuthOptions: Ref<SelectTypes['options']> = ref([]);

  const { createMessage } = useMessage();

  const upScriptIdStr = ref('');

  const authScriptIdStr = ref('');

  onMounted(async () => {
    selectUpOptions.value = await getAllScriptType('TRANSPORT_TCP_UP');
    selectAuthOptions.value = await getAllScriptType('TRANSPORT_TCP_AUTH');
  });

  const getAllScriptType = async (type) => {
    const rest = await getScriptManageMeList({ scriptType: type });
    return rest.map((m) => ({ label: m.name, value: m.id }));
  };

  const handleSuccess = async ({ res, text }) => {
    if (text !== 'test') {
      const rest = await getAllScriptType('TRANSPORT_TCP_UP');
      selectUpOptions.value = rest;
      scriptForm.upScriptId = res?.id;
      upScriptIdStr.value = res?.id;
    }
  };

  const handleAuthSuccess = async ({ res, text }) => {
    if (text !== 'test') {
      const rest = await getAllScriptType('TRANSPORT_TCP_AUTH');
      selectAuthOptions.value = rest;
      scriptForm.authScriptId = res?.id;
      authScriptIdStr.value = res?.id;
    }
  };

  const handleUpChange = (v) => {
    upScriptIdStr.value = v;
    scriptForm.upScriptId = v;
  };

  const handleAuthChange = (v) => {
    authScriptIdStr.value = v;
    scriptForm.authScriptId = v;
  };

  const [registerModal, { openModal }] = useModal();

  const [registerAuthModal, { openModal: openAuthModel }] = useModal();

  //TODO: 待优化

  const handleCreateOrEditAuth = (c) => {
    if (c === 'add') {
      openAuthModel(true, {
        isUpdate: true,
        isView: false,
        isTest: false,
        isText: 'confirm',
        isTitle: 'add',
      });
    } else {
      if (!authScriptIdStr.value) return createMessage.error('请先选择对应脚本');
      openAuthModel(true, {
        isUpdate: false,
        isTest: true,
        record: authScriptIdStr.value,
        isText: 'test',
        isTitle: 'test',
      });
    }
  };

  const handleCreateOrEdit = (c) => {
    if (c === 'add') {
      openModal(true, {
        isUpdate: true,
        isView: false,
        isTest: false,
        isText: 'confirm',
        isTitle: 'add',
      });
    } else {
      if (!upScriptIdStr.value) return createMessage.error('请先选择对应脚本');
      openModal(true, {
        isUpdate: false,
        isTest: true,
        record: upScriptIdStr.value,
        isText: 'test',
        isTitle: 'test',
      });
    }
  };

  const getFormData = async () => {
    if (props.deviceTypeStr === 'SENSOR') {
      if (!scriptForm.upScriptId) {
        return createMessage.error('请先选择对应脚本');
      }
    } else {
      if (!scriptForm.authScriptId || !scriptForm.upScriptId) {
        return createMessage.error('请先选择对应脚本');
      }
    }
    return {
      ...scriptForm,
      type: 'TCP',
    };
  };

  const resetFormData = () => {
    // resetFields();
  };

  const setFormData = (v) => {
    scriptForm.authScriptId = v?.authScriptId;
    scriptForm.upScriptId = v?.upScriptId;
    // setFieldsValue(v);
    upScriptIdStr.value = v?.upScriptId;
    authScriptIdStr.value = v?.authScriptId;
  };

  const handleSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {
    return option.label.includes(inputValue);
  };

  const handleAuthSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {
    return option.label.includes(inputValue);
  };

  defineExpose({
    getFormData,
    resetFormData,
    setFormData,
  });
</script>
<style lang="less" scoped></style>