<!-- eslint-disable no-empty -->
<template>
  <div class="app-container">
    <div class="head-container">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input
            v-model="query.name"
            size="small"
            clearable
            placeholder="请输入耗材单位名称"
            style="width: 100%"
            class="filter-item"
            @keyup.enter.native="getTableData"
          />
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="query.conTypeCode"
            size="small"
            clearable
            placeholder="请输入耗材类型代码"
            style="width: 100%"
            class="filter-item"
            @keyup.enter.native="getTableData"
          />
        </el-col>
        <el-col :span="3">
          <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>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </el-col>
      </el-row>
    </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="name" />
        <el-table-column label="耗材单位值" prop="value" />
     
        <!-- <el-table-column label="是否按照当前单位消耗" prop="isconsume">
          <template v-slot="scope">
            <el-switch v-model="scope.row.isConsume"  @change="isConsumeChange(scope.row)" />
          </template>
        </el-table-column> -->
        <el-table-column label="创建时间" prop="createTime">
          <template v-slot="scope">
            {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <!-- <el-button type="text" icon="el-icon-rank">排序</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="dialogtitle"
      :visible.sync="dialogshow"
      @close="resetRuleForm"
    >
      <el-form ref="refruleForm" :model="ruleForm" :rules="rules" value-key="">
        <el-form-item label="父单位" prop="parentId">
          <el-select v-model="ruleForm.parentId" placeholder="请选择父单位">
            <el-option
              v-for="item in unitLists"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="耗材单位名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="耗材单位值" prop="value">
          <el-input v-model="ruleForm.value" type="number" />
        </el-form-item>
        <el-form-item label="是否按照当前单位消耗" prop="isConsume">
          <el-switch v-model="ruleForm.isConsume" />
        </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>
  </div>
</template>
  
  <script>
import Sortable from "sortablejs";
import dayjs from "dayjs";
import settings from "@/settings";
import {
  queryTbConUnitInfo,
  addtbConUnit,
  edittbConUnit,
} from "@/api/consumable";

export default {
  data() {
    return {
      unitLists: [
        {
          label: "无",
          value: null,
        },
      ],
      dayjs,
      query: {
        name: "",
        parentId: "",
        status: "",
      },
      categorys: [],
      typeEnums: [
        {
          label: "正常",
          value: "1",
        },
        {
          label: "禁用",
          value: "0",
        },
      ],
      dialogshow: false, //弹框显示
      dialogtitle: "", //文字显示
      tableData: {
        data: [],
        page: 0,
        size: 30,
        loading: false,
        total: 0,
      },
      ruleForm: {
        parentId: "",
        name: "",
        value: "",
        shopId: localStorage.getItem("shopId"),
        isConsume: false,
      },
      rules: {
        name: [
          { required: true, message: "请输入耗材单位名称", trigger: "blur" },
        ],
        value: [
          { required: true, message: "请输入耗材单位值", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getTableData();
    this.getAllUnit();
    this.$nextTick(() => {
      // this.tableDrag()
    });
  },
  methods: {
    async isConsumeChange(row){
        await edittbConUnit({...row,isConsume:row.isConsume?1:0})
        this.$notify.success("修改成功");
    },
    //获取全部单位
    getAllUnit() {
      queryTbConUnitInfo({ size: 100, page: 0 }).then((res) => {
        const arr = res.content.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
        this.unitLists.push(...arr);
      });
    },
    resetRuleForm() {
      this.ruleForm.name=''
      this.ruleForm.value=''
      this.ruleForm.parentId=''
      this.ruleForm.isConsume=false
      this.$refs.refruleForm.resetFields();
    },
    // 重置查询
    resetHandle() {
      this.query.name = "";
      this.query.parentId = "";
      this.query.status = "";
      this.tableData.page = 0;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    // 获取耗材单位列表
    async getTableData() {
      this.tableData.loading = true;
      try {
        const res = await queryTbConUnitInfo({
          page: this.tableData.page,
          size: this.tableData.size,
          name: this.query.name,
          status: this.query.status,
          shopId: localStorage.getItem("shopId"),
        });
        this.tableData.loading = false;
        this.tableData.data = res.content;
        this.tableData.total = res.totalElements;
      } catch (error) {
        console.log(error);
      }
    },
    // 弹框修改值  添加  编辑
    clickdialogframe(type, item) {
      // eslint-disable-next-line eqeqeq
      if (type == "add") {
        // 添加
        this.dialogtitle = "添加";
        this.$nextTick(() => {
          this.$refs.refruleForm.resetFields();
        });
      } else {
        this.dialogtitle = "编辑";
        this.ruleForm.id = item.id;
        this.ruleForm.name = item.name;
        this.ruleForm.value = item.value;
        this.ruleForm.isConsume = item.isConsume == 1 ? true : false;
      }
      this.dialogshow = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.dialogtitle == "编辑") {
            await edittbConUnit(this.ruleForm);
            this.dialogshow = false;
            this.$notify.success("修改成功");
            this.getTableData();
          } else {
            console.log(this.ruleForm);
            const { name, value, parentId, isConsume } = this.ruleForm;
            await addtbConUnit({
              name,
              value,
              parentId,
              isConsume: isConsume ? "1" : "0",
            });
            this.$notify.success("添加成功");
          }
          this.dialogshow = false;
          this.$refs[formName].resetFields();
          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);
      }
    },
  },
};
</script>
  
  <style scoped lang="scss">
.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;
    }
  }
}
</style>
  