<template>
  <div class="outborder">
    <div class="outservice">
      <div class="serviceinfo">
        <div
          class="pic"
          :style="{ backgroundImage: 'url(' + data.img + ')' }"
        ></div>
        <div class="info">
          <p>
            {{ data.title }}
            <span
              v-for="(item, index) in data.tips"
              :key="index + 4000"
              :style="
                item.type == 'nor'
                  ? { color: '#fff', backgroundColor: 'rgba(83, 98, 238, 1)' }
                  : item.type == 'share'
                  ? {
                      color: 'rgba(37, 189, 177, 1)',
                      backgroundColor: 'rgba(231, 253, 252, 1)',
                      border: 'solid 1px rgba(139, 214, 208, 1)',
                    }
                  : item.type == 'mg'
                  ? {
                      color: 'rgba(225, 82, 96, 1)',
                      backgroundColor: 'rgba(255, 239, 239, 1)',
                      border: 'solid 1px rgba(215, 164, 169, 1)',
                    }
                  : {
                      color: '#ef9433',
                      backgroundColor: '#fffee8',
                      border: 'solid 1px #e4c884',
                  }
              "
              >{{ item.tip }}</span
            >
          </p>
          <p>{{ data.type }}</p>
          <p>{{ data.auth }}</p>
        </div>
      </div>
      <div class="size">
        <p>{{ data.size }}</p>
        <P>{{ data.applytype }}</P>
      </div>
      <div class="num">
        {{ data.num }}
      </div>
      <div class="oprate">
        <upload-file
          v-if="data.isMg"
          :list="imgList"
          :drag="false"
          @getNewList="getNewList"
          type="default"
        ></upload-file>
      </div>
    </div>
    <p class="inputtitle">应用场景：</p>
    <div class="system">
      <el-input
        v-model="sceneinput"
        placeholder="请填写申请服务的应用场景"
      ></el-input>
    </div>
    <p class="inputtitle degr" v-if="!data.isapp" @click="showtable = !showtable">
      <i :class="showtable ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i
      >选择需要申请的数据项：
    </p>
    <table-um
     v-if="!data.isapp"
      v-show="showtable"
      :isSelection="true"
       ref="apply_service_state_table"
      :headers="headers"
      :stripe="true"
      :datas="data.data"
      class="table"
    ></table-um>
  </div>
</template>

<script>
import uploadFile from "@/components/upload_file";
import tableUm from "@/components/table/table-um";
export default {
  props: ["data"],
  components: {
    uploadFile,
    tableUm,
  },
  data() {
    return {
      sceneinput: "",
      fileList:'',
      imgList:[],
      showtable: false,
      headers: [
        {
          label: "字段编码",
          prop: "code",
          align: "left",
          minWidth: "20%",
        },
        {
          label: "字段名称",
          prop: "name",
          align: "left",
          minWidth: "20%",
        },
        {
          label: "字段类型",
          prop: "type",
          align: "center",
          width: "150",
        },
        {
          label: "字段描述",
          prop: "desc",
          align: "left",
          minWidth: "50%",
        },
      ],
    };
  },
  watch: {},
  computed: {},
  created() {

  },
  mounted() {},
  methods: {
    getNewList(val) {
        console.log(val);
        this.fileList = ""
        this.fileList = val.map((v,k)=>{
          return v.url
        }).join(';')
        console.log(this.fileList)
      }
  },
};
</script>

<style scoped>
.outborder{
    border-bottom: 2px solid rgba(244, 247, 252, 1);
}
.outservice {
  width: 100%;
  overflow: hidden;
  padding: 25px 30px;
}
.outservice > div {
  float: left;
}
.serviceinfo {
  width: 415px;
  margin-right: 90px;
}
.pic {
  width: 116px;
  height: 116px;
  float: left;
  background-size: contain;
  margin-right: 20px;
}
.info {
  float: left;
  width: 270px;
}
.info p {
  color: rgba(136, 144, 167, 1);
}
.info p:nth-of-type(1) {
  color: rgba(13, 24, 71, 1);
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 22px;
}
.info p:nth-of-type(2) {
  margin-bottom: 15px;
}
.info p:nth-of-type(1) span {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  border-radius: 4px;
  margin: 0 10px;
  font-size: 12px;
  padding: 0 9px;
}
.size {
  width: 240px;
  height: 107px;
  background-color: rgba(249, 250, 252, 1);
  border-radius: 8px;
  margin-right: 70px;
  padding: 20px;
  color: rgba(136, 144, 167, 1);
}
.size p:nth-of-type(1) {
  line-height: 22px;
  margin-bottom: 10px;
}
.num {
  width: 138px;
  height: 107px;
  line-height: 107px;
  font-size: 16px;
  color: rgba(88, 97, 122, 1);
  margin-right: 55px;
  text-align: center;
}
.oprate {
  width: 130px;
  height: 107px;
  padding-top: 34px;
  padding-left: 30px;
}
.inputtitle {
  color: rgba(88, 97, 122, 1);
  padding-left: 45px;
  margin: 15px 0;
}
.system {
  padding: 0 30px;
  position: relative;
}
.system .el-select {
  position: absolute;
  left: 30px;
  top: 0;
}
.degr {
  text-decoration: underline;
  cursor: pointer;
}
.table{
    margin: 0 30px 20px;
}
</style>
