<template>
  <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="700px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="企业名称" prop="companyName">
        <el-input v-model="form.companyName" placeholder="请输入企业名称" />
      </el-form-item>
      <el-form-item label="联系人" prop="contactUserName">
        <el-input v-model="form.contactUserName" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactPhone">
        <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="用户前缀" prop="prefix">
        <el-input :disabled="form.id" v-model="form.prefix" placeholder="请输入用户前缀" maxlength="4" />
      </el-form-item>
      <el-form-item v-if="!form.id" label="管理员密码" prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入系统用户密码" maxlength="20" />
      </el-form-item>
      <el-form-item label="租户套餐" prop="packageId">
        <el-select v-model="form.packageId" :disabled="!!form.tenantId" placeholder="请选择租户套餐" clearable style="width: 100%">
          <el-option v-for="item in packageList" :key="item.packageId" :label="item.packageName" :value="item.packageId" />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="过期时间" prop="expireTime">
        <el-date-picker clearable v-model="form.expireTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择过期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="用户数量" prop="accountCount">
        <el-input v-model="form.accountCount" placeholder="请输入用户数量" />
      </el-form-item>
      <el-form-item label="绑定域名" prop="domain">
        <el-input v-model="form.domain" placeholder="请输入绑定域名" />
      </el-form-item>
      <el-form-item label="企业地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入企业地址" />
      </el-form-item>
      <el-form-item label="企业代码" prop="licenseNumber">
        <el-input v-model="form.licenseNumber" placeholder="请输入统一社会信用代码" />
      </el-form-item>
      <el-form-item label="企业简介" prop="intro">
        <el-input type="textarea" v-model="form.intro" placeholder="请输入企业简介" />
      </el-form-item>-->
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ImageUpload from '@/components/ImageUpload/index'
import { getBorrow, updateBorrow, updateBorrowStatus } from '@/api/dk/borrow'
import { all } from '@/api/dk/BorrowStatus'
import { selectTenantPackage } from '@/api/system/tenantPackage'
import { addTenant, getTenant, updateTenant } from '@/api/system/tenant'

export default {
  components: {
    ImageUpload,
  },
  data () {
    return {
      open: false,
      title: '',
      borrowList: [],
      form:{
        id: undefined,
        companyName: undefined,
        contactUserName: undefined,
        contactPhone: undefined,
        prefix: undefined,
        password: undefined,
        packageId: undefined,
        expireTime: undefined,
        accountCount: undefined,
        domain: undefined,
        address: undefined,
        licenseNumber: undefined,
        intro: undefined,
        remark: undefined,
        status: '0',
      },
      rules:{
        // id: [{ required: true, message: "id不能为空", trigger: "blur" }],
        tenantId: [{ required: true, message: "租户编号不能为空", trigger: "blur" }],
        contactUserName: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
        contactPhone: [{ required: true, message: "联系电话不能为空", trigger: "blur" }],
        companyName: [{ required: true, message: "企业名称不能为空", trigger: "blur" }],
        prefix: [
          { required: true, message: "用户名前缀不能为空", trigger: "blur" },
          { min: 2, max: 4, message: '用户前缀长度必须介于 2 和 4 之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: "管理员不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '管理员密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ]
      },
      buttonLoading:false,
      packageList: [],
    }
  },
  created() {
    selectTenantPackage().then(response => {
      this.packageList = response.data;
    });
  },
  methods: {
    init (id) {
      this.form.id = id || undefined;
      this.open = true;
      this.title = "新增租户";
      this.$nextTick(() => {
        this.$refs['form'].resetFields();
        if(this.form.id){
          getTenant(id).then(response => {
            this.form = response.data;
            this.title = "修改租户";
          });
        }
      })
    },
    // 表单提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(!this.form.id){
            this.buttonLoading = true;
            addTenant(this.form).then(data => {
              this.$modal.msgSuccess("新增成功");
              this.buttonLoading = false;
              this.open = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.buttonLoading = false;
            });
          }else{
            this.buttonLoading = true;
            updateTenant(this.form).then(data => {
              this.$modal.msgSuccess("修改成功");
              this.buttonLoading = false;
              this.open = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.buttonLoading = false;
            });
          }
        }
      })
    },
  }
}
</script>
<style>
</style>
