<template>
  <a-modal :open="visible" :title="title" :cancelText="cancelText" :okText="okText" @ok="submit" @cancel="cancel">

    <a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <template v-if="formState.columns===false">
        <div>请检查columns定义</div>
      </template>
      <template v-else>
        <!-- 列转换 -->
        <template :key="index" v-for="(column, index) in formState.columns">
          <!--文本-->
          <template v-if="column.type === 'text'">
            <a-form-item ref="column.dataIndex" :label="column.title" :name="column.dataIndex">
              <a-input v-model:value="column.dataIndex" />
            </a-form-item>
          </template>
          <!--多行文本-->
          <template v-else-if="column.type === 'textArea'">
            <a-form-item ref="column.dataIndex" :label="column.title" :name="column.dataIndex">
              <a-textarea v-model:value="column.dataIndex" />
            </a-form-item>
          </template>
          <!--数值-->
          <template v-else-if="column.type === 'number'">
            <a-form-item ref="column.dataIndex" :label="column.title" :name="column.dataIndex">
              <a-input-number v-model:value="column.dataIndex" />
            </a-form-item>
          </template>
          <!--单选-->
          <template v-else-if="column.type === 'radio'">
            <a-form-item ref="column.dataIndex" :label="column.title" :name="column.dataIndex">
              <a-radio-group @change="changeRadio" :value="modelValue">
                <a-radio v-for="d in  column.options" :key="d" :value="d.value">{{
                    d.label
                  }}</a-radio>
              </a-radio-group>
            </a-form-item>
          </template>
          <!--下拉选-->
          <template v-if="column.type === 'select'">
            <a-form-item ref="column.dataIndex" :label="column.title" :name="column.dataIndex">
              <a-select @change="changeSelect(column.dataIndex,value)" :value="modelValue" :label="column.title">
                <a-select-option v-for="d in column.options" :key="d" :value="d.value">
                {{d.label}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </template>
          <!--多选-->
          <template v-if="column.type === 'checkbox'">
            <a-form-item ref="column.dataIndex" :label="column.title" :name="column.dataIndex">
              <a-checkbox-group @change="changeCheckbox" :value="modelValue">
                <a-checkbox v-for="d in column.options" :key="d" :value="d.value">
                {{d.label}}</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
          </template>
        </template>
      </template>
    </a-form>
  </a-modal>
</template>
<script>
    import {
    message
  } from "@hwork/ant-design-vue";
  import {
    save
  } from "@/api/module/config";
  import "./index.less";
  import { Modal as M } from "@hwork/ant-design-vue";
  import {
    defineComponent,
    reactive,
    ref,
    toRaw
  } from "vue";
  const key = "save";
  const MProps = M.props;
  export default defineComponent({
    name: "pro-modal",
    /// 数据来源
    props: {
      ///Object.assign({}, MProps),
      visible: {
        type: Boolean,
      },
      saveModalState: {
        type: Object,
      },
      modalTitle: {
        type: String,
        default: "弹窗"
      },
      cancelText: {
        type: String,
        default: "取消"
      },
      okText: {
        type: String,
        default: "提交"
      },
      ///表单提交的内容数据
      // formState: {
      //   type: Array,
      //   default:[]
      // },
      ///数据校验规则
      // rules:{
      //   type: Array,
      //   default:[]
      // },
      param: {
        type: Object,
      },
      /// 数据来源
      // fetch: {
      //   type: Function,
      //   required: false,
      // },
      /// 数据解析
      // columns: {
      //   type: Array,
      //   required: true,
      // },
      /// 头工具栏
      // toolbar: {
      //   type: Array,
      // },
      // defaultToolbar: {
      //   type: Boolean,
      //   default: true
      // },
      /// 行工具栏
      // operate: {
      //   type: Array || Boolean,
      //   default: false,
      // },
      /// 分页参数
      // pagination: {
      //   type: [Object, Boolean],
      //   default: false,
      // },
    },
    emit: ["close"],
    setup(props, context) {
      // console.log("context",context)
      const formRef = ref();
      const formState = reactive({
        formData: [],
        enable: true,
        visible: props.visible,
        saveModalState: props.saveModalState == false ? false : props.saveModalState,
        // cancelText:props.cancelText,
        // okText:props.cancelText,
        // formState:props.formState,//表单属性
        // rules:props.rules ,//校验规则
        columns: props.saveModalState == false ? false : props.saveModalState.columns == false ? false : props
          .saveModalState.columns, // 分页props.saveModalState.columns, // 字段
      });
      const formRules = {
        name: [{
          required: true,
          message: "请输入配置名",
          trigger: "blur"
        }],
        key: [{
          required: true,
          message: "请输入配置键",
          trigger: "blur"
        }],
        value: [{
          required: true,
          message: "请输入配置值",
          trigger: "blur"
        }],
      };

      const submit = (e) => {
        console.log("props", props)
        console.log("e", e)
        console.log("formRef.value", formRef.value)
        console.log("e.value", e.value)
        console.log("props", props.saveModalState)
        console.log("formState",formState)
        var row = toRaw(formState);
        console.log("toRaw(formState)",row)
        // message.loading({
        //   content: "提交中...",
        //   key,
        // });
        // formRef.value
        //   .validate()
        //   .then(() => {
        //     save(toRaw(formState)).then((response) => {
        //       if (response.success) {
        //         message.success({
        //           content: "保存成功",
        //           key,
        //           duration: 1,
        //         }).then(()=>{
        //           cancel();
        //         });
        //       } else {
        //         message.error({
        //           content: response.msg,
        //           key,
        //           duration: 1,
        //         }).then(()=>{
        //           cancel();
        //         });
        //       }
        //     });
        //   })
        //   .catch((error) => {
        //     console.log("error", error);
        //   });
      };

      const cancel = (e) => {
        //表单数据重置
        formRef.value.resetFields();
        //props.visible = false;
        //table刷新、modal隐藏
        context.emit("close", false);
      };

      const changeSelect = function (dataIndex,value) {
        console.log("changeSelect dataIndex",dataIndex)
        console.log("changeSelect value",value)
        console.log("context",context)
        context.emit("update:modelValue", value);
      };

      const changeRadio = function (value) {
        console.log("changeRadio",value)
        console.log("context",context)
        context.emit("update:modelValue", value.target.value);
      };

      const changeCheckbox = function(value) {
        console.log("context",context)
          context.emit("update:modelValue", value);
      }

      return {
        submit,
        cancel,
        formRef,
        formState,
        formRules,
        //表单数据改变相关方法
        changeSelect,
        changeRadio,
        changeCheckbox,
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 18
        },
      };
    },
  });
</script>
