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

  import {
    mapActions,
    mapState,
  } from 'vuex';

  export default {
    name: "PageClassifiedCreate",
    components: {
      XdBaseDynamicField
		},
    data(){
      return {
        title: '',
        type: 'movie',//命名空间
        set_id: null,
 
        /**提交信息**/
        listForm: [],
        listValue: {},
        status: false,
				
				inFormKey: 'inFormKey',
        typeFormList: [],
				
			}
		},
		
		created() {
      this.title = this.$route.meta.title;
      let {set_id, category_id} = this.$route.params;
      this.set_id = set_id;
      
      if(set_id) {
        let loading = Loading.service({});
        this.getByIdClassifiedRule({set_id, category_id})
					.then(res=>{
            this.inForm(res.data);
            loading.close();
					})
          .catch(error => {
            console.error(error);
            loading.close()
          })
			}
      else this.inForm({});
			
    },
		methods: {
      ...mapActions('classified', [
        'getByIdClassifiedRule',
        'addClassifiedRule',
        'updateClassifiedRule',
        'getByNameSearchList'
      ]),
			
      handleRemoteSearch(query, resolve, type) {
        this.getByNameSearchList({keyword: query, film_name: query })
					.then(res=>{
            resolve(res.data.list || res.data)
					})
					.catch(error=>{
					  console.error(error)
					});
      },
      
      handleBack(){
        this.$router.back()
			},
			
			inForm(data){
        this.listForm = getClassifiedSettingFrom(this.type, this, data, {});
        this.status = true;
			},
			
			
      /**
       * @description 提交数据事件
       * @param isBack
       */
      handleClick(isBack) {
        this.$refs['form'].submitAll()
          .then(res => {
            let loading = Loading.service({});
            let params = this.$refs.form.getAllFormData();
            delete params['category_name']
            let fn = 'addClassifiedRule';
            if (this.set_id) fn = 'updateClassifiedRule';
            params['film_data'] = JSON.stringify(params['film_data'].map(item => {
              return item.value;
            }))
            this[fn](params)
              .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>
