<template>
  <div class="app-main-height">
    <div v-show="isShow">
      <el-row>
        <el-col :span="24">
          <div class="left-panel">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="" class="number">
                <!-- logisticsError: [], //快递LIST
      importError: [], //导入LIST -->
                <span
                  >列表总数：{{
                    formInline.orderState == 0 ? count : countImport
                  }}个</span
                >
              </el-form-item>
              <el-form-item label="">
                <el-select
                  v-model="formInline.orderState"
                  placeholder="请选择订单状态"
                  size="small"
                > 
                  <el-option label="货运单号无法识别" value="0" />
                  <el-option label="批量导入货运单号失败" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-if="formInline.orderState == 0"
                  v-model.trim="formInline.findText"
                  placeholder="订单编号/收货人/手机号/发货单号"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item>
                <el-button-group>
                  <el-button
                    v-if="formInline.orderState == 0"
                    icon="el-icon-search"
                    type="primary"
                    size="small"
                    @click="handSearch"
                  >
                    搜索
                  </el-button>
                </el-button-group>
              </el-form-item>
               <el-form-item>
                <el-button-group>
                  <el-button  v-if="formInline.orderState == 0" type="primary" size="small" @click="handleEmpty">
                    清空
                  </el-button>
                </el-button-group>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <div v-show="formInline.orderState == 0">
        <el-table
          v-loading="listLoading"
          :data="logisticsError"
          border
          style="width: 100%"
        >
          <template slot="empty">
            <p>{{ dataText }}</p>
          </template>
          <el-table-column
            prop="orderCode"
            label="订单编号"
            fixed
            show-overflow-tooltip
            width="200"
          />
          <el-table-column
            show-overflow-tooltip
            prop="goodsName"
            label="商品名称/套餐名称"
            width="200"
          >
            <template slot-scope="scope">
              {{ scope.row.goodsName }}/{{ scope.row.comboName }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="consignee"
            label="收货人/手机号"
            width="200"
          >
            <template slot-scope="scope">
              {{ scope.row.consignee }}/{{ scope.row.phone }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="详细地址"
            show-overflow-tooltip
          />
          <el-table-column
            prop="providerName"
            label="承运公司/单号"
            show-overflow-tooltip
            width="200"
          >
            <template slot-scope="scope">
              {{ scope.row.courierName }}/{{ scope.row.courierNum }}
            </template>
          </el-table-column>
          <el-table-column
            prop="deliveryTime"
            label="发货时间"
            show-overflow-tooltip
            width="150"
          />
          <el-table-column label="操作" fixed="right">
            <template slot-scope="{ row }">
              <!-- <el-button type="text" @click="gotoList(row)">前往处理</el-button> -->
              <el-button
              type="text"
              @click="handleRefund(row, 'modify')"
              >修改物流信息</el-button
            >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="queryForm.pageNo"
          :page-size="queryForm.pageSize"
          :layout="layout"
          :total="count"
          @current-change="handleCurrentChange"
        />
      </div>
      <div v-if="formInline.orderState == 1">
        <el-table :data="importError" border style="width: 100%">
          <el-table-column label="序号" type="index" width="100" />
          <el-table-column
            show-overflow-tooltip
            prop="time"
            label="导入时间"
            width="150"
          />
          <el-table-column
            prop="msg"
            label="导入数量"
            show-overflow-tooltip
            width="500"
          />
          <!-- </el-table-column> -->
          <el-table-column label="操作" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="downloadItem(row)">下载</el-button>
              <el-button type="text" @click="deleteItem(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="queryForm.pageNo"
          :page-size="queryForm.pageSize"
          :layout="layout"
          :total="countImport"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <Refund ref="refund" @getList="getInfo()" />
  </div>
</template>
<script>
import Refund from "./refund";
export default {
    components: { Refund },
  data() {
    return {
      count: 0, // 商品总计
      listLoading: false,
      downloadLoading: false,
      isShow: true,
      dataText: "暂无数据",
      layout: "total, prev, pager, next, jumper",
      total: 100,
      count: 1,
      countImport: 1,
      queryForm: {
        pageNo: 1,
        pageSize: 10,
      },
      formInline: {
        orderState: "0",
        findText: "",
        startTime: "",
      },
      formImport: {
        pageNo: 1,
      },
      logisticsError: [], //快递LIST
      importError: [], //导入LIST
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    // 修改发货信息
    handleRefund(row, md) {
        this.$refs["refund"].showEdit(row, md);
    },
    // 删除错误信息
    deleteItem(event) {
      let that = this;
      const params = {
        type: "updateDataState",
        data: {
          id: event.id,
          state: 4,
        },
      };
      this.$confirm("删除后，将无法恢复，请核对后操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.$http.post(that.$api.updateDataState, params).then((res) => {
            console.log(res);
            if (res.resultCode !== "9999") {
              this.getInfo();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
    },
    // 下载当前错误
    downloadItem(event) {
      console.log(event);
      const params = {
        type: "exportErrorData",
        data: {
          id: event.id,
          merchantId: sessionStorage.getItem("merchantsId"),
        },
      };
      console.log(params);
      this.$http.post(this.$api.exportErrorData, params).then((res) => {
        this.downloadLoading = false;
        var downloadFileUrl = res.excelUrl;
        var elemIF = document.createElement("iframe");
        elemIF.src = downloadFileUrl;
        elemIF.style.display = "none";
        document.body.appendChild(elemIF);
        elemIF.click();
        setTimeout(() => {
          document.body.removeChild(elemIF);
        }, 1000);
      });
    },
    // 跳转列表页
    gotoList(event) {
      console.log(event);
      this.$router.push({
        name: "Orderlist",
        query: {
          orderID: event.orderCode,
        },
      });
    },
    // 搜索
    handSearch() {
      this.queryForm.pageNo = 1;
      this.getInfo();
      // console.log(this.formInline);
    },
    //清空
    handleEmpty() {
      const formInline = this.formInline;
      for (const key in formInline) {
        formInline[key] = "";
      }
      this.formInline = formInline;
      // console.log(this.formInline)
      sessionStorage.removeItem("orderCode");
      this.getInfo();
    },
    // 切换页码
    handleCurrentChange(e) {
      // console.log(this.formInline.orderState,e)
     this.formInline.orderState==0? this.queryForm.pageNo = e:this.formImport.pageNo=e;
    //  console.log(this.formImport.pageNo)
      this.getInfo();
    },
    getInfo() {
      const params = {
        type: "getLogisticsErrorMsg",
        data: {
          merchantId: sessionStorage.getItem("merchantsId"),
          searchKey: this.formInline.findText,
          pageNum: this.queryForm.pageNo,
        },
      };
      this.$http.post(this.$api.getLogisticsErrorMsg, params).then((res) => {
        // console.log(res);
        this.logisticsError = res.list;
        this.count = res.count;
      });
      const impor = {
        type: "getLogisticsImportErrorMsg",
        data: {
          merchantId: sessionStorage.getItem("merchantsId"),
          pageNum: this.formImport.pageNo,
        },
      };
      this.$http
        .post(this.$api.getLogisticsImportErrorMsg, impor)
        .then((res) => {
          this.importError = res.list;
          this.countImport = res.count;
          // console.log(this.countImport);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.number {
  margin-right: 50px;
}
</style>

