<template lang="html">
  <div class="materiel_detail">
    <x-dialog :show="show">
      <div class="dbox">
        <p class="dialog-title">同时订货的物料</p>
        <div class="dialog-content">
          <div v-for="(item, index) in list" :key="index">
            <p class="dialog-subtitle">
              {{item.class_name}}{{item.sku_list.length}}
            </p>
            <div class="dialog-wrap">
              <p class="dialog-item" v-for="(it, i) in item.sku_list">{{it.sku_name}}</p>
            </div>
          </div>
        </div>
        <div v-if="type === 'view'" class="close" @click="close" style="margin-bottom:15px;">关闭</div>
        <div v-if="type === 'edit'" class="btn-box" style="margin-bottom:15px;">
          <div @click="close">关闭</div>
          <div @click="edit">修改</div>
        </div>
      </div>
    </x-dialog>
  </div>
</template>

<script>
import { XDialog } from 'vux'
import { setTimeout } from 'timers';
export default {
  props: ['type', 'list', 'show'],
  components: {
    XDialog
  },
  watch: {
    list () {
      setTimeout(() => {
        let items = document.getElementsByClassName('dialog-item');
        console.warn(items);
        let leftHeight = 0;
        let rightHeight = 0;
        for (let i = 0; i < items.length; i++) {
          if (!(i % 2)) {
            leftHeight = $(items[i]).innerHeight();
          } else if (i % 2) {
            rightHeight = $(items[i]).innerHeight();
            console.warn(leftHeight, rightHeight)
            if (leftHeight > rightHeight) {
              // items[i].style.height = leftHeight;
              items[i].style.paddingBottom = items[i].style.paddingTop = (leftHeight - rightHeight) / 2 + 'px';
            } else if (rightHeight > leftHeight) {
              // items[i - 1].style.height = rightHeight;
              items[i - 1].style.paddingBottom = items[i - 1].style.paddingTop = (rightHeight - leftHeight) / 2 + 'px';
            }
          }
        }
      }, 1)
    }
  },
  methods: {
    close () {
      this.$emit('close', 'materiel')
    },
    edit () {
      this.$emit('edit', 'materiel')
    }
  }
}
</script>

<style lang="less" scoped>
.materiel_detail {
  .dialog-title {
    text-align: center;
    padding: 0.6rem 0;
    color: #fff;
    background: #8ea8cf;
  }
  .dialog-content {
    max-height: 25rem;
    overflow-y: scroll;
  }
  .dialog-subtitle {
    padding: 0.4rem 0.8rem;
    text-align: left;
  }
  .dialog-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    &:after {
      display: block;
      content: '';
      clear: both;
    }
    .dialog-item {
      width: 45%;
      // padding: 0.2rem 0;
      margin: 0.2rem 0.4rem;
      text-align: center;
      background: #F0EFF5;
      border-radius: 3px;
    }
  }
  .close {
    width: 95%;
    margin: 0 auto;
    background: #8ea8cf;
    text-align: center;
    padding: 0.4rem 0;
    color: #fff;
    margin-top: 1rem;
    border-radius: 5px;
  }
  .btn-box {
    display: flex;
    justify-content: space-around;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #f0eff5;
    div {
      width: 46%;
      padding: 0.4rem 0;
      border-radius: 5px;
      &:first-of-type {
        background: #fff;
        color: #89a9cf;
        border: 1px solid #89a9cf;
      }
      &:last-of-type {
        background: #89a9cf;
        color: #fff;
      }
    }
  }
  .dialog-store-wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 0.8rem;
    border-bottom: 1px solid #d6d7dc;
    span {
      padding: 0.3rem 0;
    }
  }
}
</style>