<template>
  <el-card
    v-loading="loading"
    style="width: calc(100% - 24px); height: 100%; margin: 10px; padding: 10px"
    :body-style="{ padding: 0 }"
  >
    <el-super-search
      v-model="params"
      :size="size"
      :dict="dict"
      :columns="SearchColumns"
      @reset="resetList"
      @submit="getList(params, page)"
    ></el-super-search>

    <el-row :gutter="24" type="flex" justify="end" style="margin: 20px 0 12px">
      <el-col :span="24" style="text-align: right">
        <el-button-group style="margin-right: 5px">
          <el-button type="primary" :size="size" @click="addOrder"
            >新 增</el-button
          >
          <el-button
            :disabled="selectData.length !== 1"
            :size="size"
            @click="addOrder(selectData)"
            >复 制</el-button
          >
        </el-button-group>
        <BatchImport
          ref="batchImport"
          @import="onUpload"
          @temDownload="useImportTemplate"
          :fileSize="2"
        ></BatchImport>
      </el-col>
    </el-row>

    <el-super-ux-table
      v-model="tableList"
      :size="size"
      :dict="dict"
      :page="page"
      :columns="TableColumns"
      index
      checkbox
      pagination
      showSummary
      :height="400"
      convenitentOperation
      storage-key="TransferOrderSuperTable"
      @row-click="getlistStAllotItem"
      @row-dblclick="useSee"
      @select="useSelectChange"
      @pagination="getList(params, page)"
    >
      <ux-table-column fixed="right" title="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-button type="text" :size="size" @click="useSee(scope.row)"
            >查看</el-button
          >
          <el-button
            type="text"
            :size="size"
            v-if="scope.row.status == '0' || scope.row.status == '3'"
            @click="useEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            :size="size"
            v-if="scope.row.status == '0' || scope.row.status == '3'"
            @click="commit(scope.row)"
            >提交</el-button
          >
          <el-button
            type="text"
            :size="size"
            v-if="scope.row.status == '1'"
            @click="handleBack(scope.row)"
            >流程收回</el-button
          >
          <el-button
            type="text"
            :size="size"
            v-if="scope.row.status == '0' || scope.row.status == '3'"
            @click="deleteids(scope.row)"
            >删除</el-button
          >
        </template>
      </ux-table-column>
    </el-super-ux-table>

    <el-tabs
      v-model="tabName"
      v-loading="itemLoading"
      style="width: 100%; padding: 0px 10px"
    >
      <el-tab-pane
        v-for="({ item, TableColumns: columns }, index) in TabColumns"
        :key="index"
        :label="item.title"
        :name="item.key"
      >
        <el-super-ux-table
          v-model="params[item.key]"
          index
          :ref="tabName"
          :height="tabHeight"
          :columns="columns"
          :size="size"
          :dict="dict"
        ></el-super-ux-table>
      </el-tab-pane>
    </el-tabs>

    <add-transfer
      ref="AddTransfer"
      :data="rowDetail"
      :size="size"
      :dict="dict"
      :addType="pageStu"
      @refresh="getList(params, page)"
    >
    </add-transfer>
  </el-card>
</template>

<script>
import useColumns from "./columns";
import { dicts } from "./dicts";
import {
  getOrderList,
  delOrder,
  submitOrder,
  listStAllotItem,
  importData,
  oaBack,
} from "@/api/purchase/transferOrder.js";
export default {
  name: "transferOrder",
  dicts: [...dicts, "oa_templete_id"],
  components: {
    AddTransfer: () => import("./add/index.vue"),
    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
    BatchImport: () => import("@/components/BatchImport/index.vue"),
    ElSuperSearch: () => import("@/components/super-search/index.vue"),
  },
  data() {
    const { TableColumns, TabColumns, SearchColumns } = useColumns();
    const page = this.$init.page();
    const params = this.$init.params([...SearchColumns, ...TabColumns]);
    return {
      params: {
        ...params,
        code: this.$route.query.billCode,
      },
      page,
      TableColumns,
      TabColumns,
      SearchColumns,
      selectData: [],
      tabName: "materialInfo",
      size: "mini",
      loading: false,
      itemLoading: false,
      // 页面状态
      pageStu: "",
      tableList: [],
      rowDetail: {},
      disable: false,
      ids: [],
    };
  },
  computed: {
    tabHeight: {
      get() {
        let { materialInfo } = this.params;
        return `${
          materialInfo.length
            ? materialInfo.length > 8
              ? 500
              : materialInfo * 36 + 120
            : 120
        }px`;
      },
      set() {},
    },
  },
  created() {
    this.getList(this.params, this.page);
  },
  methods: {
    resetList() {
      this.page = this.$init.page();
      const { SearchColumns, TabColumns } = useColumns();
      this.params = {
        ...this.$init.params([...SearchColumns, ...TabColumns]),
        code: this.$route.query.billCode,
      };
      this.getList(this.params, this.page);
    },
    //
    async getList(params, page) {
      try {
        this.loading = true;
        this.selectData = [];
        let { code, msg, rows, total } = await getOrderList({
          ...this.addDateRange(params, params.billDates),
          ...page,
        });
        if (code === 200) {
          this.tableList = rows;
          this.page.total = total;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    async getlistStAllotItem(row) {
      try {
        const { id } = row;
        this.itemLoading = true;
        let { code, rows } = await listStAllotItem(id);
        if (code == 200) {
          this.params.materialInfo = rows;
        }
      } catch (error) {
      } finally {
        this.itemLoading = false;
      }
    },
    useSelectChange(selection, row) {
      this.selectData = selection;
    },
    // 新 增
    addOrder(prop) {
      const { setVisible } = this.$refs.AddTransfer;
      setVisible(true);
      this.pageStu = "add";
      this.rowDetail = prop[0] ? prop[0] : {};
    },
    // 查 看
    useSee(row) {
      const { setVisible } = this.$refs.AddTransfer;
      setVisible(true);
      this.pageStu = "see";
      this.rowDetail = row;
    },
    // 编 辑
    useEdit(row) {
      const { setVisible } = this.$refs.AddTransfer;
      setVisible(true);
      this.pageStu = "edit";
      this.rowDetail = row;
    },
    commit(row) {
      this.$modal
        .confirm("是否确认提交?")
        .then(async () => {
          try {
            this.$modal.loading("提交中...");
            let { code, msg } = await submitOrder(row);
            if (code == 200) {
              this.$notify.success(msg);
              this.getList(this.params, this.page);
            }
          } catch (error) {
          } finally {
            this.$modal.closeLoading();
          }
        })
        .catch(() => {});
    },
    // 行内删除
    deleteids(row) {
      this.$modal
        .confirm("是否确认删除")
        .then(async () => {
          try {
            let { code, msg } = await delOrder(row.id);
            if (code === 200) {
              this.$notify.success(msg);
              this.getList(this.params, this.page);
            }
          } catch (error) {}
        })
        .catch(() => {});
    },

    //模板下载
    useImportTemplate() {
      this.download(
        "pu/allot/importTemplate",
        {},
        `调拨单导入模板_${new Date().getTime()}.xlsx`
      );
    },
    // 上传文件
    async onUpload(file) {
      try {
        this.$modal.loading("加载中......");
        let formData = new FormData();
        formData.append("file", file[0].raw);
        let { code, msg } = await importData(formData);
        if (code == 200) {
          this.$notify.success({ message: msg });
          let { setVisible } = this.$refs.batchImport;
          setVisible(false);
          this.resetList();
        }
      } catch (error) {
        console.log(error);
      } finally {
        this.$modal.closeLoading();
      }
    },
    //流程收回
    async handleBack(row) {
      try {
        const { msg, code } = await oaBack({
          fdTemplateId: this.dict.type.oa_templete_id.find((item) => {
            return item.label == "调拨订单";
          }).value,
          billCode: row.code,
          billMaker: row.createBy,
        });
        if (code === 200) {
          this.$emit("success");
          this.$notify.success(msg);
        }
      } catch (err) {
        console.error(err);
      } finally {
        this.getList(this.params, this.page);
      }
    },
  },
};
</script>
