<template>
  <div class=" sign-and-weigh-box" style="background: white">
    <good-type-dialog
      ref="dialog"
      :titles="goodType.goodTypeDialog.goodTypeTitle"
      :formValue="goodType.goodTypeDialog.formValue"
      :visibility="goodType.goodTypeDialog.isVisibility"
      :isCreated="goodType.goodTypeDialog.isCreated"
      v-on:dialog-comfirm="goodTypeDialogComfirm"
      v-on:dialog-cancle="goodTypeDialogCancle"
    ></good-type-dialog>

    <div class="cell clearfix" style="float: right">
      <el-button
        size="small"
        icon="el-icon-circle-plus-outline"
        type="primary"
        @click="showDialog"
        >新增</el-button
      >
    </div>

    <div class="cell clearfix">
      <el-input
        size="small"
        style="width: 400px;"
        class="filter-item"
        v-model="keywords"
        placeholder="类型编码/类型名称"
      />
      <el-button
        size="small"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="search"
        >搜索</el-button
      >
    </div>

    <el-row :gutter="15">
      <el-col>
        <!--<div class="dataTitle"></div>-->

        <div style="margin-bottom: 10px;"></div>
        <el-table
          :row-style="{ color: '#303133' }"
          :header-cell-style="{
            backgroundColor: 'rgb(245, 247, 250)',
            color: '#606266'
          }"
          :data="goodType.goodTypeData"
          style="width: 100%"
          border
          highlight-current-row
          @row-click="onRowClick"
          :row-class-name="tableRowClassName"
          v-loading="goodType.loading"
        >
          <el-table-column label="类型编码" align="center">
            <template slot-scope="scope">
              {{ scope.row.type_code }}
            </template>
          </el-table-column>
          <el-table-column label="类型名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.type_name }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
              >
                <el-button
                  v-if="scope.row.type == 0"
                  size="small"
                  type="primary"
                  icon="el-icon-edit-outline"
                  @click="handleEdit(scope.$index, scope.row)"
                >
                </el-button>
                <el-button
                  v-if="scope.row.type == 1"
                  size="small"
                  type="info"
                  plain
                  icon="el-icon-edit-outline"
                  @click="handleEdit(scope.$index, scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <el-button
                  v-if="scope.row.type == 0"
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)"
                >
                </el-button>
                <el-button
                  v-if="scope.row.type == 1"
                  size="small"
                  type="info"
                  plain
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)"
                >
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 50, 100]"
          :page-size="10"
          background
          align="right"
          style="margin-top:20px;"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>

      <!--<el-col :span="14">-->
      <!--<div class="title">物品详细信息-->
      <!--<el-button @click="showInfoDialog" style="float: right" type="primary">新增物品信息</el-button>-->
      <!--</div>-->
      <!--<el-table :data="goodInfo.goodInfoData" :class="signAndWeighBoxPatients" style="width: 100%" border-->
      <!--v-loading="goodInfo.loading"-->
      <!--&gt;-->
      <!--<el-table-column label="物品编码" min-width="30" align="center">-->
      <!--<template slot-scope="scope">-->
      <!--{{scope.row.good_code}}-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column label="规格名称" min-width="30" align="center">-->
      <!--<template slot-scope="scope">-->
      <!--{{scope.row.specification_name}}-->

      <!--</template>-->
      <!--</el-table-column>-->

      <!--<el-table-column label="进价" min-width="30" align="center">-->
      <!--<template slot-scope="scope">-->
      <!--{{scope.row.buy_price}}-->

      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column label="出货价" min-width="30" align="center">-->
      <!--<template slot-scope="scope">-->
      <!--{{scope.row.sell_price}}-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column label="有效期预警" min-width="30" align="center">-->
      <!--<template slot-scope="scope">-->
      <!--{{scope.row.expiry_date_warn_day_count}}-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column label="库存预警" min-width="30" align="center">-->
      <!--<template slot-scope="scope">-->
      <!--{{scope.row.stock_warn_count}}-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column label="操作" align="center" min-width="100">-->
      <!--<template slot-scope="scope">-->
      <!--<el-button-->
      <!--size="mini"-->
      <!--@click="handleGoodInfoEdit(scope.$index, scope.row)">编辑-->
      <!--</el-button>-->
      <!--<el-button-->
      <!--size="mini"-->
      <!--type="danger"-->
      <!--@click="handleGoodInfoDelete(scope.$index, scope.row)">删除-->
      <!--</el-button>-->
      <!--<el-button-->
      <!--size="mini"-->
      <!--type="primary"-->
      <!--@click="showGoodInfoDetails(scope.$index, scope.row)">详情-->
      <!--</el-button>-->
      <!--</template>-->
      <!--</el-table-column>-->

      <!--</el-table>-->

      <!--</el-col>-->
    </el-row>
  </div>
</template>

<script>
import goodTypeDialog from "../Dialog/goodTypeDialog";
import {
  createGoodInfo,
  createGoodType,
  deleteGoodInfo,
  deleteGoodType,
  GetAllDeals,
  GetAllGoodType,
  GetAllManufacturer,
  GetGoodInfo,
  GetGoodInfoByGoodId,
  getGoodInfoList,
  GetGoodType,
  getGoodTypeList,
  modifyGoodInfo,
  modifyGoodType
} from "@/api/stock";

export default {
  components: {
    goodTypeDialog
  },
  name: "goodType",
  data() {
    return {
      signAndWeighBoxPatients: "sign-and-weigh-box-patients",
      total: 0,
      pageTotal: 0,
      pageSelect: 0,
      page: 1,
      limit: 10,
      keywords: "",
      goodType: {
        loading: false,
        goodTypeData: [],
        type_code: "",
        editInfoId: "",
        editInfoIndex: "",
        tableCurrentIndex: -1,
        goodTypeDialog: {
          goodTypeTitle: "新增商品类型",
          isCreated: 1, //1.创建 2.编辑 3.查看详情
          formValue: {
            type_name: "",
            remark: ""
          },
          isVisibility: false
        }
      }
    };
  },
  methods: {
    search: function() {
      this.getList();
    },
    handleEdit: function(index, row) {
      if (row.type == 1) {
        this.$message.error("该记录为系统配置，无法编辑");
        return;
      }
      this.goodType.editTypeId = row.id;
      this.goodType.editTypeIndex = index;
      let params = {
        id: row.id
      };
      GetGoodType(params).then(response => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.goodType.goodTypeDialog.formValue.remark =
            response.data.data.goodType.remark;
          this.goodType.goodTypeDialog.formValue.type_name =
            response.data.data.goodType.type_name;
          this.goodType.goodTypeDialog.isCreated = 2;
          this.$refs.dialog.show();
          this.goodType.type_code = response.data.data.goodType.type_code;
        }
      });
    },
    handleDelete: function(index, row) {
      if (row.type == 1) {
        this.$message.error("该记录为系统配置，无法删除");
        return;
      }
      this.$confirm("确认删除这条商品类型?", "删除商品类型", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {
            id: row.id
          };

          deleteGoodType(params).then(response => {
            if (response.data.state == 0) {
              this.$message.error(response.data.msg);
              return false;
            } else {
              this.goodType.goodTypeData.splice(index, 1);
              this.goodType.tableCurrentIndex = -1;

              this.$message.success("删除成功");
            }
          });
        })
        .catch(() => {});
    },
    showDetails: function(index, row) {
      let params = {
        id: row.id
      };
      GetGoodType(params).then(response => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.goodType.goodTypeDialog.formValue.type_name =
            response.data.data.goodType.type_name;
          this.goodType.goodTypeDialog.formValue.remark =
            response.data.data.goodType.remark;
          this.goodType.goodTypeDialog.isCreated = 3;
          this.goodType.goodTypeDialog.isVisibility = true;
        }
      });
    },

    goodTypeDialogComfirm: function(val) {
      if (val.isCreated == 2) {
        //修改
        let params = {
          type_name: val.type_name,
          remark: val.remark,
          type_code: this.goodType.type_code,
          id: this.goodType.editTypeId
        };

        modifyGoodType(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg);
            return false;
          } else {
            this.$refs.dialog.hide();

            this.goodType.goodTypeData[this.goodType.editTypeIndex].type_name =
              response.data.data.goodTypes.type_name;
            this.goodType.goodTypeData[this.goodType.editTypeIndex].remark =
              response.data.data.goodTypes.remark;

            this.$message.success("修改成功");
          }
        });
      } else if (val.isCreated == 1) {
        //新增
        createGoodType(val).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg);
            return false;
          } else {
            this.$refs.dialog.hide();
            this.goodType.goodTypeData.unshift(response.data.data.goodTypes);
            this.$message.success("新增成功");
          }
        });
      }
    },
    goodTypeDialogCancle: function() {
      this.$refs.dialog.hide();
    },
    showDialog: function() {
      this.goodType.goodTypeDialog.isCreated = 1;
      this.$refs.dialog.show();
    },
    getList() {
      this.goodType.loading = true;

      let params = {
        page: this.page,
        limit: this.limit,
        keyword: this.keywords
      };
      getGoodTypeList(params).then(response => {
        if (response.data.state == 0) {
          this.goodType.loading = false;
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.goodType.loading = false;
          this.total = response.data.data.total;
          this.goodType.goodTypeData = [];
          for (let i = 0; i < response.data.data.list.length; i++) {
            this.goodType.goodTypeData.push(response.data.data.list[i]);
          }
        }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    onRowClick(row, event, column) {
      this.goodType.tableCurrentIndex = row.index;
    },
    showInfoDialog: function() {
      if (this.goodType.tableCurrentIndex == -1) {
        this.$message.error("请先选择商品类型");
        return;
      } else {
        this.getAllGoodType();
      }
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    }
  },
  created() {
    this.getList();
  }
};
</script>

<style rel="stylesheet/css" lang="scss" scoped>
.information {
  border: 1px #dcdfe6 solid;
  padding: 30px 20px 30px 20px;

  .border {
    border-bottom: 1px #dcdfe6 solid;
    margin: 0px 0 20px 0;
  }
}

.title {
  height: 44px;
  line-height: 44px;
  padding: 0 0 0 10px;
  margin: 0 0 10px 0;
}

.edit_separater {
  border-top: 1px solid rgb(233, 233, 233);
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>

<style>
.sign-and-weigh-box .sign-and-weigh-box-patients .cell {
  font-size: 12px;
}

.sign-and-weigh-box .sign-and-weigh-box-patients .current-row > td {
  background: #6fb5fa;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
</style>
