<template>
  <div>
    <el-card style="height: 958px">
      <span>设备名称</span>
      <el-input v-model="deviceName" style="width:250px;margin-left: 10px" clearable placeholder="设备名称"></el-input>
      <span style="margin-left: 10px">程序名称</span>
      <el-input v-model="programName" style="width:250px;margin-left: 10px" clearable placeholder="程序名称"></el-input>
      <el-button :disabled="loading" type="success" plain icon="el-icon-search" style="margin-left: 10px" @click="searchTable()">查询</el-button>
      <div style="margin-top: 10px">
        <el-col :span="14">
          <el-table
              v-loading="loading"
              :data="tableData"
              :header-cell-style="{background:'#F5F5F5'}"
              element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.2)"
              tooltip-effect="dark"
              style="width: 100%"
              height="850"
              border
              highlight-current-row
              stripe
              @row-click="showProgramContent">
            <el-table-column
                type="index"
                width="50">
            </el-table-column>
            <el-table-column align="center" label="设备名称" width="100">
              <template slot-scope="scope">
                {{ scope.row.设备名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="程序名称" min-width="60">
              <template slot-scope="scope">
                {{ scope.row.程序名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="程序号" min-width="60">
              <template slot-scope="scope">
                {{ scope.row.程序号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="读取时间" min-width="60">
              <template slot-scope="scope">
                {{ scope.row.操作时间 }}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="10">
          <el-input
              type="textarea"
              :rows="40"
              placeholder=""
              v-model="textarea">
          </el-input>
        </el-col>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      deliveryDate: [],
      textarea: '',
      deviceName: '',
      programName: '',
      upValue: 0,
      downValue: 0,
      loading: false,
      tableData: [],
      total: 0, // 总条数
      pageSize: 50, // 每页显示条数
      PageCurrent: 1 // 后台获取页
    }
  },
  computed: {},
  mounted() {
    this.searchTable()
  },
  created() {
  },
  methods: {
    searchTable() {
      this.loading = true
      this.tableData = []
      var param = []
      param[0] = ['程序名称', this.programName]
      param[1] = ['设备名称', this.deviceName]
      var Data = this.CreateData('11', '程序管理_机床程序_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableData = response.data
        }
        this.loading = false
      })
    },
    showProgramContent(row) {
      this.textarea = ''
      this.textarea = row['程序内容'].toString()
    },
    handleSizeChange(val) {
      this.PageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.PageCurrent = val
      this.searchTable()
    }
  }
}
</script>
<style scoped>
.div1{
  width: 140px;
  height: 105px;
  margin-left:15px;
  margin-top:15px;
  background: green;
  color: white;
  font-size: 25px;
}
.div2{
  width: 140px;
  height: 105px;
  margin-left:15px;
  margin-top:15px;
  background: #60839e;
  color: white;
  font-size: 25px;
}
.Checkbox {
  position: absolute;
  visibility: hidden;
}
</style>
