<!-- 首页列表 - 检定设备列表 -->
<script lang="ts" setup name="verificationDevice">
import { getDictByCode } from '@/api/system/dict'
import { getDeviceNameList, getModelAllList, getModelList } from '@/api/eqpt/device/model'
import { getManufacturer } from '@/api/eqpt/device/info'
import { getAdminDept, getUserDept, getUserDeptSon, getUserList } from '@/api/system/user'
import { getDeptList, getDeptTree, getDeptTreeList } from '@/api/system/dept'
import { toTreeList, underlineToHump } from '@/utils/structure'
import { getPostList } from '@/api/system/post'
import { getInCheckPage } from '@/api/eqpt/dashboard/index'
const menu = ref<any[]>([
  { name: '在检', status: '0' },
  { name: '待检', status: '1' }
])
const current = ref('在检')
const listLoading = ref(true)
// 查询条件
const listQuery = ref({
  equipmentName: '', // 设备名称
  model: '', // 规格型号
  manufactureNo: '', // 出厂编号
  manufacturer: '', // 生产厂家
  companyId: '', // 所在单位
  deptIds: '', // 使用部门
  usePositionId: '', // 使用岗位
  meterIdentify: '', // 计量标识
  certificateValidStart: '',
  certificateValidEnd: '',
  equipmentType: '1',
  usageStatus: '',
  limit: 20,
  offset:1,
})
const list = ref([])
const total = ref(0)
const columns = ref<any[]>([])
const inCheckColumns = ref<any[]>([
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
  },
  {
    text: '规格型号',
    value: 'model',
    align: 'center',
  },
  {
    text: '出厂编号',
    value: 'manufactureNo',
    align: 'center',
  },
  {
    text: '生产厂家',
    value: 'manufacturer',
    align: 'center',
  },
  {
    text: '所在单位',
    value: 'companyName',
    align: 'center',
    width: '140'
  },
  {
    text: '使用部门',
    value: 'deptName',
    align: 'center',
    width: '120'
  },
  {
    text: '使用状态',
    value: 'usageStatusName',
    align: 'center',
    width: '100'
  },
  // {
  //   text: '计量标识',
  //   value: 'meterIdentify',
  //   align: 'center',
  //   width: '100'
  // },
  // {
  //   text: '证书有效期',
  //   value: 'certificateValid',
  //   align: 'center',
  //   width: '160'
  // },
  // {
  //   text: '检定完成度',
  //   value: 'checkCompletionName',
  //   align: 'center',
  //   width: '120'
  // },
  // {
  //   text: '检定(校准)机构',
  //   value: 'checkOrganization',
  //   align: 'center',
  // },
  // {
  //   text: '送达时间',
  //   value: 'realDeliverTime',
  //   align: 'center',
  // },
])
const toCheckColumns = ref<any[]>([
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
  },
  {
    text: '规格型号',
    value: 'model',
    align: 'center',
  },
  {
    text: '辅助字段',
    value: 'helpInstruction',
    align: 'center',
  },
  {
    text: '出厂编号',
    value: 'manufactureNo',
    align: 'center',
  },
  {
    text: '生产厂家',
    value: 'manufacturer',
    align: 'center',
  },
  {
    text: '所在单位',
    value: 'companyName',
    align: 'center',
    width: '140'
  },
  {
    text: '使用部门',
    value: 'deptName',
    align: 'center',
    width: '120'
  },
  {
    text: '使用状态',
    value: 'usageStatusName',
    align: 'center',
    width: '100'
  },
  // {
  //   text: '参试任务',
  //   value: 'taskNames',
  //   align: 'center',
  //   width: '100'
  // },
  // {
  //   text: '检定状态',
  //   value: 'checkStatusName',
  //   align: 'center',
  //   width: '100'
  // },

])
// 监听设备名称下拉框，修改规格型号
watch(() => listQuery.value.equipmentName,(newVal: string) => {
    if (newVal) {
      listQuery.value.model = ''
      // 修改规格型号
      const data = allList.value.filter(item => item.equipmentName === newVal)
      modelList.value = Array.from(
        new Set(data.filter(item => item.model).map(item => item.model))
      ).sort()
    } else {
      listQuery.value.model = ''
      modelList.value = Array.from(
        new Set(
          allList.value.filter(item => item.model).map(item => item.model)
        )
      ).sort()
    }
  }
)
// 监听单位，修改部门
watch(
  () => listQuery.value.companyId,
  (newVal: string) => {
    listQuery.value.deptIds = ''
    if (newVal) {
      // getUserDeptSon({ companyId: newVal }).then((res) => {
      //   deptList.value = res.data.map((item: any) => ({ id: item.id, value: item.id, name: item.fullName }))
      // })
      getDeptTreeList({ pid: newVal }).then(res => {
        deptList.value = toTreeList(
          res.data.map((item: any) => ({
            ...item,
            label: item.name,
            value: item.id
          }))
        ) as any[]
      })
    } else {
      deptList.value = []
    }
  },
  {
    deep: true
  }
)
const search = () => {
  if(current.value === '在检') {
    columns.value = inCheckColumns.value
  }
  else {
    columns.value = toCheckColumns.value
  }
  listLoading.value = true
  getInCheckPage(listQuery.value, current.value).then(res => {
    console.log(res.data, '123')
    list.value = res.data.rows
    total.value = res.data.total
    listLoading.value = false
  }).catch(() => {
    listLoading.value = false
  })
}
search()
watch(() => current.value, (newVal: string) => {
   if(newVal) {
    search()
   }
})
// 重置查询条件
const reset = () => {
  listQuery.value = {
    equipmentName: '', // 设备名称
    model: '', // 规格型号
    manufactureNo: '', // 出厂编号
    manufacturer: '', // 生产厂家
    companyId: '', // 单位
    deptIds: '', // 使用部门
    usePositionId: '', // 使用岗位
    meterIdentify: '', // 计量标识
    certificateValidStart: '',
    certificateValidEnd: '',
    equipmentType: '1',
    usageStatus: '',
    limit: 20,
    offset:1,
  }
  modelList.value = Array.from(
    new Set(allList.value.filter(item => item.model).map(item => item.model))
  ).sort()
  search()
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size: number; page: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  search()
}
// 设备名称
const deviceNameList = ref<string[]>([])
// 规格型号
const modelList = ref<any[]>([])
const allList = ref<any[]>([])
// 生产厂家
const manufacturerList = ref<{ id: string; value: string; name: string }[]>()
// 所在单位
const companyInfo = ref<any>({})
const companyList = ref<{ id: string; value: string; name: string }[]>([])
// 部门
const deptList = ref<{ id: string; value: string; name: string }[]>([])
// 使用岗位
const usePositionList = ref<any[]>([])
// 计量标识
const meterIdentifyList = ref<{ id: string; value: string; name: string }[]>()
// 使用状态列表
const useStatusList = ref()
const fetchDict = () => {
  // 设备名称
  getDeviceNameList({ equipmentType: '1' }).then(res => {
    deviceNameList.value = res.data
  })
  // 规格型号
  getModelAllList({ equipmentType: '1' }).then(res => {
    allList.value = res.data
    modelList.value = Array.from(
      new Set(
        res.data
          .filter((item: any) => item.model)
          .map((item: any) => item.model)
      )
    ).sort()
  })
  // 生产厂家
  getManufacturer().then(res => {
    manufacturerList.value = res.data.map((item: any) => ({
      name: item,
      id: item,
      value: item
    }))
  })
  // 所在单位
  getUserDept().then(res => {
    companyInfo.value = res.data
    if (
      res.data.fullName === '顶级' ||
      res.data.version === '1' ||
      res.data.version === 1
    ) {
      getAdminDept({}).then(res => {
        companyList.value = res.data.map((item: any) => ({
          id: item.id,
          value: item.id,
          name: item.fullName
        }))
      })
    } else {
      companyList.value = [
        {
          name: res.data.fullName,
          value: res.data.id,
          id: res.data.id
        }
      ]
    }
  })
  // 使用岗位
  getPostList({}).then(res => {
    usePositionList.value = res.data
  })
  // meterIdentifyList
  getDictByCode('eqptMeterIdentify').then(res => {
    meterIdentifyList.value = res.data
    meterIdentifyList.value?.push({ name: '空', id: '1', value: '66' })
  })
  // 使用状态列表
  getDictByCode('eqptDeviceUseStatus').then((res) => {
    useStatusList.value = res.data
  })
}
fetchDict()
</script>

<template>
  <div class="container">
    <div class="btns">
      <!-- 三级菜单 -->
      <el-radio-group v-model="current">
        <el-radio-button
          v-for="item in menu"
          :key="item.name"
          :label="item.name"
        >
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- 展示区域 -->
    <app-container>
      <!-- 筛选条件 -->
      <search-area :need-clear="true" @search="search" @clear="reset">
        <search-item>
          <el-select
            v-model.trim="listQuery.equipmentName"
            clearable
            filterable
            placeholder="设备名称"
          >
            <el-option
              v-for="(item, index) in deviceNameList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </search-item>
        <search-item>
          <el-select
            v-model.trim="listQuery.model"
            clearable
            filterable
            placeholder="规格型号"
          >
            <el-option
              v-for="item in modelList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </search-item>
        <search-item>
          <el-input
            v-model.trim="listQuery.manufactureNo"
            placeholder="出厂编号"
          />
        </search-item>
        <search-item>
          <el-select
            v-model="listQuery.manufacturer"
            clearable
            filterable
            placeholder="生产厂家"
          >
            <el-option
              v-for="item in manufacturerList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </search-item>
        <search-item>
          <!-- <dept-select v-model="listQuery.companyId" :need-top="false" placeholder="所在单位" /> -->
          <el-select
            v-model="listQuery.companyId"
            clearable
            filterable
            placeholder="所在单位"
          >
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </search-item>
        <search-item>
          <!-- <dept-select v-model="listQuery.deptIds" :need-top="false" placeholder="使用部门" /> -->
          <!-- <el-select v-model="listQuery.deptIds" clearable filterable placeholder="使用部门">
          <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select> -->
          <el-tree-select
            v-model="listQuery.deptIds"
            style="width: 100%"
            :data="deptList"
            :render-after-expand="false"
            check-strictly
            placeholder="部门"
            clearable
          />
        </search-item>
        <search-item>
          <!-- <el-input v-model.trim="listQuery.usePosition" placeholder="使用岗位" clearable /> -->
          <el-select
            v-model="listQuery.usePositionId"
            filterable
            clearable
            placeholder="使用岗位"
          >
            <el-option
              v-for="item in usePositionList"
              :key="item.id"
              :label="item.positionName"
              :value="item.id"
            />
          </el-select>
        </search-item>
        <search-item>
          <el-select
            v-model="listQuery.meterIdentify"
            clearable
            placeholder="计量标识"
          >
            <el-option
              v-for="item in meterIdentifyList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </search-item>
        <search-item>
          <el-date-picker
            v-model="listQuery.certificateValidStart"
            type="date"
            placeholder="证书有效期开始时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD 00:00:00"
          />
        </search-item>
        <search-item>
          <el-date-picker
            v-model="listQuery.certificateValidEnd"
            type="date"
            placeholder="证书有效期结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD 23:59:59"
          />
        </search-item>
        <search-item>
          <el-select v-model="listQuery.usageStatus" clearable placeholder="使用状态">
            <el-option v-for="item in useStatusList" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </search-item>
      </search-area>
      <table-container>
        <normal-table
          :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="listLoading"
          :is-showmulti-select="false" @change="changePage">
                      <!-- 序号 -->
                      <template #preColumns>
              <el-table-column label="#" width="70" align="center">
                <template #default="scope">
                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
        </normal-table>
      </table-container>
    </app-container>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: relative;

  .btns {
    position: fixed;
    top: 68px;
    right: 15px;
    z-index: 999;
  }
}
</style>