<template>
  <p-spin :spinning="spinning">
    <p-card :title="title">
      <span slot="extra">
        <template v-for="(item, index) in btnOptions">
          <p-button
            v-if="!item.uploadtype"
            type="primary"
            style="margin-right: 10px"
            :icon="item.icon"
            @click="clickBtn(item)"
            :key="index"
          >
            {{ item.name }}
          </p-button>
          <p-upload
            v-if="item.uploadtype"
            :key="index"
            @change="(info) => clickBtn(item, info)"
            :headers="headers"
            :showUploadList="false"
            :action="upcloud_base_inventory + '/excel/fileUploadExcel'"
          >
            <p-button type="primary"> {{ item.name }} </p-button>
          </p-upload>
        </template>
      </span>
      <div class="gridClass">
        <p-grid-form
          :span="8"
          ref="forms"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 20 }"
          :items="itemDatas"
          @submit="hanlderSubmit"
        />
      </div>
      <p-table
        ref="table"
        :row-key="tableRowKey"
        :bordered="true"
        dragle
        auto-width
        :dataSource.sync="dataSource"
        :autoLoad="tableAutoLoad"
        :filterDropdownColum="false"
        :colorTransformRow="false"
        :columns="tableColumns"
        :rowSelectType="rowSelectType"
        :selectedRowKeys.sync="selectedRowKeys"
        :remoteUrl="tableRemoteUrl"
        :remoteBefore="remoteBefore"
        :doneBefore="doneBefore"
        :remoteData="remoteParams"
        :remoteParams="remoteParams"
        :scroll="{ x: true }"
        @selectChange="selectChange"
      >
        <span slot="action" slot-scope="text, record">
          <a v-if="actionOption" @click="changeClick(record)" style="margin-right: 10px" href="javascript:;"
            >损溢管理编辑</a
          >
          <a @click="checkItem(record)" style="margin-right: 10px" href="javascript:;">商品详情</a>
        </span>

        <template slot="lockreasonname" slot-scope="text, record, index">
          <!-- {{ index }} -->
          <p-select
            style="width: 120px"
            :options="options"
            :defaultValueIndex="0"
            autoLoad
            @change="(value) => handleChange(value, record, index)"
          />
          <!-- :remoteUrl="{
              url: upcloud_base_common + `/dict/listbytype/?dicttypeCodes=WMS_INV_STOCK_LOCK_REASON`,
              method: 'post',
            }"
            :defaultValueIndex="0"
            :replaceFields="{
              label: 'dictName',
              value: 'dictName',
            }" -->
        </template>
        <template slot="lockQuantity" slot-scope="text, record, index">
          <!-- {{ index }} -->
          <p-input-number
            allow-clear
            style="width: 100%"
            v-model="record.lockQuantity"
            :min="0"
            :max="record.quantity"
          />
        </template>
        <!-- lockQuantity -->
      </p-table>
    </p-card>
    <itemDetail ref="detailItem" :itemId="itemId" />
  </p-spin>
</template>

<script>
import { upcloud_base_inventory } from "@/config/serviceSettings";
import itemDetail from "../../components/itemDetail";
import { getLOCK_REASON } from "../api/api";
import { upcloud_base_common } from "@/config/serviceSettings";

export default {
  name: "check",
  components: {
    itemDetail,
  },
  props: {
    btnOptions: {
      // 按钮集合
      type: Array,
      default: [],
    },
    spinning: {
      // loading
      type: Boolean,
      default: false,
    },
    queryStatus: {
      // 查询按钮
      type: Boolean,
      default: true,
    },
    actionOption: {
      // 损溢管理按钮
      type: Boolean,
      default: false,
    },
    tableRowKey: {
      type: String,
      default: "",
    },
    tableAutoLoad: {
      type: Boolean,
      default: true,
    },
    rowSelectType: {
      // 行选择类型
      type: Number,
      default: 2,
    },
    title: {
      // 标题
      type: String,
      default: "",
    },
    tableColumns: {
      type: Array,
      default: [],
    },
    items: {
      type: Array,
      default: [],
    },
    tableRemoteUrl: {
      type: String | Object | Function,
      default: "",
    },
    ajaxId: {
      // 接口id
      type: String,
      default: "",
    },
  },
  data() {
    return {
      options: [],
      dataSource: [],
      upcloud_base_common: upcloud_base_common,
      upcloud_base_inventory: upcloud_base_inventory,
      headers: {},
      remoteParams: {},
      itemId: "",
      itemOption: {
        span: 6,
        type: "buttonGroup",
        style: { textAlign: "left" },
        options: [
          {
            value: "查询",
            icon: "search",
            btnType: "primary",
            style: "margin-left:30px;margin-right:10px;",
            htmlType: "submit",
            on: {
              click: (event, form) => {
                form.validateFields((error, values) => {
                  if (!error) {
                    this.remoteParams = { params: values };
                  }
                });
              },
            },
          },
          {
            value: "重置",
            name: "ccz",
            icon: "redo",
            on: {
              click(event, form) {
                form.resetFields();
              },
            },
          },
        ],
      },
      itemDatas: [],
      selectedRowKeys: [],
    };
  },
  created() {
    if (this.queryStatus) {
      this.items.push(this.itemOption);
      this.itemDatas = this.items;
    } else {
      this.itemDatas = this.items;
    }
    // this.options = { ...remote("WMS_INV_STOCK_LOCK_REASON") };
    // console.log(this.options);
    this.headers = { Authorization: "Bearer" + sessionStorage.getItem("token") };
    this.getOpitons();
  },
  methods: {
    async getOpitons() {
      let res = await getLOCK_REASON();
      console.log(res);
      this.options = res.data.map((i) => {
        return {
          value: i.dictName,
          label: i.dictName,
        };
      });
    },
    changenumber(data, record) {
      console.log(data, record);
      console.log(this.dataSource);
    },
    doneBefore(data) {
      console.log(data);
      if (!data.data) {
        data.data = {};
        data.data.list = [];
        console.log(data);
        return data;
      }
      data.data.list.forEach((i) => {
        i.lockQuantity = i.quantity || 0;
        i.lockreasonname = this.options[0].value || "";
      });

      return data;
    },
    handleChange(value, record, index) {
      this.dataSource[index].lockreasonname = value;
    },
    //点击查询调用方法
    reload(values) {
      this.remoteParams = { params: values };
    },
    clickBtn(item, info) {
      // 按钮
      this.$emit(item.action, info);
    },
    checkItem(item) {
      // 查看商品详情
      this.itemId = item.itemId;
      this.$refs.detailItem.open();
    },
    hanlderSubmit(event, form) {
      // 查询
      console.log(form);
      event.preventDefault();
      this.$emit("hanlderSubmit", event, form);
    },
    remoteBefore(data, dataParams) {
      // console.log(arguments, 'argumentsarguments')

      dataParams.data = { ...dataParams.data, num: this.ajaxId };
      //   delete dataParams.params.params;
      console.log(dataParams, "dataParamsdataParamsdataParams");
      let values = this.$refs.forms.form.getFieldsValue();
      console.log(values);
      if (!values.itemId) {
        values.itemId = "";
      }
      if (!values.itemName) {
        values.itemName = "";
      }
      if (!values.locatorId) {
        values.locatorId = "";
      }
      if (!values.batchNum) {
        values.batchNum = "";
      }

      dataParams.params = { ...dataParams.params, ...dataParams.data, ...values };
      if (this.tableRemoteUrl.ajaxData) {
        dataParams.data.params = { ...this.tableRemoteUrl.ajaxData, ...dataParams.data.params };
      }
    },
    selectChange(selectedRowKeys, selectedRows) {
      // 勾选框
      console.log(selectedRowKeys, selectedRows);
      this.selectedRowKeys = selectedRowKeys;
      this.$emit("selectChange", selectedRowKeys, selectedRows);
    },
    changeClick(record) {
      this.$emit("changeClick", record);
    },
  },
};
</script>

<style>
.gridClass {
  margin-bottom: 12px;
}
</style>
