<template>
  <div id="UpdatePassword">
    <el-row>
      <el-col :span="24">
        <div class="container">
          <div class="middle">
            <div class="w_1200" style="margin-bottom: 20px">
              <el-row :span="24" style="height: 110px ;width: 1140px;margin:22px 0 0 30px">
                <el-col :span="4" style="width: 200px">
                  <el-image :src="logo" style="width: 200px;height: 67px;border: 1px black dashed"></el-image>
                </el-col>
                <el-col :span="10" style="width: 760px">
                  <div class="title">{{ name }}</div>
                </el-col>
              </el-row>
              <table>
                <tr>
                  <td class="left-table">所属地区</td>
                  <td class="right-table">{{ belong_addr }}</td>
                  <td class="left-table">创立时间</td>
                  <td class="right-table">{{ establish_time }}</td>
                </tr>
                <tr>
                  <td class="left-table">组织形式</td>
                  <td class="right-table">{{ form }}</td>
                  <td class="left-table">法定代表人</td>
                  <td class="right-table">{{ representative }}</td>
                </tr>
                <tr>
                  <td class="left-table">注册资本(万)</td>
                  <td class="right-table">
                    <span class="change-color">{{ registered_capital }}</span> CNY
                  </td>
                  <td class="left-table">实缴资本(万)</td>
                  <td class="right-table">
                    <span class="change-color">{{ contributed_capital }}</span>
                    CNY
                  </td>
                </tr>
                <tr>
                  <td class="left-table">管理资金规模</td>
                  <td class="right-table">
                    <span class="change-color">{{ size }}</span> 亿元
                  </td>
                  <td class="left-table">组织机构号码</td>
                  <td class="right-table">{{ code }}</td>
                </tr>
                <tr>
                  <td class="left-table">注册地址</td>
                  <td class="right-table">{{ registered_addr }}</td>
                  <td class="left-table">办公地址</td>
                  <td class="right-table">{{ business_addr }}</td>
                </tr>
              </table>
            </div>
            <div class="w_1200">
              <el-divider content-position="left">投资偏好</el-divider>
              <div class="small-title" style="text-indent: 28px">
                行业：<span class="change-color" v-for="(item, index) in profession" :key="index">{{ item }}</span>
              </div>
              <div class="small-title">
                融资轮次：<span class="change-color" v-for="(item, index) in round" :key="index">{{ item }}</span>
              </div>
              <el-divider class="divider" content-position="left">机构详情</el-divider>
              <p class="p">投资机构简介</p>
              <div class="p-content" style="margin-bottom: 40px">
                {{ introduction }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { financialInstitutionResultDetail } from '../../api';

  export default {
    name: 'UpdatePassword',
    props: {},
    components: {
    },
    data: () => ({
      logo: '',
      name: '',
      profession: [], //行业
      round: [], //轮次
      introduction: '', //详情
      belong_addr: '', //"所属地区"
      business_addr: '', //办公地址
      contributed_capital: '', //实缴资金
      establish_time: '', //创立时间
      registered_addr: '', //注册地址
      registered_capital: '', //注册资本
      size: '', //管理资金规模
      code: '', //组织机构号码
      representative:'', //"法定代表人"
      form:'', //""组织形式""
    }),
    created() {},
    computed: {},
    methods: {
      details(id) {
        console.log(id);
      },
      async one(id) {
        console.log(id);
        const result = await financialInstitutionResultDetail(id);
        this.logo = result.data.logo;
        this.name = result.data.name;
        this.profession = result.data.profession;
        this.round = result.data.round;
        this.introduction = result.data.introduction;
        this.belong_addr = result.data.belong_addr;
        this.business_addr = result.data.business_addr;
        this.establish_time = result.data.establish_time;
        this.registered_addr = result.data.registered_addr;
        this.registered_capital = result.data.registered_capital;
        this.contributed_capital = result.data.contributed_capital;
        this.belong_addr = result.data.belong_addr;
        this.representative = result.data.representative;
        this.size = result.data.size;
        this.code = result.data.code;
        this.form = result.data.form;
        console.log(result);
      },
    },
    mounted() {
      this.one(this.$route.query.id);
    },
  };
</script>

<style lang="less" scoped>
  .container {
  }

  .header {
    /*height: 100px;*/
    /*width: 1920px;*/
    background: rgba(42, 46, 67, 1);
  }

  .middle {
    /*width: 1920px;*/
    //height: 756px;
    overflow: hidden;

    background-color: #f0f6fb;
  }

  .title {
    margin-top: 20px;
    margin-left: 50px;
    font-size: 20px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
  }

  .small-title {
    font-size: 14px;
    font-family: Source Han Sans SC;
    color: #666666;
    margin-bottom: 20px;
    margin-left: 40px;
  }

  .change-button {
    margin-top: 20px;
    width: 200px;
    height: 50px;
    color: rgba(255, 255, 255, 1);
    background-color: #e9021d;
    font-size: 18px;
    font-family: Source Han Sans SC;
    font-weight: bold;
  }

  .change-color {
    color: #e9021d;
    font-size: 18px;
    margin-right: 10px;
  }

  .divider {
    margin: 50px 0 40px 0;
  }

  .p {
    margin-left: 40px;
    font-size: 14px;
    font-family: Source Han Sans SC;
    font-weight: bolder;
    color: rgba(0, 0, 0, 1);
  }

  .p-content {
    width: 1135px;
    margin: 0 auto;
    font-size: 14px;
    color: #666666;
  }

  /deep/ .el-divider__text {
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    /*color: rgba(233, 2, 29, 1);*/
  }

  /deep/.el-breadcrumb__inner a:hover,
  /deep/.el-breadcrumb__inner.is-link:hover {
    color: rgba(233, 2, 29, 1);
    cursor: pointer;
  }

  .w_1200 {
    width: 1220px;
    margin: 40px auto;
    background-color: #fff;
    overflow: hidden;
  }

  table {
    border-collapse: collapse;
    margin: 0 0 30px 30px;
  }

  table td {
    border: 1px #efedef solid;
  }

  .left-table {
    width: 202px;
    height: 52px;
    background: rgba(242, 245, 250, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    text-align: center;
    font-size: 14px;
  }

  .right-table {
    width: 372px;
    font-size: 14px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    text-indent: 19px;
  }

  .footer {
    height: 323px;
  }

  /deep/ .el-image__inner--center {
    -ms-transform: none;
    top: 0;
    left: 0;
  }

  /deep/ .el-breadcrumb__inner span:hover,
  .el-breadcrumb__inner.is-link span:hover {
    color: rgba(233, 2, 29, 1);
  }

  /deep/ .el-breadcrumb__inner a:hover {
    cursor: pointer;
  }
</style>
