<template>
  <el-container>
    <el-header style="width: 100%">
      <el-form ref="requestForm" :model="request" label-width="65px">
        <el-row>
          <el-col :span="3">
            <el-form-item label="供货商:">
              <el-select v-model="request.ghsbm" placeholder="供货商" clearable>
                <el-option
                  v-for="item in ghsList"
                  :key="item.ghsbm"
                  :label="item.ghsqc"
                  :value="item.ghsbm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="合同号:" label-width="85px">
              <el-input v-model="request.ddmc" type="search" placeholder="合同号" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="在建船只:" label-width="105px">
              <el-checkbox v-model="request.zjcz" type="search" placeholder="合同号" ></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="14" style="text-align: right">
            <el-button type="primary" @click="initList()">查询</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <el-form-item label="船号:">
              <vxe-pulldown ref="xDown4" transfer >
                <template #default>
                  <vxe-input
                    v-model="request.wjwz"
                    placeholder="船号"
                    style="height: 28px;
                    line-height: 28px; width: 150px;"
                    suffix-icon="vxe-icon--search"
                    @keyup="keyupEvent4"
                    @focus="focusEvent4"
                  />
                </template>
                <template #dropdown>
                  <div class="my-dropdown  mytable " style="width: 250px">
                    <vxe-grid
                      highlight-hover-row
                      height="auto"
                      :data="projectData"
                      :columns="projectColumns"
                      @cell-click="cellClickEvent"
                      show-overflow
                    >
                      <template #wgbsEdit="{ row}">
                        <vxe-checkbox v-model="row.wgbs"  checked-value="Y" unchecked-value="N"   disabled ></vxe-checkbox>
                      </template>
                    </vxe-grid>
                  </div>
                </template>
              </vxe-pulldown>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="小合同号:" label-width="85px">
              <el-input v-model="request.xhth" type="search" placeholder="小合同号" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单生效日期:" label-width="105px">
              <el-col :span="11">
                <el-date-picker v-model="request.ksrq" type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd" placeholder="开始日期" ></el-date-picker>
              </el-col>
              <el-col style="text-align: center" :span="2">至</el-col>
              <el-col :span="11">
                <el-date-picker v-model="request.jsrq" type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd" placeholder="结束日期" ></el-date-picker>
              </el-col>
            </el-form-item>
          </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"
              :custom-config="{ storage: true }"
              :scroll-y="{ enabled: true }"
              highlight-hover-row
            >
            </vxe-grid>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import {getGhs} from "@/api/sjzx/sbxxWH";
import {getCzplBase} from "@/api/sjzx/jcsj";
import {cgjhdhqk} from "@/api/jhzx/sygd";

export default {
  name: "Cgjhdh",
  data() {
    return {
      height: "500px",
      list:[],
      projectColumns: [
        {field: 'cbbm', title: '船号',width: 110},
        { field: 'wgbs', title: '完工标识', width: 80,
          slots:{
            default: 'wgbsEdit'
          },
        },
      ],
      projectData:[],
      ShipNoList:[],
      ghsList:[],
      request:{
        ghsbm:'',
        wjwz:'',
        ddmc:'',
        zjcz:true,
        xhth:'',
        ksrq:'',
        jsrq:'',
      },
      tableColumn: [
        {
          type: "seq",
          width: "50",
          title: "序号",
          align: "center",
          fixed: "left",
        },
        {
          field: "ghsbm",
          title: "供应商",
          align: "center",
          minWidth: "140",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "wjwz",
          title: "船号",
          align: "center",
          minWidth: "100",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "dzwz",
          title: "期量",
          align: "center",
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "sxrq",
          title: "生效日期",
          align: "center",
          minWidth: "100",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "ddmc",
          title: " 合同号",
          align: "center",
          minWidth: "100",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "dc_ch",
          title: "小合同号",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "ddxh",
          title: "项号",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "wpmc",
          title: "物品名称",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "rkxh",
          title: "材质",
          align: "center",
          minWidth: "100",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          formatter:['dictFormat','GCXH'],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "rkgg",
          title: "规格",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "_zl",
          title: "单张重量",
          align: "center",
          minWidth: "100",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "dhsl",
          title: "订货张数(A)",
          align: "center",
          minWidth: "80",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "dhsl1",
          title: "订货重量(B)",
          align: "center",
          minWidth: "80",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "lszrk",
          title: "入库张数(E)",
          align: "center",
          minWidth: "80",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "_rk",
          title: "入库张数差值A-E",
          align: "center",
          minWidth: "100",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "lszrkzl",
          title: "入库重量(F)",
          align: "center",
          minWidth: "80",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "_lszrkzl",
          title: "入库重量差值B-F",
          align: "center",
          minWidth: "95",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "lszck",
          title: "出库张数(G)",
          align: "center",
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "_lszck",
          title: "出库张数差值A-G",
          align: "center",
          minWidth: "95",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "lszckzl",
          title: "出库重量(H)",
          align: "center",
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "_lszckzl",
          title: "出库重量差值B-H",
          align: "center",
          minWidth: "95",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "kcsl",
          title: "库存张数(I)",
          align: "center",
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "cgy",
          title: "采购员",
          align: "center",
          minWidth: "80",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
      ],
    }
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.initGhs();
    this.initProject()
  },
  methods: {
    initList(){
      cgjhdhqk(this.request).then(res=>{
        this.list=res.data
      })
    },
    initProject(){
      getCzplBase({}).then(res=>{
        console.log(res)
        this.projectData=res.data.cbbm
      })
    },
    initGhs(){
      getGhs().then(res=>{
        this.ghsList=res.data
      })
    },
    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>
