<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="textarea"
                class="inputShadow-deliveryNo"
                name="deliveryNo"
                id="inputInner--deliveryNo"
                resize="none"
                :rows="deliveryNoRows"
                v-model="sreachFormData.deliveryNo"
                clearable
                placeholder=""
                @focus="consignmentCodeFocus"
                @blur="consignmentCodeBlur"
              ></el-input>
              <el-badge
                v-if="
                  deliveryNoRows == 1 &&
                  sreachFormData.deliveryNoList.length > 1
                "
                type="info"
                :value="`+${sreachFormData.deliveryNoList.length}`"
                class="item texttareaTip"
              ></el-badge>
            </Formitem>
          </el-col>
          <el-col :span="4">
            <Formitem label="貨物輸出統一編號" prop="deliveryCode">
              <el-input
                type="textarea"
                class="inputShadow"
                name="deliveryCode"
                id="inputInner--deliveryCode"
                resize="none"
                :rows="deliveryCodeRows"
                v-model="sreachFormData.deliveryCode"
                clearable
                placeholder=""
                @focus="consignmentCodeFocus"
                @blur="consignmentCodeBlur"
              ></el-input>
              <el-badge
                v-if="
                  deliveryCodeRows == 1 &&
                  sreachFormData.deliveryCodelist.length > 1
                "
                type="info"
                :value="`+${sreachFormData.deliveryCodelist.length}`"
                class="item texttareaTip"
              ></el-badge>
            </Formitem>
          </el-col>
          <el-col :span="6">
            <el-row class="commitTime">
              <el-col :span="11"
                ><Formitem
                  label="提交時間(從)"
                  prop="commitTimeFrom"
                  style="margin-bottom: 0px"
                >
                  <el-date-picker
                    class="unIconDatePicker"
                    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> </Formitem
              ></el-col>
              <el-col
                :span="2"
                style="line-height: 50px; font-size: 20px; font-weight: 700"
                >-</el-col
              >
              <el-col :span="11">
                <Formitem
                  label="提交時間(至)"
                  prop="commitTimeTo"
                  style="margin-bottom: 0px"
                >
                  <el-date-picker
                    class="unIconDatePicker"
                    v-model="sreachFormData.commitTimeTo"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    type="date"
                    id="inputInner--commitTimeTo"
                    placeholder=""
                    prefix-icon="none"
                    @change="checkDate1"
                  ></el-date-picker> </Formitem
              ></el-col>
            </el-row>
          </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 == '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 @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>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      sreachFormData: {
        deliveryNo: "",
        commitTimeFrom: "",
        commitTimeTo: "",
        deliveryNoList: [],
        deliveryCodelist: [],
      },
      oldSreachFormData: {
        deliveryNo: "",
        commitTimeFrom: "",
        commitTimeTo: "",
        deliveryNoList: [],
        deliveryCodelist: [],
      },
      rules: {},
      tableData: [],
      tableHeaderList: [
        {
          label: "提單號碼",
          prop: "deliveryNo",
          width: "",
          align: "left",
          sort: false,
        },
        {
          label: "報單類別",
          prop: "deliveryNo",
          width: "",
          align: "left",
          sort: false,
        },
        {
          label: "提交時間",
          prop: "deliveryNo",
          width: "",
          align: "left",
          sort: false,
        },
        {
          label: "文件轉換Tiff",
          prop: "deliveryNo",
          width: "",
          align: "left",
          sort: false,
        },
        {
          label: "傳送狀態/時間",
          prop: "deliveryNo",
          width: "",
          align: "left",
          sort: false,
        },
        {
          label: "貨物輸出統一編號",
          prop: "deliveryNo",
          width: "",
          align: "left",
          sort: false,
        },
        {
          label: "聯絡人 ",
          prop: "deliveryNo",
          width: "",
          align: "left",
          sort: false,
        },
        {
          label: "聯絡人e-mail ",
          prop: "deliveryNo",
          width: "",
          align: "left",
          sort: false,
        },
        {
          label: "操作",
          prop: "opt",
          width: "",
          align: "center",
          tem: "opt",
          sort: false,
        },
      ],
      page: {
        curPage: 1,
        pageSize: 20,
        total: 0, //数据总和
      },
      tableLoading: false,
      exportLoading: false,
      deliveryNoRows: 1,
      deliveryCodeRows: 1,
    };
  },
  computed: {
    tableMaxheight() {
      return window.innerHeight - 300;
    },
  },
  methods: {
    searchTable() {},
    //查看
    viewDeclare() {},
    //下载附件
    downloadFiles(data) {},
    //导出
    exportBtn() {},
    // 改变偶数行背景色
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "bgc-row";
      }
      return "";
    },
    checkDate1() {},
    // 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);
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.sreachData(null);
    },
    // 切换页码
    handleCurrentChange(val) {
      this.page.curPage = val;
      this.sreachData(null);
    },
    //文本域切换
    consignmentCodeFocus(val) {
      if (val.target.name == "deliveryNo") {
        this.deliveryNoRows = 5;
      } else if (val.target.name == "") {
        this.deliveryCodeRows = 5;
      }
      this.$nextTick(() => {
        let inputInner = document.querySelector(
          "#inputInner--" + val.target.name
        ).parentNode;
        let inputOuter = document.querySelector(
          "#inputOuter--" + val.target.name
        );
        inputInner.classList.add("consignmentCode-textarea");
        document.querySelector("#inputInner--" + val.target.name).focus();
        setTimeout(() => {
          inputOuter.classList.add("active");
          inputOuter.classList.add("activeBorder");
        }, 100);
      });
    },
    consignmentCodeBlur(val) {
      let data = null;
      if (val.target.name == "deliveryNo") {
        this.deliveryNoRows = 1;
      } else if (val.target.name == "") {
        this.deliveryCodeRows = 1;
      }
      this.$nextTick(() => {
        let inputInner = document.querySelector(
          "#inputInner--" + val.target.name
        ).parentNode;
        inputInner.classList.remove("consignmentCode-textarea");
      });
      data = val.target.value.split("\n");
      let arr = [];
      data.forEach((item) => {
        if (item != "" && item != null) {
          arr.push(item);
        }
      });
      if (val.target.name == "deliveryNo") {
        this.sreachFormData.deliveryNoList = arr;
      } else if (val.target.name == "") {
        this.sreachFormData.deliveryCodelist = arr;
      }
    },
  },
};
</script>

<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;
  }
}

.commitTime {
  background-color: $formItemBackgroundColor;
}
</style>