<template>
  <el-dialog title="绑定设备" v-model="isShowDialog" width="1200">
    <el-divider content-position="left" style="margin-top: 0;">设备数据过滤器模板信息</el-divider>
    <el-descriptions :column="3" border>
      <el-descriptions-item label="模板名称">{{ data.name }}</el-descriptions-item>
      <el-descriptions-item label="模板编码">{{ data.code }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ data.updatedAt }}</el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left" style="margin-top: 30px;">绑定设备</el-divider>
    <div class="flex-row"><span></span> <el-button type="primary" size="small" v-auth="'add'" @click="addOrEdit(data.code)">绑定设备</el-button></div>
    <el-table :data="tableData" style="width: 100%;margin-top: 20px;" max-height="50vh" v-loading="loading">
      <el-table-column prop="name" label="设备名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="key" label="设备编码" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="productName" label="所属产品" align="center"></el-table-column>
      <el-table-column label="操作" width="120" align="center" fixed="right">
        <template #default="{ row }">
          <el-button size="small" text type="danger" v-auth="'del'" @click="del(row.key)">解绑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" /> -->
    <bindDeviceForm ref="editFormRef" :hasBindKeys="hasBindKeys" @get-list="getList(1)"></bindDeviceForm>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import api from '/@/api/projects';
import bindDeviceForm from './bindDeviceForm.vue';
import { useSearch } from '/@/hooks/useCommon';
import { ElMessageBox, ElMessage } from 'element-plus';

const { params, tableData, getList, loading } = useSearch<any[]>(api.template.getBindDevices, '', { code: '' });

const isShowDialog = ref(false);
const editFormRef = ref();
const data = ref<any>({});

const hasBindKeys = computed(() => {
  return tableData.value.map(item => item.key);
});

function show(row: any) {
  data.value = { ...row }
  isShowDialog.value = true
  params.code = row.code
  getList();
}

const addOrEdit = (code: string, row?: any) => {
  editFormRef.value.open(code, row);
};

const handleStatusChange = (row: any) => {
  let text = row.isVisible === 1 ? '设置可见' : '设置不可见';
  ElMessageBox.confirm('确认要' + text + '属性：【' + row.name + '】吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(function () {
      return api.template.attr.editIsVisible({ id: row.id, isVisible: row.isVisible });
    })
    .then(() => {
      ElMessage.success(text + '成功');
    })
    .catch(function () {
      row.isVisible = row.isVisible === 0 ? 1 : 0;
    });
};

const del = async (code: string) => {
  await api.template.unBindDevices({ code: params.code, deviceKeys: [code] });
  ElMessage.success('删除成功');
  getList(1);
};

defineExpose({ show })
</script>
<style scoped lang="scss">
::v-deep .dialog-content-wrapper {
  max-height: 60vh;
  overflow-y: auto;
}
</style>
