<template>
  <div>
    <el-card :body-style="cardBodyStyle">
      <el-form :model="query" label-width="auto" label-position="right">
        <el-row :gutter="10">
          <el-col :span="5">
            <el-form-item label="物料名称/编码" style="margin-bottom: 0px;">
              <el-input v-model="query.material" clearable placeholder="请输入物料名称或编码" style="width:100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="钢种" style="margin-bottom: 0px;">
              <el-input v-model="query.standard" clearable placeholder="请输入钢种" style="width:100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="" style="margin-bottom: 0px; margin-top: 5px;">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="success" @click="insertDialog">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card :body-style="cardBodyStyle">
      <el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange" :height="height">
        <el-table-column type="selection" fixed></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="60">
          <template #default="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <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="操作" header-align="center" align="center" width="200px" fixed="right">
          <template #default="scope">
            <el-button plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button plain type="danger" @click="handleRemove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

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

    <!-- 新增/编辑对话框 -->
    <el-dialog class="diaClass" :close-on-click-modal="false" draggable :title="dialogTitle" v-model="dialogVisible" width="50%" top="5vh">
      <el-card>
        <el-form :model="form" label-width="120px" label-position="right" inline ref="ruleFormRef" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="物料名称" prop="materialName">
                <el-input v-model="form.materialName" maxlength="100" placeholder="请输入物料名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物料编码" prop="materialCode">
                <el-input v-model="form.materialCode" maxlength="100" placeholder="请输入物料编码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="钢种" prop="materialStandard">
                <el-input v-model="form.materialStandard" maxlength="50" placeholder="请输入钢种"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="尺寸">
                <el-input v-model="form.materialModel" maxlength="50" placeholder="请输入尺寸"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="属性1">
                <el-input v-model="form.materialAttr1" maxlength="50" placeholder="请输入属性1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="属性2">
                <el-input v-model="form.materialAttr2" maxlength="50" placeholder="请输入属性2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="属性3">
                <el-input v-model="form.materialAttr3" maxlength="50" placeholder="请输入属性3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="属性4">
                <el-input v-model="form.materialAttr4" maxlength="50" placeholder="请输入属性4"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="属性5">
                <el-input v-model="form.materialAttr5" maxlength="50" placeholder="请输入属性5"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" plain @click="handleSave(ruleFormRef)">保存</el-button>
          <el-button type="danger" plain @click="handleCancelSave">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
import tools from '@/tools'
import { ElMessage, ElMessageBox } from 'element-plus'

const {
  proxy
} = getCurrentInstance()

const cardBodyStyle = ref(tools.style.card)
const inputStyle = ref(tools.style.input)

/**
 * 查询相关
 */
const query = ref({
  material: '',
  standard: ''
})

const form = ref({
  id: '',
  materialName: '',
  materialCode: '',
  materialStandard: '',
  materialModel: '',
  materialAttr1: '',
  materialAttr2: '',
  materialAttr3: '',
  materialAttr4: '',
  materialAttr5: ''
})

const tableData = ref([])

/**
 * 分页相关
 */
const currentPage = ref(1)
const totalRows = ref(0)
const pageSizes = ref([10, 20, 30, 40])
const pageSize = ref(10)

/**
 * 对话框相关
 */
const dialogVisible = ref(false)
const dialogTitle = ref('新增物料')
const ruleFormRef = ref()

const rules = reactive({
  materialName: [
    {required: true, message: '物料名称不能为空', trigger: 'blur'},
  ],
  materialCode: [
    {required: true, message: '物料编码不能为空', trigger: 'blur'},
  ],
  materialStandard: [
    {required: true, message: '钢种不能为空', trigger: 'blur'},
  ]
})

/**
 * 方法定义
 */
const handleSearch = () => {
  currentPage.value = 1
  getTableData()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
}

const insertDialog = () => {
  form.value = {
    id: '',
    materialName: '',
    materialCode: '',
    materialStandard: '',
    materialModel: '',
    materialAttr1: '',
    materialAttr2: '',
    materialAttr3: '',
    materialAttr4: '',
    materialAttr5: ''
  }
  dialogTitle.value = '新增物料'
  dialogVisible.value = true
}

const handleSave = (ruleFormRef) => {
  if (!ruleFormRef) return
  ruleFormRef.validate((valid) => {
    if (valid) {
      const url = 'sto/Material/save'
      const param = {
        json: JSON.stringify(form.value)
      }
      proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
          dialogVisible.value = false
          handleSearch()
        } else {
          ElMessage({
            type: 'error',
            message: '操作失败: ' + response.data.msg
          })
        }
      })
    }
  })
}

const handleCancelSave = () => {
  dialogVisible.value = false
}

const handleEdit = (row) => {
  const url = 'sto/Material/queryByPK'
  const param = {
    id: row.id
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      form.value = response.data.data
      dialogTitle.value = '编辑物料'
      dialogVisible.value = true
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}

const handleRemove = (row) => {
  ElMessageBox.confirm(
      `确定删除物料 "${row.materialName}" 吗？`,
      '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  ).then(() => {
    const url = 'sto/Material/remove'
    const param = {
      id: row.id
    }
    proxy.$axios.get(url, param).then(response => {
      if (response.data.code == '0') {
        ElMessage({
          type: 'success',
          message: '删除成功！',
        })
        getTableData()
      } else {
        ElMessage.error('操作失败！' + response.data.msg)
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消',
    })
  })
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const getTableData = () => {
  const url = 'sto/Material/query'
  const param = {
    page: currentPage.value,
    rows: pageSize.value,
    material: query.value.material,
    standard: query.value.standard
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableData.value = response.data.data.records
      totalRows.value = response.data.data.total
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}

const height = ref(600)
const updateViewportHeight = () => {
  height.value = window.innerHeight * 0.65
}

const multipleSelection = ref([])

onMounted(() => {
  getTableData()
  updateViewportHeight()
  window.addEventListener('resize', updateViewportHeight)
})
</script>

<style scoped>
::v-deep .diaClass .el-form-item {
  width: 100%
}
::v-deep .el-dialog__body {
  background-color: #F2F6FC;
}
</style>