<template>
	<el-card class="app-container">
		<div class="app-container__title">{{title}}</div>
		<div class="app-container__body">
			<xd-base-dynamic-field
				ref="form"
				label-width="130px"
				v-model="listValue"
				v-if="status"
				:list="listForm"
			>
				<template slot="type" slot-scope="scope">
					<xd-base-dynamic-field
						:label-width="scope.width"
						:list="typeFormList"
						:key="inFormKey"
					></xd-base-dynamic-field>
				</template>
			</xd-base-dynamic-field>
			<div class="adjust-btn">
				<el-button
					@click="handleClick()"
					type="primary"
				>提交</el-button>
				<el-button
					@click="handleBack()"
				>返回</el-button>
			</div>
		</div>
	</el-card>
</template>

<script>
  import XdBaseDynamicField from "@/components/XdBaseDynamicField";
  import {
    getClassifiedFrom,
		getDefaultFrom
  } from "./classified";

  export default {
    name: "PageClassifiedCreate",
    components: {
      XdBaseDynamicField
		},
    data(){
      return {
        title: '',
        type: 'shop',//命名空间
 
        /**提交信息**/
        listForm: [],
        listValue: {},
        status: false,
				
				inFormKey: 'inFormKey',
        typeFormList: [],
				
				//测试数据
        testResult: ["Alabama", "Alaska", "Arizona",
          "North Carolina", "North Dakota", "Ohio",
          "Oklahoma", "Oregon", "Pennsylvania",
          "Rhode Island", "South Carolina",
          "South Dakota", "Tennessee", "Texas",
          "Utah", "Vermont", "Virginia",
          "Washington", "West Virginia", "Wisconsin",
          "Wyoming"],
        testResultList: [],
			}
		},
		watch:{
      "listValue.type":{
        handler(val){
          if(val) {
            this.typeFormList = getDefaultFrom(val, {}, this);
            this.inFormKey = this.$xdHelper.randomChar(20);
					}
				},
				immediate: true
			},
		},
		created() {
      this.title = this.$route.meta.title;
      this.inForm();
      
      //测试数据
      this.testResultList = this.testResult.map((item, index) => {
        return {value: `value:${item}`, label: `label:${item}`, id: index};
      });
    },
		methods: {
			//测试方法
      handleRemoteSearch(query, resolve) {
        setTimeout(() => {
          let list = this.testResultList.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
          console.log(list)
          resolve(list)
        }, 500);
      },
      
      handleBack(){
        this.$router.back()
			},
			
			inForm(){
        this.listForm = getClassifiedFrom(this.type, {}, this);
        this.status = true;
			},
			
			
      /**
       * @description 提交数据事件
       * @param isBack
       */
      handleClick(isBack) {
        this.$refs['form'].submitAll()
          .then(res => {
            console.log(this.$refs.form.getAllFormData(), '111')
          })
          .catch()
      }
		}
  }
</script>

<style scoped lang="scss">
	.app-container {
		&__title {
			font-size: 16px;
			line-height: 24px;
			padding: 0 0 20px;
			font-weight: bold;
		}
		
		&__body {
			& ::v-deep .el-tabs__content {
				padding-top: 20px;
			}
		}
	}
	
	.adjust-btn {
		margin-left: 130px;
	}
	
	@media screen and (max-width: 768px) {
		.app-container {
			&__title {
				padding: 0 0 10px;
			}
			
			& ::v-deep .el-card__body {
				padding: 10px;
			}
			
			&__body {
				& ::v-deep .el-tabs__content {
					padding-top: 10px;
				}
			}
		}
	}
</style>
