<template>
  <div class="main-contain">
    <div class=" sign-and-weigh-box" style="background: white">
      <manufacturer-or-dealer-dialog
        ref="dialog"
        :titles="manufacturerDialog.titles"
        :formValue="manufacturerDialog.formValue"
        :visibility="manufacturerDialog.isVisibility"
        :type="manufacturerDialog.type"
        :isCreated="manufacturerDialog.isCreated"
        v-on:dialog-comfirm="manufacturerDialogComfirm"
        v-on:dialog-cancle="manufacturerDialogCancle"
      ></manufacturer-or-dealer-dialog>

      <el-row :gutter="15">
        <el-col>
          <div>
            <el-button
              size="small"
              icon="el-icon-circle-plus-outline"
              style="float: right;margin-bottom: 15px"
              type="primary"
              @click="showDialog"
              >新增
            </el-button>
          </div>

          <el-table
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
            :data="manufacturerData"
            style="width: 100%"
            border
            v-loading="loading"
          >
            <el-table-column label="厂家编码" align="center">
              <template slot-scope="scope">
                {{ scope.row.manufacturer_code }}
              </template>
            </el-table-column>
            <el-table-column label="厂家名称" align="center">
              <template slot-scope="scope">
                {{ scope.row.manufacturer_name }}
              </template>
            </el-table-column>
            <el-table-column label="联系人" align="center">
              <template slot-scope="scope">
                {{ scope.row.contact }}
              </template>
            </el-table-column>
            <el-table-column label="联系人电话" align="center">
              <template slot-scope="scope">
                {{ scope.row.contact_phone }}
              </template>
            </el-table-column>
            <el-table-column label="联系地址" align="center">
              <template slot-scope="scope">
                {{ scope.row.contact_address }}
              </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
                    size="small"
                    type="primary"
                    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
                    size="small"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.$index, scope.row)"
                  >
                  </el-button>
                </el-tooltip>
                <!--<el-button-->
                <!--size="mini"-->
                <!--type="primary"-->
                <!--@click="showDetails(scope.$index, scope.row)">查看详情-->
                <!--</el-button>-->
              </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-row>
    </div>
  </div>
</template>

<script>
import manufacturerOrDealerDialog from "../Dialog/manufacturerOrDealerDialog";
import {
  createManufacturer,
  deleteManufacturer,
  GetManufacturer,
  getManufacturerList,
  modifyManufacturer
} from "@/api/stock";

export default {
  components: {
    manufacturerOrDealerDialog
  },
  name: "manufacturer",
  data() {
    return {
      signAndWeighBoxPatients: "sign-and-weigh-box-patients",
      manufacturerData: [],
      total: 0,
      pageTotal: 0,
      pageSelect: 0,

      page: 1,
      limit: 10,
      loading: false,

      manufacturer_code: "",
      editId: "",
      editIndex: "",
      manufacturerDialog: {
        titles: "新增厂家",
        isVisibility: false,
        type: 2, //1.经销商 2.厂家
        isCreated: 1, //1.创建 2.编辑 3.查看详情
        formValue: {
          manufacturer_name: "",
          dealer_name: "",
          contact: "",
          contact_phone: "",
          platform_number: "",
          email: "",
          contact_address: "",
          remark: ""
        },
        resetForm: {
          manufacturer_name: "",
          dealer_name: "",
          contact: "",
          contact_phone: "",
          platform_number: "",
          email: "",
          contact_address: "",
          remark: ""
        }
      }
    };
  },
  methods: {
    handleEdit: function(index, row) {
      this.editId = row.id;
      this.editIndex = index;
      let params = {
        id: row.id
      };
      GetManufacturer(params).then(response => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.manufacturerDialog.formValue.manufacturer_name =
            response.data.data.manufacturer.manufacturer_name;
          this.manufacturerDialog.formValue.contact =
            response.data.data.manufacturer.contact;
          this.manufacturerDialog.formValue.contact_phone =
            response.data.data.manufacturer.contact_phone;
          this.manufacturerDialog.formValue.platform_number =
            response.data.data.manufacturer.platform_number;
          this.manufacturerDialog.formValue.email =
            response.data.data.manufacturer.email;
          this.manufacturerDialog.formValue.contact_address =
            response.data.data.manufacturer.contact_address;
          this.manufacturerDialog.formValue.remark =
            response.data.data.manufacturer.remark;
          this.manufacturerDialog.isCreated = 2;
          this.$refs.dialog.show();
          this.manufacturer_code =
            response.data.data.manufacturer.manufacturer_code;
        }
      });
    },
    handleDelete: function(index, row) {
      this.$confirm("确认删除这条厂家信息?", "删除厂家信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {
            id: row.id
          };

          deleteManufacturer(params).then(response => {
            if (response.data.state == 0) {
              this.$message.error(response.data.msg);
              return false;
            } else {
              this.manufacturerData.splice(index, 1);
              this.$message.success("厂家已经删除");
            }
          });
        })
        .catch(() => {});
    },
    showDetails: function(index, row) {
      let params = {
        id: row.id
      };
      GetManufacturer(params).then(response => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.manufacturerDialog.formValue.manufacturer_name =
            response.data.data.manufacturer.manufacturer_name;
          this.manufacturerDialog.formValue.contact =
            response.data.data.manufacturer.contact;
          this.manufacturerDialog.formValue.contact_phone =
            response.data.data.manufacturer.contact_phone;
          this.manufacturerDialog.formValue.platform_number =
            response.data.data.manufacturer.platform_number;
          this.manufacturerDialog.formValue.email =
            response.data.data.manufacturer.email;
          this.manufacturerDialog.formValue.contact_address =
            response.data.data.manufacturer.contact_address;
          this.manufacturerDialog.formValue.remark =
            response.data.data.manufacturer.remark;
          this.manufacturerDialog.isCreated = 3;
          this.manufacturerDialog.isVisibility = true;
        }
      });
    },
    manufacturerDialogComfirm: function(val) {
      // this.manufacturerDialog.isVisibility = false
      this.$refs.dialog.hide();
      if (val.isCreated == 2) {
        //修改
        let params = {
          manufacturer_name: val.manufacturer_name,
          contact: val.contact,
          contact_phone: val.contact_phone,
          platform_number: val.platform_number,
          email: val.email,
          contact_address: val.contact_address,
          remark: val.remark,
          manufacturer_code: this.manufacturer_code,
          id: this.editId
        };
        modifyManufacturer(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg);
            return false;
          } else {
            this.manufacturerData[this.editIndex].manufacturer_name =
              response.data.data.manufacturer.manufacturer_name;
            this.manufacturerData[this.editIndex].contact =
              response.data.data.manufacturer.contact;
            this.manufacturerData[this.editIndex].contact_phone =
              response.data.data.manufacturer.contact_phone;
            this.manufacturerData[this.editIndex].platform_number =
              response.data.data.manufacturer.platform_number;
            this.manufacturerData[this.editIndex].email =
              response.data.data.manufacturer.email;
            this.manufacturerData[this.editIndex].contact_address =
              response.data.data.manufacturer.contact_address;
            this.manufacturerData[this.editIndex].remark =
              response.data.data.manufacturer.remark;
            this.manufacturerData[this.editIndex].manufacturer_code =
              response.data.data.manufacturer.manufacturer_code;

            this.$message.success("修改成功");
          }
        });
      } else if (val.isCreated == 1) {
        //新增
        createManufacturer(val).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg);
            return false;
          } else {
            this.manufacturerData.unshift(response.data.data.manufacturer);

            this.$message.success("新增成功");
          }
        });
      }
    },
    manufacturerDialogCancle: function() {
      this.$refs.dialog.hide();
    },
    showDialog: function() {
      this.manufacturerDialog.formValue = Object.assign(
        {},
        this.manufacturerDialog.resetForm
      );
      this.$refs.dialog.show();
      this.manufacturerDialog.isCreated = 1;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    getList() {
      let params = {
        page: this.page,
        limit: this.limit
      };
      this.loading = true;
      getManufacturerList(params).then(response => {
        if (response.data.state == 0) {
          this.loading = false;
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.loading = false;
          this.total = response.data.data.total;
          this.manufacturerData = [];
          for (let i = 0; i < response.data.data.manufacturer.length; i++) {
            this.manufacturerData.push(response.data.data.manufacturer[i]);
          }
        }
      });
    }
  },
  created() {
    this.getList();
  }
};
</script>

<style lang="scss">
.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>
