<template>
  <!-- 增改查弹窗 -->
  <el-dialog :title="titles[mode] || '详情'" :visible.sync="formVisible" class="finish-dialog" :class="mode" width="880px" append-to-body :close-on-click-modal="false">
    <el-tabs v-model.trim="activeName">
      <el-tab-pane label="基本信息" name="base">
        <el-form ref="detailForm" :model="formData" :rules="rules" label-position="right" inline class="detail-dialog" label-width="140px" label-suffix="：">
          <el-form-item label="企业名称" prop="parkid" style="width: 100%">
            <span>{{ formData.name || '--' }}</span>
          </el-form-item>
          <el-form-item label="统一社会信用代码">
            <span>{{ formData.creditCode || '--' }}</span>
          </el-form-item>
          <el-form-item label="企业账号">
            <span>{{ formData.userName || '--' }}</span>
          </el-form-item>
          <el-form-item label="法人">
            <span>{{ formData.legalName || '--' }}</span>
          </el-form-item>
          <el-form-item label="法人手机">
            <span>{{ formData.legalMobile || '--' }}</span>
          </el-form-item>
          <el-form-item label="联系人">
            <span>{{ formData.contactName || '--' }}</span>
          </el-form-item>
          <el-form-item label="联系人手机">
            <span>{{ formData.contactMobile || '--' }}</span>
          </el-form-item>
          <el-form-item label="邮编">
            <span>{{ formData.zipCode || '--' }}</span>
          </el-form-item>
          <el-form-item label="邮箱">
            <span>{{ formData.email || '--' }}</span>
          </el-form-item>
          <el-form-item label="地址">
            <span>{{ formData.fullAddress || '--' }}</span>
          </el-form-item>
          <el-form-item label="备注" prop="remark" style="width: 100%">
            <span>{{ formData.remark || '--' }}</span>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="分配项目" name="project">
        <TableElement
          :table-data="formData.projectList"
          :is-colum-set="false"
          :colum-obj="{
            columnData: [
              { text: true, prop: 'projectNo', label: '项目编号', align: 'center' },
              { text: true, prop: 'name', label: '项目名称', align: 'center' },
            ]
          }"
          :loading="global.loading"
        />
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deepClone } from '@/utils'
import TableElement from '@/components/ElmTable/index.vue'
import { getCompany } from '@/apiV2/company'

export default {
  name: '',
  inject: ['global', 'refresh'],
  components: { TableElement },
  data() {
    return {
      activeName: 'base', // base / project / service
      labelWidth: '180px',
      mode: 'see', // 查看see / 编辑edit / 添加add
      titles: { // 弹窗标题(动态)
        see: '查看企业详情',
        add: '添加',
        edit: '编辑'
      },
      formVisible: false, // 弹窗显示
      formConfig: {}, // 表单配置
      formData: {}, // 表单数据
      rules: { }
    }
  },
  computed: {
    isEditAdd() {
      return this.mode === 'edit' || this.mode === 'add'
    }
  },
  methods: {
    showDialog({ formConfig, formData, params }) {
      this.activeName = params || 'base'
      this.formConfig = formConfig
      this.mode = 'see' // formConfig?.mode || (this.formData.id ? 'edit' : 'add')
      this.formData = deepClone(formData)
      this.initFormData()
      this.formVisible = true
    },
    async initFormData() { // 表单数据初始化
      const { id } = this.formData
      if (id || id === 0) {
        const { success, data } = await getCompany(id)
        if (success) {
          Object.assign(this.formData, data)
        }
        this.$set(this.formData, 'projectList', data.projectList || [])
      }
    },
    close() {
      this.formVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.finish-dialog {
  /deep/ .el-dialog__body {
    padding: 10px 20px 0 20px;
    margin-top: 10px;
  }
  /deep/ .el-form-item {
    &__content  { // 内容宽度100%（默认）
      width: calc(100% - 180px); // 减去label宽
      max-width: none;
      .el-checkbox-group {
        line-height: normal;
      }
    }
    &.fit-width { // 内容宽度自适应
      .el-form-item__content {
        width: fit-content;
      }
    }
    &__label, &__content { // 统一行高
      // line-height: 2;
    }
  }
  .detail-dialog {
    padding-top: 10px;
    .el-row.mb-20 {
      margin-bottom: 10px;
    }
  }
  &.edit, &.add {
    /deep/ .el-form-item {
      margin-bottom: 22px;
    }
  }
  &.add {
    .detail-dialog {
      margin-top: 10px;
    }
  }
  &.see {
    .detail-dialog {
      // background-color: #f8f8f8;
      padding: 20px;
    }
    /deep/ .el-form-item {
      &__label, &__content { // 统一行高
        line-height: 2;
      }
      margin-bottom: 10px;
    }
  }
}
</style>
