<template>
  <div class="container">
    <el-form
      :model="company"
      :rules="rules"
      ref="form"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-row :gutter="90">
        <!-- 左边 -->
        <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
          <div class="title">
            <p>公司信息:</p>
          </div>
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="company.companyName"></el-input>
          </el-form-item>
          <el-form-item label="公司地址" prop="companyAddress">
            <el-input v-model="company.companyAddress"></el-input>
          </el-form-item>
          <el-form-item label="公司联系电话" prop="companyPhone">
            <el-input v-model="company.companyPhone"></el-input>
          </el-form-item>
          <el-form-item label="公司其他信息" prop="companyInformation">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 8 }"
              v-model="company.companyInformation"
            ></el-input>
          </el-form-item>
        </el-col>
         <!-- 右边 -->
        <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
          <div class="title">
            <p>管理员:</p>
          </div>
          <el-form-item label="管理员姓名" prop="userName">
            <el-input v-model="company.userName"></el-input>
          </el-form-item>
          <el-form-item label="管理员性别" prop="userSex">
            <el-select v-model="company.userSex" 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-form-item label="管理员账号" prop="userAdmin">
            <el-input v-model="company.userAdmin"></el-input>
          </el-form-item>
          <el-form-item label="管理员密码" prop="userPassword">
            <el-input v-model="company.userPassword"></el-input>
          </el-form-item>
          <el-form-item label="管理员手机号" prop="userPhone">
            <el-input v-model="company.userPhone"></el-input>
          </el-form-item>
          <el-form-item label="管理员身份证" prop="userIdentification">
            <el-input v-model="company.userIdentification"></el-input>
          </el-form-item>
          <el-form-item label="管理员银行卡号" prop="userBankNumber">
            <el-input v-model="company.userBankNumber"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号开户行" prop="userBankAddress">
            <el-input v-model="company.userBankAddress"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer">
      <el-button type="success" icon="el-icon-upload2" @click="update()">提交</el-button>
      <el-button type="info" icon="el-icon-refresh-left" @click="reset">重置信息</el-button>
    </div>
    
  </div>
</template>

<script>
import {chinaIdentityValid,bankAccountValid,checkPhone} from '@/utils/myValidate'
import {register} from '@/api/company'

export default {
  data() {
    return {
      company: {
        companyName:null,
        companyAddress:null,
        companyPhone:null,
        companyInformation:null,
        companyCreateTime:null,
        userName:null,
        userSex:null,
        userAdmin:null,
        userPassword:null,
        userPhone:null,
        userIdentification:null,
        userBankNumber:null,
        userBankAddress:null,
        rlId:2,
      },
      options: [
        {
          value: 1,
          label: '男'
        },
        {
          value: 0,
          label: '女'
        },
      ],
      rules: {
        companyName:[
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        companyAddress:[
          { required: true, message: '请输入公司地址', trigger: 'blur' },
        ],
        companyPhone:[
          {required:true, validator:checkPhone, trigger: ['blur', 'change']},
        ],
        userName:[
          { required: true, message: '请输入管理员名称', trigger: 'blur' },
        ],
        userSex:[
          { required: true, message: '请选择性别', trigger: 'change' },
        ],
        userAdmin:[
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        userPassword:[
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        userPhone:[
          {required:true, validator:checkPhone, trigger: ['blur', 'change']},
        ],
        userIdentification:[
          {required:true, validator:chinaIdentityValid, trigger:'blur'},
        ],
        userBankNumber:[
          {required:true, validator:bankAccountValid, trigger:'blur'},
        ],
        userBankAddress:[
          { required: true, message: '请输入开户行', trigger: 'blur' },
        ],
      },
    }
  },
  created(){

  },
  methods:{

    //重置数据
    reset(){
      this.$refs.form.resetFields()
    },

    //提交数据
    update(){
      //先校验
      this.$refs.form.validate((valida)=>{
        if(valida){
          //时间赋值
          this.company.companyCreateTime = this.timestampToTime()
          //提交
          register(this.company).then((res)=>{
            if(res.status == "success"){
              this.$message.success("添加成功")
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.push("/companyList")
            }else{
              this.$message.error(res.data)
            }
          }).catch((error)=>{
            this.$message.error("添加失败")
          })
        }
      })

    },

    //时间处理 yyyy-MM-dd hh:mm:ss
    timestampToTime() {
      var date = new Date()
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
      var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' '
      var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':'
      var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':'
      var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds())
      return Y+M+D+h+m+s
    }
  }
};
</script>

<style>

.container {
  padding: 10px;
}

.title {
  font-size: 20px;
  font-weight: 600;
}
.footer{
  width: 100%;
  text-align: center;
  margin-top:20px;
}
</style>