<template>
  <div>
    <div class="zw-page-table">
      <!-- 条件区 -->
      <el-form class="zw-criterion">
        <div class="zw-criterion-normal">
          <el-row>
            <el-col :span="6">
              <el-form-item label-width="90px" label="条码类型：">
                <DictSelection
                  dictName="条码分类"
                  v-model="searchForm.stripCode"
                ></DictSelection>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label-width="140px" label="绑定的设备分类：">
                <selectTree
                  ref="tree"
                  class="form-input"
                  style="width: 90%"
                  :options="treeList"
                  :props="{
                    value: 'code',
                    label: 'name',
                    children: 'children'
                  }"
                  @getValue="asstClick"
                />
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label-width="70px" label="状态：">
                <!-- <el-input size="small"
                          v-model="searchForm.status"></el-input> -->
                <el-select
                  size="mini"
                  style="width: 90%"
                  class="form-inpit"
                  v-model="searchForm.status"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <div class="zw-table-header">
                <el-button
                  @click="search"
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh-left"
                  size="mini"
                  @click="reset"
                  >重置</el-button
                >
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <!-- <el-dialog title="新增" :visible.sync="dialogVisible" width="40%">
        <el-form label-width="80px" class="zw-criterion">
          <el-row>
            <el-col :span="12">
              <el-form-item label="工序编码">
                <el-input
                  class="form-inpit"
                  size="small"
                  v-model="form.code"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工序名称">
                <el-input
                  class="form-inpit"
                  size="small"
                  v-model="form.name"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-select
                  size="small"
                  class="form-inpit"
                  v-model="form.status"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工序类型">
                <el-select
                  size="small"
                  class="form-inpit"
                  v-model="form.type"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="submit" type="primary"
            >提 交</el-button
          >
          <el-button size="small" @click="dialogVisible = false"
            >关 闭</el-button
          >
        </div>
      </el-dialog> -->
    </div>
    <el-container>
      <el-main class="zw-data-table table-list">
        <!-- 表格列表 -->
        <div class="data-tab">
          <!-- 按钮操作区 -->
          <div class="table-add">
            <el-button
              icon="el-icon-plus"
              size="mini"
              type="primary"
              @click="jumpAdd"
              >新增</el-button
            >
            <el-button size="mini" type="primary" @click="handleExport"
              >导出</el-button
            >
          </div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            stripe
            :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
          >
            <el-table-column prop="dictBarName" label="条码类型" />

            <!-- <el-table-column prop="equName" label="绑定的设备分类" /> -->
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                {{ scope.row.status ? '生效' : '失效' }}
              </template>
            </el-table-column>
            <el-table-column prop="createUserName" label="创建人" />
            <el-table-column prop="createTime" label="创建时间" />

            <el-table-column width="150px" label="操作">
              <template slot-scope="scope">
                <div style="display: flex">
                  <!-- <el-button @click="goEdit(scope.row)" type="text" size="mini"
                  >编辑</el-button
                > -->
                  <el-button
                    @click="goDetails(scope.row)"
                    type="text"
                    size="mini"
                    >详情</el-button
                  >
                  <el-button
                    @click="handleDelete(scope.row.id)"
                    type="text"
                    size="mini"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="zw-table-footer">
          <div class="zw-table-desc gray">
            <span class="zw-table-countinfo-link" type="info"></span>
          </div>
          <div class="zw-table-pagebar">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :page-sizes="pageSizes"
              :page-size="size"
              :current-page.sync="page"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  import barCode from '@/api/main/barCode';
  // import pagination from '@/layout/mixin/pagination'
  // import config from "@/api/feature/config";
  import common from '@/api/common';
  import selectTree from '@/components/selectTree';
  import { deepClone } from '@/utils/index';
  export default {
    components: { selectTree },
    data() {
      return {
        size: 10,
        page: 1,
        total: 0,
        pageSizes: [5, 10, 15, 20, 25],
        form: {},
        searchForm: {},
        // dialogVisible: false,
        tableData: [],
        statusList: [
          { id: 1, name: '生效' },
          { id: 0, name: '失效' }
        ] //状态
        // treeList: [],
      };
    },
    created() {
      this.handleList();
      // this.getTreeList();
    },
    methods: {
      async handleSizeChange(pageSize) {
        this.size = pageSize;
        this.page = 1;
        await this.handleList();
      },
      async handleCurrentChange(currentPage) {
        this.page = currentPage;
        await this.handleList();
      },
      // 树形结构数据
      // getTreeList() {
      //   config.tree().then(res => {
      //     this.treeList = res.data;
      //   });
      // },
      //   获取列表信息
      async handleList(...arg) {
        let params = { page: this.page, size: this.size };
        if (arg.length > 0) {
          params = Object.assign(params, arg[0]);
        }
        let res = await barCode.getPageList(params);
        this.tableData = res.data.list;
        this.total = res.data.count;
      },
      // 搜索
      search() {
        this.page = 1;
        this.handleList(this.searchForm);
      },
      //重置
      reset() {
        this.searchForm = {};
        this.$refs.tree.valueId = null;
        this.$refs.tree.valueTitle = '';
        this.handleList(this.searchForm);
      },
      //设备分类
      // asstClick(data) {
      //   if (data == null) {
      //     this.searchForm.equCode = "";
      //   } else {
      //     this.searchForm.equCode = data.code;
      //   }
      // },
      //新增
      jumpAdd() {
        const { href } = this.$router.resolve({
          path: `/warehouseManagement/barCode/add`
        });
        window.open(href, '_self');
      },
      //
      // submit() {
      //   let form = deepClone(this.form);
      //   let res = dict.save(form);
      //   if (res.success) {
      //     this.$message.success("操作成功！");
      //     this.handleList();
      //     this.dialogVisible = false;
      //   }
      // },

      //跳转编辑页
      goEdit() {},
      //跳转详情
      goDetails(info) {
        this.$router.push({
          path: '/warehouseManagement/barCode/details',
          query: {
            id: info.id
          }
        });
      },
      //删除条码
      handleDelete(id) {
        this.$confirm('确定删除当前条码？', '提示').then(() => {
          const res = barCode.deleteApi(id);
          if (res.success) {
            this.$message.success('删除成功！');
            this.handleList(this.searchForm);
          }
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          '/bar/manage/export',
          {
            ...this.searchForm,
            page: this.page,
            size: this.size
          },
          `条码管理_${new Date().getTime()}.xlsx`
        );
      }
    }
  };
</script>

<style lang="scss">
  .zw-table-header {
    float: left !important;
    transform: translateY(3px);
  }
  .form-inpit {
    width: 100%;
  }
  .table-add {
    margin: 10px 0;
  }
</style>
