<template>
  <!-- :style="{ border: borderStyle }" -->
  <div class="custom-descriptions">
    <div class="title">{{ title }}</div>
    <!-- :style="{ gridTemplateColumns: gridTemplateColumns }" -->
    <div class="custom-descriptions-content">
      <div v-for="(item, index) in items" :key="index" class="custom-descriptions-item" :style="{ width: widthColumns }">
        <div class="custom-descriptions-item-label">
          <div class="icon">
            <i v-show="!item.isSvg" :class="item.icon" />
            <svg-icon v-show="item.isSvg" :icon-class="item.icon" class-name="card-panel-icon" />
          </div>
          <div>{{ item.label }}</div>
        </div>
        <div class="custom-descriptions-item-value" @click="hanleInput(index)">
          <div v-if="index !== currentIndex" class="text" :style="{ width: item.width ? item.width + 'px' : 'auto' }">
            {{ data[item.field] }}
          </div>
          <el-input
            v-else
            ref="inputRef"
            :style="{ width: item.width ? item.width + 'px' : '100%' }"
            :type="item.type ? item.type : 'text'"
            v-model="data[item.field]"
            @blur="inputBlur"
            :autosize="{ minRows: 1, maxRows: 2}"
            resize="none"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomDescriptions',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    data: {
      type: Object,
      default: () => {}
    },
    column: {
      type: Number,
      default: 2
    },
    border: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium'
    },
    title: {
      type: String,
      default: '地址信息'
    }
  },
  data() {
    return {
      currentIndex: -1
    }
  },
  computed: {
    // gridTemplateColumns() {
    //   return `repeat(${this.column}, 1fr)`
    // }
    widthColumns() {
      return `calc(100% / ${this.column})`
    }
    // borderStyle() {
    //   if (this.border) {
    //     return '1px solid #ebebeb'
    //   } else {
    //     return 'none'
    //   }
    // }
  },
  methods: {
    hanleInput(index) {
      this.currentIndex = index
      this.$nextTick(() => {
        // console.log(this.$refs.inputRef[0].$refs.input,":this.$refs.inputRef");
        this.isShow = true
        if(this.$refs.inputRef[0].$refs.input) this.$refs.inputRef[0].$refs.input.focus()
        if(this.$refs.inputRef[0].$refs.textarea) this.$refs.inputRef[0].$refs.textarea.focus()
      })
    },
    inputBlur() {
      this.$nextTick(() => {
        this.currentIndex = -1
      })
    }
  }
}
</script>

<style lang="less" scoped>
.custom-descriptions {
  /* padding: 10px; */
  margin-bottom: 15px;
  .title {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
  }
  .custom-descriptions-content {
    // display: grid;
    // grid-auto-rows: auto;
    /* grid-gap: 10px; */
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid rgb(235, 235, 235);
    border-left: 1px solid rgb(235, 235, 235);
    .custom-descriptions-item {
      display: flex;
       /* justify-content: space-between; */
      align-items: center;
      // border: 1px solid rgb(235, 235, 235);
      border-right: 1px solid rgb(235, 235, 235);
      border-bottom: 1px solid rgb(235, 235, 235);
      .custom-descriptions-item-label {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        height: 100%;
        box-sizing: border-box;
        width: 130px;
        padding: 0 12px;
        background-color: #f2f6fc;
        line-height: 43px;
        font-weight: bold;
        color: #6c6e72;

        .icon {
          padding-right: 5px;
        }
      }
      .custom-descriptions-item-value {
        flex: 1;
        text-align: left;
        .text {
          display: flex;
          align-items: center;
          padding-top: 3px;
          padding-bottom: 3px;
          padding-left: 10px;
          min-height: 42px;
          height: 100%;
          line-height: 1.4;
          border: 1px solid #DCDFE6;
          border-radius: 4px;
          margin: 0 3px;
        }
      }

      &:last-child {
        flex: 1;
      }
    }
  }
}

</style>
