<template>
  <el-dialog
    title=""
    :visible.sync="dialogVisible"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
    :append-to-body="true"
  >
    <el-row :gutter="20" style="margin-top: 10px;">
      <el-col :span="24">
        <div style="margin-bottom: 10px;">
          <span style="font-weight: bold;">机台信息</span>
        </div>
        <div style="max-height: 360px; overflow-y: auto;">
          <el-table
            :data="machineList"
            :border="true"
            :style="{ width: '100%' }"
            :max-height="340"
            v-loading="loading"
          >
            <el-table-column type="index" label="序号" align="center" width="60"/>
            <el-table-column prop="machineCd" label="机台编码" align="center"/>
            <el-table-column prop="machineName" label="机台名称" align="center"/>
            <el-table-column prop="createUserName" label="创建人" align="center"/>
            <el-table-column prop="creatorTime" label="创建时间" align="center" :formatter="jnpf.tableDateFormat1"/>
          </el-table>
        </div>
      </el-col>
    </el-row>
    
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";
import jnpf from "@/utils/jnpf";

export default {
  name: "machineDetail",
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    userName: {
      type: String,
      default: "",
    },
    userMachineId: {
      type: String,
      default: "",
    },
  },
  computed: {
    title() {
      return `${this.userName} 的机台列表`;
    },
    jnpf() {
      return jnpf;
    },
  },
  data() {
    return {
      loading: false,
      machineList: [],
    };
  },
  watch: {
    dialogVisible(val) {
      if (val && this.userMachineId) {
        this.initData();
      }
    },
  },
  methods: {
    initData() {
      this.loading = true;
      request({
        url: `/api/example/userMachine/${this.userMachineId}`,
        method: "get",
      }).then((res) => {
        this.machineList = res.data.machineList || [];
        this.loading = false;
      }).catch(() => {
        this.machineList = [];
        this.loading = false;
      });
    },
    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>
