<template>
  <section class="add">
    <ai-detail>
      <ai-title slot="title" :title="pageTitle" isShowBottomBorder/>
      <template #content>
        <el-tabs tabPosition="left">
          <el-tab-pane label="申请信息">
            <el-form ref="AddForm" :model="form" size="small" label-width="120px">
              <ai-card title="申请信息">
                <template #content>
                  <el-row type="flex">
                    <div class="fill">
                      <el-form-item label="信用主体" prop="objName">{{ form.objName }}</el-form-item>
                      <el-form-item label="证件号码" prop="idNumber">{{ form.idNumber }}</el-form-item>
                    </div>
                    <div class="fill">
                      <el-form-item label="申请类型" prop="type">{{ dict.getLabel('creditReportType', form.type) }}</el-form-item>
                      <el-form-item label="联系方式" prop="createUserPhone">{{ form.createUserPhone }}</el-form-item>
                    </div>
                  </el-row>
                  <el-form-item label="申请时间" prop="createTime">{{ form.createTime }}</el-form-item>
                  <el-form-item label="证明材料" prop="files">
                    <el-image class="cpImage" v-for="(item,i) in form.files" :key="i" :src="item.url" :preview-src-list="[item.url]"/>
                  </el-form-item>
                </template>
              </ai-card>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="信息报告" lazy>
            <component :is="creditReport" v-bind="cpParams"/>
          </el-tab-pane>
        </el-tabs>
      </template>
    </ai-detail>
  </section>
</template>

<script>
import PersonCreditReport from "../../../components/personCreditReport";
import EnterpriseDialog from "../../../components/enterpriseDialog";

export default {
  name: "add",
  components: {EnterpriseDialog, PersonCreditReport},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    isEdit: v => !!v.$route.query.id,
    pageTitle: () => "报告申请详情",
    cpParams: v => ({...v.$props, personId: v.form.objId, enterpriseId: v.form.objId}),
    creditReport: v => v.form.type == 1 ? EnterpriseDialog : PersonCreditReport
  },
  data() {
    return {
      form: {},
    }
  },
  methods: {
    getDetail() {
      let {id} = this.$route.query
      id && this.instance.post("/app/appcreditreport/applyInfot", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.form = res.data
        }
      })
    },
    back() {
      this.$router.push({})
    }
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.add {
  height: 100%;

  .cpImage {
    width: 120px;
    height: 120px;
    margin: 0 8px 8px 0;
  }
}
</style>
