<template>
  <div>
    <el-card :body-style="cardBodyStyle">
      <el-form :inline="true" label-position="right" label-width="100px">
        <el-form-item label="" class="no-show-error-message">
          <el-input v-model="queryParams.material" size="small" placeholder="请输入物料名称或编码" style="width:300px;float: left;margin-right: 10px;"></el-input>
          <el-input v-model="queryParams.standard" size="small" placeholder="请输入钢种" style="width:300px;float: left;margin-right: 10px;"></el-input>
          <el-button v-prevent-re-click type="primary" plain @click="handleSearch">查询</el-button>
          <el-button v-prevent-re-click type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card :body-style="cardBodyStyle">
      <el-table :data="tableData" border v-loading="loading" style="width: 100%">
        <el-table-column prop="materialName" label="物料名称" width="150" header-align="center" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="materialCode" label="物料编码" width="120" header-align="center" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="materialStandard" label="钢种" width="150" header-align="center" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="materialModel" label="尺寸" width="120" header-align="center" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="materialAttr1" label="属性1" width="120" header-align="center" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="materialAttr2" label="属性2" width="120" header-align="center" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="materialAttr3" label="属性3" width="120" header-align="center" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="materialAttr4" label="属性4" width="120" header-align="center" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="materialAttr5" label="属性5" width="120" header-align="center" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="200" header-align="center" align="center" fixed="right">
          <template #default="scope">
            <el-button plain type="warning" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button plain type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.totalRows">
      </el-pagination>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
        :close-on-click-modal="false"
        :title="form.id ? '编辑物料' : '新增物料'"
        v-model="dialogVisible"
        width="600px">
      <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
        <el-form-item label="物料名称" prop="materialName">
          <el-input v-model="form.materialName" style="width: 400px;" placeholder="请输入物料名称"></el-input>
        </el-form-item>
        <el-form-item label="物料编码" prop="materialCode">
          <el-input v-model="form.materialCode" style="width: 400px;" placeholder="请输入物料编码"></el-input>
        </el-form-item>
        <el-form-item label="钢种" prop="materialStandard">
          <el-input v-model="form.materialStandard" style="width: 400px;" placeholder="请输入钢种"></el-input>
        </el-form-item>
        <el-form-item label="尺寸">
          <el-input v-model="form.materialModel" style="width: 400px;" placeholder="请输入尺寸"></el-input>
        </el-form-item>
        <el-form-item label="属性1">
          <el-input v-model="form.materialAttr1" style="width: 400px;" placeholder="请输入属性1"></el-input>
        </el-form-item>
        <el-form-item label="属性2">
          <el-input v-model="form.materialAttr2" style="width: 400px;" placeholder="请输入属性2"></el-input>
        </el-form-item>
        <el-form-item label="属性3">
          <el-input v-model="form.materialAttr3" style="width: 400px;" placeholder="请输入属性3"></el-input>
        </el-form-item>
        <el-form-item label="属性4">
          <el-input v-model="form.materialAttr4" style="width: 400px;" placeholder="请输入属性4"></el-input>
        </el-form-item>
        <el-form-item label="属性5">
          <el-input v-model="form.materialAttr5" style="width: 400px;" placeholder="请输入属性5"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" @click="handleSave">保存</el-button>
          <el-button type="danger" @click="handleCancelSave">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from '@/axios'
export default {
  name: 'MaterialManagement',
  data() {
    return {
      // 表格数据
      tableData: [],
      loading: false,

      // 分页参数
      pagination: {
        currentPage: 1,
        totalRows: 0,
        pageSizes: [50, 100, 200, 500],
        pageSize: 50
      },

      // 查询条件
      queryParams: {
        material: '',
        standard: ''
      },

      // 对话框控制
      dialogVisible: false,

      // 表单数据
      form: {
        id: '',
        materialName: '',
        materialCode: '',
        materialStandard: '',
        materialModel: '',
        materialAttr1: '',
        materialAttr2: '',
        materialAttr3: '',
        materialAttr4: '',
        materialAttr5: ''
      },

      // 表单验证规则
      rules: {
        materialName: [
          { required: true, message: '物料名称不能为空', trigger: 'blur' }
        ],
        materialCode: [
          { required: true, message: '物料编码不能为空', trigger: 'blur' }
        ],
        materialStandard: [
          { required: true, message: '钢种不能为空', trigger: 'blur' }
        ]
      },

      // 样式
      cardBodyStyle: {
        padding: '10px'
      }
    }
  },

  // 界面渲染完毕调用 - 初始化表格数据
  mounted() {
    this.getTableData()
  },

  methods: {
    /**
     * 获取表格数据
     */
    getTableData() {
      this.loading = true
      const url = 'sto/Material/query'
      const params = {
        page: this.pagination.currentPage,
        rows: this.pagination.pageSize,
        material: this.queryParams.material,
        standard: this.queryParams.standard
      }

      axios.get(url, { params })
          .then(response => {
            this.loading = false
            if (response.data.code === '0') {
              this.tableData = response.data.data.records
              this.pagination.totalRows = response.data.data.total
            } else {
              this.$message.error('查询失败！' + response.data.msg)
            }
          })
          .catch(error => {
            this.loading = false
            this.$message.error('查询失败！' + error.message)
          })
    },

    /**
     * 修改每页条数
     */
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
      this.getTableData()
    },

    /**
     * 修改当前页
     */
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.getTableData()
    },

    /**
     * 查询
     */
    handleSearch() {
      this.pagination.currentPage = 1
      this.getTableData()
    },

    /**
     * 新增
     */
    handleAdd() {
      this.dialogVisible = true
      this.resetForm()
    },

    /**
     * 编辑
     */
    handleEdit(row) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.form = { ...row }
      })
    },

    /**
     * 保存（新增和编辑）
     */
    handleSave() {
      this.$refs.formRef.validate((valid) => {
        if (!valid) {
          this.$message.warning('请完善表单信息')
          return
        }

        const url = 'sto/Material/save'
        const params = {
          json: JSON.stringify(this.form)
        }

        axios.post(url, params)
            .then(response => {
              if (response.data.code === '0') {
                this.$message.success(this.form.id ? '更新成功' : '新增成功')
                this.dialogVisible = false
                this.getTableData()
              } else {
                this.$message.error('操作失败！' + response.data.msg)
              }
            })
            .catch(error => {
              this.$message.error('操作失败！' + error.message)
            })
      })
    },

    /**
     * 取消保存
     */
    handleCancelSave() {
      this.dialogVisible = false
      this.resetForm()
    },

    /**
     * 删除
     */
    handleDelete(row) {
      this.$confirm(
          `确定删除物料 "${row.materialName}" 吗？`,
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true,
          }
      )
          .then(() => {
            const url = 'sto/Material/remove'
            const params = {
              id: row.id,
            }

            axios.post(url, params)
                .then(response => {
                  if (response.data.code === '0') {
                    this.$message.success('删除成功!')
                    this.getTableData()
                  } else {
                    this.$message.error('删除失败！' + response.data.msg)
                  }
                })
                .catch(error => {
                  this.$message.error('删除失败！' + error.message)
                })
          })
          .catch(() => {
            this.$message.info('已取消删除')
          })
    },


    /**
     * 重置表单
     */
    resetForm() {
      this.$nextTick(() => {
        if (this.$refs.formRef) {
          this.$refs.formRef.resetFields()
        }
        this.form = {
          id: '',
          materialName: '',
          materialCode: '',
          materialStandard: '',
          materialModel: '',
          materialAttr1: '',
          materialAttr2: '',
          materialAttr3: '',
          materialAttr4: '',
          materialAttr5: ''
        }
      })
    }
  }
}
</script>

<style scoped>
.no-show-error-message {
  margin-bottom: 0;
}

.dialog-footer {
  text-align: center;
}
</style>