<template>
<div>
  <el-card>
    <el-form :model="query" label-width="auto" v-show="showSearch" size="mini" class="order-el-form">
      <el-row :gutter="20">
        <el-col :span="8">


        </el-col>
        <!--<el-col :span="8">-->
        <!--  <el-form-item label="当前部门:" class="query-form-item">-->
        <!--    <deptSelect style="width: 80%" :value.sync="query.deptCode"/>-->
        <!--    &lt;!&ndash;<deptSelect :value.sync="query.invCode" :params.sync="filterBadInv" :changeValue.sync="invChange"/>&ndash;&gt;-->
        <!--  </el-form-item>-->
        <!--</el-col>-->
        <el-col :span="8">
          <el-form-item label="编码/名称:" class="query-form-item">
            <el-input v-model="query.key" placeholder="请输入编码/工位名称" clearable style="width: 65%">
            </el-input>
          </el-form-item>
        </el-col>
        <!--<el-col :span="8">-->
        <!--  <el-form-item label="所属工位:" class="query-form-item">-->
        <!--    <el-select v-model="query.workplaceStatus" placeholder="选择所属工位" clearable style="width: 65%">-->
        <!--      <el-option label="暂停" :value="0"></el-option>-->
        <!--      <el-option label="启用" :value="1"></el-option>-->
        <!--    </el-select>-->
        <!--  </el-form-item>-->

        <!--</el-col>-->
      </el-row>
    </el-form>


    <div class="top-right-btn">
      <el-button-group>
        <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="addRegion">新增槽位区域</el-button>
        <!--<el-button type="primary" icon="el-icon-plus" @click="chooseDrug">选入药品信息</el-button>-->
        <!--          <el-button type="primary" icon="el-icon-plus" @click="addDrug">新增药品信息</el-button>-->
      </el-button-group>
    </div>

    <el-table v-loading="loading" :data="regionList" style="width: 100%" :row-style="{height: '25px' }"
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="区域编码" prop="regionCode" ></el-table-column>
      <el-table-column label="区域名称" prop="regionName" ></el-table-column>
      <el-table-column label="操作" fixed="right" width="220">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.stop="editRegion(scope.row)"
          >编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.stop="delRegion(scope.row)"
          >删除
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.stop="bingLed(scope.row)"
          >打印
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--<pagination-->
    <!--  :total="total"-->
    <!--  :limit.sync="filterQuery.limit"-->
    <!--  :page.sync="filterQuery.page"-->
    <!--  @pagination="getList()"-->
    <!--&gt;-->
    <!--</pagination>-->
  </el-card>
  <el-dialog
    title="新增槽位区域"
    :visible.sync="addRegionVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-if="addRegionVisible"
    width="65%"
    append-to-body
    @close=""
  >
    <addRegionDialog
      :closeDialog="closeDialog"
      :type="type"
      :rowData="rowData"
    >

    </addRegionDialog>
  </el-dialog>

</div>
</template>

<script>

import { getRegions,delRegion } from '@/api/basic/workPlace/regionManage'
import addRegionDialog from "./addRegionDialog"

export default {
  components: {addRegionDialog},
  data() {
    return {
      showSearch:true,
      query:{
        page:1,
        limit:10
      },
      loading: false,
      regionList:[],
      addRegionVisible: false,
      type:1,
      rowData:null
    }
  },
  methods: {
    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    onReset() {
      this.$router.push({
        path: ''
      })
      this.query = {
        page: 1,
        limit: 10,
      }
      // this.getList()
    },
    onSubmit() {
      this.query.page = 1
      this.getList()
    },
    getList(){
      getRegions(this.query).then(res => {
        if (res.code == 20000){
          this.regionList = res.data.list
        }
      })
    },
    addRegion(){
      this.type = 1
      this.addRegionVisible = true
    },
    editRegion(row){
      this.type = 2
      this.rowData = row
      this.addRegionVisible = true
    },
    delRegion(row){
        this.$confirm("是否确定移除该槽位区域?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          delRegion(row).then(res => {
            if (res.code == 20000){
              this.getList()
              return this.$message.success("删除成功")
            }else {
              return this.$message.error("删除失败")
            }
          })
        }).catch(() => {

        })
    },
    closeDialog(){
      this.addRegionVisible = false
      this.getList()
    }
  },
  mounted() {
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>

</style>
