<template>
  <div class="my--descriptions" :class=" changeStyle ? 'my--descriptionsChange':''">
    <el-descriptions class="margin-top" 
      :column="column" 
      :size="size" 
      :border="border" 
      :colon="!changeStyle"
      :labelClassName=" width ? 'descriptions-labelWidth-style': changeStyle ? 'descriptions-labelChange-style':'descriptions-label-style'" 
      :contentClassName=" width ? 'descriptions-contentWidth-style' : changeStyle ? 'descriptions-contentChange-style':'descriptions-content-style'">
      <el-descriptions-item v-for="item in descriptions" :key="item.id" :span="item.span ? item.span : 1 ">
        <template slot="label">
          {{ item.label }}
        </template>
        {{ item.value }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
export default {
  name:'myDescriptions',
  props:{
    descriptions:{
      type:Array,
      required:true
    },
    size:{
      type:String,
      default:'mini'
    },
    column:{
      type:Number,
      default:2
    },
    width:{
      type:Boolean,
      default:false,
    },
    border:{
      type:Boolean,
      default:true,
    },
    changeStyle:{
      type:Boolean,
      default:false,
    }
  },
  data() {
    return {
    }
  },
  methods:{
  },
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/utils.scss";
.my--descriptions {
  ::v-deep .descriptions-label-style {
    background-color: #F7FBFE;
    font-size: vw(16);
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #6A6C6F;
    width: vw(246);
  }
  ::v-deep .descriptions-labelWidth-style {
    background-color: #F7FBFE;
    font-size: vw(16);
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #6A6C6F;
    width: vw(306);
  }
  
  ::v-deep .descriptions-content-style {
    font-size: vw(16);
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #292F38;
    width: vw(610);
  }
  ::v-deep .descriptions-contentWidth-style {
    font-size: vw(16);
    font-family: Source Han Sans CN;
    font-weight: 400;
    width: vw(450);
    color: #292F38;
  }
}
.my--descriptionsChange {
  background-color: #F7FAFC;
  padding: vh(25) 0;
  .margin-top {
    ::v-deep .el-descriptions__body {
      background-color: #F7FAFC;
      .descriptions-labelChange-style {
        background-color: #F7FAFC;
        font-size: vw(16);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #6A6C6F;
        width: vw(246);
        display: inline-block;
        text-align: right;
      }
      .descriptions-contentChange-style {
        background-color: #F7FAFC;
        font-size: vw(16);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #292F38;
        width: vw(610);
      }
    }
  }
}
</style>
