<template>
  <el-dialog title="添加用户信息" :visible.sync="userDialogVisible">
    <el-form
      :model="userForm"
      :rules="userRules"
      ref="userForm"
      class="form-main"
      label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <!-- <el-form-item label="账号" v-if="">
            <span>{{userForm.account}}</span>
          </el-form-item> -->
          <el-form-item class="is-required" label="账号" prop="account">
            <el-input v-model="userForm.account" placeholder="请填写用户账号" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="is-required" label="用户名" prop="name">
            <el-input v-model="userForm.name" placeholder="请填写用户名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="is-required" label="联系电话" prop="tel">
            <el-input v-model="userForm.tel" placeholder="请填写用户联系电话" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系邮箱" prop="mail">
            <el-input v-model="userForm.mail" placeholder="请填写用户联系邮箱" maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位" prop="position">
            <el-input v-model="userForm.position" placeholder="请填写用户职位" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在部门" prop="department">
            <el-input v-model="userForm.department" placeholder="请填写用户所在部门" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item class="is-required" label="所在机构" prop="org">
            <el-input v-model="userForm.org" placeholder="请填写联系人所在机构" maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24"><div class="form-line"></div></el-col>
        <el-col :span="24">
          <el-card shadow="never">
            <div class="card-title" slot="header">
              <span>分配权限</span>
            </div>
            <el-checkbox-group v-model="userForm.module">
              <el-checkbox v-for="item in moduleOption" :label="item.name" :key="item.index">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-card>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="submitForm('userForm')">保存</el-button>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item align="right">
            <span>创建时间：2018/08/23 18：52：12</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  import { checkEmailV } from '@/utils/validator'

  export default {
    data() {
      return {
        userDialogVisible: false,
        platSource: '',
        moduleOption: [
          {
            id: 0,
            name: '内容发布'
          },
          {
            id: 0,
            name: '内容发布'
          },
          {
            id: 0,
            name: '内容发布'
          },
          {
            id: 0,
            name: '内容发布'
          }
        ],
        userForm: {
          account: '',
          name: '',
          tel: '',
          mail: '',
          position: '',
          department: '',
          org: '',
          module: ''
        },
        userRules: {
          mail: [{ validator: checkEmailV, trigger: 'blur' }]
        }
      }
    },
    created() {
      // this.platSource = Cookies.get('platSource');
    },
    methods: {
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // let paramsData = {
            //   'title': this.ruleFormDem.demandTit,
            //   'descp': this.ruleFormDem.demandDesc,
            //   'province': this.ruleFormDem.province,
            //   'city': this.ruleFormDem.city,
            //   'invalidDay': util.dateFormatter(this.ruleFormDem.lastDate, false, true),
            //   'cost': this.selectCostRange,
            //   'duration': this.selectLongTime,
            //   'name': this.ruleFormDem.linkman,
            //   'orgName': this.ruleFormDem.orgName,
            //   'contactNum': this.ruleFormDem.linkTel,
            //   'vc': this.ruleFormDem.msgVerifyCode,
            //   'state': this.phoneResBack,
            //   'source': this.platSource
            // };
            // console.log(paramsData);
            // this.$axios.post(httpUrl.hQuery.demand.add, paramsData).then((res) => {
            //   if (res.success) {
            //     this.$alert('我们已收到您的需求，马上为您对接合适的专家和专业机构，您可以登录科袖网与对方做进一步沟通。', '需求发布成功！', {
            //       confirmButtonText: '进入科袖网，发现更多服务和资源',
            //       type: 'success',
            //       center: true,
            //       cancelButtonText: '取消',
            //       callback: action => {
            //         if (action === 'confirm') {
            //           window.open(util.ekexiuUrl, '科袖网首页');
            //         };
            //       }
            //     });
            //     this.resetForm(formName);
            //     this.$emit('dialogChanged', false);
            //   } else {
            //     this.$message({
            //       message: '需求发布失败，请重新发布！',
            //       type: 'warning'
            //     });
            //   };
            //   console.log(res);
            // }).catch(error => {
            //   console.log(error);
            // });
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .form-main{
    width:100%;
    .form-line{
      border-top:1px dashed #ccc;
      margin-bottom:20px;
    }
  }
  .shortW{
    width:300px;
  }
  .card-title{
    font-size: 20px;
    font-weight: bold;
  }
  .el-checkbox-group{
    .el-checkbox{
      font-size: 16px;
      margin: 10px 60px;
      .el-checkbox__inner{
        width: 16px;
        height: 16px;
      }
      .el-checkbox__inner::after{
        left:5px;
        top:2px;
      }
      .el-checkbox__label{
        line-height:24px;
        font-size:16px;
      }
    }
  }
</style>
