<template>
  <div class="container">
    <el-row>
      <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
        <el-form :model="typefrom" ref="from" label-width="60px" class="demo-dynamic" >
          <el-row v-for="(item, index) in typefrom.typeList"  :key="item.key">
            <el-col :xl="6" :lg="8" :md="8" :sm="10" :xs="24">
              <el-form-item
                :label="'种类' + (index+1)"
                :prop="'typeList.' + index + '.typeCategory'"
                :rules="{
                  required: true, message: '种类不能为空', trigger: 'blur'
                }"
              >
              <el-select v-model="item.typeCategory" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              </el-form-item>
            </el-col>
            <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
              <el-form-item
                :label="'名称' + (index+1)"
                :prop="'typeList.' + index + '.typeName'"
                :rules="{
                  required: true, message: '类名不能为空', trigger: 'blur'
                }"
              >
                <div>
                  <el-row :gutter="10">
                    <el-col :span="18">
                      <el-input v-model="item.typeName"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-button @click.prevent="removeDomain(item)">删除</el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          
          
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button @click="addDomain">新增类型</el-button>
            <el-button @click="resetForm()">重置</el-button>
            <el-button @click="back()">返回</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  import { insert } from "@/api/type"

  export default {
    data() {
      return {
        typefrom: {
          typeList:[
            {
              key:Date.now(),
              typeCategory:'1',
              typeName:'',
              companyId:this.$store.getters.companyId,
            }
          ]
        },
        options: [{
          value: '0',
          label: '收入类别'
        }, {
          value: '1',
          label: '支出类别'
        },{
          value: "2",
          label: "报销类别",
        }]
      };
    },
    methods: {
      //提交
      submitForm() {
        this.$refs.from.validate((valid) => {
          if (valid) {
            console.log(this.typefrom)
            insert(this.typefrom.typeList).then((res)=>{
              if(res.success){
                this.$message.success("添加成功")
                this.$store.dispatch('tagsView/delView', this.$route)
                this.$router.push("/typeList")
              }else{
                this.$message.error(res.msg)
              }
            }).catch((error)=>{
              console.log(error)
              this.$message.error("添加失败")
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置
      resetForm() {
        this.$refs.from.resetFields();
      },
      removeDomain(item) {
        var index = this.typefrom.typeList.indexOf(item)
        if (index !== -1) {
          this.typefrom.typeList.splice(index, 1)
        }
      },
      addDomain() {
        this.typefrom.typeList.push(
          {
            key:Date.now(),
            typeName:'',
            typeCategory:'1',
            companyId:this.$store.getters.companyId,
          }
        );
      },
      //返回
      back(){
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.push("/typeList")
      }
    }
  }
</script>

<style scoped>
  .container {
    padding: 10px;
  }
  </style>