<template>
  <div class="search-wrap">
    <div class="search-box">
      <el-form
        class="fedexFormStyle queryTextarea-box"
        ref="sreachForm"
        :model="sreachFormData"
        label-position="top"
        size="small"
        :rules="rules"
      >
        <el-row :gutter="6">
          <el-col :span="5">
            <Formitem label="提單號碼（支持多個提單號查詢）" prop="deliveryNo">
              <!-- <el-input
                type="text"
                id="inputInner--deliveryNo"
                v-model="sreachFormData.deliveryNo"
                clearable
              >
              </el-input> -->
              <el-input
                type="textarea"
                class="inputShadow"
                id="inputInner--deliveryNo"
                resize="none"
                :rows="consignmentCodeRows"
                v-model="sreachFormData.deliveryNo"
                clearable
                placeholder=""
                @focus="consignmentCodeFocus"
                @blur="consignmentCodeBlur"
              ></el-input>
              <el-badge
                v-if="
                  consignmentCodeRows == 1 &&
                  sreachFormData.consignmentCode.length > 1
                "
                type="info"
                :value="`+${sreachFormData.consignmentCode.length}`"
                class="item texttareaTip"
              ></el-badge>
            </Formitem>
          </el-col>
          <el-col :span="4">
            <Formitem label="提交時間(從)" prop="commitTimeFrom">
              <el-date-picker
                v-model="sreachFormData.commitTimeFrom"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                id="inputInner--commitTimeFrom"
                placeholder=""
                prefix-icon="none"
                @change="checkDate1"
              ></el-date-picker>
              <!-- :picker-options="startPickerOptions"> -->
              <!-- </el-date-picker> -->
            </Formitem>
          </el-col>
          <el-col :span="4">
            <Formitem label="提交時間(至)" prop="commitTimeTo">
              <el-date-picker
                v-model="sreachFormData.commitTimeTo"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                id="inputInner--commitTimeTo"
                placeholder=""
                prefix-icon="none"
                @change="checkDate2"
              ></el-date-picker>
              <!-- :picker-options="endPickerOptions">
              </el-date-picker> -->
            </Formitem>
          </el-col>
          <el-col :span="2" class="search-btn">
            <el-button @click="searchTable">
              <img src="../../assets/images/select.svg" alt="" />
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <span class="textCenter export-btn">
        <el-button
          class="entrySaveButton"
          :loading="exportLoading"
          @click="exportBtn()"
        >
          導出
        </el-button>
      </span>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="tableMaxheight"
      :row-class-name="tableRowClassName"
      v-loading="tableLoading"
      class="queryTable"
      @sort-change="handleSortChange"
    >
      <el-table-column
        v-for="(item, index) in tableHeaderList"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.width"
        :fixed="item.fixed ? item.fixed : false"
        :align="item.align"
        :sortable="item.sort"
      >
        <template slot-scope="scope">
          <template v-if="item.tem == 'operStatusAndTime1'">
            <div>
              {{ scope.row.operStatus }}
            </div>
            <div>
              {{ scope.row.commitTime }}
            </div>
          </template>
          <!-- 传送时间 -->
          <template v-else-if="item.tem == 'delStatus'">
            <div class="query_page_popover">
              <el-popover
                v-if="scope.row.failedMsg"
                trigger="hover"
                placement="bottom"
                :open-delay="1000"
              >
                <p>{{ scope.row.failedMsg }}</p>
                <div slot="reference" class="name-wrapper">
                  {{ scope.row.delStatusAndTime }}
                </div>
              </el-popover>
              <span v-else>{{ scope.row.delStatusAndTime }}</span>
            </div>
          </template>
          <!-- 是否適用在目的地進口清關 -->
          <template v-else-if="item.tem == 'isClear'">
            <span v-if="scope.row.isClear == 0"> N </span>
            <span v-else-if="scope.row.isClear == 1">Y</span>
          </template>
          <!-- 操作 -->
          <template v-else-if="item.tem == 'opt'">
            <el-dropdown trigger="click">
              <span style="cursor: pointer">
                <img src="../../assets/images/declareOpt.png" alt="" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="viewDeclare(scope.row)">
                  查看
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="scope.row.operStatus == '已提交'"
                  @click.native="reEditDeclare(scope.row)"
                >
                  重新编辑
                </el-dropdown-item>

                <el-dropdown-item v-else @click.native="editDeclare(scope.row)">
                  編輯
                </el-dropdown-item>

                <el-dropdown-item
                  :disabled="scope.row.operStatus == '已提交'"
                  @click.native="deleteDeclare(scope.row)"
                >
                  刪除
                </el-dropdown-item>
                <el-dropdown-item @click.native="downloadFiles(scope.row)"
                  >下載附件</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.curPage"
      :page-sizes="[20, 30, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
    <detail-dialog ref="detailDialogRef"></detail-dialog>
    <detail-drawer
      ref="detailDrawerRef"
      :pageIndex="pageIndex"
      @viewPdf="openViewPdf"
    ></detail-drawer>
  </div>
</template>

<script>
import {
  getTableFindAll,
  declareDeleteById,
  reedit,
} from "@/api/declareTable.js";
import detailDrawer from "../declarationInput/detailDrawer.vue";
import detailDialog from "./detailDialog.vue";
import { tableHeaderKeys } from "./tableHeaderKey.js";
import { downLoadXlsx, downLoadViewPdf } from "@/utils/zipdownload";
export default {
  name: "declareQuery",
  components: {
    detailDialog,
    detailDrawer,
  },

  data() {
    return {
      pageIndex: "query",
      tableData: [], //运单数据
      tableHeaderList: tableHeaderKeys,

      sreachFormData: {
        deliveryNo: "",
        commitTimeFrom: "",
        commitTimeTo: "",
        consignmentCode: [],
      },
      oldSreachFormData: {
        deliveryNo: "",
        commitTimeFrom: "",
        commitTimeTo: "",
        consignmentCode: [],
      },
      startDate: new Date() - 3,
      endDate: new Date(),
      page: {
        curPage: 1,
        pageSize: 20,
        total: 0, //数据总和
      },
      tableSelect: true,
      tableLoading: false, //表格loading
      exportLoading: false,
      defQuery: 0,
      consignmentCodeRows: 1,
      startPickerOptions: {
        disabledDate: (time) => {
          if (
            this.sreachFormData.commitTimeTo != "" &&
            this.sreachFormData.commitTimeTo != null
          ) {
            let commitTimeTo = new Date(
              this.sreachFormData.commitTimeTo
            ).getTime();
            return time.getTime() > commitTimeTo;
          } else {
            return !time.getTime();
          }
        },
      },
      endPickerOptions: {
        disabledDate: (time) => {
          if (
            this.sreachFormData.commitTimeFrom != "" &&
            this.sreachFormData.commitTimeFrom != null
          ) {
            let commitTimeFrom = new Date(
              this.sreachFormData.commitTimeFrom
            ).getTime();
            return time.getTime() < commitTimeFrom - 24 * 60 * 60 * 1000;
          } else {
            return !time.getTime();
          }
        },
      },
      sortOrder: 0, //查询排序 默认根据操作状态呢降序排序
    };
  },
  computed: {
    tableMaxheight() {
      return window.innerHeight - 300;
    },
    getOldDate() {
      let oldDate = new Date(new Date().getTime() - 3600 * 1000 * 24 * 2);
      return (
        oldDate.getFullYear() +
        "-" +
        (oldDate.getMonth() + 1).toString().padStart(2, 0) +
        "-" +
        oldDate.getDate().toString().padStart(2, 0)
      );
    },
    getNewDate() {
      let nowDate = new Date();
      return (
        nowDate.getFullYear() +
        "-" +
        (nowDate.getMonth() + 1).toString().padStart(2, 0) +
        "-" +
        nowDate.getDate().toString().padStart(2, 0)
      );
    },
    rules() {
      let rules = {
        commitTimeFrom: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                this.$refs.sreachForm.clearValidate(["commitTimeTo"]);
                this.tableSelect = true;
              }
              // new Date(year, month, day, hour, minute, second, millisecond);
              if (value && this.sreachFormData.commitTimeTo) {
                if (
                  new Date(value + " 00:00:00").getTime() >
                  new Date(
                    this.sreachFormData.commitTimeTo + " 00:00:00"
                  ).getTime()
                ) {
                  callback("開始時間不能晚於截止時間");
                  this.tableSelect = false;
                } else {
                  callback();
                  this.tableSelect = true;
                }
              }
            },
            trigger: "change",
          },
        ],
        commitTimeTo: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                this.$refs.sreachForm.clearValidate(["commitTimeFrom"]);
                this.tableSelect = true;
              }

              if (value && this.sreachFormData.commitTimeFrom) {
                if (
                  new Date(value + " 00:00:00").getTime() <
                  new Date(
                    this.sreachFormData.commitTimeFrom + " 00:00:00"
                  ).getTime()
                ) {
                  callback("截止時間不能早於開始時間");
                  this.tableSelect = false;
                } else {
                  callback();
                  this.tableSelect = true;
                }
              }
            },
            trigger: "change",
          },
        ],
      };
      return rules;
    },
  },
  created() {},
  mounted() {
    // let oldDate = new Date(new Date().getTime() - 3600 * 1000 * 24 * 2);
    // let nowDate = new Date();
    this.sreachFormData.commitTimeFrom = this.getOldDate;
    this.sreachFormData.commitTimeTo = this.getNewDate;
    //  this.$set(this.sreachFormData,'commitTimeFrom', );
    //  this.$set(this.sreachFormData,'commitTimeTo', nowDate.getFullYear() + '-' + (nowDate.getMonth()+1)  + '-' + (nowDate.getDate()));
    this.sreachData(null);
  },
  methods: {
    // 查询
    sreachData(paramsData) {
      // this.$refs["sreachForm"].validate((valid, object) => {
      if (this.tableSelect) {
        if (!paramsData) {
          paramsData = {
            ...this.sreachFormData,
            deliveryNo: this.sreachFormData.consignmentCode.join(";"),
            page: this.page.curPage,
            query: this.defQuery,
            size: this.page.pageSize,
            sort: this.sortOrder,
          };
          this.oldSreachFormData = {
            ...this.sreachFormData,
          };
        }

        if (paramsData.deliveryNo.split(";").length > 1000) {
          this.$alert("單次最多可查詢1000個提單號碼", "提示", {
            confirmButtonText: "確定",
            type: "warning",
          });
          return;
        } else {
          this.tableLoading = true;
          delete paramsData.consignmentCode;
          getTableFindAll(paramsData)
            .then((res) => {
              if (res.code == 200) {
                this.tableData = res.data.list;
                this.page.total = res.data.total;
              } else {
                this.msgWarning(res.msg);
              }
            })
            .finally(() => {
              this.tableLoading = false;
            });
        }
      }
      // });
    },
    checkDate1() {
      this.$refs.sreachForm.validateField("commitTimeFrom", (valid) => {
        if (!valid) {
          this.$refs.sreachForm.validateField("commitTimeTo");
        }
      });
    },
    checkDate2() {
      this.$refs.sreachForm.validateField("commitTimeTo", (valid) => {
        if (!valid) {
          this.$refs.sreachForm.validateField("commitTimeFrom");
        }
      });
    },
    // column 当前列数据 prop 当前排序的字段 order 排序规则
    handleSortChange({ column, prop, order }) {
      if (prop == "operStatusAndTime1") {
        this.sortOrder = order ? (order == "descending" ? 2 : 1) : 0;
      } else if (prop == "delStatus") {
        this.sortOrder = order ? (order == "descending" ? 4 : 3) : 0;
      }
      this.page.curPage = 1;
      let paramsData = {
        ...this.oldSreachFormData,
        page: this.page.curPage,
        query: this.defQuery,
        size: this.page.pageSize,
        sort: this.sortOrder,
      };

      this.sreachData(paramsData);
    },
    // 查询按钮
    searchTable() {
      this.page.curPage = 1;
      this.defQuery = "";
      this.sreachData(null);
    },
    // 改变偶数行背景色
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "bgc-row";
      }
      return "";
    },
    //操作
    deleteDeclare(row) {
      this.$confirm("是否確認刪除", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          declareDeleteById(row.id).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "刪除成功!",
              });
              this.sreachData(null);
            } else {
              this.msgWarning(res.msg);
            }
          });
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '刪除失敗'
          // });
        });
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.sreachData(null);
    },
    // 切换页码
    handleCurrentChange(val) {
      this.page.curPage = val;
      this.sreachData(null);
    },
    // 导出
    exportBtn() {
      let paramsData = {
        ...this.oldSreachFormData,
        query: this.defQuery,
        sort: this.sortOrder,
      };
      this.exportLoading = true;
      downLoadXlsx("/icleartw/declare/export", paramsData, "提單表")
        .then(() => {
          this.$message.success("導出成功");
          this.exportLoading = false;
        })
        .catch(() => {
          this.exportLoading = false;
        });
    },
    // 查看
    viewDeclare(row) {
      this.$refs.detailDrawerRef.openDrawer(row, "table");
    },
    // 下载附件
    downloadFiles(row) {
      this.$refs.detailDialogRef.openDialog(row);
    },
    // 编辑
    editDeclare(row) {
      this.$router
        .push({
          name: "declarationInput",
          params: {
            step: JSON.stringify(row.saveStep),
            id: JSON.stringify(row.id),
          },
        })
        .catch(() => {});
    },
    //重新编辑
    reEditDeclare(row) {
      this.$store.dispatch("AppLoading", true);
      reedit(row.id)
        .then((res) => {
          if ((res.code = 200)) {
            this.$router
              .push({
                name: "declarationInput",
                params: {
                  step: 1,
                  id: JSON.stringify(res.data.id),
                },
              })
              .catch(() => {});
          } else {
            $message.error(res.msg);
          }
        })
        .catch(() => {})
        .finally(() => {
          this.$store.dispatch("AppLoading", false);
        });
    },
    //文本域切换
    consignmentCodeFocus() {
      this.consignmentCodeRows = 5;
      this.$nextTick(() => {
        let inputInner = document.querySelector(
          "#inputInner--deliveryNo"
        ).parentNode;
        let inputOuter = document.querySelector("#inputOuter--deliveryNo");
        inputInner.classList.add("consignmentCode-textarea");
        document.querySelector("#inputInner--deliveryNo").focus();
        setTimeout(() => {
          inputOuter.classList.add("active");
          inputOuter.classList.add("activeBorder");
        }, 100);
      });
    },
    consignmentCodeBlur(val) {
      this.consignmentCodeRows = 1;
      this.$nextTick(() => {
        let inputInner = document.querySelector(
          "#inputInner--deliveryNo"
        ).parentNode;
        inputInner.classList.remove("consignmentCode-textarea");
      });
      this.sreachFormData.consignmentCode = val.target.value.split("\n");
      let arr = [];
      this.sreachFormData.consignmentCode.forEach((item) => {
        if (item != "" && item != null) {
          arr.push(item);
        }
      });
      this.sreachFormData.consignmentCode = arr;
    }, // 查看pdf
    openViewPdf(file) {
      file.findLoading = true;
      downLoadViewPdf(
        "/icleartw/cusFile/previewFile",
        { fileId: file.id },
        file.name + file.type
      )
        .then(() => {})
        .finally(() => {
          file.findLoading = false;
        });
    },
  },
};
</script>
<style>
.el-dropdown-menu__item.is-disabled {
  color: #bbb;
}
</style>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

.search-wrap {
  height: calc(100% - 28px);
  margin: 12px 12px 16px 16px;
  background-color: #fff;
  padding: 20px;

  .search-box {
    margin-bottom: 12px;
    position: relative;

    .export-btn {
      position: absolute;
      right: 12px;
      top: 0;
    }
  }

  ::v-deep .el-table .bgc-row {
    background: #f2f2f2;
  }

  .el-pagination {
    text-align: right;
    margin-top: 10px;

    ::v-deep .el-input.is-focus .el-input__inner {
      border: 1px solid $fedexColor;
    }

    ::v-deep .el-input .el-input__inner:hover {
      border: 1px solid $fedexColor;
    }

    ::v-deep .el-input__inner:focus {
      border: 1px solid $fedexColor;
    }

    ::v-deep .el-pager li.active {
      color: $fedexColor;
    }

    ::v-deep .el-pager li:hover {
      color: $fedexColor;
    }
  }

  // .el-table__body-wrapper {
  //   overflow: auto;
  // }
}

.search-btn {
  ::v-deep .el-button {
    border: 1px solid #cccccc;
    height: 50px;
    width: 90px;

    .el-icon-search {
      color: #cccccc;
      font-size: 20px;
    }
  }

  .el-button:hover,
  .el-button:focus {
    background: #f3f1f1;
  }
}

.texttareaTip {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
  z-index: 10;
}

.consignmentCode-textarea {
  position: absolute;
  top: 25px;
  left: 1px;
  z-index: 10;
  min-height: 170px !important;
  border: 2px solid $fedexBorder;
  background-color: $fedexTablebackgroundColor;
  transition: all 0.2s ease;
}

.queryTable {
  ::v-deep .cell {
    text-align: center;
    white-space: pre-line;
  }
}
</style>