<template>
  <a-layout>>
    <a-layout-content>
      <div class="signature_wrapper" v-if="signatureList.length">
        <div v-for="(sig,index) in signatureList" :key="index">
          <div>
            {{ sig.label }}
            <img :src="hostUrl + sig.filePath" style="width:300px;height: 200px;" alt="" v-if="sig.filePath">
            <p v-else>暂无签字</p>
          </div>
        </div>
      </div>
      <div class="signature_wrapper" v-else>
        暂无签字
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { hostUrl } from '../../../utils/global_variable.js';
import request from '../../../utils/gw_ajax_request';
export default {
  props: {
    currentObjectRgstrId: {},
    labelList: {
      type: Array,
      default: () => ['省', '市', '县'],
    },
  },
  data() {
    return {
      signatureList: [],
    };
  },
  computed: {
    orgId() {
      return localStorage.getItem('currentOrgId')
        ? localStorage.getItem('currentOrgId')
        : '';
    },
    bizId() {
      return `${this.currentObjectRgstrId}${this.orgId}`;
    },
    hostUrl() {
      return hostUrl;
    },
  },
  mounted() {
    this.getSignaturePics();
  },
  methods: {
    getSignaturePics() {
      const signatureOne = new Promise((resolve, reject) => {
        request
          .post('/file/findPageInfo', {
            bizId: this.bizId,
            bizType: 'signature1',
          })
          .then((res) => {
            if (res.success) {
              if (res.data.list.length) {
                resolve(res.data.list);
              } else {
                resolve({});
              }
            }
          });
      });
      const signatureTwo = new Promise((resolve, reject) => {
        request
          .post('/file/findPageInfo', {
            bizId: this.bizId,
            bizType: 'signature2',
          })
          .then((res) => {
            if (res.success) {
              if (res.data.list.length) {
                resolve(res.data.list);
              } else {
                resolve({});
              }
            }
          });
      });
      const signatureThree = new Promise((resolve, reject) => {
        request
          .post('/file/findPageInfo', {
            bizId: this.bizId,
            bizType: 'signature3',
          })
          .then((res) => {
            if (res.success) {
              if (res.data.list.length) {
                resolve(res.data.list);
              } else {
                resolve({});
              }
            }
          });
      });
      // 根据传进来的labellist的长度进行数据请求
      const signatureArr = [signatureOne, signatureTwo, signatureThree];
      if (this.labelList && this.labelList.length) {
        signatureArr.length = this.labelList.length;
      }
      Promise.all(signatureArr).then((result) => {
        if (result.length) {
          result.forEach((ele, index) => {
            this.signatureList = this.signatureList.concat(ele);
          });
          this.signatureList.forEach((ele, index) => {
            ele['label'] = this.labelList[index];
          });
        }
        console.log(this.signatureList);
      });
    },
  },
};
</script>

<style lang='less' scoped>
.signature_wrapper {
  min-height: 300px;
  display: flex;
  justify-content: space-between;

  >div {
    width: 30%;
    font-size: 18px;
    font-weight: bold;
    text-align: center;

    img {
      width: 100%;
      vertical-align: text-top;
    }

    p {
      font-weight: normal;
      margin-top: 30px;
    }
  }
}
</style>
