<template>
  <div>
    <div class="pro_title">机构信息：</div>
    <div class="pro_div">
      <div class="pro_img_d">
        <img :src="data.picture_path" class="pro_img" />
      </div>
      <div class="pro_1">机构名称：{{ data.organization_name }}</div>
      <div class="pro_2">联系人：{{ data.user_name }}</div>
      <div class="pro_3">联系电话：{{ data.phone }}</div>
    </div>
    <div class="pro_title">{{ isApp ? '应用规格：' : '服务规格：'}}</div>
    <table-um
      ref="apply_service_state_table"
      :headers="isApp ? dataHeadersApp : dataHeaders"
      :stripe="false"
      :datas="data.serviceRequestSpcsTable"
    ></table-um>
  </div>
</template>

<script>
import TableUm from "@/components/table/table-um";
export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
    isApp: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataHeaders: [
        {
          label: "规格类型",
          prop: "type",
          align: "left",
          width: "200"
        },
        {
          label: "规格",
          prop: "spce",
          align: "left",
          width: "300"
        },
        {
          label: "购买时长",
          prop: "times",
          align: "center",
          width: "200"
        },
        {
          label: "规格说明",
          prop: "descript",
          align: "left",
        },
      ],
      dataHeadersApp: [
        {
          label: "规格类别",
          prop: "type",
          align: "left",
          width: "200"
        },
        {
          label: "时长",
          prop: "times",
          align: "center",
          width: "200"
        },
        {
          label: "价格",
          prop: "spce",
          align: "center",
          width: "200"
        },
        {
          label: "规格说明",
          prop: "specifications",
          align: "left",
        },
      ],
    };
  },
  components: {
    TableUm,
  },
};
</script>

<style scoped>
.pro_title {
  font-size: 14px;
  line-height: 14px;
  color: #8890a7;
  margin-bottom: 8px;
  margin-left: 8px;
}
.pro_div {
  display: grid;
  grid-template-columns: 88px 1fr 1fr;
  grid-template-rows: 44px 44px;
  grid-row-gap: 1px;
  grid-column-gap: 1px;
  background-color: #dde0e9;
  padding: 1px;
  margin-bottom: 24px;
}
.pro_img_d {
  width: 88px;
  height: 89px;
  padding: 8px;
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: #fff;
}
.pro_img {
  width: 100%;
  height: 100%;
}
.pro_1 {
  grid-column-start: 2;
  grid-column-end: 4;
  line-height: 44px;
  padding-left: 24px;
  background-color: #fff;
}
.pro_2 {
  line-height: 44px;
  padding-left: 24px;
  background-color: #fff;
}
.pro_3 {
  line-height: 44px;
  padding-left: 24px;
  background-color: #fff;
}
</style>
