<template>
  <!-- 订货清单审核 -->
  <el-container>
    <el-header style="width: 100%">
      <el-form ref="requestForm" :model="request" label-width="45px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="船号:">
              <el-select v-model="request.dcCh" placeholder="船号" clearable>
                <el-option
                  v-for="item in ShipNoList"
                  :key="item.cbbm"
                  :label="item.cbbm"
                  :value="item.cbbm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态:">
              <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>
          </el-col>
          <el-col :span="16" style="text-align: right">
            <el-button type="primary" @click="initList()">查询</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right">
            <el-button type="primary" @click="toolbarButtonClickEvent('back')"
              >退回</el-button
            >
            <el-button type="success" @click="toolbarButtonClickEvent('check')"
              >审核</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, sh, upload } from "@/api/jhzx/dhqdSH";
import { getCzxx } from "@/api/jhzx/qfxq";
export default {
  name: "dhqdSH",
  data() {
    return {
      request: {
        dcCh: "",
        Zt: "1",
      },
      list: [],
      height: "500px",
      tableColumn: [
        { type: "checkbox", width: "50", align: "center", fixed: "left" },
        {
          type: "seq",
          width: "50",
          title: "序号",
          fixed: "left",
          align: "center",
        },
        {
          field: "dcCh",
          title: "船号",
          align: "center",
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "qdh",
          title: "订货清单号",
          align: "center",
          minWidth: "100",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "qc",
          title: "期次",
          align: "center",
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "wpxh",
          title: " 材质",
          align: "center",
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "thickness",
          title: "厚度mm",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "width",
          title: "宽度mm",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "length",
          title: "长度mm",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "weight",
          title: "重量吨/张",
          align: "center",
          minWidth: "100",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "sjsl",
          title: "设计数量",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "yl",
          title: "裕量",
          align: "center",
          minWidth: "70",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "zsl",
          title: "总数量",
          align: "center",
          minWidth: "80",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "zzl",
          title: "总重量",
          align: "center",
          minWidth: "80",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "lksl",
          title: "利库数量",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "lkzl",
          title: "利库重量",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "sdzs",
          title: "实订数量",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "sdzl",
          title: "实订重量",
          align: "center",
          minWidth: "90",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "Zt",
          title: "状态",
          slots: { default: "Zt_default" },
          align: "center",
          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: "审核",
        },
      ],
      ShipNoList: [],
      checkedList: [],
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.getCzxx();
    this.initList();
  },
  methods: {
    // 获取船号接口
    getCzxx() {
      getCzxx().then((res) => {
        if (res.success) {
          this.ShipNoList = res.data;
        }
      });
    },
    // 获取列表接口
    initList() {
      getList({
        ...this.request,
      }).then((res) => {
        if (res.success) {
          this.list = res.data;
          this.checkedList = [];
        }
      });
    },
    // 全选
    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 "back":
          if (this.checkedList.length > 0) {
            var status = 1;
            this.checkedList.forEach((item) => {
              if (item.zt !== "1") {
                status = 0;
              }
            });

            if (status == 1) {
              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("请选择提交状态的数据!");
            }
          } else {
            this.$message.warning("请选择数据！");
          }
          break;
        case "check":
          if (this.checkedList.length > 0) {
            this.$confirm("是否确认审核选择的数据?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                sh(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;
}
::v-deep .el-form-item {
  margin-bottom: 0px !important;
}
</style>
