<!--
 * @Date: 2022-11-17 15:44:24
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-11-17 17:24:07
 * @FilePath: /data-table/src/views/setForm/setField.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="field_name"
          name="field_name"
          is-link
          readonly
          label="字段名称"
          placeholder="字段名称"
          @click="showField = 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-field readonly label="组件属性" />
        <van-row v-for="(item, index) in propertyList" :key="index">
          <van-col>
            <van-field v-model="item.property_code" />
          </van-col>
          <van-col>
            <van-field v-model="item.setting_value" />
          </van-col>
        </van-row>
      </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="showField" round position="bottom">
    <van-picker
      :columns="fieldColumns"
      @cancel="showField = false"
      @confirm="onFieldConfirm"
    />
  </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 field_name = ref("");
const components_name = ref("");
const components_code = ref("");

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

const formData = ref("");
const componentsData = ref("");

onMounted(async () => {
  const form = await queryFormAPI({ form_code: $route.query.code });
  formData.value = form.data;
  formColumns.value = form.data.map((item) => {
    return { text: item.name, value: item.code };
  });
  const components = await getComponentAPI({ form_code: $route.query.code });
  componentsData.value = components.data;
  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;
  // 生成相应下级字段列表
  formData.value.forEach((element) => {
    if (element.code === form_code.value) {
      fieldColumns.value = element.field_list.map((item) => {
        return { text: item.field_name, value: item.field_name };
      });
    }
  });
  // 重置选择字段名称
  field_name.value = "";
};
const onFieldConfirm = ({ selectedOptions }) => {
  showField.value = false;
  field_name.value = selectedOptions[0].text;
  //
  formData.value.forEach((element) => {
    if (element.code === form_code.value) {
      element.field_list.forEach((field) => {
        if (field.field_name === field_name.value) {
          // 查询组件名称
          components_name.value = field.component_name;
          propertyList.value = field.property_list;
        }
      });
    }
  });
};
const onComponentsConfirm = ({ selectedOptions }) => {
  showComponents.value = false;
  components_name.value = selectedOptions[0].text;
  components_code.value = selectedOptions[0].value;
  formData.value.forEach((element) => {
    if (element.code === form_code.value) {
      element.field_list.forEach((field) => {
        if (field.field_name === field_name.value) {
          // 查询组件名称
          components_name.value = field.component_name;
          propertyList.value = field.property_list;
        }
      });
    }
  });
};

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>