<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <div>
          <span style="margin-left: 10px">产品图号：</span>
          <el-select v-model="productDrawing" placeholder="请选择产品图号" clearable filterable size="small" style="width: 150px; margin-left: 5px">
            <el-option
              v-for="item in productDrawingOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span style="margin-left: 10px">工艺路线号：</span>
          <el-input v-model="craftPath" placeholder="工艺路线号" clearable size="small" style="width: 150px; margin-left: 5px"/>
          <el-button icon="el-icon-search" plain size="small" style="margin-left: 5px" type="primary" @click="selectDate">查询</el-button>
          <el-button icon="el-icon-plus" plain size="small" type="success" @click="handleAdd">新增</el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          border
          class="main"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          element-loading-spinner="el-icon-loading"
          element-loading-text="数据加载中"
          height="700px"
          size="mini"
          style="width: 90%;max-height: 650px;margin-top: 10px"
          tooltip-effect="dark"
        >
          <el-table-column align="center" label="序号" type="index" width="60"/>
          <el-table-column align="center" label="产品图号" prop="产品图号"/>
          <el-table-column align="center" label="工艺路线号" prop="工艺路线号"/>
          <el-table-column align="center" label="操作时间" prop="操作时间" width="160"/>
          <el-table-column align="center" label="操作" width="250">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 10px;">
          <el-pagination v-if="!loading" :current-page="pageCurrent" :page-size="pageSize" :page-sizes="[15, 30, 40]" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
      </div>
    </el-card>

    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" label-width="100px">
        <el-form-item label="产品图号">
          <el-select v-model="form.productDrawing" filterable placeholder="请选择产品图号" style="width: 100%">
            <el-option
              v-for="item in productDrawingOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工艺路线号">
          <el-input v-model="form.craftPath" placeholder="请输入工艺路线号"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productDrawing: '',
      productDrawingOptions: [], // 产品图号选项
      craftPath: '',
      loading: false,
      tableData: [],
      total: 0,
      pageSize: 30,
      pageCurrent: 1,
      // 弹窗相关
      dialogVisible: false,
      dialogTitle: '新增工艺路线',
      form: {
        id: null,
        productDrawing: '',
        craftPath: ''
      }
    }
  },
  created() {
    this.getProductDrawings() // 获取产品图号选项
    this.selectDate()
  },
  methods: {
    // 获取产品图号选项
    getProductDrawings() {
      var param = []
      var queryData = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
      this.ExecDatabase(queryData).then(response => {
        if (response.data && response.data.length > 0) {
          this.productDrawingOptions = response.data.map(item => ({
            label: item.图号,
            value: item.图号
          }))
        }
      })
    },
    // 查询列表
    selectDate() {
      this.loading = true
      this.tableData = []
      var param = []
      param.push(['产品图号', this.productDrawing])
      param.push(['工艺路线号', this.craftPath])
      param.push(['PageCurrent', this.pageCurrent])
      param.push(['PageSize', this.pageSize])
      param.push(['PageCount', '1111', 'int', '1'])
      param.push(['ItemCount', '1111', 'int', '1'])
      var queryData = this.CreateData('11', 'PTCHV_AGV_工艺路线_分页_查询', param)
      this.ExecDatabase(queryData).then(response => {
        if (response.data.result.length !== 0) {
          this.tableData = response.data.result
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    // 新增按钮
    handleAdd() {
      this.dialogTitle = '新增工艺路线'
      this.form = {
        id: null,
        productDrawing: '',
        craftPath: ''
      }
      this.dialogVisible = true
    },
    // 编辑按钮
    handleEdit(row) {
      this.dialogTitle = '编辑工艺路线'
      this.form = {
        id: row.ID,
        productDrawing: row.产品图号,
        craftPath: row.工艺路线号
      }
      this.dialogVisible = true
    },
    // 删除按钮
    handleDelete(row) {
      this.$confirm('确认删除该工艺路线?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param.push(['ID', row.ID])
        var deleteData = this.CreateData('12', 'PTCHV_AGV_工艺路线_删除', param)
        this.ExecDatabase(deleteData).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.selectDate()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {})
    },
    // 提交表单
    submitForm() {
      if (!this.form.productDrawing) {
        this.$message.warning('请选择产品图号')
        return
      }
      if (!this.form.craftPath) {
        this.$message.warning('请输入工艺路线号')
        return
      }

      var param = []
      var submitData
      if (this.form.id) {
        // 修改
        param.push(['ID', this.form.id])
        param.push(['产品图号', this.form.productDrawing])
        param.push(['工艺路线号', this.form.craftPath])
        submitData = this.CreateData('11', 'PTCHV_AGV_工艺路线_修改', param)
      } else {
        // 新增
        param.push(['产品图号', this.form.productDrawing])
        param.push(['工艺路线号', this.form.craftPath])
        submitData = this.CreateData('11', 'PTCHV_AGV_工艺路线_增加', param)
      }

      this.ExecDatabase(submitData).then(response => {
        if (response.data[0].result === 1) {
          this.$message.success(this.form.id ? '修改成功' : '新增成功')
          this.dialogVisible = false
          this.selectDate()
        } else {
          this.$message.error(response.data[0].msg || (this.form.id ? '修改失败' : '新增失败'))
        }
      })
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.selectDate()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.selectDate()
    }
  }
}
</script>

<style scoped>
.topCard {
  margin: 5px;
}
.topDiv {
  margin-bottom: 10px;
}
</style>
