<template>
  <!-- 集团三月滚动计划维护 -->
  <el-container>
    <el-header style="width: 100%">
      <el-form ref="requestForm" :model="request" label-width="60px">
        <div class="flex-form">
          <div class="flex-query">
            <el-form-item label="计划期:" style="width: 350px">
              <div class="date-flex">
                <el-date-picker
                  v-model="request.dateStart"
                  type="date"
                  value-format="yyyy/MM/dd"
                  @change="changeDateStart"
                  :picker-options="pickerOptionsStart"
                >
                </el-date-picker>
                <div class="center">~</div>
                <el-date-picker
                  v-model="request.dateEnd"
                  type="date"
                  value-format="yyyy/MM/dd"
                  @change="changeDateEnd"
                  :picker-options="pickerOptionsEnd"
                >
                </el-date-picker>
              </div>
            </el-form-item>
<!--            <el-form-item label="状态:" style="width: 350px">
              <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-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>
        <el-row>
          <el-col :span="24" style="text-align: right">
<!--            <div class="upload-demo">-->
            <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 }"
              highlight-hover-row
              @checkbox-all="selectAllEvent"
              @checkbox-change="selectChangeEvent"
            >
              <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, save, tj, upload } from "@/api/jhzx/jtsyWH";
import {getToken} from "@/utils/auth";
import {endLoading, startLoading} from "@/utils";
import {Message} from "element-ui";
export default {
  name: "jtsyWH",
  data() {
    return {
      request: {
        dateStart: "",
        dateEnd: "",
        Zt: "",
      },
      heads: { token: getToken() },
      isupload:'02',
      uploadAction: process.env.VUE_APP_BASE_API + '/dmJtsyjh/upload',
      list: [],
      height: "500px",
      tableColumn: [
        { type: "checkbox", width: "50", align: "center", fixed: "left" },
        {
          type: "seq",
          width: "50",
          title: "序号",
          align: "center",
          fixed: "left",
        },
        // {
        //   field: "zt",
        //   title: "状态",
        //   align: "center",
        //   slots: { default: "Zt_default" },
        //   filters: [
        //     {
        //       data: {
        //         checks: [],
        //         sVal: "",
        //         sMenu: "",
        //         fType1: "",
        //         fVal1: "",
        //         fMode: "and",
        //         fType2: "",
        //         fVal2: "",
        //       },
        //     },
        //   ],
        //   filterRender: { name: "FilterCombination" },
        // },
        {
          field: "dcCh",
          title: "船号",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "dcPl",
          title: "批量",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "dcFd",
          title: "分段",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "jhrq",
          title: "计划期",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "bz",
          title: "备注",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "bzy",
          title: "编制人",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "bzrq",
          title: "编制日期",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
      ],
      statusOptions: [
        {
          value: "0",
          label: "未审核",
        },
        {
          value: "1",
          label: "已审核",
        },
      ],
      pickerOptionsEnd: {
        disabledDate: this.disabledDateEnd,
      },
      pickerOptionsStart: {
        disabledDate: this.disabledDateStart,
      },
      fileList: [], //导入
      checkedList: [],
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.initList();
  },
  methods: {
    // 获取三个月后日期
    getFutureMonthDay(sourceDate, monthNum = 3) {
      const d = new Date(sourceDate);
      //来源
      const SY = d.getFullYear();
      const SM = d.getMonth();
      const SD = d.getDate();
      //结果
      const mydate = new Date(
        SY,
        String(SM + monthNum).padStart(2, "0"),
        String(SD).padStart(2, "0")
      );
      const yyyy = mydate.getFullYear();
      let MM = (mydate.getMonth() + 1).toString().padStart(2, "0");
      let dd = mydate.getDate().toString().padStart(2, "0");
      //如果月份是2月，就进行闰年和非闰年处理，防止出现类似2月30的情况
      if (MM == 2 && dd > 28) {
        if (yyyy % 100 == 0 && yyyy % 400 == 0) {
          dd = 29;
        } else if (yyyy % 100 != 0 && yyyy % 4 == 0) {
          dd = 29;
        } else {
          dd = 28;
        }
      }
      return `${yyyy}/${MM}/${dd}`;
    },
    // 获取列表接口
    initList() {
      let params = {
        Zt: this.request.Zt,
        jhrq: "",
      };
      if (this.request.dateStart && this.request.dateEnd) {
        params.jhrq = this.request.dateStart + "~" + this.request.dateEnd;
      } else {
        params.jhrq = "";
      }
      getList(params).then((res) => {
        if (res.success) {
          this.list = res.data;
          this.checkedList = [];
        }
      });
    },
    // 选择开始日期
    changeDateStart(value) {
      if (value) {
        this.request.dateEnd = this.getFutureMonthDay(value, 3);
      }
    },
    changeDateEnd(value) {},
    // 开始日期限制
    disabledDateStart(time) {
      const beginDateVal = this.request.dateEnd;
      if (beginDateVal) {
        return (
          time.valueOf() >=
          new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
        );
      }
    },
    // 结束日期限制
    disabledDateEnd(time) {
      const beginDateVal = this.request.dateStart;
      if (beginDateVal) {
        return (
          time.valueOf() <=
          new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
        );
      }
    },
    // 上传excel
    uploadExcel() {
      this.uploadData.isupload = this.isupload
    },
    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.initList();

      } else {
        Message({
          message: res.message || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
      }
    },
    // 全选
    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;
}
.date-flex {
  display: flex;
  .center {
    margin-left: 5px;
    margin-right: 5px;
  }
}
.flex-form {
  display: flex;
  .flex-query {
    display: flex;
    align-items: center;
  }
}
</style>
