<!-- 批量新增 -->
<script>
import useColumns from "../add/column";
import {
  addChangeList,
  getMaterialDetails,
  getChangeDetails,
  editChangeList,
} from "@/api/changeApply/basic";

export default {
  name: "SeeChangeOrders",
  props: {
    dict: {
      type: Object,
    },
  },
  components: {
    AmendantRecord: () => import("../amendantRecord/index.vue"),
    ElSuperForm: () => import("@/components/super-form/index.vue"),
    ElSuperTable: () => import("@/components/super-table/index.vue"),
    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
    ElPopoverTreeSelect: () =>
      import("@/components/popover-tree-select/index.vue"),
  },

  data() {
    const {
      TabColumns,
      TableColumns,
      TabColumns: [
        {
          item: { key: tabName },
        },
      ],
    } = useColumns();

    const rules = this.$init.rules([...TabColumns, ...TableColumns]);
    const params = this.$init.params([...TabColumns, ...TableColumns]);
    let tabColumns = _.cloneDeep(TabColumns);
    tabColumns = tabColumns.map((item) => ({
      ...item,
      TableColumns: [
        ...item.TableColumns.map((column) => ({
          item: { ...column.item, disabled: true },
          attr: {
            ...column.attr,
            disabled: true,
          },
        })),
      ],
    }));

    console.log(tabColumns, "tabColumns");

    return {
      width: "100%",
      visible: false,
      loading: false,
      title: "查看",
      rules,
      params,
      tabName: tabName,
      TabColumns: tabColumns,
      TableColumns: TableColumns,
    };
  },
  computed: {
    materialInfo: {
      get() {
        const { materialBasic } = this.params;
        this.params.materialBasic = materialBasic.map((item, index) => ({
          ...item,
          $index: index,
        }));

        return {
          materialBasic: this.params.materialBasic.filter(
            ({ delFlag }) => delFlag !== "2"
          ),
        };
      },
      set() {},
    },
  },
  watch: {},
  methods: {
    setVisible(prop) {
      this.visible = prop;
    },
    beforeOpen() {},
    //
    async fetchItem(prop) {
      try {
        // try
        this.loading = true;

        let { code, data } = await getChangeDetails(prop.id);

        if (code == 200) {
          this.params = data;
        }
      } catch (err) {
        // catch
        console.error(err);
      } finally {
        // finally
        this.loading = false;
      }
    },

    //
    async hide() {
      const {
        TabColumns,
        TableColumns,
        TabColumns: [
          {
            item: { key: tabName },
          },
        ],
      } = useColumns();
      this.visible = false;
      this.tabName = tabName;
      this.$emit("success");
      this.params = this.$init.params([...TabColumns, ...TableColumns]);
    },

    // 提交
    async handleSubmit() {
      let params = _.cloneDeep({ ...this.params, status: "1" });

      console.log(params, "params");
      try {
        this.loading = true;

        const { code, msg } = await addChangeList({
          ...params,
          isInventory: "Y",
        });

        if (code == 200) {
          this.hide();
          this.$notify.success({
            message: msg,
          });
        } else if (code == 10000) {
          this.$alert(
            "<div style='overflow: auto;overflow-x: hidden;max-height: 65vh;padding: 10px 20px 0;'>" +
              msg +
              "</div>",
            "提示",
            {
              showCancelButton: true,
              dangerouslyUseHTMLString: true,
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              beforeClose: async (action, instance, done) => {
                if (action === "confirm") {
                  instance.confirmButtonLoading = true;
                  instance.confirmButtonText = "执行中...";
                  try {
                    const { code, msg } = await addChangeList({
                      ...params,
                      isInventory: "N",
                    });
                    if (code == 200) {
                      done();
                      this.hide();
                      this.$notify.success({
                        message: msg,
                      });
                    }
                  } catch (error) {
                    instance.confirmButtonText = "确认";
                  } finally {
                    instance.confirmButtonLoading = false;
                  }
                } else {
                  done();
                  this.$notify.warning({
                    message:
                      "不允许修改【批号及库存状态管理】或【是否序列号管理】",
                  });
                }
              },
            }
          );
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    handleSubmitValidate(prop, cb) {
      this.$refs[prop].$refs[prop].validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;

            await cb();
          } catch (err) {
            // catch
            console.error(err);
          } finally {
            // finally
            this.loading = false;
          }
        } else {
          return false;
        }
      });
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>

<template>
  <el-drawer
    v-bind="$attrs"
    v-on="$listeners"
    :size="width"
    :visible.sync="visible"
    destroy-on-close
    :show-close="false"
    @close="hide"
    @open="beforeOpen"
    v-loading="loading"
  >
    <div
      slot="title"
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <h3>{{ title }}</h3>
      <div>
        <el-button
          v-if="params.status === '0' || params.status === '3'"
          type="primary"
          :size="$attrs.size"
          :loading="loading"
          @click="handleSubmit"
        >
          提 交
        </el-button>
        <el-button :size="$attrs.size" :loading="loading" @click="hide"
          >取 消</el-button
        >
      </div>
    </div>
    <el-super-form
      v-model="params"
      :dict="dict"
      :rules="rules"
      :size="$attrs.size"
      :columns="TableColumns"
      ref="superForm"
      label-width="auto"
      label-position="right"
      style="padding: 20px"
    >
      <template slot="puOrgName" slot-scope="scope">
        <component
          v-bind="scope.attr"
          v-model="scope.row[scope.item.key]"
          :size="$attrs.size"
          :source.sync="scope.row"
          @change="changePuOrgName({ ...scope, select: $event })"
        >
        </component
      ></template>
    </el-super-form>

    <el-tabs v-model="tabName" style="padding: 0 20px 20px">
      <el-tab-pane
        v-for="({ item, TableColumns: columns }, index) in TabColumns"
        :key="index"
        :label="item.title"
        :name="item.key"
        lazy
      >
        <el-super-ux-table
          v-model="materialInfo[item.key]"
          :dict="dict"
          index
          :ref="tabName"
          :columns="columns"
          :size="$attrs.size"
          :height="420"
        >
          <template slot="materialName" slot-scope="scope">
            <component
              v-bind="scope.attr"
              v-model="scope.row[scope.item.key]"
              :size="$attrs.size"
              :source.sync="scope.row"
              @change="changeMaterialName(scope)"
            >
            </component>
          </template>
          <ux-table-column
            fixed="right"
            title="操作"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <AmendantRecord
                v-if="tabName === 'materialBasic'"
                v-model="scope.row"
              ></AmendantRecord>
            </template>
          </ux-table-column>
        </el-super-ux-table>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<style scoped>
::v-deep .el-table__row.is-hidden {
  display: none;
}
</style>
