<template>
  <a-drawer
    :visible="visible"
    :width="isMobile ? screenWidth : screenWidth * 0.85"
    placement="right"
    :title="mainTitle"
    @close="onClose"
  >
    <a-spin :spinning="loadDetails">
      <a-row type="flex">
        <a-col :span="layoutStyle.leftCol">
          <!-- 扩展区域 -->
          <slot name="leftContent" :details="details"/>
        </a-col>
        <a-col :span="layoutStyle.rightCol">
          <a-page-header :title="title">
            <!-- 详情区域 -->
            <div class="row">
              <div class="content">
                <a-descriptions :column="desColumn">
                  <slot name="descriptionsContent" :details="details"/>
                </a-descriptions>
              </div>
              <!-- 状态区域 -->
              <div class="extra">
                <slot name="statusContent" :details="details"/>
                <!-- example is: -->
                <!-- <a-row class="status-list">-->
                <!--   <a-col :sm="24" :xs="12">-->
                <!--   </a-col>-->
                <!-- </a-row>-->
                <!-- or many is: -->
                <!-- <a-row class="status-list">-->
                <!--   <a-col :sm="24" :xs="12">-->
                <!--   </a-col>-->
                <!-- </a-row>-->
                <!-- <p></p>-->
                <!-- <a-row class="status-list">-->
                <!--   <a-col :sm="24" :xs="12">-->
                <!--   </a-col>-->
                <!-- </a-row>-->
              </div>
            </div>
            <!-- 操作区域 -->
            <template #extra>
              <a-button-group style="margin-right: 4px;" v-show="buttonState.refresh">
                <a-button :loading="loadDetails" type="dashed" @click="initView('1')">刷新</a-button>
              </a-button-group>
              <a-button-group style="margin-right: 4px;">
                <slot name="actionContent" :details="details"/>
              </a-button-group>
            </template>
            <!-- 扩展区域 -->
            <slot name="extraContent" :details="details"/>
            <!-- 页签区域 -->
            <a-tabs default-active-key="1">
              <slot name="actionTabs" :details="details"/>
            </a-tabs>
          </a-page-header>
        </a-col>
      </a-row>
    </a-spin>
  </a-drawer>
</template>

<script>
import { formatDate } from '@vue2-client/utils/util'
import { mapState } from 'vuex'
import XBadge from '@vue2-client/base-client/components/common/XBadge/XBadge'
import { post } from '@vue2-client/services/api/restTools'

export default {
  name: 'XDetailsView',
  components: {
    XBadge
  },
  data () {
    return {
      // 页面宽度
      screenWidth: document.documentElement.clientWidth,
      // 数据详情
      details: {},
      // 详情加载
      loadDetails: false
    }
  },
  mounted () {
    this.initView()
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
    ...mapState('setting', ['isMobile'])
  },
  props: {
    id: {
      type: [String, Number],
      required: false
    },
    mainTitle: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    api: {
      type: String,
      required: false
    },
    desColumn: {
      type: Number,
      required: false,
      default: 3
    },
    // 按钮状态
    buttonState: {
      type: Object,
      default: () => {
        return {
          // 刷新按钮显示状态
          refresh: true
        }
      }
    },
    // 详情内容样式
    layoutStyle: {
      type: Object,
      default: () => {
        return {
          leftCol: 0, // 侧边占比
          rightCol: 24, // 内容区域占比
        }
      }
    }
  },
  methods: {
    // 初始化组件
    initView () {
      this.getDetails()
    },
    // 关闭抽屉时回调
    onClose () {
      this.$emit('update:visible', false)
    },
    // 获取详情信息
    getDetails () {
      if (this.api && this.id) {
        this.loadDetails = true
        post(this.api, {
          id: this.id
        }).then(res => {
          this.$emit('searchData', res)
          this.details = res
        }, err => {
          console.error(err)
        }).finally(() => {
          this.loadDetails = false
        })
      }
    },
    // 日期格式化
    format (date, format) {
      return formatDate(date, format)
    }
  },
  watch: {
    'visible' (val) {
      if (val) {
        this.initView()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.detail-layout {
  margin-left: 44px;
}
.text {
  color: rgba(0, 0, 0, .45);
}

.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
}

.no-data {
  color: rgba(0, 0, 0, .25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.mobile {
  .detail-layout {
    margin-left: unset;
  }
  .text {

  }
  .status-list {
    text-align: left;
  }
}

.row {
  display: flex;

  .content {
    -webkit-box-flex: 1;
    flex: auto;
    -ms-flex: auto;
  }

  .extra {
    flex: 0 1 auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    min-width: 242px;
    margin-left: 88px;
    text-align: right;
  }
}
</style>
