<template>
  <a-spin :spinning="loading" >
    <a-form v-bind="formItemLayout" style="background:#fafafa; border-radius: 10px; padding-top:20px; margin-bottom:10px;" >
      <a-row>
        <a-col :span="24">
          <a-form-item label="版本" v-bind="validateInfos.title">
            <a-input v-model:value="formData.title" placeholder="请输入版本" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="课程类型" v-bind="validateInfos.twoTitle" >
            <j-dict-select-tag type='list' v-model:value="formData.twoTitle" dictCode="kclx" placeholder="请选择课程类型1111" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="是否使用" v-bind="validateInfos.sfsy">
            <j-dict-select-tag type='radio' v-model:value="formData.sfsy" dictCode="yn" placeholder="请选择是否使用" :disabled="disabled"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <a-row>
      <a-col :span="24" style="text-align:left; margin-left:10px;">
        <a-button type="primary" @click="handleOneType" preIcon="ant-design:plus-outlined">新增项目</a-button>
      </a-col>
      <a-col :span="24" v-for="(item,index) in zyJxdgMainTable.dataSource" :key="index">
        <a-row style="margin:10px;">
          <a-col :span="6" style="padding-right:10px;">
            <a-input v-model:value="item.title" placeholder="请输入标题" :disabled="disabled" class="input-title"/>
          </a-col>
          <a-col :span="6" style="padding-right:4px;">
            <j-dict-select-tag  type='list' v-model:value="item.type" dictCode="jxdglx" placeholder="请选择填写类型" :disabled="disabled" style="	width: 100%;"/>
          </a-col>
          <a-col :span="6">
            <a-select  placeholder="请选择关联项目" v-model:value="item.guanlian" :disabled="disabled" style="margin-left:-12px;width: 100%;">
              <a-select-option  value="">请选择关联项目</a-select-option>
              <a-select-option :value="peizhi.sort" v-for="(peizhi,index2) in zyJxdgMainTable.dataSource" :key="index2">{{peizhi.title}}</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <j-dict-select-tag type='list' v-model:value="item.sfsglxm" dictCode="yn" placeholder="请选择是否是关联项目" :disabled="disabled"/>
          </a-col>
          <a-col :span="18">
            <a-input v-model:value="item.tsy" placeholder="请输入提示语" :disabled="disabled" class="Prompt-language" />
          </a-col>
          <a-col :span="6">
            <a-button type="danger" @click="handleOneDel(item,index)"  style="margin-left:10px">删除</a-button>
          </a-col>
          <!-- 单行文本	1	
          多行文本	2	
          富文本	3	
          表单	4	
          表格	5	 -->
          <a-col v-if="item.type==='4' || item.type==='5' || item.type==='9'|| item.type==='10'">
            <a-row>
              <a-col :span="24">
                  <a-button type="primary"  @click="handleTwoType(item)" class="margin10" preIcon="ant-design:plus-outlined">新增字段</a-button>
              </a-col>
              <a-col :span="24" v-for="(twoItem,index2) in item.zyJxdgPzxxList" :key="index2">
                <a-row>
                  <a-col :span="18">
                    <a-input v-model:value="twoItem.title" placeholder="请输入选项" :disabled="disabled" class="fields-add"/>
                  </a-col>
                  <a-col :span="6">
                    <a-button type="danger" @click="handleTwoDel(item,index2)" style="margin-left:10px">删除</a-button>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

		<!-- 子表单区域 -->
    <!-- <a-tabs v-model:activeKey="activeKey" animated>
      <a-tab-pane tab="教学大纲配置信息" key="zyJxdgMain" :forceRender="true">
        <j-vxe-table
          :keep-source="true"
          resizable
          ref="zyJxdgMainTableRef"
          :loading="zyJxdgMainTable.loading"
          :columns="zyJxdgMainTable.columns"
          :dataSource="zyJxdgMainTable.dataSource"
          :height="340"
          :disabled="disabled"
          :rowNumber="true"
          :rowSelection="true"
          :toolbar="true"/>
      </a-tab-pane>
    </a-tabs> -->
  </a-spin>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, computed, toRaw, onMounted } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useValidateAntFormAndTable } from '/@/hooks/system/useJvxeMethods';
  import { queryZyJxdgMainListByMainId, queryDataById, saveOrUpdate } from '../ZyJxdgBanben.api';
  import { JVxeTable } from '/@/components/jeecg/JVxeTable';
  import {zyJxdgMainColumns} from '../ZyJxdgBanben.data';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import { Form } from 'ant-design-vue';
  const useForm = Form.useForm;

  export default defineComponent({
    name: "ZyJxdgBanbenForm",
    components:{
      JDictSelectTag,
      JVxeTable,
    },
    props:{
      formDisabled:{
        type: Boolean,
        default: false
      },
      formData: { type: Object, default: ()=>{} },
      formBpm: { type: Boolean, default: true }
    },
    emits:['success'],
    setup(props, {emit}) {
      const loading = ref(false);
      const zyJxdgMainTableRef = ref();
      const zyJxdgMainTable = reactive<Record<string, any>>({
        loading: false,
        columns: zyJxdgMainColumns,
        dataSource: []
      });
      const activeKey = ref('zyJxdgMain');
      const formData = reactive<Record<string, any>>({
        id: '',
        title: '',
        twoTitle: '',
        sfsy: '',
      });

      //表单验证
      const validatorRules = reactive({
        title: [{ required: true, message: '请输入版本!'},],
        sfsy: [{ required: true, message: '请输入是否使用!'},],
        twoTitle: [{ required: true, message: '请输入是否使用!'},],
      });
      const {resetFields, validate, validateInfos} = useForm(formData, validatorRules, {immediate: true});
      const dbData = {};
      const formItemLayout = {
        labelCol: {xs: {span: 24}, sm: {span: 5}},
        wrapperCol: {xs: {span: 24}, sm: {span: 16}},
      };

      // 表单禁用
      const disabled = computed(()=>{
        if(props.formBpm === true){
          if(props.formData.disabled === false){
            return false;
          }else{
            return true;
          }
        }
        return props.formDisabled;
      });

      

      function add() {
        resetFields();
        zyJxdgMainTable.dataSource = [];
      }

      async function edit(row) {
        //主表数据
        await queryMainData(row.id);
        //子表数据
        const zyJxdgMainDataList = await queryZyJxdgMainListByMainId(row['id']);
        zyJxdgMainTable.dataSource = [...zyJxdgMainDataList];
      }

      async function queryMainData(id) {
        const row = await queryDataById(id);
        Object.keys(row).map(k => {
          formData[k] = row[k];
        });
      }

      const {getSubFormAndTableData, transformData} = useValidateAntFormAndTable(activeKey, {
        'zyJxdgMain': zyJxdgMainTableRef,
      });

      async function getFormData() {
        await validate();
        return transformData(toRaw(formData))
      }

      async function submitForm() {
        const mainData = await getFormData();
        const subData = zyJxdgMainTable.dataSource;
        console.log('主表数据11111', subData)
        const values = Object.assign({}, dbData, mainData);
        console.log('主表数据22222222', subData.value)
        console.log('主表数据22222222', subData.target)
        values.zyJxdgMainList = subData;
        console.log('表单提交数据', values)
        const isUpdate = values.id ? true : false
        await saveOrUpdate(values, isUpdate);
        //关闭弹窗
        emit('success');
      }
      
      function setFieldsValue(values) {
        if(values){
          Object.keys(values).map(k=>{
            formData[k] = values[k];
          });
        }
      }

      /**
       * 值改变事件触发-树控件回调
       * @param key
       * @param value
       */
      function handleFormChange(key, value) {
        formData[key] = value;
      }


      function handleOneType(){

        zyJxdgMainTable.dataSource.push({
          title: '',
          type: '',
          guanlian:'',
          sort:zyJxdgMainTable.dataSource.length+1,
        });
      }

      function handleOneDel(item,index){
        zyJxdgMainTable.dataSource.splice(index,1);
      }

      function handleTwoType(item){
        item.zyJxdgPzxxList = item.zyJxdgPzxxList || [];
        item.zyJxdgPzxxList.push({
          title: '',
          type: '',
          sort:item.zyJxdgPzxxList.length+1,
        });
      }
      function handleTwoDel(item,index){
        item.zyJxdgPzxxList.splice(index,1);
      }


      return {
        zyJxdgMainTableRef,
        zyJxdgMainTable,
        validatorRules,
        validateInfos,
        activeKey,
        loading,
        formData,
        setFieldsValue,
        handleFormChange,
        formItemLayout,
        disabled,
        getFormData,
        submitForm,
        add,
        edit,
        handleOneType,
        handleOneDel,
        handleTwoType,
        handleTwoDel,
      }
    }
  });
</script>
<style lang="less" scoped>
.margin10{
  margin:10px 0;
}
.input-title{
  margin-bottom: 10px;
}
.fields-add{
  margin:0 0  8px 0;
  color: #777;
}
.Prompt-language{
  color: #bda787;
  font-size: 12px;
  padding: 6px;
}
</style>