<!--
 * @Date: 2022-11-17 15:44:24
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-11-17 16:15:33
 * @FilePath: /data-table/src/views/setForm/addField.vue
 * @Description: 文件描述
-->
<template>
  <div class="add-field">
    <van-nav-bar title="添加表单字段" />
    <van-form @submit="onSubmit" style="margin-top: 1rem">
      <van-cell-group inset>
        <van-field
          v-model="form_name"
          name="form_name"
          is-link
          readonly
          label="表单名称"
          placeholder="表单名称"
          @click="showForm = true"
          required
          :rules="[{ required: true, message: '请选择表单名称' }]"
        />
        <van-field
          v-model="components_name"
          name="components_name"
          is-link
          readonly
          label="组件名称"
          placeholder="组件名称"
          @click="showComponents = true"
          required
          :rules="[{ required: true, message: '请选择组件名称' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">确认</van-button>
      </div>
    </van-form>
  </div>
  <van-popup v-model:show="showForm" round position="bottom">
    <van-picker
      :columns="formColumns"
      @cancel="showForm = false"
      @confirm="onFormConfirm"
    />
  </van-popup>
  <van-popup v-model:show="showComponents" round position="bottom">
    <van-picker
      :columns="componentsColumns"
      @cancel="showComponents = false"
      @confirm="onComponentsConfirm"
    />
  </van-popup>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { addFormFieldAPI, queryFormAPI } from "@/api/form.js";
import { getComponentAPI } from "@/api/component.js";
import { showSuccessToast, showFailToast } from "vant";

import {
  Cookies,
  $,
  _,
  axios,
  storeToRefs,
  mainStore,
  Toast,
  useTitle,
} from "@/utils/generatePackage.js";
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const form_name = ref("");
const form_code = ref("");
const components_name = ref("");
const components_code = ref("");

const formColumns = ref([]);
const componentsColumns = ref([]);
const showForm = ref(false);
const showComponents = ref(false);

onMounted(async () => {
  const form = await queryFormAPI({ form_code: $route.query.code });
  formColumns.value = form.data.map((item) => {
    return { text: item.name, value: item.code };
  });
  const components = await getComponentAPI({ form_code: $route.query.code });
  componentsColumns.value = components.data.map((item) => {
    return { text: item.name, value: item.code };
  });
});

const onFormConfirm = ({ selectedOptions }) => {
  showForm.value = false;
  form_name.value = selectedOptions[0].text;
  form_code.value = selectedOptions[0].value;
};
const onComponentsConfirm = ({ selectedOptions }) => {
  showComponents.value = false;
  components_name.value = selectedOptions[0].text;
  components_code.value = selectedOptions[0].value;
};

const onSubmit = async (values) => {
  const result = await addFormFieldAPI({
    form_code: form_code.value,
    component_code: components_code.value,
  });
  if (result.code) {
    showSuccessToast("新增成功");
  }
};
</script>

<style lang="less" scoped></style>