<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>
      </div>
      <div class="num">{{ data.num }}</div>
      <div class="count">{{ data.count }}</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 maxlength="400" show-word-limit v-model="sceneinput" placeholder="请填写申请服务的应用场景"></el-input>
    </div>
    <p
      class="inputtitle degr"
      v-if="!data.isapp && data.data && data.data.length != 0 "
      @click="showtable = !showtable"
    >
      <i :class="showtable ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>选择需要申请的数据项：
    </p>
    <table-um
      v-if="!data.isapp && data.data && data.data.length != 0 "
      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/general/upload_file";
import tableUm from "@/components/table/table-um";
export default {
  props: ["data", "idx"],
  components: {
    uploadFile,
    tableUm
  },
  data() {
    return {
      sceneinput: "",
      fileList: "",
      imgList: [],
      showtable: false,
      headers: [
        {
          label: "字段编码",
          prop: "name",
          align: "left",
          minWidth: "20%"
        },
        {
          label: "字段名称",
          prop: "label",
          align: "left",
          minWidth: "20%"
        },
        {
          label: "字段类型",
          prop: "show_type",
          align: "center",
          width: "150"
        },
        {
          label: "字段描述",
          prop: "descript",
          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>
.outborder .system .el-input__prefix,.outborder .system .el-input__suffix{
  left: auto;
}
</style>
<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: 66px;
}
.pic {
  width: 116px;
  height: 116px;
  float: left;
  background-size: contain;
  margin-right: 15px;
}
.info {
  float: left;
  width: 230px;
}
.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;
  line-height: 107px;
  border-radius: 8px;
  color: #242c43;
}
.num {
  width: 138px;
  height: 107px;
  line-height: 107px;
  font-size: 14px;
  color: #242c43;
  margin-right: 20px;
  text-align: center;
}
.count{
  width: 108px;
  height: 107px;
  line-height: 107px;
  font-size: 14px;
  color: #242c43;
  text-align: center;
}
.oprate {
  width: 150px;
  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;
  margin-bottom: 10px;
}
.system .el-select {
  position: absolute;
  left: 30px;
  top: 0;
}
.degr {
  text-decoration: underline;
  cursor: pointer;
}
.table {
  margin: 0 30px 20px;
}
</style>
