<template>
  <el-card class="body-warpper">
    <h4>{{title}}</h4>
    <el-form ref="submitForm" :model="form" :rules="rules" label-width="180px">
      <el-form-item label="风控类型" prop="risk_type">
        <xd-select-list
          v-model="form.risk_type"
          c-placeholder="请选择风控类型"
          width="40%"
          :list="riskDataList"
        ></xd-select-list>
      </el-form-item>
      <el-form-item :label="useTipsLabel" prop="risk_num">
        <el-input
          :disabled="form.risk_type === ''?true: false"
          v-model="form.risk_num"
          class="input40"
          :placeholder="useTips"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <xd-select-status
          v-model="form.status"
          c-placeholder="请选择状态"
        ></xd-select-status>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script type="text/javascript">
	import {mapActions} from 'vuex';
	import {Loading} from 'element-ui';


	export default {
		name: 'FilmAdjustList',
		components: {},
		data() {
			return {
				item: null,
				form: {
					id:'',
					source:'black',
					risk_type: '', //风控账号类型
					risk_num: '', // 用户
					status: 'Y',//状态
				},
				title:'',
				riskDataList: [],//风控账号类型列表
				rules: {
					risk_type: [{required: true, message: '请选择风控账号类型', trigger: 'change'},],
					risk_num: [{
						required: true,
						validator: (rule, value, callback) => {
							console.log('validator',$vue, value);
							if($vue.form.risk_type === ''){
								callback();
								return
              }

							value = value.trim();
							value = String(value);
							if (this.form.risk_type === 'mobile') {
								let reg = /^1[0-9]{10}$/;
								if(!reg.test(value)) {
									callback('请输入正确手机号码');
									return;
                }
								callback();
								
              }
							else if (this.form.risk_type === 'account') {
								let reg = /^1[0-9]{0,10}$/;
								if (!reg.test(value)) {
									callback('请输入正确的账号ID');
									return;
								}
								callback();
              }
							else {
								if(!value) {
									callback('请输入用户');
									return;
                }
								callback();
              }
              
						},
						trigger: 'blur'
          }],
				},
			}
		},
		computed: {
			useTips(){
				if(this.form.risk_type === '') return '';
				if (this.form.risk_type === 'mobile') return  '请输入手机号码';
				if (this.form.risk_type === 'account') return '请输入账号ID'
        return '输入用户'
      },

			useTipsLabel(){
				if (this.form.risk_type === 'mobile') return '手机号码';
				if (this.form.risk_type === 'account') return '账号ID';
				return '用户'
      },
      
			getForm() {
				return this.$helper.deleteParamEmptyKey(this.form);
			},
		},
		created() {
			$vue = this;
			this.title = this.$route.name;
			if(this.$xdHelper.getParmater('item')) {
				try{
					this.item = JSON.parse(this.$base64.decode(this.$xdHelper.getParmater('item')));
        }
				catch (e) {
					this.item = null;
				}
      }
			
			console.log(this.item);

			/**获取配置信息**/
			this.getRiskSetting()
				.then((res) => {
					this.riskDataList = [].concat(this.$helper.cloneDeep(res['risk_data']));
					if(this.item !== null) {
						this.form = {
							id: this.item.id,
							source: 'black',
							risk_type: this.item['risk_type'], //风控账号类型
							risk_num: this.item['risk_num'], // 最大购买张数
							status: this.item['status'],//状态
            }
          }
				})
				.catch();
		},
		methods: {
			...mapActions('film_risk', [
				'getRiskSetting',
				'blackEdit',
        'blackAdd'
			]),
   
			onSubmit() {
				this.$refs['submitForm'].validate((valid) => {
					if (valid) {
						console.log('this.getForm', this.getForm);
						let loading = Loading.service({});
						
						let fnName = 'blackAdd';
						let message = '黑名单配置成功';
						let order_by = 'create_time';
						if(this.item !== null) {
							 fnName = 'blackEdit';
							 message = '编辑黑名单配置成功';
							 order_by = 'update_time';
            }
						this[fnName](this.getForm)
							.then(() => {
								this.$message({
									message: message,
									type: 'success',
									showClose: true,
									duration: 2000,
									onClose:()=>{
										if(this.item === null) {
											this.$router.push({path: `/film/risk/black_list?order_by=${order_by}`});
                    }
										else {
											this.item = Object.assign({}, this.item, this.$helper.cloneDeep(this.form));
											this.$router.push({path: `/film/risk/black_edit?item=${this.$base64.encodeURI(JSON.stringify(this.item))}`});
                    }
									},
								});
								loading.close();
							})
							.catch(() => {
								loading.close();
							});
					} else {
						return false;
					}
				});
			},
		}
	}
</script>

<style type="scss" scoped>
  .body-warpper {
    margin: 20px;
  }


  .xd-textarea-tag /deep/ .input-new-tag .el-input__inner {
    border: 1px solid #fff;
  }

</style>

