<template>
  <!-- 中日程计划维护 -->
  <el-container>
    <el-header style="width: 100%">
      <el-form ref="requestForm" :model="request" label-width="75px">
        <div class="flex-form" style="width: 100%">
          <div class="flex-query">
            <div>
              <el-form-item label="船号:" style="width: 250px">
                <vxe-pulldown ref="xDown4" transfer >
                  <template #default>
                    <vxe-input
                      v-model="request.dcCh"
                      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="300px"
                        :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>
            </div>
            <div>
              <el-form-item label="钢加开始:" style="width: 300px">
                <el-date-picker
                  v-model="request.date"
                  type="daterange"
                  format="yyyy/MM/dd"
                  :unlink-panels="true"
                  range-separator="~"
                  start-placeholder=""
                  end-placeholder=""
                >
                </el-date-picker>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="状态:" style="width: 300px">
                <el-select
                  v-model="request.Zt"
                  placeholder="状态"
                  clearable
                  disabled
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="width: 100%; text-align: right">
              <el-button
                type="success"
                @click="toolbarButtonClickEvent('submit')"
                >提交</el-button
              >
              <el-button type="primary" @click="initList()">查询</el-button>
            </div>
          </div>
        </div>
        <el-row>
          <el-col :span="24" style="text-align: right">
<!--            <div >-->
            <el-upload
              :action="uploadAction"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :data="fileList"
              :on-success="handleAvatarSuccess"
              :headers="heads"
            >
              <el-button type="success" @click="uploadExcel" >        导入    </el-button>
            </el-upload>
<!--            </div>-->
<!--            <el-button type="primary" @click="toolbarButtonClickEvent('save')"-->
<!--              >保存</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"
              :custom-config="{ storage: true }"
              :scroll-y="{ enabled: true }"
              @checkbox-all="selectAllEvent"
              @checkbox-change="selectChangeEvent"
              highlight-hover-row
            >
              <template #Zt_default="{ row }">
                <div v-for="(item, index) in statusOptions" :key="index">
                  <div v-if="row.zt === item.value">{{ item.label }}</div>
                </div>
              </template>
            </vxe-grid>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { getList, tj, save, upload } from "@/api/jhzx/zrcWH";
import {getToken} from "@/utils/auth";
import {endLoading, startLoading} from "@/utils";
import { getCzxx } from "@/api/jhzx/qfxq";
import {Message} from "element-ui";
import {getCzplBase} from "@/api/sjzx/jcsj";
export default {
  name: "zrcWH",
  data() {
    return {
      request: {
        date: "",
        Zt: "0",
        dcCh:''
      },
      isupload:'02',
      heads: { token: getToken() },
      uploadAction: process.env.VUE_APP_BASE_API + '/dmZrcjh/upload',
      list: [],
      height: "500px",
      tableColumn: [
        { type: "checkbox", width: "50", align: "center", fixed: "left" },
        {
          type: "seq",
          width: "50",
          title: "序号",
          align: "center",
          fixed: "left",
        },
        {
          field: "dcCh",
          title: "船号",
          align: "center",
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "dcPl",
          title: "批量",
          align: "center",
          minWidth: "80",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "zdh",
          title: "总段号",
          align: "center",
          minWidth: "80",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "dcFd",
          title: "分段号",
          align: "center",
          width: "80",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "qy",
          title: "区域",
          align: "center",
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "yzd",
          title: "预组段",
          align: "center",
          minWidth: "80",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "zl",
          title: "重量",
          align: "center",
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "kssjDz",
          title: "大组开始",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "gjjsDz",
          title: "钢加大组结束",
          align: "center",

          minWidth: "120",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "jssjXz",
          title: "小组结束",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "xzzq",
          title: "小组周期",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "kssjXz",
          title: "小组开始",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "xbzl",
          title: "线表重量",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "gjjsDzPl",
          title: "批量表（钢加大组结束）",
          align: "center",
          minWidth: "170",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "sjcLp",
          title: "时间差（L-P）",
          align: "center",
          minWidth: "120",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "gjjsXz",
          title: "钢加小组结束",
          align: "center",
          minWidth: "120",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "gjjsXzPl",
          title: "批量表（钢加小组结束）",
          align: "center",
          minWidth: "170",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "sjcRs",
          title: "时间差（R-S）",
          align: "center",
          minWidth: "120",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "gjks",
          title: "钢加开始",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "gjksPl",
          title: "批量表（钢加开始）",
          align: "center",
          minWidth: "150",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "sjcUv",
          title: "时间差（U-V）",
          align: "center",
          minWidth: "120",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "xfqTlt",
          title: "套料图下发",
          align: "center",
          minWidth: "100",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "jsqTlt",
          title: "套料图接收",
          align: "center",
          minWidth: "100",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "xfqLqb",
          title: "板材领取表下发",
          align: "center",
          minWidth: "130",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "jsqLqb",
          title: "板材领取表接收",
          align: "center",
          minWidth: "130",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "xfqPtb",
          title: "零件配套表下发",
          align: "center",
          minWidth: "130",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "jsqPtb",
          title: "零件配套表接收",
          align: "center",
          minWidth: "130",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "dhqd",
          title: "订货清单号",
          align: "center",
          minWidth: "110",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "xfqDhqd",
          title: "订货清单下发",
          align: "center",
          minWidth: "110",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "sjdhq",
          title: "实际订货日期",
          align: "center",
          minWidth: "110",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "bcdq",
          title: "板材计划到齐",
          align: "center",
          minWidth: "110",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "Zt",
          title: "状态",
          align: "center",
          slots: { default: "Zt_default" },
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
      ],
      statusOptions: [
        {
          value: "0",
          label: "编辑",
        },
        {
          value: "1",
          label: "提交",
        },
        {
          value: "2",
          label: "审核",
        },
      ],
      fileList: [],
      checkedList: [],
      ShipNoList: [], //船号
      projectData:[],
      projectData1:[],
      projectColumns: [
        {field: 'cbbm', title: '船号',width: 110},
        { field: 'wgbs', title: '完工标识', width: 80,
          slots:{
            default: 'wgbsEdit'
          },
        },
      ],
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    // this.initList();
    this.getCzxx();
  },
  methods: {
    // 获取列表接口
    initList() {
      let params = {
        Zt: this.request.Zt,
        gjks: "",
        dcCh: this.request.dcCh,
      };
      if (this.request.date && this.request.date.length > 0) {
        params.gjks =
          this.request.date[0].toLocaleDateString() +
          "~" +
          this.request.date[1].toLocaleDateString();
      } else {
        params.gjks = "";
      }
      getList(params).then((res) => {
        if (res.success) {
          this.list = res.data;
          this.checkedList = [];
        }
      });
    },
    // 获取船号接口
    getCzxx() {
      getCzxx().then((res) => {
        if (res.success) {
          this.ShipNoList = res.data;
        }
      });
      getCzplBase({}).then(res=>{
        this.projectData=res.data.cbbm
        this.projectData1=res.data.cbbm
      })
    },
    cellClickEvent({row}) {
      this.request.dcCh = row.cbbm
      this.$refs.xDown4.hidePanel()
    },
    focusEvent4() {
      this.$refs.xDown4.showPanel()
    },
    keyupEvent4() {
      if (this.request.dcCh) {
        this.projectData = this.projectData1.filter(row => row.project.indexOf(this.request.dcCh.toUpperCase()) > -1)
      } else {
        this.projectData = this.projectData1.slice(0)
      }

    },
    // 上传excel
    beforeAvatarUpload(file) {

      // 文件类型
      const isType = file.type === 'application/vnd.ms-excel'
      const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const fileType = isType || isTypeComputer
      if (!fileType) {
        this.$message.error('上传文件只能是xls/xlsx格式！')
        return
      }
      startLoading()
      return fileType
    },
    handleAvatarSuccess(res, file) {
      endLoading()
      if (res.success) {
        this.$message({ message: '导入成功', type: 'success' })
        this.list = res.data;
        this.checkedList = [];

      } else {
        Message({
          message: res.message || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
      }
    },
    uploadExcel() {
      this.uploadData.isupload = this.isupload
    },
    // 全选
    selectAllEvent() {
      const records = this.$refs.tableRef.getCheckboxRecords();
      this.checkedList = records;
    },
    // 单选
    selectChangeEvent() {
      const records = this.$refs.tableRef.getCheckboxRecords();
      this.checkedList = records;
    },
    // 操作
    async toolbarButtonClickEvent(code) {
      switch (code) {
        case "submit":
          if (this.checkedList.length > 0) {
            this.$confirm("是否确认提交选择的数据?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                tj(this.checkedList).then((res) => {
                  if (res.success) {
                    const xTable = this.$refs.tableRef;
                    xTable.loadData(this.initList());
                    this.$message.success("提交成功！");
                  }
                });
              })
              .catch(() => {});
          } else {
            this.$message.warning("请选择数据！");
          }
          break;
        case "save":
          if (this.checkedList.length > 0) {
            this.$confirm("是否确认保存选择的数据?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                save(this.checkedList).then((res) => {
                  if (res.success) {
                    const xTable = this.$refs.tableRef;
                    xTable.loadData(this.initList());
                    this.$message.success("保存成功！");
                  }
                });
              })
              .catch(() => {});
          } else {
            this.$message.warning("请选择数据！");
          }
          break;
        default:
          break;
      }
    },
    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;
}
.upload-demo {
  display: inline-flex;
  margin-right: 10px;
}
::v-deep .el-upload-list {
  display: none !important;
}
::v-deep .el-form-item {
  margin-bottom: 0px !important;
}
::v-deep .el-date-editor.el-input__inner {
  width: auto !important;
}
.flex-form {
  // width: 100%;
  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  .flex-query {
    display: flex;
  }
}
</style>
