<!-- eslint-disable no-empty -->
<template>
  <div class="app-container">
    <div class="head-container">
      <div class="row_wrap">
        <div class="row">
          <el-input v-model="query.conTypeId" size="small" clearable placeholder="请输入类型id" style="width: 150px;"
            @keyup.enter.native="getTableData" />
          <el-input v-model="query.conTypeName" size="small" clearable placeholder="请输入类型名称" style="width: 150px;"
            @keyup.enter.native="getTableData" />
          <el-input v-model="query.conCode" size="small" clearable placeholder="请输入耗材代码" style="width: 150px;"
            @keyup.enter.native="getTableData" />
          <el-input v-model="query.conName" size="small" clearable placeholder="请输入耗材名称" style="width: 150px;"
            @keyup.enter.native="getTableData" />
          <div style="width: 150px;">
            <el-select v-model="query.status" placeholder="请选择商品规格" style="width: 100%;">
              <el-option :label="item.label" :value="item.value" v-for="item in typeEnums" :key="item.label" />
            </el-select>
          </div>
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </div>
        <div class="row">
          <el-button icon="el-icon-download" :loading="downloadLoading" @click="protHandle">导出耗材</el-button>
          <el-button icon="el-icon-upload2" :loading="uploadLoading" @click="dialogVisible = true">导入耗材</el-button>
        </div>
      </div>
    </div>
    <div class="head-container">
      <el-row>
        <el-col>
          <el-button type="primary" icon="el-icon-plus" @click="clickdialogframe('add')">添加</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="head-container" id="table_drag">
      <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
        <el-table-column prop="id" label="ID" width="50px" />
        <el-table-column label="耗材名称" prop="conName" />
        <el-table-column label="耗材代码" prop="conCode" />
        <!-- <el-table-column label="类型id" prop="conTypeId" /> -->
        <el-table-column label="分类名称" prop="conTypeName" />
        <el-table-column label="单位" prop="conUnit" />
        <el-table-column label="创建时间" prop="createTime" width="200">
          <template v-slot="scope">
            {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="最近入库量" prop="lasterInStock" /> -->
        <el-table-column label="库存数量" prop="stockNumber">
          <template v-slot="scope">
            {{ (scope.row.stockNumber - scope.row.stockConsume).toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column label="预警值" prop="conWarning" />
        <!-- <el-table-column label="单位耗材值" prop="surplusStock" /> -->
        <!-- <el-table-column label="排序" prop="sort" sortable /> -->
        <el-table-column label="更新时间" prop="updateTime" width="200">
          <!-- <template v-slot="scope">
            {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
          </template> -->
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template v-slot="scope">
            <el-button type="text" @click="editorHandle(scope.row)">编辑</el-button>
            <el-button type="text" @click="clicksee(scope.row)" style="margin-left: 10px !important;">耗材记录</el-button>
            <el-button type="text" size="mini" style="margin-left: 10px !important;"
              @click="$refs.AddConsTakin.show(scope.row)">耗材盘点</el-button>
            <!-- <el-button type="text" icon="el-icon-rank">排序</el-button> -->
            <!-- <el-button type="text" @click="clickdialogfadd(scope.row)"
              style="margin-left: 10px !important;">入库</el-button> -->
            <!-- <el-button type="text" icon="el-icon-edit" @click="clickdialogframe('edit', scope.row)">编辑</el-button> -->
            <!-- <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
              <el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;"
                slot="reference">删除</el-button>
            </el-popconfirm> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
        layout="total, sizes, prev, pager, next, jumper" @current-change="paginationChange" @size-change="e => {
          tableData.size = e;
          tableData.page = 0;
          getTableData();
        }
          " />
    </div>
    <!-- 耗材入库 -->
    <el-dialog title="耗材入库" :visible.sync="libraryshow">
      <el-form :inline="true" ref="reflibrary" :model="libraryshowdata" :rules="ruleslibrary" class="demo-form-inline">
        <el-form-item label="耗材入库数量" prop="stockNumber">
          <el-input v-model.number="libraryshowdata.stockNumber" type="number" placeholder="请输入单位"></el-input>
        </el-form-item>
        <el-form-item style="display: flex;justify-content: flex-end;">
          <el-button @click="libraryshow = false">取 消</el-button>
          <el-button type="primary" @click="clickdialoglibraryshow('reflibrary')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改和增加 -->
    <el-dialog :title="dialogtitle" :visible.sync="dialogshow" width="70%">
      <el-form :inline="true" ref="refruleForm" :model="ruleForm" :rules="rules" class="demo-form-inline">
        <el-form-item label="单位" prop="conUnit" v-if="dialogtitle == '添加'">
          <el-input v-model="ruleForm.conUnit" placeholder="请输入单位"></el-input>
        </el-form-item>
        <el-form-item label="耗材类型" prop="conTypeId" v-if="dialogtitle == '添加'">
          <el-select v-model="ruleForm.conTypeId" placeholder="请选择">
            <el-option v-for="item in this.tableData.data" :key="item.conTypeId" :label="item.conTypeName" :value="item.id">
            </el-option>
          </el-select>

        </el-form-item>
        <!-- <el-form-item
          label="耗材类型"
          prop="conNames"
          v-if="dialogtitle == '添加'"
        >
          <el-input
            v-model="ruleForm.conNames"
            placeholder="请输耗材信息名称"
            disabled
          ></el-input>
        </el-form-item>-->
        <!-- <el-form-item v-if="dialogtitle == '添加'">
          <el-button type="primary" @click="typedialogshow = true"
            >去选择</el-button
          >
        </el-form-item>  -->
        <el-form-item label="耗材信息名称" prop="conName">
          <el-input v-model="ruleForm.conName" placeholder="请输入耗材信息名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="耗材信息代码" prop="conCode">
          <el-input
            v-model="ruleForm.conCode"
            placeholder="请输入耗材信息代码"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="耗材价格">
          <el-input v-model="ruleForm.price" placeholder="请输入耗材价格"></el-input>
        </el-form-item>
        <el-form-item label="预警值">
          <el-input v-model="ruleForm.conWarning" placeholder="请输入耗材预警值"></el-input>
        </el-form-item>
        <!-- <el-form-item label="单位耗材值" prop="surplusStock">
          <el-input v-model="ruleForm.surplusStock" placeholder="请输入单位耗材值"></el-input>
        </el-form-item> -->
        <el-form-item style="display: flex;justify-content: flex-end;">
          <el-button @click="dialogshow = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('refruleForm')">
            确 定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="选择类型" :visible.sync="typedialogshow">
      <div class="head-container">
        <el-input v-model="querytypedialogshowquery.conTypeName" size="small" clearable placeholder="请输入耗材类型名称"
          style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatatype" />
        <el-input v-model="querytypedialogshowquery.conTypeCode" size="small" clearable placeholder="请输入耗材类型代码"
          style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatatype" />
        <el-select v-model="querytypedialogshowquery.status" placeholder="请选择商品规格" style="width: 100%;">
          <el-option :label="item.label" :value="item.value" v-for="item in typeEnums" :key="item.label" />
        </el-select>
        <div style="margin-top: 10px;">
          <el-button type="primary" @click="getTableDatatype">查询</el-button>
          <el-button @click="resetHandletype">重置</el-button>
        </div>
      </div>
      <el-table ref="table" :data="tableDatatype.data" v-loading="tableDatatype.loading" row-key="id">
        <el-table-column label="耗材类型名称" prop="conTypeName" />
        <el-table-column label="耗材类型代码" prop="conTypeCode" />
        <el-table-column label="店铺ID" prop="shopId" />
        <el-table-column label="状态" prop="status">
          <template v-slot="scope">
            <el-tag type="primary" v-if="scope.row.status == '1'">正常</el-tag>
            <el-tag type="danger" v-if="scope.row.status == '0'">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="" width="200">
          <template v-slot="scope">
            <el-button @click="tableDatatypetable(scope.row)">确定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="head-container">
        <el-pagination :total="tableDatatype.total" :current-page="tableDatatype.page + 1"
          :page-size="tableDatatype.size" layout="total, sizes, prev, pager, next, jumper"
          @current-change="paginationChangetype" />
      </div>
    </el-dialog>
    <el-dialog title="耗材信息" :visible.sync="clickseetypedialogshow">
      <div class="head-container">
        <el-table ref="table" :data="clickseetableData.data" v-loading="clickseetableData.loading" row-key="id"
          height="450">
          <el-table-column label="耗材名称" prop="conName" />
          <el-table-column label="变动库存" prop="amount">
            <template v-slot="scope">
              <span :class="{ red: scope.row.bizType == '-' }">{{ scope.row.bizType }}{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="现有库存" prop="balance" />
          <!-- <el-table-column label="业务编码" prop="bizCode" /> -->
          <el-table-column label="业务说明" prop="bizName" />
          <!-- <el-table-column label="正负号标识" prop="bizType" /> -->
          <!-- <el-table-column label="耗材id" prop="consId" /> -->
          <el-table-column label="商品信息" prop="productName"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <!-- <el-table-column label="更新时间" prop="updateTime">
          <template v-slot="scope">
            {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column> -->
        </el-table>
      </div>
      <div class="head-container">
        <el-pagination :total="clickseetableData.total" :current-page="clickseetableData.page + 1"
          :page-size="clickseetableData.size" layout="total, sizes, prev, pager, next, jumper"
          @current-change="paginationChangetype" />
      </div>
    </el-dialog>
    <!-- 耗材盘点 -->
    <AddConsTakin ref="AddConsTakin" @success="resetHandle" />
    <!-- 导入耗材 -->
    <el-dialog title="导入库存" :visible.sync="dialogVisible">
      <UploadExcel :beforeUpload="excelSuccessUpload" />
    </el-dialog>
  </div>
</template>

<script>
import Sortable from "sortablejs";
import dayjs from "dayjs";
import settings from "@/settings";
import { upProSort } from "@/api/shop";
import {
  gettbConsType,
  gettbConsInfo,
  posttbConsInfo,
  gettbConsInfoFlow,
  posttbConsInfostockIn,
  postapitbConsInfo
} from "@/api/consumable";
import AddConsTakin from "../components/addConsTakin";
import { tbConsInfodownload, tbConsInfoinputStock } from '@/api/invoicing'
import { downloadFile } from "@/utils";
import UploadExcel from '@/components/UploadExcel'
export default {
  components: { AddConsTakin, UploadExcel },
  data() {
    return {
      dayjs,
      query: {
        conTypeId: "",
        conTypeName: "",
        conCode: "",
        conName: "",
        status: ''
      },
      resetQuery: '',
      libraryshow: false, //耗材入库显示
      libraryshowdata: {
        id: "",
        stockNumber: ""
      },
      ruleslibrary: {
        stockNumber: [
          { required: true, message: "请输入入库数量", trigger: "blur" }
        ]
      },
      categorys: [],
      typeEnums: [
        {
          label: "正常",
          value: "1"
        },
        {
          label: "禁用",
          value: "0"
        }
      ],
      dialogshow: false, //弹框显示
      dialogtitle: "", //文字显示
      typedialogshow: false,
      tableData: {
        data: [],
        page: 0,
        size: 30,
        loading: false,
        total: 0
      },
      querytypedialogshowquery: {
        conTypeCode: "",
        conTypeName: "",
        status: ""
      },
      tableDatatype: {
        data: [],
        page: 0,
        size: 30,
        loading: false,
        total: 0
      },
      clickseetypedialogshow: false,
      clickseetableData: {
        data: [],
        page: 0,
        size: 30,
        loading: false,
        total: 0
      },
      ruleFormLoading: false,
      ruleForm: {
        conCode: "",
        conName: "",
        conTypeId: "",
        price: "0",
        conNames: "",
        // surplusStock: '',
        conUnit: "",
        conWarning: "999",
        shopId: localStorage.getItem("shopId")
      },
      rules: {
        conCode: [
          { required: true, message: "请输入耗材信息代码", trigger: "blur" }
        ],
        conName: [
          { required: true, message: "请输入耗材信息名称", trigger: "blur" }
        ],
        conTypeId: [
          { required: true, message: "请选择耗材类型", trigger: "blur" }
        ],
        price: [{ required: true, message: "请输入耗材价格", trigger: "blur" }],
        conWarning: [
          { required: true, message: "请输入耗材预警值", trigger: "blur" }
        ],
        conTypeId: [
          { required: true, message: "请输入耗材类型id", trigger: "blur" }
        ],
        conUnit: [{ required: true, message: "请输入单位", trigger: "blur" }],
        conWarning: [
          {
            required: true,
            message: "请输入单位",
            trigger: "blur"
          }
        ]
      },
      downloadLoading: false,
      uploadLoading: false,
      dialogVisible: false
    };
  },
  mounted() {
    this.resetQuery = { ...this.query }
    this.getTableData();
    this.getTableDatatype();
  },
  methods: {
    // 导入耗材
    async excelSuccessUpload(file) {
      try {
        this.uploadLoading = true
        this.dialogVisible = false
        await tbConsInfoinputStock(file)
        this.uploadLoading = false
        this.$notify.success('导入成功')
        this.resetHandle()
      } catch (error) {
        this.dialogVisible = false
        this.uploadLoading = false
        console.log(error);
      }
    },
    // 耗材导出
    async protHandle() {
      try {
        this.downloadLoading = true;
        const file = await tbConsInfodownload(this.query)
        downloadFile(file, "耗材", "xlsx");
        this.downloadLoading = false;
      } catch (error) {
        this.downloadLoading = false;
        console.log(error);
      }
    },
    // 编辑
    editorHandle(row) {
      this.dialogtitle = "编辑";
      for (let key in this.ruleForm) {
        this.ruleForm[key] = row[key];
      }
      this.ruleForm.id = row.id;
      this.dialogshow = true;
    },
    // 重置查询
    resetHandle() {
      this.query = { ...this.resetQuery }
      this.tableData.page = 0;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    paginationChangetype(e) {
      this.tableDatatype.page = e - 1;
      this.getTableDatatype();
    },
    // 获取信息
    async getTableData() {
      this.tableData.loading = true;
      try {
        const res = await gettbConsInfo({
          ...this.query,
          page: this.tableData.page,
          size: this.tableData.size,
          shopId: localStorage.getItem("shopId")
        });
        this.tableData.loading = false;
        this.tableData.data = res.content;
        this.tableData.total = res.totalElements;

      } catch (error) {
        console.log(error);
      }
    },
    // 获取类型
    async getTableDatatype() {
      this.tableDatatype.loading = true;
      try {
        const res = await gettbConsType({
          page: this.tableDatatype.page,
          size: this.tableDatatype.size,
          conTypeCode: this.querytypedialogshowquery.conTypeCode,
          conTypeName: this.querytypedialogshowquery.conTypeName,
          status: this.querytypedialogshowquery.status,
          shopId: localStorage.getItem("shopId")
        });
        this.tableDatatype.loading = false;
        this.tableDatatype.data = res.content;
        this.tableDatatype.total = res.totalElements;
      } catch (error) {
        console.log(error);
      }
    },
    // 重置查询
    resetHandletype() {
      this.querytypedialogshowquery.conTypeName = "";
      this.querytypedialogshowquery.conTypeCode = "";
      this.querytypedialogshowquery.status = "";
      this.tableData.page = 0;
      this.getTableDatatype();
    },
    // 选择的类型
    tableDatatypetable(item) {
      // this.ruleForm.conCode = item.conTypeCode
      this.ruleForm.conNames = item.conTypeName;
      this.ruleForm.conTypeId = item.id;
      this.typedialogshow = false;
    },
    async clickdialogfadd(item) {
      this.libraryshow = true;
      this.libraryshowdata.id = item.id;
    },
    async clickdialoglibraryshow(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          await posttbConsInfostockIn({
            id: this.libraryshowdata.id,
            stockNumber: this.libraryshowdata.stockNumber
          });
          this.libraryshow = false;
          this.$refs[formName].resetFields();
          this.getTableData();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 弹框修改值  添加  编辑
    clickdialogframe(type, item) {
      if (type == "add") {
        // 添加
        this.dialogtitle = "添加";
        this.$nextTick(() => {
          this.$refs.refruleForm.resetFields();
        });
      } else {
        this.dialogtitle = "编辑";
        this.ruleForm.id = item.id;
        this.ruleForm.conTypeId = item.conTypeId;
        this.ruleForm.conCode = item.conCode;
        this.ruleForm.conName = item.conName;
        // this.ruleForm.surplusStock = item.surplusStock
        this.ruleForm.conWarning = item.conWarning;
        this.ruleForm.conUnit = item.conUnit;
        console.log(this.ruleForm, item);
      }
      this.dialogshow = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.ruleFormLoading = true;
          if (this.dialogtitle == "编辑") {
            await postapitbConsInfo(this.ruleForm);
            this.$message({ type: "success", message: "编辑成功" });
            this.dialogshow = false;
          } else {
            //添加
            console.log(this.ruleForm,'调试')
            await posttbConsInfo({
              ...this.ruleForm
            });
            this.$message({ type: "success", message: "添加成功" });
          }
          this.dialogshow = false;
          this.$refs[formName].resetFields();
          this.ruleFormLoading = false;
          this.getTableData();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 删除商品
    async delTableHandle(ids) {
      try {
        await tbProductDelete(ids);
        this.getTableData();
      } catch (error) {
        console.log(error);
      }
    },
    //查看查询耗材流水信息
    async clicksee(item) {
      console.log(item);
      this.clickseetypedialogshow = true;
      this.clickseetableData.loading = true;
      try {
        const res = await gettbConsInfoFlow({
          page: this.clickseetableData.page,
          size: this.clickseetableData.size,
          consId: item.id,
          conName: item.conName,
          shopId: localStorage.getItem("shopId")
        });
        this.clickseetableData.loading = false;
        this.clickseetableData.data = res.content;
        this.clickseetableData.total = res.totalElements;
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.row_wrap {
  display: flex;
  justify-content: space-between;

  .row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

.handle {
  font-size: 18px;
  color: #999;

  &:hover {
    cursor: grab;
  }
}

.shop_info {
  display: flex;

  .info {
    flex: 1;
    padding-left: 8px;
    display: flex;
    flex-direction: column;

    .tag_wrap {
      display: flex;
    }
  }
}

.red {
  color: rgb(219, 32, 32);
}
</style>
