<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <div class="thetopbox">
      <el-form ref="form" :model="queryParams" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item :label="'订单编号'" prop="orderCode">
              <el-input clearable v-model="queryParams.orderCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'会员编号'" prop="memberCode">
              <el-input clearable v-model="queryParams.memberCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'会员姓名'" prop="memberName">
              <el-input clearable v-model="queryParams.memberName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'联系方式'" prop="phone">
              <el-input clearable v-model="queryParams.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'订单类型'" prop="orderType">
              <el-select
                clearable
                v-model="queryParams.orderType"
                :placeholder="'请选择'"
              >
                <el-option
                  v-for="(item, index) in typeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'发货方式'" prop="deliveryWay">
              <el-select
                clearable
                v-model="queryParams.deliveryWay"
                :placeholder="'请选择'"
              >
                <el-option
                  v-for="(item, index) in fhwayList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'审核状态'" prop="approveStatus">
              <el-select
                clearable
                v-model="queryParams.approveStatus"
                :placeholder="'请选择'"
              >
                <el-option
                  v-for="(item, index) in statusList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="'申请日期'" prop="teamCode">
              <el-date-picker
                v-model="queryParams.sqsj"
                @change="changeTime"
                type="daterange"
                :range-separator="'至'"
                :start-placeholder="'开始日期'"
                :end-placeholder="'结束日期'"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="searchbox">
              <el-button class="searchbtn" @click="getSearch">
                {{ '搜索' }}</el-button
              >
              <el-button @click="reChongzhi"> {{ '重置' }}</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="maintop">
      <div class="mainbtn">
        <el-button
          size="mini"
          class="thebtn2"
          v-hasButtons="['lnvenZt']"
          @click="selfPick"
          :disabled="single"
          >{{ '自提' }}</el-button
        >
      </div>
    </div>
    <div class="main">
      <div class="maintable">
        <el-table
          height="670px"
          :data="tableData"
          v-loading="loading"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
          :span-method="objectSpanMethod"
        >
          <el-table-column prop="colsele" type="selection"> </el-table-column>

          <el-table-column align="center" prop="cover" :label="'产品主图'">
            <template slot-scope="scope">
              <img
                style="width: 44px; height: 44px; border-radius: 8px"
                :src="scope.row.cover"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'产品名称'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="specsName"
            :label="'产品规格'"
          >
          </el-table-column>
          <el-table-column align="center" prop="" :label="'产品分类'">
          </el-table-column>

          <el-table-column align="center" prop="" :label="'销售类型'">
          </el-table-column>
          <el-table-column
            align="center"
            prop="quantity"
            :label="'产品数量'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="180px"
            prop="orderCode"
            :label="'订单编号'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="orderTypeVal"
            :label="'订单类型'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="approveStatusVal"
            :end-placeholder="'审核状态'"
            :label="'审核状态'"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.approveStatus == 3">
                <el-popover placement="right" width="400" trigger="hover">
                  <div v-html="scope.row.rejectMsg"></div>
                  <div style="cursor: pointer" slot="reference">
                    {{ scope.row.approveStatusVal }}
                  </div>
                </el-popover>
              </div>
              <div v-else>{{ scope.row.approveStatusVal }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="180px"
            prop="memberCode"
            :label="'会员编号'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="memberName"
            :label="'会员姓名'"
          >
          </el-table-column>
          <el-table-column align="center" prop="phone" :label="'联系方式'">
          </el-table-column>
          <el-table-column
            align="center"
            prop="creator"
            :label="'申请人'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="180px"
            prop="selfCode"
            :label="'提货码'"
          >
          </el-table-column>

          <el-table-column
            align="center"
            width="180px"
            prop="creationTime"
            :label="'申请日期'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="remark"
            :label="'备注'"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="colsele"
            :label="'操作'"
            min-width="150px"
          >
            <template slot-scope="scope" v-if="scope.row.approveStatus == 0">
              <el-button
                @click.native.prevent="selfApprove(scope.row, 1)"
                type="text"
                v-hasButtons="['lnvenYes']"
                style="color: #009b58; padding: 0"
                :disabled="scope.row.approveStatus == 0 ? false : true"
              >
                {{ '同意' }}
              </el-button>

              <el-button
                @click.native.prevent="selfApprove(scope.row, 3)"
                type="text"
                v-hasButtons="['lnvenNo']"
                style="color: #c8161d; padding: 0"
                :disabled="scope.row.approveStatus == 0 ? false : true"
              >
                {{ '驳回' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getSearch"
    />
    <!-- 自提 -->
    <el-dialog
      :title="'自提'"
      :close-on-click-modal="false"
      :visible.sync="zitiShow"
      width="900px"
     
      append-to-body
    >
      <div>
        <el-form
          label-width="80px"
          :model="ztForm"
          ref="ztForm"
          :rules='ztrules'
          class="demo-ruleForm"
        >
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item :label="'邮费返还'" prop="postage">
                <el-input v-model="ztForm.postage"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="库存公司" prop="pkCorp">
                <el-select
                  clearable
                  v-model="ztForm.pkCorp"
                  :placeholder="'请选择'"
                  @change="getStore"
                >
                  <el-option
                    v-for="(item, index) in corpList"
                    :key="index"
                    :label="item.corpName"
                    :value="item.pkId"
                    @change="getStore"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仓库" prop="pkStorehouse">
                <el-select clearable v-model="ztForm.pkStorehouse">
                  <el-option
                    v-for="item in storeList"
                    :key="item.pkId"
                    :label="item.name"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="menuList">
          <div
            v-for="item in qhList"
            @click="isMenu = item.id"
            :class="['menu_i', isMenu == item.id ? 'actMenu' : '']"
            :key="item.id"
          >
            {{ item.text }}
          </div>
        </div>
        <div>
          <el-table
            v-if="isMenu == 0"
            :data="ztData.productList"
            height="400px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
          >
            <!-- :row-class-name="tableRowClassName"
           -->

            <el-table-column
              align="center"
              prop="orderCode"
              :label="'订单编号'"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="productName"
              :label="'产品名称'"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="specsName"
              :label="'产品规格'"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="quantity"
              :label="'产品数量'"
            ></el-table-column>
          </el-table>
          <el-table
            v-if="isMenu == 1"
            :data="ztData.barCodeList"
            height="400px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
          >
            <!-- :row-class-name="tableRowClassName"
           -->
            <el-table-column
              align="center"
              prop="orderCode"
              :label="'订单编号'"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="productName"
              :label="'产品名称'"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="specsName"
              :label="'产品规格'"
            ></el-table-column>
            <el-table-column align="center" prop="" :label="'产品数量'"
              ><template>
                <span>1</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="barCode"
              :label="'追溯码'"
              ><template slot-scope="scope">
                <el-input v-model="scope.row.barCode"> </el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="footer" style="text-align: center; margin-top: 20px">
          <el-button @click="zitiShow = false">
            {{ '取消' }}</el-button
          >
          <el-button type="primary" @click="sureTh('ztForm')">{{
            '确定'
          }}</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="驳回意见"
      :visible.sync="isShow"
      width="40%"
      center
      :close-on-click-modal="false"
      :before-close="handleClose1"
    >
      <div>
        <editor
          ref="sptwEditor"
          v-model="relContent"
          :min-height="283"
          :upload-url="uploadImgUrl"
        />
      </div>
      <div class="button-s">
        <div class="submit" @click="handleClose1">{{ '取消' }}</div>
        <div class="submit colors" @click="confirmSubmit">
          {{ '确认' }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

      <script>
import topBar from "@/components/topBar";
import * as log from "@/api/logistics";
import * as api from "@/api/product";
import * as supply from "@/api/supply.js";
import ImageUpload from "@/components/ImageUpload";
import Editor from "@/components/Editor/index.vue";
export default {
  name: "Inventory",
  components: {
    topBar,
    Editor,
    ImageUpload,
  },
  data() {
    return {
      moren: "inventory",
      topList: [
        {
          name: '自提清单',
          path: "inventory",
        },
      ],
      sqsj: "", //申请时间
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        orderCode: "", //订单编号
        memberCode: "", //会员编号
        memberName: "", //会员名称
        phone: "", //电话
        orderType: "", //订单类型
        deliveryWay: "", //发货方式
        startCreateDate: "",
        endCreateDate: "",
        startPayDate: "",
        endPayDate: "",
      },
      tableData: [],
      loading:false,
      typeList: [],
      fhwayList: [],
      paywayList: [],
      single: true,
      total: 0,
      zitiShow: false,
      ztForm: {
        postage: "",
      },
      qhList: [
        {
          text: '提货商品',
          id: 0,
        },
        {
          text: '绑定追溯码',
          id: 1,
        },
      ],
      ztData: {
        barCodeList: [],
        productList: [],
      },
      isMenu: "0",
      // 需要合并项的列
      needMergeArr: [
        {
          colName: "colsele",
          mergeCheckNames: ["orderCode"],
        },
        {
          colName: "orderCode",
          mergeCheckNames: ["orderCode"],
        },
        {
          colName: "orderTypeVal",
          mergeCheckNames: ["orderCode", "orderTypeVal"],
        },
        {
          colName: "memberCode",
          mergeCheckNames: ["orderCode", "memberCode"],
        },
        {
          colName: "memberName",
          mergeCheckNames: ["orderCode", "memberName"],
        },
        {
          colName: "phone",
          mergeCheckNames: ["orderCode", "phone"],
        },
        {
          colName: "creator",
          mergeCheckNames: ["orderCode", "creator"],
        },

        {
          colName: "selfCode",
          mergeCheckNames: ["orderCode", "selfCode"],
        },
        {
          colName: "approveStatusVal",
          mergeCheckNames: ["orderCode", "approveStatusVal"],
        },
        // {
        //   colName: "remark",
        //   mergeCheckNames: ["orderCode", "remark"],
        // },
        {
          colName: "creationTime",
          mergeCheckNames: ["orderCode", "creationTime"],
        },
      ],
      rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
      statusList: [],
      idList: [],
      thepkId: "",
      isShow: false,
      relContent: "",
      rejectData: "",
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/upload",
      corpList: [],
      storeList: [],
      ztrules:{
        pkStorehouse: [
          { required: true, message: '请选择', trigger: "change" },
        ],
      }
    };
  },
  created() {
    this.getData();
    this.getSearch();
  },
  methods: {
    getStore(e) {
      if (e) {
        supply
          .getStoreRefer({
            pkCorp: e,
          })
          .then((res) => {
            this.storeList = res.rows;
          });
      }
    },
    handleClose() {
      this.zitiShow = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.single = val.length !== 1;
      this.thepkId = val[0].pkId;
      let theprolist = [];
      this.tableData.forEach((ele) => {
        if (val[0].orderCode == ele.orderCode) {
          theprolist.push(ele);
        }
      });
      this.ztData.barCodeList = theprolist;
      this.ztData.productList = theprolist;
      this.idList = theprolist.map((item) => item.orderItemsId);
    },
    //确定提货
    sureTh(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push({
            path: "ztZxqc",
            query: {
              postage: this.ztForm.postage||0,
              pkStorehouse: this.ztForm.pkStorehouse,
              itemIdList: JSON.stringify(this.idList),
              barCodeList: JSON.stringify(this.ztData.barCodeList),
              productList: JSON.stringify(this.ztData.productList),
              ifqc: "1", //自提清单进入
              pkId: this.thepkId,
              businessType: 251,
            },
          });
        }
      });
    },
    selfPick() {
      this.$confirm('是否自提?').then((_) => {
        if (this.multipleSelection[0].approveStatus == 1) {
          this.zitiShow = true;
        } else {
          this.$message({
            message: '请先进行审核',
            type: "warning",
          });
        }
      });
    },
    //同意
    selfApprove(row, index) {
      this.$confirm('是否确认?').then((_) => {
        if (index == 1) {
          log
            .selfApprove({
              pkId: row.pkId,
              orderCode: row.orderCode,
              approveStatus: index,
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.getSearch();
              }
            });
        } else {
          this.isShow = true;
          this.rejectData = {
            pkId: row.pkId,
            orderCode: row.orderCode,
            approveStatus: index,
          };
        }
      });
    },
    //驳回
    handleClose1() {
      this.isShow = false;
      this.relContent = "";
    },
    confirmSubmit() {
      if (this.relContent.length == 0) {
        this.$message({
          message: "请输入驳回信息",
          type: "warning",
        });
        return false;
      }
      log
        .selfApprove(
          Object.assign({ rejectMsg: this.relContent }, this.rejectData)
        )
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.isShow = false;
            this.relContent = "";
            this.getSearch();
          }
        });
    },

    //解决多列行列合并，根据某一列 合并其他列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let needMerge = this.needMergeArr.some((item) => {
        return item.colName === column.property;
      });
      if (needMerge === true) {
        return this.mergeAction(column.property, rowIndex, column);
      }
    },
    mergeAction(val, rowIndex, colData) {
      let _row = this.rowMergeArrs[val].rowArr[rowIndex];
      let _col = _row > 0 ? 1 : 0;
      return [_row, _col];
    },
    rowMergeHandle(arr, data) {
      if (!Array.isArray(arr) && !arr.length) return false;
      if (!Array.isArray(data) && !data.length) return false;
      let needMerge = {};

      arr.forEach((mergeItem) => {
        // 创建合并管理对象
        needMerge[mergeItem.colName] = {
          rowArr: [],
          rowMergeNum: 0,
        };
        let currentMergeItemData = needMerge[mergeItem.colName];

        // 进行合并管理对象数据的遍历整理
        data.forEach((item, index) => {
          if (index === 0) {
            currentMergeItemData.rowArr.push(1);
            currentMergeItemData.rowMergeNum = 0;
          } else {
            let currentRowData = data[index];
            let preRowData = data[index - 1];

            if (
              this.colMergeCheck(
                currentRowData,
                preRowData,
                mergeItem.mergeCheckNames
              )
            ) {
              currentMergeItemData.rowArr[
                currentMergeItemData.rowMergeNum
              ] += 1;
              currentMergeItemData.rowArr.push(0);
            } else {
              currentMergeItemData.rowArr.push(1);
              currentMergeItemData.rowMergeNum = index;
            }
          }
        });
      });
      return needMerge;
    },
    colMergeCheck(currentRowData, preRowData, mergeCheckNames) {
      if (!Array.isArray(mergeCheckNames) && !mergeCheckNames.length)
        return false;
      let result = true;
      for (let index = 0; index < mergeCheckNames.length; index++) {
        const mergeCheckName = mergeCheckNames[index];
        if (currentRowData[mergeCheckName] !== preRowData[mergeCheckName]) {
          result = false;
          break;
        }
      }
      return result;
    },
    changeTime(val) {
      this.queryParams.startDate = val[0];
      this.queryParams.endDate = val[1];
    },
    handleChange1() {},
    getData() {
      log.getOrderType().then((res) => {
        this.typeList = res.data;
      });
      log.getDeliveryList().then((res) => {
        this.fhwayList = res.data;
      });
      log.getOrderPayType().then((res) => {
        this.paywayList = res.data;
      });
      // 获取审核状态
      api.recordStatus().then((res) => {
        this.statusList = res.data;
      });
      supply.corpList().then((res) => {
        this.corpList = res.rows;
      });
    },

    getSearch() {
      this.loading = true
      log.getOrderSelfList(this.queryParams).then((res) => {
        this.loading = false
        this.tableData = res.rows;
        this.total = res.total;
        const regex = new RegExp("<img", "gi");
        this.tableData.forEach((item) => {
          if (item.rejectMsg) {
            item.rejectMsg = item.rejectMsg.replace(
              regex,
              `<img style="max-width: 200px;"`
            );
          }
        });
        this.rowMergeArrs = this.rowMergeHandle(
          this.needMergeArr,
          this.tableData
        );
      });
    },
    //重置
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        shoppingAddress: [],
      };
      this.getSearch();
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

  <style lang="scss" scoped>
.button_s {
  padding: 3px 5px;
}
.button-s {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-top: 20px;
  .submit {
    width: 209px;
    height: 48px;
    background: #cccccc;
    border-radius: 5px 5px 5px 5px;
    line-height: 48px;
    text-align: center;
    color: #fff;
    font-size: 18px;
  }
  .colors {
    margin-left: 40px;
    background-color: #48b2fd;
  }
}
.menuList {
  display: flex;
  box-sizing: border-box;

  .menu_i {
    margin-right: 70px;
    line-height: 50px;
    cursor: pointer;
  }
  .actMenu {
    border-bottom: 5px solid #b42b2a;
  }
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
::v-deep .dizhi {
  width: 100%;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
.openClose {
  margin-top: 10px;
  margin-right: 10px;
  color: #666666;
  text-align: center;
}
.page {
  padding: 10px 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    padding: 20px 20px 0 0;
    background: #ffffff;
    border-radius: 8px;
    .searchbox {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #c8161d;
        color: #ffffff;
      }
    }
  }
  .maintop {
    display: flex;
    // padding: 10px 0px;
    justify-content: space-between;
    align-items: center;
    .mainbtn {
      .thebtn2 {
        color: #ffffff;
        background: #009b58;
      }
    }
  }
  .main {
    // margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
  }
}
</style>
