<template>
  <div>
    <el-button class="button" type="primary" @click="getshow" size="mini">详情
    </el-button>
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisibledetail"
      width="90%">
      <div class="popbody">

      </div>
    </el-dialog>
  </div>
</template>

<script>

import { ordersGetIn } from '../../../api/user'

export default {
  name: 'detail',
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
  },
  data() {
    return {
      dialogVisibledetail: false
    }
  },
  watch: {
    dialogVisibledetail() {
      if (this.dialogVisibledetail) {
        this.getdata()
      }
    }
  },
  methods: {
    getshow() {
      this.dialogVisibledetail = true
    },
    getdata() {
      var that = this
      ordersGetIn({
        id: that.id
      }).then(function(res) {
        if (res.code == 0) {
          that.data2 = res.data
        }
      })
    },
    gethide() {
      this.dialogVisibledetail = false
    }
  }
}
</script>

<style lang="scss" scoped>
.popbody {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  position: relative;
  width: 100%;
  height: 600px;
}

.vuemaps {
  position: relative;
  width: calc(100% - 400px);
  height: 100%;
}

::v-deep {
  .el-dialog__title {
    color: #000 !important;
  }
}
</style>