<template>
  <el-dialog title="选择产品" v-model="open" width="800px">
    <div>
      <el-form :model="queryParams" ref="queryFormRef" inline>
        <el-form-item :label="t('device.allot-record155854-2')" prop="productName">
          <el-input
            v-model="queryParams.productName"
            placeholder="请输入产品名称"
            clearable
            size="small"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleQuery"> 查询 </el-button>
          <el-button size="small" @click="resetQuery"> 重置 </el-button>
        </el-form-item>
      </el-form>

      <el-table
        :border="false"
        v-loading="loading"
        ref="singleTableRef"
        :data="productList"
        @row-click="rowClick"
        highlight-current-row
        size="small"
      >
        <el-table-column :label="t('device.device-edit148398-6')" width="50" align="center">
          <template #default="scope">
            <input type="radio" :checked="scope.row.isSelect" name="product" />
          </template>
        </el-table-column>
        <el-table-column
          :label="t('device.allot-record155854-2')"
          align="center"
          prop="productName"
        />
        <el-table-column label="分类名称" align="center" prop="categoryName" />
        <el-table-column label="租户名称" align="center" prop="tenantName" />

        <el-table-column label="认证方式" align="center" prop="status">
          <template #default="scope">
            <dict-tag
              :type="DICT_TYPE.VIDEO_CENTER_VERTIFICATE_METHOD"
              :value="scope.row.vertificateMethod"
            />
          </template>
        </el-table-column>
        <el-table-column label="联网方式" align="center" prop="networkMethod">
          <template #default="scope">
            <dict-tag
              :type="DICT_TYPE.VIDEO_CENTER_NETWORK_METHOD"
              :value="scope.row.networkMethod"
            />
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="100">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="mt-5 flex justify-center">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="confirmSelectProduct" type="primary"> 确认 </el-button>
        <el-button @click="closeDialog" type="info"> 取消 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { listProduct } from '@/api/pms/video/product'
import { parseTime } from '@/utils/dateUtil'
import { getDicts } from '@/api/pms/video/dicts'
import { DICT_TYPE, getDictLabel } from '@/utils/dict'

const { t } = useI18n()

// 定义属性
const props = defineProps({
  productId: {
    type: Number,
    default: 0
  }
})

// 定义事件
const emit = defineEmits(['productEvent'])

// 字典配置
defineOptions({
  name: 'ProductList'
})

const iot_vertificate_method = ref([])
const iot_network_method = ref([])

// 响应式数据
const open = defineModel('open')
const loading = ref(true)
const total = ref(0)
const productList = ref([])
const product = ref({})
const queryFormRef = ref()
const singleTableRef = ref()

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  productName: null,
  categoryId: null,
  categoryName: null,
  tenantId: null,
  tenantName: null,
  isSys: null,
  status: 2, //已发布
  deviceType: null,
  networkMethod: null
})

// 方法定义
const getList = () => {
  loading.value = true
  listProduct(queryParams).then((response) => {
    //产品列表初始化isSelect值，用于单选
    for (let i = 0; i < response.list.length; i++) {
      response.list[i].isSelect = false
    }
    productList.value = response.list
    total.value = response.total
    if (props.productId != 0) {
      setRadioSelected(props.productId)
    }
    loading.value = false
  })
}

const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

const rowClick = (productRow) => {
  if (productRow != null) {
    setRadioSelected(productRow.productId)
    product.value = productRow
  }
}

const setRadioSelected = (productId) => {
  for (let i = 0; i < productList.value.length; i++) {
    if (productList.value[i].productId == productId) {
      productList.value[i].isSelect = true
    } else {
      productList.value[i].isSelect = false
    }
  }
}

const confirmSelectProduct = () => {
  emit('productEvent', product.value)
  open.value = false
}

const closeDialog = () => {
  open.value = false
}

// 生命周期钩子
onMounted(() => {
  getList()

  getDicts('iot_network_method').then((response) => {
    iot_network_method.value = response
  })

  getDicts('iot_vertificate_method').then((response) => {
    iot_vertificate_method.value = response
  })
})

defineExpose({
  getList,
  open
})
</script>
