<template>
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>企业信息</span>
          </div>
          <div>
            <div class="text-center">
              <img  :src="getFullAddr(firm.orgLogoUrl)"
                    object-fit="cover"
                    class="img-row">
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                企业名称
                <div class="pull-right">{{ firm.orgName }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-form :model="form" ref="form" :rules="rules" label-width="80px">
            <el-form-item label="logo" prop="orgLogoUrl">
              <image-upload v-model="form.orgLogoUrl" :limit="1" :isShowTip="false"></image-upload>
            </el-form-item>
            <el-form-item label="企业名称" prop="orgName">
              <el-input v-model="form.orgName" show-word-limit maxlength="30" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="submit">保存</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  // import { getFirmList, editFirmList } from "../../../api/app/firm";
  import { isExternal } from "../../../utils/validate";
  import { deepClone } from "../../../utils";
  import { required } from "../../../utils/formRules";
  import { EventBus } from "../../../utils/eventBus";

  export default {
    data() {
      return {
        baseUrl: process.env.VUE_APP_BASE_API,
        firm: {
          orgLogoUrl: null,
          orgName: null,
          orgShortName: null,
        },
        form: {},
        rules: {
          orgLogoUrl: [required('logo不能为空')],
          orgName: [required('企业名称不能为空')]
        }
      }
    },
    methods: {
      //拼接完整地址
      getFullAddr(url) {
        if(url) {
          if (url.indexOf(this.baseUrl) === -1 && !isExternal(url)) {
            url = this.baseUrl + url;
          }
          return url;
        }
      },
      init() {
        getFirmList().then(res => {
          this.firm = res.data
          this.form = deepClone(res.data)
        })
      },
      submit() {
        // this.$refs["form"].validate(valid => {
        //   editFirmList(this.form).then(res => {
        //     this.$modal.msgSuccess("修改成功");
        //     this.init()
        //     EventBus.$emit('topMethod');
        //   })
        // })
      },
    },
    created() {
    },
    mounted() {
      // this.init()
    }
  }
</script>

<style scoped lang="scss">
.img-row {
  width: 100px;
  height: 100px;
  margin: 0 10px;
}
</style>
