<template>
  <el-drawer :visible="showDrawer" direction="rtl" :size="size" @close="close">
    <h3 slot="title">详细信息</h3>
    <div style="padding: 0 20px;">
      <!-- title部分 -->
      <div class="detail">
        <h4>{{ msgDetailAcout.content }}</h4>
        <span>{{ msgDetailAcout.time }}</span>
        <span>应用：{{ msgDetailAcout.app }}</span>
      </div>
      <!-- 信息表格 -->
      <zx-table
        :table-list="msgDetailTable"
        :header="msgDetailHeader"
      ></zx-table>
      <!-- 详细信息分页 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="pageMsgDetailInfo.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageMsgDetailInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageMsgDetailInfo.total"
      >
      </el-pagination>
    </div>
  </el-drawer>
</template>

<script>
import ZxTable from "../ZxTable";

export default {
  components: {
    ZxTable
  },
  props: {
    showDrawer: {
      type: Boolean,
      default: () => false
    },
    size: {
      type: String,
      default: () => "50%"
    },
    msgDetailTable: {
      type: Array,
      default: () => {
        return [];
      }
    },
    msgDetailAcout: {
      type: Object,
      default: () => {
        return {};
      }
    },
    pageMsgDetailInfo: {
      type: Object,
      default: () => {
        return {
          total: 0,
          page: 1,
          size: 10
        };
      }
    }
  },
  data() {
    return {
      msgDetailHeader: [
        { prop: "object_id", label: "计划ID", width: "160" },
        { prop: "content_log", label: "操作内容" },
        { prop: "opt_ip", label: "操作者IP", width: "120" },
        { prop: "create_time", label: "操作时间", width: "160" }
      ] //详细信息表格表头控制
    };
  },
  methods: {
    /**
     * 关闭窗口时候改变显示控制的值给父组件
     */
    close() {
      this.$emit("update:showDrawer", false);
    },
    /**
     *  抽屉页内的分页条数和页数改变
     */
    sizeChange(val) {
      this.pageMsgDetailInfo.size = val;
      this.$emit("msgDetailChange", 1113);
    },
    pageChange(val) {
      this.pageMsgDetailInfo.page = val;
      this.$emit("msgDetailChange", 1113);
    }
  }
};
</script>

<style scoped>
.detail {
  flex-direction: column;
  display: flex;
  justify-content: space-around;
  height: 80px;
  margin-bottom: 10px;
}
</style>
