<template>
  <div>
    <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
      <el-row>
        <el-form-item class="query-form-item">
          <el-input v-model="filterQuery.id" placeholder="单号"></el-input>
        </el-form-item>

        <el-form-item class="query-form-item">
          <el-select v-model="filterQuery.mainAction" placeholder="出入库类型">
            <el-option label="全部" value=""></el-option>
            <el-option label="入库" value="WareHouseIn"></el-option>
            <el-option label="出库" value="WareHouseOut"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-select v-model="filterQuery.action" placeholder="请选择业务类型">
            <el-option
                v-for="item in busTypes"
                :key="item.name"
                :label="item.name"
                :value="item.action">
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="onReset"
            ></el-button>
            <el-button type="primary" icon="search" @click="onSubmit"
            >查询
            </el-button
            >
          </el-button-group>
        </el-form-item>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="扫码单据类型" prop="action">
        <template slot-scope="scope">
          <span>{{ getActionName(scope.row.action) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号" prop="id" show-overflow-tooltip></el-table-column>
      <el-table-column label="来源订单号" prop="corpOrderId" show-overflow-tooltip></el-table-column>
      <el-table-column label="来源" prop="fromType">
        <template slot-scope="scope">
          <span>{{ fromTypeMap[scope.row.fromType] }}</span>
        </template>

      </el-table-column>
      <el-table-column label="往来单位" prop="fromCorp" width="220">
        <template slot-scope="scope">
          <!--                    {{ scope.row.fromCorp }}-->

          <p v-if="scope.row.fromCorp == null">
            <el-button
                type="primary"
                size="mini"
                @click.native.stop="handleUnitClick(scope.row)"
            >选择往来单位
            </el-button
            >
          </p>
          <p v-if="scope.row.fromCorp !== null">
            <el-button
                type="primary"
                size="mini"
                @click.native.stop="handleUnitClick(scope.row)"
            >{{ scope.row.fromCorp }}
            </el-button
            >
          </p>

        </template>

      </el-table-column>
      <el-table-column label="创建时间" prop="actDate" show-overflow-tooltip>
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{ scope.row.actDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="校验状态" prop="status" width="100">
        <template slot-scope="scope">
          <el-tag :type="(scope.row.status == 3) | statusFilterType">{{
              checkStatus[scope.row.status]
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template slot-scope="scope">
          <el-button
              type="text"
              size="small"
              v-if="scope.row.status === -1"
              @click.native.stop="addOrders(scope.row)"
          >编辑
          </el-button
          >
          <el-button
              type="text"
              size="small"
              v-if="scope.row.status !== -1"
              @click.native.stop="intentDetail(scope.row)"
          >详情
          </el-button
          >

          <el-button
              type="text"
              size="small"
              v-if="scope.row.status !== -1"
              @click.native.stop="handleErrorDetail(scope.$index)"
          >错误详情
          </el-button
          >
          <el-button
              type="text"
              size="small"
              @click.native.stop="deleteDialog(scope.row.id)"
          >删除
          </el-button
          >
          <el-button
              type="text"
              size="small"
              v-if="scope.row.status !== -1"
              @click.native.stop="onUpload(scope.row.id)"
          >重新提交
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="错误信息" :visible.sync="dialogVisible" width="30%" :append-to-body='true'>
      <span>{{ errorDetail }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
        >关 闭</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
        title="选择往来单位"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="dialogTableVisible"
        append-to-body
        width="70%"
    >
      <el-form :inline="true" :model="unitquery" class="query-form" size="mini">
        <el-form-item class="query-form-item">
          <el-input v-model="unitquery.key" placeholder="搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              icon="search"
              @click.native.stop="getUnitList()"
          >查询
          </el-button
          >
        </el-form-item>
      </el-form>

      <el-table
          v-loading="loading"
          :data="unitlist"
          style="width: 100%"
          @row-click="selectUnit"
      >
        <el-table-column
            label="往来单位ID"
            prop="erpId"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column
            label="往来单位名称"
            prop="name"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column
            label="往来单位简写"
            prop="spell"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column
            label="地址"
            prop="addr"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="类型" prop="type"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
        title="单号详情"
        :visible.sync="codeDetailVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="80%" append-to-body
        v-if="codeDetailVisible"
    >
      <codeDetail
          :idQuery="idQuery"
          v-on:closeDetailDialog="closeDetailDialog"
      ></codeDetail>
    </el-dialog>
    <el-pagination
        :page-size="filterQuery.limit"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import {
  orderListError,
  codeList,
  filterOrder,
  deleteByOrderId,
  commitOrder,
  updateUnit,
} from "../../api/warehouse/order";

import draggable from "vuedraggable";
import {saveAs} from "file-saver";
import codeDetail from "./errorCode";
import addOrder from "./addOrder";
import store from "../../store";
import {getBussinessType} from "../../api/basic/bussinessType";
import {getBasicUnitMaintains} from "@/api/basic/basicUnitMaintain";

const formJson = {
  site_id: "",
  site_name: "",
  describe: "",
  ads: [],
};

export default {
  data() {
    return {
      filterQuery: {
        id: "",
        mainAction: null,
        action: null,
        page: 1,
        limit: 20,
      },
      checkStatus: {
        '-1': "等待提交",
        // 1: "等待处理",
        1: "等待校验",
        2: "等待校验",
        3: "校验异常",
        4: "校验成功",
      },
      curIndex: "",
      unitquery: {key: "", page: 1, limit: 20},
      unitlist: [],
      unitUpdateQuery: {
        id: "",
        fromCorpId: "",
        fromCorp: "",
      },
      idQuery: {
        id: "",
      },
      fromTypeMap: {
        "1": "UDIMS平台",
        "2": "网页新增",
        "3": "pda即时校验",
        "4": "pda未校验",
        "5": "pc端扫码精灵",
        "6": "补录单据",
          "7": "UDI供应商平台"
      },
      list: [],
      adId: [],
      adSelectList: [],
      adList: {},
      adListNoDataText: "无数据",
      queryAdIdAsyncLoading: false,
      codeDetailVisible: false,
      total: 0,
      loading: true,
      index: null,
      formName: null,
      errorDetail: "1111111111111",
      formMap: {
        add: "新增",
        edit: "编辑",
      },
      deleteData: {
        id: "",
      },
      dialogTableVisible: false,
      formLoading: false,
      dialogVisible: false,
      formData: formJson,
      deleteLoading: false,
      busTypes: [],
    };
  },
  components: {
    draggable,
    codeDetail,
    addOrder,
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        page: 1,
        limit: 20,
      };
      this.getList();
    },
    onSubmit() {
      this.loading = true;
      this.getList();
    },
    handleSizeChange(val) {
      this.filterQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getList();
    },
    handleUnitClick(row) {
      this.curIndex = row.id;
      this.dialogTableVisible = true;
    },
    closeDetailDialog(val) {
      this.codeDetailVisible = false;
    },

    closeDialog() {
      this.getList();
    },
    getUnitList() {
      this.loading = true;
      getBasicUnitMaintains(this.unitquery)
          .then((response) => {
            this.loading = false;
            this.unitlist = response.data.page.list || [];
          })
          .catch(() => {
            this.loading = false;
          });
    },

    selectUnit(row) {
      console.log(row.id);
      this.unitUpdateQuery.id = this.curIndex;
      this.unitUpdateQuery.fromCorp = row.name;
      this.unitUpdateQuery.fromCorpId = row.erpId;
      updateUnit(this.unitUpdateQuery)
          .then((response) => {
            this.dialogTableVisible = false;
            this.getList();
          })
          .catch(() => {
            this.dialogTableVisible = false;
          });
    },
    //获取订单列表
    getList() {
      this.loading = true;
      this.filterQuery.status = 3;
      this.filterQuery.customerId = store.getters.customerId;
      orderListError(this.filterQuery)
          .then((response) => {
            console.log(response)
            this.loading = false;
            this.list = response.data.list || [];
            this.total = response.data.total || 0;
          })
          .catch(() => {
            this.loading = false;
            this.list = [];
            this.total = 0;
          });
    },

    deleteOrders(data) {
      this.loading = true;
      this.deleteData.id = data;
      deleteByOrderId(this.deleteData)
          .then((response) => {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功！",
            });
          })
          .catch(() => {
          });
    },

    deleteDialog(rowId) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            this.deleteOrders(rowId);
          })
          .catch(() => {
          });
    },

    onUpload(data) {
      this.loading = true;
      var idQuery = {
        orderId: "",
      };
      idQuery.orderId = data;
      commitOrder(idQuery)
          .then((response) => {
            if (response.code === 20000) {
              this.$message.success(response.data);
              this.getList();
            } else {
              this.$message.error(response.message);
            }
          })
          .catch(() => {
          });
    },

    handleErrorDetail(poistion) {
      var mOrder = this.list[poistion];
      var corpOrderId = mOrder.remark;

      this.errorDetail = mOrder.remark;
      console.log(corpOrderId + "  " + mOrder + "  " + mOrder.remark);
      this.dialogVisible = true;
    },

    intentDetail(row) {
      this.codeDetailVisible = true;
      this.idQuery.id = row.id;
    },
    getBusType() {
      let query = {
        enabled: true,
      };
      getBussinessType(query)
          .then((response) => {
            this.busTypes = response.data.list || [];
            this.filterQuery.billAction = this.busTypes[0].action;
            // this.getList();
          })
          .catch(() => {
          });
    },
    getActionName(action) {
      for (let i = 0; i < this.busTypes.length; i++) {
        if (this.busTypes[i].action === action) {
          return this.busTypes[i].name;
        }
      }
    },
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        false: "success",
        true: "danger",
      };
      return statusMap[status];
    },
  },
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  created() {
    this.getBusType();
    let query = this.$route.query;
    this.filterQuery = Object.assign(this.filterQuery, query);
    this.filterQuery.limit = parseInt(this.filterQuery.limit);
    // 加载表格数据
    this.getList();
  },
};
</script>

<style type="text/scss" lang="scss">
</style>
