<template>
  <el-container>
    <el-header style="width: 100%">
      <el-form ref="requestForm" :model="request" label-width="60px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="区域:">
              <el-select v-model="request.qy" placeholder="区域" clearable>
                <el-option
                  v-for="item in qyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="20" style="text-align: right">
            <el-button type="primary" @click="initList()">查询</el-button>
            <el-button type="success" @click="add">新增</el-button>
            <el-button type="success" @click="save">保存</el-button>
            <el-button type="success" @click="remove">删除</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-container style="padding-top: 10px">
      <el-container>
        <el-main>
          <div class="mytable">
            <vxe-grid
              id="id"
              ref="tableRef"
              border
              resizable
              keep-source
              :height="height"
              :auto-resize="true"
              :columns="tableColumn"
              :data="list"
              :edit-config="{trigger: 'click', mode: 'row', showStatus: true,}"
              :custom-config="{ storage: true }"
              :scroll-y="{ enabled: true }"
              highlight-hover-row
            >
            </vxe-grid>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <YppTq ref="yppTqRef" />
  </el-container>
</template>

<script>
import YppTq from "@/views/jhzxgl/components/YppTq.vue";
import {getBfwz, saveBfwz} from "@/api/jhzxgl/ypp";

export default {
  name: "Cgjhdh",
  components: {YppTq},
  data() {
    return {
      height: "500px",
      list:[],
      qyList:[],
      projectData:[],
      request:{
        qy:'',
        dwh:''
      },
      tableColumn: [
        { type: 'checkbox', width: 40 },
        {type: "seq", width: "50", title: "序号", align: "center", fixed: "left",},
        { field: 'qy', title: '区域', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
          editRender:{ name: '$input', props: { placeholder: '请输入所在区域' }}
        },
        { field: 'dwh', title: '垛位号', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
          editRender:{ name: '$input', props: { placeholder: '请输入垛位号' }}
        },
      ],
    }
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.initList()
  },
  methods: {
    save(){
      const {insertRecords:add, removeRecords:remove, updateRecords:edit}=this.$refs.tableRef.getRecordset()
      const requestContext={add,remove,edit}
      saveBfwz(requestContext).then(res=>{
        this.$message.success('保存成功')
        this.initList()
      })
    },
    add(){
      this.$refs.tableRef.insertAt({},0)
    },
    remove(){
      this.$refs.tableRef.removeCheckboxRow();
    },
    initList(){
      getBfwz(this.request).then(res=>{
        this.list=res.data
        const _qyList=[]
        const tmp=[]
        this.list.forEach(item=>{
          if (tmp.includes(item.qy)){
            return
          }
          tmp.push(item.qy)
          _qyList.push({label:item.qy,value:item.qy})
        })
        this.qyList=_qyList;
      })
    },
    cellClickEvent({row}){
      this.request.wjwz = row.cbbm
      this.$refs.xDown4.hidePanel()
    },
    focusEvent4(){
      this.$refs.xDown4.showPanel()
    },
    keyupEvent4(){
      if (this.request.wjwz) {
        this.projectData = this.projectData1.filter(row => row.cbbm.indexOf(this.request.wjwz.toUpperCase()) > -1)
      } else {
        this.projectData = this.projectData1.slice(0)
      }
    },
    getHeight() {
      this.height = window.innerHeight - 160;
    },
  }
};
</script>
<style lang="scss" scoped >
.el-header {
  margin: 0;
  padding: 5px 0;
  height: auto;
}
.el-container {
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0;
}
.el-col {
  padding: 0;
}
.el-aside {
  background: #fff;
  padding: 0;
}
.el-container {
  padding: 0;
}
.el-row {
  margin-bottom: 5px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.tableStyles {
  background: #0a76a4;
}
.my-dropdown {
  width: 450px;
  height: 250px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;
}
::v-deep .mytable .vxe-input {
  display: flex !important;
}
::v-deep .el-form-item {
  margin-bottom: 0px !important;
}

::v-deep .el-input{
  width: auto !important;
}
</style>
