<template>
  <view
    class="xd-value"
    v-if="uiItem"
    :style="{
      background: background
    }"
  >
    <view class="xd-value__header" v-if="uiItem.title" :style="{background:borderColor}">{{uiItem.title}}</view>
    <view class="xd-value__content">
      <view
        class="xd-value__content-item"
        v-for="(item,index) in uiItem['data']"
        :key="index"
      >
        <view
          class="xd-value__content-item-td"
          :style="{
            borderColor: borderColor,
            borderWidth:borderWidth,
            width: widthKey
          }"
        >{{item.label}}</view>
        <view
          class="xd-value__content-item-td"
          :style="{
            borderColor: borderColor,
            borderWidth: borderWidth,
          }"
        >{{item.value}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "XdKeyValue",
    props:{
      item: {
        type: Object | null,
        default: null
      },

      background: {
        type: String,
        default: '#fff'
      },
      borderColor: {
        type: String,
        default: '#efefef'
      },
      borderWidth: {
        type: Number | String,
        default: 6, //rpx
      },
      widthKey: {
        type: String,
        default: '25%' //30rpx 30% 30vw
      }
    },
    data(){
      return {
        uiItem: null,

        testData: {
          title: '科室检查（5项）', //是否启用标题列表
          data:[
            {label: '一般检查', value: '体重是否正常，有无体重不足、超重或肥胖；有无 血压脉搏异常等'},
            {label: '内科', value: '心肺有无异常肝脾有无肿大、腹部有无包块等'},
            {label: '外科', value: '淋巴结有无肿大，甲状腺、乳房、外生殖器、前列腺、肛肠有无异常、四肢脊柱有无畸形等'},
            {label: '外科', value: '视力是否正常，眼外观是否正常，有无沙眼、结膜炎等'},
            {label: '血常规', value: '可提示:小细胞性贫血,巨幼妊胞贫血,恶性贫血,再生障碍性贫血,溶血性贫血,白血病,粒细胞减少,血小板 减少，淋巴细胞减少,感染等'},
          ],
        }
      }
    },

    watch: {
      item() {
        this.init();
      }
    },

    created() {
      this.init();
    },

    methods: {
      init() {
        if (this.item === null) this.uiItem = this.$xdUniHelper.cloneDeep(this.testData);
        else this.uiItem = this.$xdUniHelper.cloneDeep(this.item);
      },
    }
  }
</script>

<style scoped lang="less">
  .xd-value {
    background: #fff;
    color: #666;

    &__header {
      height: unit(80,rpx);
      line-height: unit(80,rpx);
      text-align: center;
      font-size: @xd-font-size-base + 2;
      font-weight: bold;
    }

    &__content {
      display: table;
      width: 100%;
      border-collapse: collapse;
      box-sizing: border-box;

      &-item {
        display: table-row;
        min-height: unit(30,rpx);
        box-sizing: border-box;

        &-th {

        }

        &-td {
          display: table-cell;
          height: 100%;
          border-style: solid;
          vertical-align: middle;
          font-size: @xd-font-size-base;
          box-sizing: border-box;
          padding: unit(10,rpx) unit(20,rpx);

          &:first-child {
            border-left: 0;
          }

          &:last-child {
            border-right: 0;
          }
        }
      }
    }



  }

</style>
