<template>
  <div class="container-chart">
    <el-header style="width: 100%">
      <el-row>
        <el-col :span="18">
          <el-col :span="4">
            <el-select v-model="request.dcCh" placeholder="船号" clearable>
              <el-option
                v-for="item in ShipNoList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button type="success" @click="toolbarButtonClickEvent('submit')"
            >提交</el-button
          >
          <el-button type="primary" @click="initList()">查询</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-col :span="4">
            <el-select v-model="request.Zt" placeholder="状态" clearable>
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <div class="upload-demo">
            <el-upload
              action="#"
              accept=".xls,.xlsx"
              :multiple="false"
              :file-list="fileList"
              :http-request="actionUpload"
            >
              <el-button size="mini" type="primary">导入</el-button>
            </el-upload>
          </div>
          <el-button type="primary" @click="toolbarButtonClickEvent('save')"
            >保存</el-button
          >
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-main>
        <vxe-table
          class="mytable-style"
          border
          resizable
          show-footer
          ref="tableRef"
          :max-height="height"
          :header-cell-class-name="headerCellClassName"
          :cell-class-name="cellClassName"
          :footer-method="footerMethod"
          :footer-cell-class-name="footerCellClassName"
          :data="tableData"
          @checkbox-all="selectAllEvent"
          @checkbox-change="selectChangeEvent"
        >
          <vxe-column type="checkbox" width="50"></vxe-column>
          <vxe-column type="seq" width="70" :resizable="false" show-overflow>
            <template #header>
              <div class="first-col">
                <div class="first-col-top">年份</div>
                <div class="first-col-bottom">产品</div>
              </div>
            </template>
            <template #default="{ row }">
              {{ row.dcCh }}
            </template>
          </vxe-column>
          <vxe-colgroup field="2013" title="2023年">
            <vxe-column field="cl202301" title="1月" width="60"></vxe-column>
            <vxe-column field="cl202302" title="2月" width="60"></vxe-column>
            <vxe-column field="cl202303" title="3月" width="60"></vxe-column>
            <vxe-column field="cl202304" title="4月" width="60"></vxe-column>
            <vxe-column field="cl202305" title="5月" width="60"></vxe-column>
            <vxe-column field="cl202306" title="6月" width="60"></vxe-column>
            <vxe-column field="cl202307" title="7月" width="60"></vxe-column>
            <vxe-column field="cl202308" title="8月" width="60"></vxe-column>
            <vxe-column field="cl202309" title="9月" width="60"></vxe-column>
            <vxe-column field="cl202310" title="10月" width="60"></vxe-column>
            <vxe-column field="cl202311" title="11月" width="60"></vxe-column>
            <vxe-column field="cl202312" title="12月" width="60"></vxe-column>
            <vxe-column field="total1" title="合计" width="60"></vxe-column>
            <!-- 动态获取列 -->
            <!-- <vxe-column
              v-for="(item, index) in arrList.slice(0, 13)"
              :key="index"
              :field="item"
              :title="index < 12 ? index + 1 + '月' : '合计'"
              :width="70"
            >
              <template #default="{ row, rowIndex }">
                <div v-if="item == 'total1'">
                  {{ tableData[rowIndex].total1 }}
                </div>
                <div v-else>{{ row[item] }}</div>
              </template>
            </vxe-column> -->
          </vxe-colgroup>
          <vxe-colgroup field="2014" title="2024年">
            <vxe-column field="cl202401" title="1月" width="60"></vxe-column>
            <vxe-column field="cl202402" title="2月" width="60"></vxe-column>
            <vxe-column field="cl202403" title="3月" width="60"></vxe-column>
            <vxe-column field="cl202404" title="4月" width="60"></vxe-column>
            <vxe-column field="cl202405" title="5月" width="60"></vxe-column>
            <vxe-column field="cl202406" title="6月" width="60"></vxe-column>
            <vxe-column field="cl202407" title="7月" width="60"></vxe-column>
            <vxe-column field="cl202408" title="8月" width="60"></vxe-column>
            <vxe-column field="cl202409" title="9月" width="60"></vxe-column>
            <vxe-column field="cl202410" title="10月" width="60"></vxe-column>
            <vxe-column field="cl202411" title="11月" width="60"></vxe-column>
            <vxe-column field="cl202412" title="12月" width="60"></vxe-column>
            <vxe-column field="total2" title="合计" width="60"></vxe-column>
            <!-- 动态获取列 -->
            <!-- <vxe-column
              v-for="(item, index) in arrList.slice(13, 26)"
              :key="index"
              :field="item"
              :title="index < 12 ? index + 1 + '月' : '合计'"
              :width="70"
            >
              <template #default="{ row, rowIndex }">
                <div v-if="item == 'total2'">
                  {{ tableData[rowIndex].total2 }}
                </div>
                <div v-else>{{ row[item] }}</div>
              </template>
            </vxe-column> -->
          </vxe-colgroup>
        </vxe-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getList, tj, save, upload } from "@/api/jhzx/xbjhWH";
export default {
  name: "xbjhWH",
  data() {
    return {
      request: {
        dcCh: "",
        Zt: "",
      },
      height: "500px",
      tableData: [],
      fileList: [],
      checkedList: [],
      statusOptions: [
        {
          value: "0",
          label: "编辑",
        },
        {
          value: "1",
          label: "提交",
        },
        {
          value: "2",
          label: "审核",
        },
      ],
      ShipNoList: [],
      arrList: [], //存放数据key--月份
      copyList: [],
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.initList(); //获取数据
    this.getHeight();
  },
  methods: {
    // 上传excel
    actionUpload(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      upload(formData).then((res) => {
        if (res.success) {
          this.tableData = res.data;
          this.$message.success("导入成功！");
          if (this.tableData.length > 0) {
            var dcChList = [];
            this.tableData.forEach((item) => {
              dcChList.push(item.dcCh);
              this.ShipNoList = [];
              Array.from(new Set(dcChList)).forEach((em, eindex) => {
                this.ShipNoList.push({
                  label: em,
                  value: eindex + 1,
                });
              });
            });
          }

          // 动态获取列
          // this.checkedList = [];
          // if (this.tableData.length > 0) {
          //   var list = [];
          //   this.arrList = [];
          //   var dcChList = [];
          //   this.tableData.forEach((item) => {
          //     list = Object.keys(item);
          //     dcChList.push(item.dcCh);
          //     this.ShipNoList = [];
          //     Array.from(new Set(dcChList)).forEach((em, eindex) => {
          //       this.ShipNoList.push({
          //         label: em,
          //         value: eindex + 1,
          //       });
          //     });
          //   });
          //   list.forEach((item) => {
          //     if (item !== "dcCh" && item !== "zt") {
          //       this.arrList.push(item);
          //       this.arrList.sort();
          //     }
          //   });
          //   this.arrList.splice(12, 0, "total1");
          //   this.arrList.splice(25, 0, "total2");
          //   this.totalPush();
          // }
        }
      });
    },
    // 全选
    selectAllEvent() {
      const records = this.$refs.tableRef.getCheckboxRecords();
      this.checkedList = records;
    },
    // 单选
    selectChangeEvent() {
      const records = this.$refs.tableRef.getCheckboxRecords();
      this.checkedList = records;
    },
    initList() {
      let params = {
        Zt: this.request.Zt,
        dcCh: "",
      };
      if (this.ShipNoList.length > 0 && this.request.dcCh) {
        params.dcCh = this.ShipNoList[this.request.dcCh - 1].label;
      } else {
        params.dcCh = "";
      }
      getList(params).then((res) => {
        if (res.success) {
          this.tableData = res.data;
          this.checkedList = [];
          if (this.tableData.length > 0) {
            var dcChList = [];
            this.tableData.forEach((item) => {
              dcChList.push(item.dcCh);
              this.ShipNoList = [];
              Array.from(new Set(dcChList)).forEach((em, eindex) => {
                this.ShipNoList.push({
                  label: em,
                  value: eindex + 1,
                });
              });
            });
          }
          // 动态获取列
          // if (this.tableData.length > 0) {
          //   var list = [];
          //   this.arrList = [];
          //   var dcChList = [];
          //   this.tableData.forEach((item) => {
          //     list = Object.keys(item);
          //     dcChList.push(item.dcCh);
          //     this.ShipNoList = [];
          //     Array.from(new Set(dcChList)).forEach((em, eindex) => {
          //       this.ShipNoList.push({
          //         label: em,
          //         value: eindex + 1,
          //       });
          //     });
          //   });
          //   list.forEach((item) => {
          //     if (item !== "dcCh" && item !== "zt") {
          //       this.arrList.push(item);
          //       this.arrList.sort();
          //     }
          //   });
          //   this.arrList.splice(12, 0, "total1");
          //   this.arrList.splice(25, 0, "total2");
          //   this.totalPush();
          // }
        }
      });
    },
    totalPush() {
      if (this.tableData.length > 0) {
        this.tableData.forEach((item, index) => {
          item.total1 =
            Number(item.cl202301) +
            Number(item.cl202302) +
            Number(item.cl202303) +
            Number(item.cl202304) +
            Number(item.cl202305) +
            Number(item.cl202306) +
            Number(item.cl202307) +
            Number(item.cl202308) +
            Number(item.cl202309) +
            Number(item.cl202310) +
            Number(item.cl202311) +
            Number(item.cl202312);
          item.total2 =
            Number(item.cl202401) +
            Number(item.cl202402) +
            Number(item.cl202403) +
            Number(item.cl202404) +
            Number(item.cl202405) +
            Number(item.cl202406) +
            Number(item.cl202407) +
            Number(item.cl202408) +
            Number(item.cl202409) +
            Number(item.cl202410) +
            Number(item.cl202411) +
            Number(item.cl202412);
        });
        return this.tableData;
      }
    },
    // 表尾列求和
    total(list, field) {
      let count = 0;
      list.forEach((item) => {
        if (item !== "dcCh" && item !== "zt") {
          count += Number(item[field]);
        }
      });
      return count;
    },
    footerMethod({ columns, data }) {
      const totalList = []; //合计
      columns.forEach((column) => {
        if (["checkbox"].includes(column.property)) {
          return "合并了";
        }
        var totalData = null;
        totalData = this.total(data, column.property);
        totalList.push(totalData);
      });
      totalList[0] = "合计";
      return [totalList];
    },
    // 头部header css
    headerCellClassName({ column, $rowIndex }) {
      if ($rowIndex == 0) {
        return "row-gre-header";
      } else {
        if (column.field === "total1" || column.field === "total2") {
          return "row-gre-total-header";
        } else {
          return "row-gre-header";
        }
      }
    },
    // 指定列css
    cellClassName({ column }) {
      if (column.field === "total1" || column.field === "total2") {
        return "col-gre-total-col";
      } else {
        return "col-gre-col";
      }
    },
    // 尾部合计css
    footerCellClassName({ $rowIndex }) {
      if ($rowIndex === 0) {
        return "row-end-gre";
      }
    },
    // 操作
    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 scoped>
.first-col {
  position: relative;
  height: 20px;
}
.first-col:before {
  content: "";
  position: absolute;
  left: -21px !important;
  top: 16px !important;
  width: 106px;
  height: 1px;
  transform: rotate(37deg);
  background-color: #000;
}
.first-col .first-col-top {
  position: absolute;
  right: 4px;
  top: -10px;
}
.first-col .first-col-bottom {
  position: absolute;
  left: 4px;
  bottom: -10px;
}
.my-filter {
  margin: 10px;
}
.page-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
::v-deep .vxe-table--render-default .vxe-cell {
  text-align: center !important;
}
/* 尾部 */
::v-deep.mytable-style .row-end-gre {
  background-color: #9ed3a4;
  color: #000;
  font-weight: bold;
}
/* 列 */
::v-deep.mytable-style.vxe-table .vxe-body--column.col-gre-total-col {
  background-color: #9ed3a4;
  color: #000;
}
::v-deep.mytable-style.vxe-table .vxe-body--column.col-gre-col {
  background-color: #cce8cf;
  color: #000;
}
/* header */
::v-deep.mytable-style.vxe-table .vxe-header--column.row-gre-header {
  background-color: #cce8cf;
  color: #000;
  font-weight: bold;
}
::v-deep.mytable-style.vxe-table .vxe-header--column.row-gre-total-header {
  background-color: #9ed3a4;
  color: #000;
  font-weight: bold;
}
/* header下边框 */
::v-deep.mytable-style.vxe-table
  .vxe-table--header-wrapper
  .vxe-table--header-border-line {
  border-bottom: 2px solid #000 !important;
}
/* border 颜色 */
::v-deep .vxe-table--render-default.border--full .vxe-body--column,
.vxe-table--render-default.border--full .vxe-footer--column,
.vxe-table--render-default.border--full .vxe-header--column {
  background-image: linear-gradient(#000, #000) !important;
}
::v-deep.vxe-table--render-default.border--full .vxe-body--column,
.vxe-table--render-default.border--full .vxe-footer--column,
.vxe-table--render-default.border--full .vxe-header--column {
  background-image: linear-gradient(#000, #000), linear-gradient(#000, #000) !important;
}
:v-deep.vxe-table--render-default.border--full .vxe-body--column,
.vxe-table--render-default.border--full .vxe-footer--column,
.vxe-table--render-default.border--full .vxe-header--column {
  background-image: linear-gradient(#000, #000), linear-gradient(#000, #000) !important;
}
::v-deep.vxe-table--render-default.border--full .vxe-body--column,
::v-deep.vxe-table--render-default.border--full .vxe-footer--column,
::v-deep.vxe-table--render-default.border--full .vxe-header--column {
  background-image: linear-gradient(#000, #000), linear-gradient(#000, #000) !important;
}
/* 尾部上边框 */
::v-deep.vxe-table--render-default .vxe-table--footer-wrapper {
  border-top: 2px solid #000 !important;
}
::v-deep.vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon {
  color: #000;
  font-weight: 400 !important;
}
.upload-demo {
  display: inline-flex;
  margin-right: 10px;
}
::v-deep .el-upload-list {
  display: none !important;
}
.el-main {
  padding: 0;
}
.el-container {
  padding-top: 5px;
  width: 100%;
  margin: 0;
}
.el-header {
  margin: 0;
  padding: 5px 0;
  height: auto;
}
.el-row {
  margin-bottom: 5px;
}
</style>
