<template>
  <div class="userDetail">
    <div class="content-head">
      <slot></slot>
      <h3>查看</h3>
      <div>查看基本信息、企业资质文件</div>
    </div>
    <div class="detail-list">
      <div>
        <h5>基本信息</h5>
        <ul class="flex">
          <li v-for="(item,index) in informationList" :key="index">
            <div>*{{ item.title }}</div>
            <div>{{ item.message }}</div>
          </li>
        </ul>
        <div class="detail-item">
          <div>*经营范围</div>
          <div>一般项目：技术服务，技术开发</div>
        </div>
        <div class="detail-item">
          <div>*法人身份证正反面</div>
          <el-image v-for="(item,index) in imglist" :src="item.src" :key="index" style="margin-right:20px"></el-image>
        </div>
        <div class="detail-item">
          <div>*三证合一扫描件</div>
          <el-image v-for="(item,index) in imglist" :src="item.src" :key="index" style="margin-right:20px"></el-image>
        </div>
        <div class="detail-item">
          <div>其他资料</div>
          <div class="flex-between pdf">
            <div>pdf文件</div>
            <div>预览</div>
            <div>下载</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="buttonType==1" class="operation">
      <button @click="back">返回</button>
    </div>
    <div v-if="buttonType==2" class="operation flex-button">
      <button @click="back">取消</button>
      <button>拒绝</button>
      <button>通过</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'detail',
  props: {
    buttonType: {
      type: Number,
      default: 1
    },
    informationList: {
      type: Array,
      default: () => []
    },
    imglist: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  },
  created() {
    console.log(this.$route)
  },
  methods: {
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
	.detail-list>div>ul>li {
		margin-right: 150px;
		margin-bottom: 50px;
		width: 180px
	}

	.detail-list>div>ul {
		flex-wrap: wrap;
		margin-left: 30px;
		margin-top: 20px;
	}

	.detail-head {
		margin-left: 30px;
		padding-top: 10px;
	}

	.detail-head>h3 {
		font-weight: bold;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.detail-list {
		box-sizing: border-box;
		padding-top: 20px;
		background-color: #F0F2F5;
		margin-top: 10px;
	}

	.detail-list>div {
		background-color: #FFFF;
		padding-bottom: 20px;
	}

	.detail-list h5 {
		font-weight: bold;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #F0F2F5;
		box-sizing: border-box;
		padding-left: 30px;
	}

	.detail-item {
		margin-left: 30px;
		margin-bottom: 30px;
	}

	.detail-item>div:first-child {
		margin-bottom: 10px;
	}

	.pdf {
		width: 170px
	}

	.pdf>div:nth-child(2),
	.pdf>div:last-child {
		width: 50px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 10px;
		border: 1px solid #000
	}

	.operation {
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
		justify-content: flex-end;
	}

	.operation>button {
		width: 50px;
		height: 30px;
		border-radius: 2px;
		background: #fff;
		border: 1px solid #999;
	}

	.flex-button>button {
		margin-left: 10px;
	}

	.flex-button>button:last-child {
		background: #28e;
		color: #fff
	}
</style>
