<template>
  <el-card
    v-loading="loading"
    :body-style="{
      height: '100%',
      padding: 0,
      display: 'flex',
      'flex-direction': 'column',
    }"
  >
    <AddChangeOrders
      ref="addChangeOrders"
      :size="size"
      :dict="dict"
      :add-type="optionType"
      @success="useReset"
    ></AddChangeOrders>
    <SeeChangeOrders
      ref="seeChangeOrders"
      :size="size"
      :dict="dict"
      @success="useReset"
    ></SeeChangeOrders>

    <el-super-search
      v-model="params"
      :size="size"
      :dict="dict"
      :columns="SearchColumns"
      @reset="useReset"
      @row-dblclick="useSee"
      @submit="useQuery(params, page)"
    ></el-super-search>

    <el-row
      :gutter="10"
      class="mb10"
      type="flex"
      justify="end"
      style="margin-top: 20px"
    >
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="newAdd">新增</el-button>
        <!-- <BatchImport></BatchImport> -->
      </el-col>
    </el-row>

    <el-super-ux-table
      v-model="tableList"
      :dict="dict"
      :size="size"
      pagination
      :page="page"
      :columns="TableColumns"
      storage-key="MaterialApplySuperTable"
      @pagination="useQuery(params, page)"
      @row-dblclick="useSee"
    >
      <ux-table-column fixed="right" title="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click.stop="useSee(scope.row)"
            >查看</el-button
          >
          <el-button
            v-if="scope.row.status == '1'"
            type="text"
            size="mini"
            @click.stop="handleBack(scope.row)"
            >收回</el-button
          >
          <el-button
            v-if="scope.row.oaId && scope.row.oaId != ''"
            @click.stop="jumpFlow(scope.row)"
            type="text"
            :size="size"
            >流程跳转</el-button
          >
          <el-button
            @click.stop="handleEdit(scope.row)"
            v-if="scope.row.status == 0 || scope.row.status == 3"
            type="text"
            size="small"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.stop="deleteRow(scope.row)"
            v-if="scope.row.status == 0 || scope.row.status == 3"
            >删除</el-button
          >
        </template>
      </ux-table-column>
    </el-super-ux-table>
  </el-card>
</template>

<script>
import { dicts } from "./dicts";
import { getChangeList, deleteChangeList, toOA } from "@/api/changeApply/basic";
// 流程收回通用接口
import { oaBack } from "@/api/requisition/basic";
import useColumns from "./columns";
export default {
  name: "changeApply",
  dicts: [...dicts, "oa_templete_id"],
  components: {
    AddChangeOrders: () => import("./add/index.vue"),
    SeeChangeOrders: () => import("./see/index.vue"),
    BatchImport: () => import("./batchImport/index.vue"),
    ElSuperTable: () => import("@/components/super-table/index.vue"),
    ElSuperSearch: () => import("@/components/super-search/index.vue"),
    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
  },

  data() {
    const { TableColumns, SearchColumns } = useColumns();
    const params = this.$init.params(SearchColumns);
    const page = this.$init.page();
    return {
      loading: false,
      size: "mini",
      tableList: [],
      TableColumns: TableColumns,
      page: page,
      params: params,
      SearchColumns: SearchColumns,
      optionType: "add",
    };
  },
  methods: {
    async jumpFlow(row) {
      const { name } = this.$store.state.user;

      try {
        let { code, msg, oaUrl } = await toOA(name, row.oaId);

        if (code == 200) {
          window.open(oaUrl);
        }
      } catch (error) {
      } finally {
      }
    },

    //流程收回
    async handleBack(row) {
      console.log("row", row);
      console.log("this.dicts.type", this.dict);
      try {
        const { msg, code } = await oaBack({
          fdTemplateId: this.dict.type.oa_templete_id.find((item) => {
            return item.label == "物料变更单";
          }).value,
          fdId: row.oaId,
          billCode: row.code,
          billMaker: row.createBy,
        });
        if (code === 200) {
          this.$emit("success");
          this.$notify.success(msg);
        }
      } catch (err) {
        console.error(err);
      } finally {
        this.useQuery(this.params, this.page);
      }
    },

    useReset() {
      // this.page.pageNum = 1;
      // this.page.pageSize = 50;
      this.page = this.$init.page();
      this.params = this.$init.params(this.SearchColumns);
      this.useQuery(this.params, this.page);
    },

    //
    openAddChangeOrders(row) {
      const { setVisible, fetchItem } = this.$refs.addChangeOrders;

      setVisible(true);

      row && fetchItem(row);
    },

    async newAdd() {
      this.optionType = "add";
      await this.openAddChangeOrders();
    },

    async handleEdit(row) {
      this.optionType = "edit";
      await this.openAddChangeOrders(row);
    },

    async useQuery(params, page) {
      try {
        this.loading = true;
        let { code, rows, total } = await getChangeList({ ...params, ...page });
        if (code === 200) {
          this.tableList = rows;
          this.page.total = total;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },

    async useSee(row) {
      const { setVisible, fetchItem } = this.$refs.seeChangeOrders;
      await setVisible(true);
      await fetchItem(row);
    },
    deleteRow(row) {
      this.$confirm("是否删除此条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        try {
          let { code, msg } = await deleteChangeList({ id: row.id });

          if (code == 200) {
            this.$notify.success({
              message: msg,
            });
            await this.useQuery(this.params, this.page);
          }
        } catch (error) {}
      });
    },
  },
  computed: {
    tableHeight: {
      get() {
        console.log(window, "window");
        return window.innerHeight - 220;
      },
      set() {},
    },
  },
  created() {
    this.params.code = this.$route.query.billCode;
    this.useQuery(this.params, this.page);
  },
};
</script>

<style scoped lang="scss">
.el-card {
  width: calc(100% - 32px);
  height: calc(100vh - 32px);
  margin: 16px;
  padding: 16px;
  border-radius: 8px;
}
</style>
