<!--
@name: 订单排序规则
@author: 李恒
@time: 2022-06-06 18:31:34
-->
<template>
  <div>
    <p-card v-if="!editType" title="订单排序规则" class="overflow-card">
      <div slot="extra">
        <p-button icon="filter" @click="toggleFormTag = !toggleFormTag">{{ toggleFormTag ? "隐藏" : "显示" }}</p-button>
        <!--导出-->
        <exportTemplate
          class="ml-10"
          fileName="订单排序规则.xlsx"
          :exportData="exportData"
          @handleChange="handleChange"
        />
        <p-button class="ml-10" type="primary" @click="toEdit('add')">新增</p-button>
        <p-button class="ml-10" type="primary" @click="toEdit('edit')">编辑</p-button>
        <p-button class="ml-10" type="primary" @click="batchDel">删除</p-button>
      </div>
      <p-form-model
        v-show="toggleFormTag"
        ref="formTarget"
        :label-col="{ span: 8 }"
        :model="form"
        :wrapper-col="{ span: 16 }"
        class="plg-grid-from plg-inner-form-mb"
      >
        <a-row>
          <a-col :span="8" :xxl="6" :offset="1">
            <p-form-model-item label="单据类型">
              <p-select v-model="form.billType" :options="billTypeOptions" allowClear />
            </p-form-model-item>
          </a-col>
          <a-col :span="8" :xxl="6" :offset="2">
            <p-form-model-item label="配送方式">
              <p-select v-model="form.deliverType" :options="deliverTypeOptions" allowClear />
            </p-form-model-item>
          </a-col>
          <a-col :span="8" :xxl="6">
            <p-form-model-item label="紧急程度">
              <p-select v-model="form.priorityLevel" :options="deliverTypeOptions1" allowClear />
            </p-form-model-item>
          </a-col>
          <a-col :span="8" :xxl="6" :offset="2">
            <p-form-model-item :wrapper-col="{ span: 16, offset: 10 }">
              <p-button type="primary" @click="onSubmit">查询</p-button>
              <p-button class="ml-10" @click="onReset">重置</p-button>
            </p-form-model-item>
          </a-col>
        </a-row>
      </p-form-model>
      <p-table
        ref="dataSource"
        id="table"
        :data-source.sync="dataSource"
        :scroll="{ x: true, y: scrollY }"
        :remote-url="listRemoteUrl"
        :remoteData="listParams"
        @selectChange="selectChange"
        :selectedRowKeys.sync="selectedRowKeys"
        bordered
        dragle
        row-key="billSortRuleId"
      >
        <p-table-column data-index="warehouseCode" title="仓编码" />
        <p-table-column data-index="warehouseName" title="仓名称" />
        <p-table-column data-index="billTypeName" title="单据类型" />
        <p-table-column data-index="deliverTypeName" title="配送方式" />
        <p-table-column data-index="priority" title="顺序号" />
        <p-table-column data-index="priorityLevel" title="紧急程度" />
        <p-table-column data-index="creatorName" title="创建人" />
        <p-table-column data-index="gmtCreate" title="创建时间" />
        <p-table-column data-index="modifierName" title="最后修改人" />
        <p-table-column data-index="gmtModified" title="最后修改时间" />
      </p-table>
    </p-card>
    <edit v-else :editData="editData" :type="editType" @back="back" />
  </div>
</template>

<script>
import exportTemplate from "@/views/example/modules/Export/exportTemplate";
import { del, exportUrl, getDictionary, listRemoteUrl } from "./api";
import edit from "./edit";
import calcHeight from "@/views/kzyWMS/modules/calcHeight";

export default {
  mixins: [calcHeight],

  components: { edit, exportTemplate },
  data() {
    return {
      toggleFormTag: true,
      form: {},
      // 列表参数
      listRemoteUrl,
      listParams: {},
      dataSource: [],
      selectedRowKeys: [],
      selectedRows: [],
      // 导出
      exportData: {
        exportParams: {},
        exportUrl,
      },

      editType: "",
      editData: {},
      // 字典
      billTypeOptions: [],
      deliverTypeOptions: [],
      deliverTypeOptions1: [],
    };
  },
  mounted() {
    this.initDictionary();
  },
  methods: {
    initDictionary() {
      getDictionary("bill_type_value").then((options) => {
        this.billTypeOptions = options;
      });
      getDictionary("pub_workstage_delivertype").then((options) => {
        this.deliverTypeOptions = options;
      });
      getDictionary("ASN_PRIORITY_LEVEL").then((options) => {
        this.deliverTypeOptions1 = options;
      });
    },
    toEdit(type, editData = []) {
      if (type === "add") {
        this.editType = type;
        this.editData = editData;
        return;
      }
      if (type === "edit") {
        const selectedRowKeys = this.selectedRowKeys;
        if (selectedRowKeys.length === 0) return this.$message.warn("请选择要编辑的数据！");
        const selectRows = this.dataSource.filter((_) => selectedRowKeys.includes(_.billSortRuleId));
        console.log(selectRows);
        this.editType = type;
        this.editData = selectRows;
      }
    },
    selectChange(selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows;
    },
    async batchDel() {
      if (this.selectedRowKeys.length === 0) return this.$message.warn("未选择需要删除的数据！");
      const selectedRowKeys = this.selectedRowKeys;
      let that = this;
      let selectedRows = this.selectedRows;
      this.$confirm({
        title: `确定要删除[${selectedRowKeys.length}]条数据?`,
        async onOk() {
          //   let a = selectedRowKeys.map((i) => {
          //     return {
          //       id: i,
          //     };
          //   });
          //   console.log(a);
          //   return;
          try {
            let res = await del({ deleteItems: selectedRows });
            if (res.success) {
              that.$message.success(res.message);
              that.listParams = { ...that.listParams };
            } else {
              that.$exception(res);
            }
          } catch (error) {
            that.$exception(error);
          }

          //   return new Promise((resolve, reject) => {
          //     del({ itemTypeIds: selectedRowKeys.join(",") })
          //       .then((res) => {
          //         if (res.success) {
          //           self.$message.success("删除成功");
          //           self.onSubmit();
          //           resolve();
          //         } else {
          //           self.$message.warn(res.message);
          //           resolve();
          //         }
          //       })
          //       .catch(() => {
          //         resolve();
          //       });
          //   });
        },
      });
    },
    onSubmit() {
      this.$refs.formTarget.validate((flag) => {
        if (!flag) return;
        console.log(this.form);
        this.listParams = { ...this.form };
      });
    },
    onReset() {
      this.$refs.formTarget.resetFields();
      this.form = {};
      this.onSubmit();
    },
    back() {
      this.editType = "";
      this.$nextTick(() => this.onSubmit());
    },
    // 导出
    //todo 导出未完成
    handleChange() {
      this.exportData.exportParams = { ...this.form };
    },
  },
};
</script>
