/** * @author 冷 (https://github.com/LengYXin) * @email lengyingxin8966@gmail.com * @create date
2019-03-12 17:20:19 * @modify date 2019-03-12 17:20:19 * @desc 详情视图 modal 或者 drawer 方式
根据全局配置而定 */
<template>
  <a-modal
    v-if="isModal"
    class="w-view"
    footer
    :width="_width"
    :visible="visible"
    :title="_title"
    destroyOnClose
    @cancel="onCancel"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot v-if="visible" />
  </a-modal>
  <a-drawer
    v-else
    class="w-view"
    :width="_drawerWidth"
    :visible="visible"
    :title="_title"
    placement="right"
    destroyOnClose
    @close="onCancel"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot v-if="visible" />
    <template #handle v-if="visible">
      <div class="w-view-handle">
        <draggable-resizable
          class="w-view-draggable-resizable"
          :y="0"
          :x="x"
          :w="10"
          :z="1010"
          h="auto"
          :style="draggableStyle"
          @dragging="onDrag"
          axis="x"
          :draggable="true"
          :resizable="false"
          :parent="false"
        />
      </div>
    </template>
  </a-drawer>
</template>

<script lang="ts">
import lodash from 'lodash';
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
  components: {},
  provide() {
    return lodash.pick(this, ['queryKey']);
  },
})
export default class extends Vue {
  /** query参数的Key 默认取 detailsVisible */
  @Prop({ default: 'details' }) readonly queryKey: string;
  /** 固定页面 只在第一次打开的页面有效 */
  @Prop({ default: true }) readonly fixedPage: boolean;
  /** 标题  */
  @Prop() readonly title: string;
  @Prop() readonly width;
  /** 弹框类型 */
  @Prop() readonly modalType: 'modal' | 'drawer';

  /** 记录创建 时的 page */
  PageKey = null;
  get visibleKey() {
    return this.queryKey;
  }
  get isModal() {
    const width = window.innerWidth;
    const modalType =
      this.modalType || lodash.get(this, 'AppConfig.AppSettings.formType', 'drawer');
    return lodash.eq(modalType, 'modal') && width > 701;
  }
  get query() {
    return lodash.clone(this.$route.query);
  }
  get visible() {
    const visible = lodash.has(this.query, this.visibleKey);
    if (this.fixedPage) {
      return lodash.eq(this.PageKey, this.$route.name) && visible;
    }
    return visible;
  }
  // 只读
  get readonly() {
    return lodash.has(this.$route.query, '_readonly');
  }
  get _title() {
    if (this.title) {
      return this.title;
    }
    if (lodash.get(this.query, this.visibleKey)) {
      // return this.$t(
      //   this.readonly ? this.$locales.action_info : this.$locales.action_update
      // );
      return this.readonly ? '新增' : '编辑';
    }
    return '新增';
  }
  get _width() {
    if (this.width) {
      return this.width;
    }
    const width = window.innerWidth * 0.5;
    return lodash.max([500, width > 800 ? 800 : width]);
  }
  get _drawerWidth() {
    if (this.style.width) {
      return this.style.width;
    }
    return this._width;
  }
  style = { width: '' };
  x = 0;
  get draggableStyle() {
    return { left: `${-this.x - 4}px` };
  }
  onDrag(x, y) {
    console.log('LENG ~ extends ~ onDrag ~ x, y', x, y);
    this.x = x;
    let width = 0;
    const defaultW = lodash.toInteger(lodash.replace(this._width, 'px', ''));
    width = defaultW - this.x;
    this.style.width = width + 'px';
  }
  onCancel() {
    this.$VisibleBack(this.visibleKey);
  }
  created() {}
  mounted() {
    this.PageKey = this.$route.name;
  }
}
</script>
<style lang="less">
.w-view {
  &.ant-modal {
    min-width: 650px;
    .ant-modal-body {
      max-height: 75vh;
      // position: relative;
      overflow: auto;
    }
  }
  &.ant-drawer {
    .ant-drawer-content-wrapper {
      max-width: 100vw;
    }
  }
  &-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    width: 8px;
    overflow: hidden;
    cursor: col-resize;
    // background: red;
  }
  &-draggable-resizable {
    border: none !important;
    // background: green;
    top: 5px;
    bottom: 5px;
    transition: background 0.5s;
    &:hover {
      background: #ccc;
    }
  }
}
</style>