<template>
  <div>
    <PlusPage
      ref="plusPageInstance"
      :columns="tableConfig"
      :request="getList"
      :is-card="true"
      :search="{
        labelWidth: 100,
        showNumber: 3,
        defaultValues: defaultValues
      }"
      :table="{
        actionBar: { buttons, type: 'link', width: 180 },
        adaptive: { offsetBottom: 50 },
        onFormChange: handleTableChange
      }"
      :pageInfoMap="{ page: 'pageNum', pageSize: 'pageSize' }"
    >
      <template #table-title>
        <el-row class="button-row">
          <el-button
            class="hover:"
            size="default"
            type="success"
            @click="handleCreate"
          >
            新增
          </el-button>
        </el-row>
      </template>
    </PlusPage>
    <!-- 弹窗编辑 -->
    <PlusDialogForm
      ref="dialogForm"
      v-model="form"
      v-model:visible="dialogVisible"
      :form="{
        columns,
        labelPosition: 'right',
        labelWidth: 100,
        rowProps: { gutter: 20 },
        colProps: { span: 24 },
        rules
      }"
      :dialog="{ title: dialogTitle + '菜单', width: 800, confirmLoading }"
      @confirm="handleSubmit"
      @close="handleClose"
    />
    <PlusDialog
      v-model="detailsVisible"
      :hasFooter="false"
      title="密钥"
      width="400"
    >
      <PlusDescriptions
        :column="24"
        :columns="descriptionsColumns"
        :data="descriptionsData"
      />
    </PlusDialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, toRefs, h } from "vue";
import type { FormRules } from "element-plus";
import { ElMessage, ElMessageBox, ElInput, ElButton } from "element-plus";
import {
  type FieldValues,
  type PlusColumn,
  PlusDescriptions,
  PlusDialog,
  PlusDialogForm,
  PlusPage,
  PlusPageInstance,
  useTable
} from "plus-pro-components";
import { deleteIpAccount } from "@/api/system/ipAccount";
import {
  switchIpAccountInterfaceStatus,
  addOrEditIpAccountInterfaceRef,
  generateIpAccountToken,
  getIpAccountInterfaceList,
  getIpInterfaceOptionList,
  delAccountInterface
} from "@/api/system/ipInterface";
import { isString } from "@pureadmin/utils";
import { useRoute } from "vue-router";

defineOptions({
  name: "IpAccountIndex"
});

const route = useRoute();

onMounted(() => {
  getInterfaceOptions();
});

const plusPageInstance = ref<PlusPageInstance | null>(null);

const defaultValues = {
  accountId: isString(route.query.accountId)
    ? route.query.accountId.toString()
    : "",
  accNo: isString(route.query.accNo) ? route.query.accNo.toString() : ""
};

const getList = async (query: Record<string, any>) => {
  let res = await getIpAccountInterfaceList(query);
  return {
    data: res.list,
    total: res.total
  };
};

// 重新请求列表接口
const refresh = () => {
  plusPageInstance.value?.getList();
};

const handleTableChange = (values: any) => {
  console.log(values);
  ElMessageBox.confirm("确定修改此数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      try {
        let data = {
          id: values.row.id,
          status: values.row.status
        };
        let res = await switchIpAccountInterfaceStatus(data);
        if (res.code === 200) {
          ElMessage.success("修改成功");
        } else {
          ElMessage.error(res.msg);
        }
      } catch (e) {
        ElMessage.error("修改失败");
      }
    })
    .finally(() => {
      refresh();
    });
};

const dialogTitle = computed(() => (state.isCreate ? "新增" : "编辑"));

// 表格数据
const tableConfig: PlusColumn[] = [
  {
    label: "账户号",
    prop: "accNo",
    valueType: "input",
    fieldProps: {
      disabled: true
    },
    hideInTable: true
  },
  {
    label: "账户id",
    prop: "id",
    hideInSearch: true,
    hideInTable: true
  },
  {
    label: "接口名称",
    prop: "interfaceName",
    hideInSearch: true
  },
  {
    label: "接口厂商",
    prop: "manufacturer",
    hideInSearch: true
  },
  {
    label: "状态",
    prop: "status",
    valueType: "switch",
    fieldProps: {
      activeValue: "normal",
      inactiveValue: "disable"
    },
    editable: true,
    hideInSearch: true
  },
  {
    label: "状态",
    prop: "status",
    valueType: "select",
    fieldProps: {
      options: [
        { label: "正常", value: "normal" },
        { label: "禁用", value: "disable" }
      ],
      clearable: true
    },
    hideInTable: true
  },
  {
    label: "备注",
    prop: "remark",
    fieldProps: {
      showOverFlowTooltip: true
    },
    hideInSearch: true
  },
  {
    label: "是否回调",
    prop: "callback",
    valueType: "tag",
    fieldProps: value => ({
      type: value === true ? "success" : "info"
    }),
    formatter: value => (value === true ? "是" : value === false ? "否" : ""),
    hideInSearch: true
  },
  {
    label: "创建时间",
    prop: "addTime",
    valueType: "time-picker",
    hideInSearch: true
  },
  {
    label: "创建人",
    prop: "addUserName",
    hideInSearch: true
  }
];

/*--------------------表单--------------------*/

// 表单实例
const dialogForm = ref(null);

interface State {
  dialogVisible: boolean;
  detailsVisible: boolean;
  confirmLoading: boolean;
  selectedIds: number[];
  isCreate: boolean;
  form: {};
  rules: FormRules;
  descriptionsData: {};
}

const state = reactive<State>({
  dialogVisible: false,
  detailsVisible: false,
  confirmLoading: false,
  selectedIds: [],
  isCreate: false,
  form: {},
  rules: {
    interfaceId: [{ required: true, message: "请选择接口", trigger: "blur" }],
    token: [{ required: true, message: "请生成token", trigger: "blur" }],
    secret: [{ required: true, message: "请生成密钥", trigger: "blur" }]
  },
  descriptionsData: {}
});

const interfaceOptions = ref<Array<{ label: string; value: string }>>([]);

const getInterfaceOptions = async () => {
  let res = await getIpInterfaceOptionList();
  console.log(res);
  interfaceOptions.value = res.data;
};

const columns: PlusColumn[] = [
  {
    label: "账户号",
    prop: "accNo",
    valueType: "input",
    fieldProps: {
      disabled: true
    },
    colProps: {
      span: 12
    }
  },
  {
    label: "选择接口",
    prop: "interfaceId",
    valueType: "select",
    fieldProps: {
      activeValue: "normal",
      inactiveValue: "disable"
    },
    options: computed(() => interfaceOptions.value),
    optionsMap: {
      label: "name",
      value: "id"
    },
    colProps: {
      span: 12
    }
  },
  {
    label: "是否回调",
    prop: "callback",
    valueType: "select",
    fieldProps: {
      options: [
        { label: "是", value: true },
        { label: "否", value: false }
      ]
    },
    colProps: {
      span: 12
    }
  },
  {
    label: "回调地址",
    prop: "callbackUrl",
    valueType: "input",
    colProps: {
      span: 12
    }
  },
  {
    label: "回调次数",
    prop: "callbackNum",
    valueType: "input-number",
    fieldProps: {
      min: 0
    },
    colProps: {
      span: 12
    }
  },
  {
    label: "状态",
    prop: "status",
    valueType: "radio",
    fieldProps: {
      options: [
        { label: "正常", value: "normal" },
        { label: "禁用", value: "disable" }
      ]
    },
    colProps: {
      span: 12
    }
  },
  {
    label: "token",
    prop: "token",
    renderField: (_, onChange) => {
      return h(
        ElInput,
        {
          placeholder: "点击生成按钮获取token",
          disabled: true,
          // 返回VNode时，需要手动调用 renderField 的onChange 回调把值传给表单
          onChange
        },
        {
          append: !state.isCreate
            ? null
            : () =>
                h(
                  ElButton,
                  {
                    class: "bg-[#409EFF]! text-white!",
                    onClick: async () => {
                      try {
                        let res = await generateIpAccountToken();
                        console.log(res);
                        if (res.code === 200) {
                          ElMessage.success("获取token成功");
                          form.value = {
                            ...form.value,
                            token: res.data.token,
                            secret: res.data.secret
                          };
                        } else {
                          ElMessage.error(res.msg);
                        }
                      } catch (e) {
                        ElMessage.error("获取token失败");
                      }
                    }
                  },
                  { default: () => "生成" }
                )
        }
      );
    },
    colProps: {
      span: 12
    }
  },
  {
    label: "secret",
    prop: "secret",
    valueType: "input",
    fieldProps: {
      disabled: true,
      placeholder: "点击生成按钮获取secret",
      type: "textarea",
      rows: 3
    },
    colProps: {
      span: 12
    }
  },
  {
    label: "备注",
    prop: "remark",
    valueType: "input",
    fieldProps: {
      type: "textarea",
      rows: 3,
      maxlength: 200,
      showWordLimit: true
    },
    colProps: {
      span: 12
    }
  }
];

const descriptionsColumns: PlusColumn[] = [
  {
    label: "token",
    prop: "token",
    valueType: "copy",
    descriptionsItemProps: {
      span: 24,
      className: "break-all"
    }
  },
  {
    label: "secret",
    prop: "secret",
    valueType: "copy",
    descriptionsItemProps: {
      span: 24,
      className: "break-all"
    }
  }
];

// 创建
const handleCreate = (): void => {
  form.value = {
    ...defaultValues,
    status: "normal"
  };
  state.isCreate = true;
  state.dialogVisible = true;
};

const handleSubmit = async (values: FieldValues) => {
  console.log(values, "Submit");
  confirmLoading.value = true;
  if (state.isCreate) {
    try {
      let params = form.value;
      let res = await addOrEditIpAccountInterfaceRef(params);
      if (res.code === 200) {
        ElMessage.success("新增成功");
        confirmLoading.value = false;
        dialogVisible.value = false;
        refresh();
      } else {
        ElMessage.error(res.msg);
      }
    } finally {
      confirmLoading.value = false;
    }
  } else {
    // 编辑
    try {
      let params = form.value;
      let res = await addOrEditIpAccountInterfaceRef(params);
      if (res.code === 200) {
        ElMessage.success("修改成功");
        confirmLoading.value = false;
        dialogVisible.value = false;
        refresh();
      } else {
        ElMessage.error(res.msg);
      }
    } finally {
      confirmLoading.value = false;
    }
  }
};

const handleClose = () => {
  console.log(dialogForm.value.formInstance);
};

const { buttons } = useTable();

buttons.value = [
  {
    // 修改
    text: "修改",
    code: "edit",
    // props v0.1.16 版本新增函数类型
    props: {
      type: "primary"
    },
    onClick(params) {
      console.log(params.row);
      let paramsRow = params.row;
      Object.assign(paramsRow, defaultValues);
      form.value = paramsRow;
      state.isCreate = false;
      state.dialogVisible = true;
    }
  },
  {
    // 修改
    text: "查看密钥",
    code: "interface",
    // props v0.1.16 版本新增函数类型
    props: {
      type: "primary"
    },
    onClick(val) {
      console.log(val);
      detailsVisible.value = true;
      descriptionsData.value = {
        token: val.row.token,
        secret: val.row.secret
      };
    }
  },
  {
    // 删除
    text: "删除",
    code: "delete",
    // props v0.1.16 版本新增计算属性支持
    props: computed(() => ({ type: "danger" })),
    confirm: {
      options: {
        draggable: true,
        message: "确定删除此数据吗？"
      }
    },
    onConfirm: async params => {
      try {
        let res = await delAccountInterface(params.row.id);
        if (res.code === 200) {
          ElMessage.success("删除成功");
          refresh();
        } else {
          ElMessage.error(res.msg);
        }
      } catch (e) {
        ElMessage.error("删除失败");
      }
    }
  }
];

const {
  form,
  confirmLoading,
  rules,
  dialogVisible,
  detailsVisible,
  descriptionsData
} = toRefs(state);
</script>
