<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="150px">
        <el-row :gutter="2">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="corpName">
              <el-input v-model="formData.corpName" placeholder="请输入企业名称" maxlength="255"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" prop="orgCard">
              <el-input v-model="formData.orgCard" placeholder="请输入统一社会信用代码" maxlength="18"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="2">
          <el-col :span="12">
            <el-form-item label="注册资本" prop="registFund">
              <el-input type="number" v-model="formData.registFund" placeholder="请输入注册资本">
                <template slot="append">万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册日期" prop="registDate">
              <el-date-picker clearable v-model="formData.registDate" type="date" value-format="yyyy-MM-dd"
                              placeholder="选择注册日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="2">
          <el-col :span="12">
            <el-form-item label="法人姓名" prop="legalName">
              <el-input v-model="formData.legalName" placeholder="请输入法人姓名" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人身份证号" prop="legalCard">
              <el-input v-model="formData.legalCard" placeholder="请输入法人身份证号" maxlength="18"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="2">
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactName">
              <el-input v-model="formData.contactName" placeholder="请输入联系人" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="mobilePhone">
              <el-input type="tel" v-model="formData.mobilePhone" placeholder="请输入联系方式" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="2">
          <el-col :span="12">
            <el-form-item v-if="formData.id === undefined" label="管理员登录账号" prop="loginAccount">
              <el-input v-model="formData.loginAccount" placeholder="请输入管理员登录账号" maxlength="16" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="formData.id === undefined" label="管理员登录密码" prop="password">
              <el-input v-model="formData.password" placeholder="请输入管理员登录密码" type="password" maxlength="16" show-password />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="开放服务" prop="serviceCodeArray">
          <el-select style="width: 100%" v-model="formData.serviceCodeArray" multiple placeholder="请选择开放服务" clearable >
            <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入详细地址" maxlength="255" />
        </el-form-item>
        <el-form-item label="企业简介">
          <el-input type="textarea" v-model="formData.corpContent" maxlength="900" placeholder="请输入企业简介"/>
          <!--          <Editor v-model="formData.corpContent" :min-height="192"/>-->
        </el-form-item>
        <el-form-item label="经营范围" prop="business">
          <el-input type="textarea" v-model="formData.business" maxlength="900" placeholder="请输入经营范围"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as CompanyApi from '@/api/base/company'
import Editor from '@/components/Editor'
import {getServicePackageList} from "@/api/system/servicePackage";

export default {
  name: 'CompanyForm',
  components: {
    Editor
  },
  data() {
    return {
      // 弹出层标题
      dialogTitle: '',
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 租户服务列表
      packageList: [],
      // 表单参数
      formData: {
        id: undefined,
        corpName: undefined,
        orgCard: undefined,
        registFund: undefined,
        registDate: undefined,
        address: undefined,
        legalName: undefined,
        legalCard: undefined,
        contactName: undefined,
        mobilePhone: undefined,
        corpContent: undefined,
        business: undefined,
        loginAccount: undefined,
        password: undefined,
        serviceCodeArray: [],
        serviceCodes:undefined
      },
      // 表单校验
      formRules: {
        corpName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
        orgCard: [{ required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }],
        registFund: [{ required: true, message: '注册资本不能为空', trigger: 'blur' }],
        registDate: [{ required: true, message: '注册日期不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
        legalName: [{ required: true, message: '法人姓名不能为空', trigger: 'blur' }],
        legalCard: [
          { required: true, message: '法人身份证号不能为空', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的法人身份证号', trigger: ["blur", "change"] },
          ],
        serviceCodeArray: [{ required: true, message: '开放服务不能为空', trigger: 'blur' }],
        contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
        mobilePhone: [
          { required: true, message: '联系方式不能为空', trigger: 'blur' },
          { pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,message: '请输入正确的联系方式', trigger: ["blur", "change"] },
          ],
        loginAccount: [{ required: true, message: '管理员登录账号不能为空', trigger: 'blur' }, {
          min: 4,
          max: 16,
          message: '管理员登录账号长度在4到16个字符',
          trigger: 'blur'
        }],
        password: [{ required: true, message: '管理员登录密码不能为空', trigger: 'blur' }, {
          min: 4,
          max: 16,
          message: '管理员登录密码长度在4到16个字符',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    // 获得服务服务列表
    getServicePackageList().then(response => {
      this.packageList = response.data;
    })
  },
  methods: {
    /** 打开弹窗 */
    async open(id) {
      this.dialogVisible = true
      this.reset()
      // 修改时，设置数据
      if (id) {
        this.formLoading = true
        try {
          const res = await CompanyApi.getCompany(id)
          this.formData = res.data
          this.dialogTitle = '修改企业信息'
        } finally {
          this.formLoading = false
        }
      }
      this.dialogTitle = '新增企业信息'
    },
    /** 提交按钮 */
    async submitForm() {
      // 校验主表
      await this.$refs['formRef'].validate()
      this.formLoading = true
      debugger
      try {
        const data = this.formData
        let serviceCodes = this.formData.serviceCodeArray.join(",")
        data.serviceCodes = serviceCodes
        // 修改的提交
        if (data.id) {
          await CompanyApi.updateCompany(data)
          this.$modal.msgSuccess('修改成功')
          this.dialogVisible = false
          this.$emit('success')
          return
        }
        // 添加的提交
        await CompanyApi.createCompany(data)
        this.$modal.msgSuccess('新增成功')
        this.dialogVisible = false
        this.$emit('success')
      } finally {
        this.formLoading = false
      }
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        id: undefined,
        corpName: undefined,
        orgCard: undefined,
        registFund: undefined,
        registDate: undefined,
        address: undefined,
        legalName: undefined,
        legalCard: undefined,
        contactName: undefined,
        mobilePhone: undefined,
        corpContent: undefined,
        business: undefined,
        loginAccount: undefined,
        password: undefined,
        serviceCodeArray: [],
        serviceCodes:undefined
      }
      this.resetForm('formRef')
    }
  }
}
</script>
