<template>
  <div style="padding: 6px">
    <el-card v-show="showSearch" style="margin-bottom: 6px; border: 0" shadow="never">
      <el-form
        ref="queryFormRef"
        :inline="true"
        :model="queryParams"
        label-width="68px"
        style="margin-bottom: -20px"
      >
        <el-form-item label="协议名称" prop="protocolName">
          <el-input
            v-model="queryParams.protocolName"
            placeholder="协议名称"
            clearable
            size="default"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="协议编码" prop="protocolCode">
          <el-input
            v-model="queryParams.protocolCode"
            placeholder="请输入协议编码"
            clearable
            size="default"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button :icon="Search" size="default" type="primary" @click="handleQuery"
            >搜索</el-button
          >
          <el-button :icon="Refresh" size="default" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="padding-bottom: 80px; border: 0" shadow="never">
      <el-table
        :border="false"
        v-loading="loading"
        :data="protocolList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="协议名称" align="left" prop="protocolName" />
        <el-table-column label="协议编码" align="left" prop="protocolCode" />
        <el-table-column label="协议摘要" align="left" prop="jarSign" />
        <el-table-column label="上传地址" align="left" prop="protocolFileUrl" />
        <el-table-column label="协议类型" align="left" prop="protocolType" />
      </el-table>

      <div class="flex justify-right mt-5">
        <el-pagination
          v-show="total > 0"
          v-model:current-page="queryParams.pageNo"
          v-model:page-size="queryParams.pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 50]"
          @size-change="handleSizeChange"
          @current-change="getList"
        />
      </div>

      <!-- 添加或修改协议对话框 -->
      <el-dialog :title="title" v-model="open" append-to-body width="600px">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="协议名称" prop="protocolName">
            <el-input v-model="form.protocolName" placeholder="请输入协议名称" />
          </el-form-item>
          <el-form-item label="协议编码" prop="protocolCode">
            <el-input v-model="form.protocolCode" placeholder="请输入协议编码" />
          </el-form-item>
          <el-form-item label="上传地址" prop="protocolFileUrl">
            <el-input v-model="form.protocolFileUrl" placeholder="请输入内容" type="textarea" />
          </el-form-item>
          <el-form-item label="协议摘要" prop="jarSign">
            <el-input v-model="form.jarSign" placeholder="请输入协议文件摘要(文件的md5)" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import {
  listProtocol,
  getProtocol,
  delProtocol,
  addProtocol,
  updateProtocol
} from '@/api/pms/video/protocol'
import { Search, Refresh } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { download } from '@/config/axios/service'

// 定义组件名称
defineOptions({
  name: 'Protocol'
})

// Refs
const queryFormRef = ref(null)
const formRef = ref(null)

// 数据定义
// 遮罩层
const loading = ref(true)
// 选中数组
const ids = ref([])
// 非单个禁用
const single = ref(true)
// 非多个禁用
const multiple = ref(true)
// 显示搜索条件
const showSearch = ref(true)
// 总条数
const total = ref(0)
// 协议表格数据
const protocolList = ref([])
// 弹出层标题
const title = ref('')
// 是否显示弹出层
const open = ref(false)

// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  protocolCode: null,
  protocolName: null,
  protocolFileUrl: null,
  protocolType: null,
  jarSign: null,
  protocolStatus: null
})

// 表单参数
const form = reactive({
  id: null,
  protocolCode: null,
  protocolName: null,
  protocolFileUrl: null,
  protocolType: null,
  jarSign: null,
  createTime: null,
  updateTime: null,
  protocolStatus: 0,
  delFlag: null
})

// 表单校验
const rules = {
  protocolCode: [
    {
      required: true,
      message: '协议编码不能为空',
      trigger: 'blur'
    }
  ],
  protocolName: [
    {
      required: true,
      message: '协议名称不能为空',
      trigger: 'blur'
    }
  ],
  protocolFileUrl: [
    {
      required: true,
      message: '协议上传地址不能为空',
      trigger: 'blur'
    }
  ],
  protocolType: [
    {
      required: true,
      message: '协议类型不能为空',
      trigger: 'change'
    }
  ],
  jarSign: [
    {
      required: true,
      message: '协议摘要不能为空',
      trigger: 'blur'
    }
  ]
}

// 方法定义
/** 查询协议列表 */
const getList = (val) => {
  loading.value = true
  queryParams.pageNo = val
  listProtocol(queryParams).then((response) => {
    protocolList.value = response.list
    total.value = response.total
    loading.value = false
  })
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  queryParams.pageSize = val
  getList()
}

// 取消按钮
const cancel = () => {
  open.value = false
  reset()
}

// 表单重置
const reset = () => {
  Object.assign(form, {
    id: null,
    protocolCode: null,
    protocolName: null,
    protocolFileUrl: null,
    protocolType: null,
    jarSign: null,
    createTime: null,
    updateTime: null,
    protocolStatus: 0,
    delFlag: null
  })
  formRef.value?.resetFields()
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

// 多选框选中数据
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset()
  open.value = true
  title.value = '添加协议'
}

/** 修改按钮操作 */
const handleUpdate = (row) => {
  reset()
  const id = row.id || ids.value
  getProtocol(id).then((response) => {
    Object.assign(form, response.data)
    open.value = true
    title.value = '修改协议'
  })
}

/** 提交按钮 */
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (form.id != null) {
        updateProtocol(form).then((response) => {
          ElMessage.success('修改成功')
          open.value = false
          getList()
        })
      } else {
        addProtocol(form).then((response) => {
          ElMessage.success('新增成功')
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
const handleDelete = (row) => {
  const idsVal = row.id || ids.value
  ElMessageBox.confirm('是否确认删除协议编号为"' + idsVal + '"的数据项？')
    .then(function () {
      return delProtocol(idsVal)
    })
    .then(() => {
      getList()
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}

/** 导出按钮操作 */
const handleExport = () => {
  download(
    'iot/protocol/export',
    {
      ...queryParams
    },
    `protocol_${new Date().getTime()}.xlsx`
  )
}

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