<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="计量单位" name="first"></el-tab-pane>
        <el-tab-pane label="包装单位" name="second"></el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card style="margin-top: 15px; height: 725px" class="box-card">
      <div v-if="activeName == 'first'">
        <el-button
          class="clearfix"
          type="primary"
          @click="handleAdd()"
          size="mini"
          icon="el-icon-plus"
          style="margin: 10px 0 20px 0"
          >新增</el-button
        >
        <el-table :data="tableData" :height="tableHeight" style="width: 100%">
          <el-table-column prop="title" label="计量单位名称" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div v-if="!scope.row.seller_id == 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleUpdate(scope.row)"
                  >编辑
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  style="color: red"
                  @click="handleDelete(scope.row)"
                  >删除
                </el-button>
              </div>
              <div v-if="scope.row.seller_id == 0">--</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="activeName == 'second'">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd()"
          size="mini"
          style="margin: 10px 0 20px 0"
          >新增</el-button
        >
        <el-table :data="tableData" :height="tableHeight" style="width: 100%">
          <el-table-column prop="title" label="包装单位名称" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div v-if="!scope.row.seller_id == 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleUpdate(scope.row)"
                  >编辑
                </el-button>
                <!-- <el-divider direction="vertical"></el-divider> -->
                <el-button
                  size="mini"
                  type="text"
                  style="color: red"
                  @click="handleDelete(scope.row)"
                  >删除
                </el-button>
              </div>
              <div v-if="scope.row.seller_id == 0">--</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 新增或修改提示框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      center
      :append-to-body="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      @close="clearPayform"
      width="40%"
    >
      <div style="width: 100%; margin: 50px auto 200px">
        <el-form
          :model="formInline"
          ref="formInline"
          :rules="formInlines"
          label-width="150px"
          size="mini"
        >
          <el-form-item
            label="计量单位名称："
            prop="title"
            v-if="activeName == 'first'"
          >
            <el-input
              v-model.trim="formInline.title"
              style="width: 80%"
              placeholder="请输入计量单位名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="包装单位名称："
            prop="title"
            v-if="activeName == 'second'"
          >
            <el-input
              v-model.trim="formInline.title"
              style="width: 80%"
              placeholder="请输入包装单位名称"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="closeDialogVisible('formInline')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 删除弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogDelete"
      center
      :close-on-click-modal="false"
      width="30%"
    >
      <div
        style="text-align: center; margin: 0 auto"
        v-if="activeName == 'first'"
      >
        <p>确定要删除该计量单位吗？删除后将不可用。</p>
        <p>已使用的商品数据不受影响</p>
      </div>
      <div
        style="text-align: center; margin: 0 auto"
        v-if="activeName == 'second'"
      >
        <p>确定要删除该包装单位吗？删除后将不可用。</p>
        <p>已使用的商品数据不受影响</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDelete = false" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="closeDialogDelete()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  goodsUnitList,
  delGoodsUnit,
  addGoodsUnit,
  updateGoodsUnit,
  getPackList,
  delPack,
  addPack,
  infoPack,
} from "@/api/module/settings";
export default {
  name: "commodityUnit",
  data() {
    return {
      fullHeight: 0,
      tableHeight: 0,
      activeName: "first",
      operation: 1, //1 添加 2 修改
      code: 0,
      //计量单位表格内容
      tableData: [],
      //包装单位表格内容
      tableDataSecond: [],
      //新增和修改提示框分组名称
      formInline: {
        id: 0,
        title: "",
      },
      //表单验证
      formInlines: {
        title: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
      },
      //新增修改提示框
      dialogVisible: false,
      //删除提示框
      dialogDelete: false,
      //弹框提示语
      title: "",
    };
  },
  created() {
    this.$nextTick(() => {
      this.fullHeight =
        document.getElementsByClassName("box-card")[0].clientHeight;
    });
    this.getUnitList();
  },
  watch: {
    fullHeight(val) {
      let formHeight =
        document.getElementsByClassName("clearfix")[0].clientHeight;
      this.tableHeight = val - formHeight - 100;
    },
  },
  methods: {
    //标签页切换
    handleClick() {
      if (this.activeName == "first") {
        this.getUnitList();
      } else if (this.activeName == "second") {
        this.getPackList();
      }
    },
    //新增分组
    handleAdd() {
      if (this.activeName == "first") {
        this.title = "新增计量单位";
        this.dialogVisible = true;
      } else if (this.activeName == "second") {
        this.title = "新增包装单位";
        this.dialogVisible = true;
      }
    },
    //删除
    handleDelete(val) {
      this.dialogDelete = true;
      this.code = val.id;
    },
    //修改
    handleUpdate(val) {
      if (this.activeName == "first") {
        this.title = "编辑计量单位";
        this.code = val.id;
        let obj = {
          id: val.id,
        };
        updateGoodsUnit(obj).then((res) => {
          if (res.code == 1) {
            this.formInline.title = res.data.title;
            this.formInline.id = res.data.id;
            this.dialogVisible = true;
          }
        });
      } else if (this.activeName == "second") {
        this.title = "编辑包装单位";
        this.code = val.id;
        let obj = {
          id: val.id,
        };
        infoPack(obj).then((res) => {
          if (res.code == 1) {
            this.formInline.title = res.data.title;
            this.formInline.id = res.data.id;
            this.dialogVisible = true;
          }
        });
      }
    },
    //新增或修改确定回调
    closeDialogVisible(formInline) {
      this.$refs[formInline].validate((valid) => {
        if (valid) {
          if (this.activeName == "first") {
            if (this.formInline.id == 0) {
              this.operation = 1;
              let obj = {
                title: this.formInline.title,
                operation: this.operation,
              };
              addGoodsUnit(obj).then((res) => {
                if (res.code == 1) {
                  this.$message({
                    message: "添加成功",
                    type: "success",
                  });
                  this.dialogVisible = false;
                  this.getUnitList();
                } else {
                  this.$message({
                    message: res.message,
                    type: "error",
                  });
                  this.dialogVisible = false;
                }
              });
            } else {
              this.operation = 2;
              let obj = {
                title: this.formInline.title,
                id: this.code,
                operation: this.operation,
              };
              addGoodsUnit(obj).then((res) => {
                if (res.code == 1) {
                  this.$message({
                    message: "编辑成功",
                    type: "success",
                  });
                  this.dialogVisible = false;
                  this.getUnitList();
                } else {
                  this.$message({
                    message: res.message,
                    type: "error",
                  });
                  this.dialogVisible = false;
                }
              });
            }
          } else if (this.activeName == "second") {
            if (this.formInline.id == 0) {
              this.operation = 1;
              let obj = {
                title: this.formInline.title,
                operation: this.operation,
              };
              addPack(obj).then((res) => {
                if (res.code == 1) {
                  this.$message({
                    message: "添加成功",
                    type: "success",
                  });
                  this.dialogVisible = false;
                  this.getPackList();
                } else {
                  this.$message({
                    message: res.message,
                    type: "error",
                  });
                  this.dialogVisible = false;
                }
              });
            } else {
              this.operation = 2;
              let obj = {
                title: this.formInline.title,
                id: this.code,
                operation: this.operation,
              };
              addPack(obj).then((res) => {
                if (res.code == 1) {
                  this.$message({
                    message: "编辑成功",
                    type: "success",
                  });
                  this.dialogVisible = false;
                  this.getPackList();
                } else {
                  this.$message({
                    message: res.message,
                    type: "error",
                  });
                  this.dialogVisible = false;
                }
              });
            }
          }
        }
      });
    },
    //删除提示框
    closeDialogDelete() {
      if (this.activeName == "first") {
        let obj = {
          id: this.code,
        };
        delGoodsUnit(obj).then((res) => {
          if (res.code == 1) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.dialogDelete = false;
            this.getUnitList();
          } else {
            this.$message({
              message: res.message,
              type: "error",
            });
            this.dialogDelete = false;
          }
        });
      } else if (this.activeName == "second") {
        let obj = {
          id: this.code,
        };
        delPack(obj).then((res) => {
          if (res.code == 1) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.dialogDelete = false;
            this.getPackList();
          } else {
            this.$message({
              message: res.message,
              type: "error",
            });
            this.dialogDelete = false;
          }
        });
      }
    },
    //获取计量表格数据
    getUnitList() {
      goodsUnitList().then((res) => {
        if (res.code == 1) {
          this.tableData = res.data;
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 获取包装表格数据
    getPackList() {
      getPackList().then((res) => {
        if (res.code == 1) {
          this.tableData = res.data;
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },

    // 清除表单信息
    clearPayform() {
      this.formInline.title = "";
      this.formInline.id = 0;
    },
  },
};
</script>
<style scoped>
.app-container {
  overflow: auto;
}
::v-deep .el-tabs__item {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
}
::v-deep .el-tabs__header {
  margin: 0;
}
</style>