<!-- 流程列表 -->
<script lang="ts" setup name="Label">
import type { IUseStateList, IlistQuery, dictType } from './label'
import { getDictByCode } from '@/api/system/dict'
import { getLabelList } from '@/api/system/label'

const useStateList = ref<IUseStateList[]>([]) // 关联使用情况字典值
const listQuery = reactive({
  useState: '', // 使用情况
  offset: 1,
  limit: 20,
})

// 表头
const columns = ref([
  { text: 'RFID标签编号', value: 'labelId' },
  { text: '使用情况', value: 'useState' },
  { text: '绑定设备编号', value: 'business' },
  { text: '绑定设备名称', value: 'status' },
  { text: '使用岗位', value: 'person' },
  { text: '负责人', value: 'time' },
])
const list = ref([])
const total = ref(20)
const listLoading = ref(false)
const checkoutList = ref<string[]>([]) // 多选选中结果

// 获取标签使用情况字典值
const fetchLabelUseDict = () => {
  getDictByCode('labelUseState').then((res) => {
    useStateList.value = res.data
  })
}

// 获取流程列表
const fetchData = async (isNowPage: boolean) => {
  listLoading.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.offset = 1
  }
  const param = {
    useState: '', // 使用状态
    offset: listQuery.offset,
    limit: listQuery.limit,
  }
  const response = await getLabelList(param)
  total.value = parseInt(response.data.total)
  list.value = response.data.rows.map((item: any) => {
    return {
      ...item,
      number: item.id,
      business: item.formName,
      person: item.directorName,
      time: item.deploymentTime,
      status: item.suspensionState === 1 ? '激活' : '废止',
      describe: item.formDesc,
    }
  })
  listLoading.value = false
}

// 查询数据
const search = () => {
  fetchData(false)
}

// 重置
const reset = () => {
  listQuery.useState = '' // 使用情况
  fetchData(true)
}

onMounted(() => {
  fetchLabelUseDict()
})
</script>

<template>
  <div class="label">
    <app-container>
      <!-- 筛选条件 -->
      <search-area :need-clear="true" @search="search" @clear="reset">
        <search-item>
          <el-select v-model="listQuery.useState" placeholder="请选择使用情况" clearable>
            <el-option
              v-for="item in useStateList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </search-item>
      </search-area>

      <!-- 查询结果Table显示 -->
      <table-container>
        <template #btns-right>
          <icon-button icon="icon-add" title="新建" type="primary" @click="add" />
          <!-- <icon-button v-if="proxy.hasPerm('/sys/process/export')" icon="icon-export" title="导出" type="primary" @click="exportAll" /> -->
          <icon-button icon="icon-import" title="批量绑定" type="primary" @click="printList" />
        </template>

        <div class="table-area">
          <normal-table
            :data="list"
            :total="total"
            :columns="columns"
            :query="listQuery"
            is-showmulti-select
            :list-loading="listLoading"
            @change="changePage"
            @multiSelect="selectionChange"
          >
            <template #preColumns>
              <el-table-column label="序号" width="55" align="center">
                <template #default="scope">
                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
            <template #columns>
              <el-table-column label="操作" width="160" align="center" fixed="right">
                <template #default="scope">
                  <el-button
                    v-if="proxy.hasPerm('/sys/label/edit')"
                    type="primary"
                    link
                    size="small"
                    class="table-text-button"
                    @click="handleEdit(scope.row, 'edit')"
                  >
                    编辑
                  </el-button>
                  <el-button type="danger" link size="small" class="table-text-button" @click="del(scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </template>
          </normal-table>
        </div>
      </table-container>
    </app-container>
  </div>
</template>

<style lang="scss" scoped>
.label {
  .table-area {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
    border-radius: 7px;
  }
}
</style>

<style lang="scss">
  .list-login-log {
    .el-button + .el-button {
      margin-top: -10px;
    }
  }

  .el-message-box {
    overflow: auto;
  }
</style>