<script>
import Columns from "./columns";
import materialApi from "@/api/material/basic";
export default {
  name: "WeiHuLeiBie",
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  components: {
    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
    // ElPopoverTreeSelect: () =>
    //   import("@/components/popover-tree-select/index.vue"),
    TypeButton: () => import("./components/index.vue"),
  },
  data() {
    const materialType = this.$init.params(Columns);
    return {
      title: "维护物料类别",
      visible: false,
      loading: false,
      tableData: [],
      Columns: Columns,
      // 维护物料类别
      materialType: materialType,
    };
  },
  computed: {
    innerValue: {
      get() {
        let { data } = this.$props;
        return data[0];
      },
      set() {},
    },
    disabled: {
      get() {
        let { data } = this.$props;
        if (data.length === 1) {
          return false;
        }
        return true;
      },
      set() {},
    },
  },
  watch: {},
  methods: {
    //
    open() {
      this.visible = true;
      this.fetchItem();
    },
    //
    async fetchItem() {
      let materialId = this.innerValue.id;
      try {
        this.loading = true;
        let {
          code,
          data: {
            tableBody: { rows },
          },
        } = await materialApi.medcineitemList({ materialId });
        if (code === 200) {
          this.tableData = rows;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    // 保存
    async save() {
      let { innerValue, tableData } = this;
      if (tableData.length) {
        try {
          this.loading = true;

          let params = {
            materialId: innerValue.id,
            medcineItems: [...tableData],
          };
          console.log(params, "params");
          let { code, msg } = await materialApi.medcineitemBatchSave(params);
          if (code === 200) {
            this.fetchItem();
            this.$notify.success({ message: msg });
          }
        } catch (error) {
        } finally {
          this.loading = false;
        }
      } else {
        this.$notify.warning({
          message: "不能保存空数据!",
        });
      }
    },
    // 取消
    cancal() {
      this.visible = false;
    },
    // 增行
    useRowAdd() {
      console.log(this.$refs, "this.$refs");
      let { open } = this.$refs.materialTypeTree;
      open();
    },

    changeMaterialType() {
      let { drugId } = this.materialType;

      let isExist = this.tableData.find((item) => item.drugId === drugId);

      if (isExist) {
        this.$message.warning({
          message: "请勿重复选择",
        });
      } else {
        this.tableData.push({
          ...this.materialType,
          delFlag: "0",
        });
      }
    },
    // 删行
    useRowRemove(scope) {
      this.tableData = this.tableData.filter(
        (item) => item.drugId !== scope.row.drugId
      );
    },
  },
  created() {},
};
</script>

<template>
  <el-button :size="$attrs.size" :disabled="disabled" @click="open">
    {{ title }}
    <el-dialog
      v-loading="loading"
      :show-close="false"
      :visible.sync="visible"
      append-to-body
      width="55%"
    >
      <el-row type="flex" class="row-bg" justify="space-between" slot="title">
        <el-col>
          <h3 style="line-height: 0">{{ title }}</h3>
        </el-col>
        <el-col style="text-align: end">
          <el-button
            :size="$attrs.size"
            @click="save"
            type="primary"
            v-hasPermi="['system:material:add']"
            >保存</el-button
          >
          <el-button :size="$attrs.size" @click="cancal">取消</el-button>
        </el-col>
      </el-row>
      <el-super-ux-table
        v-model="tableData"
        :height="420"
        ref="MaterialType"
        :columns="Columns"
        :size="$attrs.size"
      >
        <ux-table-column fixed="right" title="操作" width="80" align="center">
          <template slot="header" slot-scope="scope">
            <TypeButton
              :size="$attrs.size"
              v-model="materialType.drugName"
              :source.sync="materialType"
              referName="MEDICINE_DRUG"
              valueKey="name"
              :dataMapping="{
                drugCode: 'code',
                drugId: 'id',
              }"
              :defaultProps="{
                label: function (data, node) {
                  return data.code + '' + data.name;
                },
                children: 'children',
              }"
              @change="changeMaterialType"
            ></TypeButton>
            <!-- <el-button type="text" :size="$attrs.size" @click="useRowAdd">
              增行
              <el-popover-tree-select
                ref="materialTypeTree"
                v-show="false"
                :size="$attrs.size"
                v-model="materialType.drugName"
                :source.sync="materialType"
                referName="MEDICINE_DRUG"
                valueKey="name"
                :dataMapping="{
                  drugCode: 'code',
                  drugId: 'id',
                }"
                :defaultProps="{
                  label: function (data, node) {
                    return data.code + '' + data.name;
                  },
                  children: 'children',
                }"
                @change="changeMaterialType"
              ></el-popover-tree-select>
            </el-button> -->
          </template>
          <template slot-scope="scope">
            <el-button
              type="text"
              :size="$attrs.size"
              @click.native.prevent="useRowRemove(scope)"
            >
              删除
            </el-button>
          </template>
        </ux-table-column>
      </el-super-ux-table>
    </el-dialog>
  </el-button>
</template>

<style scoped>
>>> .el-dialog__body {
  padding: 0 20px 20px;
}
</style>
