<script>
import { getGather } from "@/api/business/spd/bo/gather";

import useColumns from "./columns";
export default {
  name: "GatherDetails",
  props: {
    dict: {
      type: Object,
    },
    data: {
      type: Object,
    },
    addType: {
      type: String,
      default: "add",
    },
  },
  components: {
    ElSuperForm: () => import("@/components/super-form/index.vue"),
    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
  },
  data() {
    const {
      FormColumns,
      TabColumns,
      TabColumns: [
        {
          item: { key: tabName },
        },
      ],
    } = useColumns();
    const params = this.$init.params(FormColumns);
    const rules = this.$init.rules(FormColumns);
    return {
      rules,
      params: {
        ...params,
        gatherCgItem: [],
      },
      tabName,
      TabColumns,
      FormColumns,
      width: "100%",
      visible: false,
      loading: false,
    };
  },
  computed: {
    title: {
      get() {
        const { addType } = this.$props;
        if (addType === "see") {
          return "查 看";
        } else if (addType === "edit") {
          return "编 辑";
        } else {
          return "新 增";
        }
      },
      sest() {},
    },
    tableHeight: {
      get() {
        return window.innerHeight - 480;
      },
      set() {},
    },
  },
  methods: {
    setVisible(prop) {
      this.visible = prop;
    },
    // 关闭
    hide() {
      this.visible = false;
      const {
        FormColumns,
        TabColumns,
        TabColumns: [
          {
            item: { key: tabName },
          },
        ],
      } = useColumns();
      this.params = {
        ...this.$init.params(FormColumns),
        gatherCgItem: [],
      };
      this.$emit("refresh");
    },
    //
    beforeOpen() {
      const { addType, data } = this.$props;
      this.fetchItem(data);
    },
    //
    async fetchItem({ id }) {
      try {
        this.loading = true;
        let { code, data } = await getGather(id);
        if (code == 200) {
          this.params = data;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    useSave(prop) {},
  },
  created() {},
};
</script>

<template>
  <el-drawer
    v-bind="$attrs"
    v-on="$listeners"
    v-loading="loading"
    :size="width"
    :visible.sync="visible"
    destroy-on-close
    :show-close="false"
    @close="hide"
    @open="beforeOpen"
  >
    <div
      slot="title"
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <h3>{{ title }}</h3>
      <div>
        <el-button
          type="primary"
          :size="$attrs.size"
          @click="useSave('superForm')"
          v-if="addType == 'add' || addType == 'edit'"
          >保 存</el-button
        >
        <el-button :size="$attrs.size" @click="hide">取 消</el-button>
      </div>
    </div>

    <el-super-form
      v-model="params"
      :dict="dict"
      :rules="rules"
      :size="$attrs.size"
      :columns="FormColumns"
      ref="superForm"
      label-width="auto"
      label-position="right"
      style="padding: 20px"
      :disabled="addType == 'see'"
    >
    </el-super-form>

    <el-tabs v-model="tabName" style="margin: 0 20px">
      <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]"
          :dict="dict"
          index
          showSummary
          :ref="tabName"
          :columns="columns"
          :size="$attrs.size"
          :height="tableHeight"
        >
          <!-- <ux-table-column
            v-if="addType !== 'see'"
            fixed="right"
            title="操作"
            width="120"
            align="center"
          >
            <template slot="header" slot-scope="scope">
            </template>
            <template slot-scope="scope">
            </template>
          </ux-table-column> -->
        </el-super-ux-table>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<style scoped>
>>> .el-drawer__header {
  margin-bottom: 0;
  padding: 5px 20px;
}
</style>
