<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"
			>
			</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 {Loading} from 'element-ui';
  import {
    getClassifiedFrom,
		getDefaultFrom
  } from "./classified";
  import {
    mapActions,
    mapState,
  } from 'vuex';

  export default {
    name: "PageClassifiedCreate",
    components: {
      XdBaseDynamicField
		},
    data(){
      return {
        title: '',
        type: 'movie',//命名空间
        category_id: null,
 
        /**提交信息**/
        listForm: [],
        listValue: {},
        status: false,
				
				inFormKey: 'inFormKey',
        typeFormList: [],
				
			}
		},
		created() {
      this.title = this.$route.meta.title;
      let {category_id}  = this.$route.params;
      this.category_id = category_id;
      if(category_id) {
        let loading = Loading.service({});
        this.getByIdClassified({category_id})
					.then(res=>{
            loading.close();
            this.inForm(res.data)
					})
          .catch(error => {
            console.error(error);
            loading.close()
          })
			}
      else  this.inForm({});
			
    },
		methods: {
      ...mapActions('classified', [
        'getByIdClassified',
				'addClassified',
				'updateClassified'
      ]),
			
      handleBack(){
        this.$router.back()
			},
			
			inForm(info){
        this.listForm = getClassifiedFrom(this.type, info, this);
        this.status = true;
			},
			
			
      /**
       * @description 提交数据事件
       * @param isBack
       */
      handleClick(isBack) {
        this.$refs['form'].submitAll()
          .then(res => {
            let loading = Loading.service({});
            let fn = 'addClassified';
            if(this.category_id) fn = 'updateClassified';
            this[fn](this.$refs.form.getAllFormData())
							.then(res=>{
                this.$message({
                  message: '操作成功！',
                  type: 'success'
                });
                this.handleBack();
                loading.close()
							})
							.catch(error=>{
                this.$message({
                  message: '操作失败！',
                  type: 'error'
                });
                console.error(error);
                loading.close()
							})
          })
          .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>
