<template>
  <el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑资产关系' : '新增资产关系'}`" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="dialog-wrapper" v-if="showDialog">
      <el-form class="inline-form" ref="formRef" :model="formData" :rules="ruleForm" label-width="auto">
        <el-form-item label="选择角色" prop="roleId">
          <el-cascader :options="roleData" :props="{
            checkStrictly: true, multiple: false, emitPath: false, value: 'id', label: 'name'
          }" placeholder="请选择角色" clearable class="w100" disabled v-model="formData.roleId">
            <template #default="{ node, data }">
              <span>{{ data.name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="已选设备" prop="deviceKeys">
          <el-tag v-for="name in assetName" class="mr-2">{{ name }} </el-tag>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%" row-key="id" @selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column type="selection" reserve-selection width="55" align="center" />
        <el-table-column prop="deviceName" label="设备名称" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deviceKey" label="设备KEY" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deviceNumber" label="设备编码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deviceCategory" label="设备类型" show-overflow-tooltip></el-table-column>
        <el-table-column prop="installTime" label="安装时间" width="160" align="center"></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()" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import api from '/@/api/device'
import system from '/@/api/system';
import { useSearch } from '/@/hooks/useCommon'
import { ruleRequired } from '/@/utils/validator';
import { ElMessage } from 'element-plus';
import { deepClone } from '/@/utils/other';

const emit = defineEmits(['getList']);

const showDialog = ref(false);
const formRef = ref();
const roleData = ref([]);
const assetName = ref<string[]>([]);
const baseForm = {
  id: undefined,
  roleId: '',
  deviceKeys: [],
};

const formData = reactive<any>(deepClone(baseForm));

const ruleForm = {
  roleId: [ruleRequired('角色不能为空')],
  deviceKeys: [ruleRequired('设备不能为空')],
};

const { params, tableData, getList, loading } = useSearch<any[]>(api.dev_asset.getList, 'Data', { pageSize: 10 })
getList()

const handleSelectionChange = (selection: any[]) => {
  formData.deviceKeys = selection.map((item) => item.deviceKey);
  assetName.value = selection.map((item) => item.deviceName);
};

const onSubmit = async () => {
  await formRef.value.validate();
  await api.assetRelationship.bind(formData);
  ElMessage.success('操作成功');
  resetForm();
  showDialog.value = false;
  emit('getList');
};

const resetForm = async () => {
  Object.assign(formData, deepClone(baseForm));
  assetName.value = []
  formRef.value && formRef.value.resetFields();
};

const open = async (roleId: string) => {
  resetForm();
  showDialog.value = true;
  formData.roleId = roleId;
  //获取所有的角色
  system.role.getList({ status: 1 }).then((resp: any) => {
    roleData.value = resp;
  })
};

defineExpose({ open });
</script>
<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 320px;
}
</style>