<script lang="ts" setup name="TenantList">
import type { Ref } from 'vue'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import RelateDept from './relateDept.vue'
import EditTenant from './editTenant.vue'
import type { IlistQuery } from './tenant_interface'
import { delTenantSys, getTenantList } from '@/api/system/tenant'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import NormalTable from '@/components/NormalTable/index.vue'

const normalTableRef = ref()
const editTenant = ref(null) as any
const relateDept = ref(null) as any

// 查询条件
const listQuery: IlistQuery = reactive({
  tenantName: '',
  offset: 1,
  sort: 'id',
  order: 'asc',
})
// 表格表头
const columns: Ref<TableColumn[]> = ref([])
columns.value = [
  {
    text: '项目编码',
    value: 'tenantCode',
    align: 'center',
  },
  {
    text: '项目名称',
    value: 'tenantName',
    align: 'center',
  },
  {
    text: '项目联系人',
    value: 'linkPerson',
    align: 'center',
  },
  {
    text: '联系人电话',
    value: 'tel',
    align: 'center',
  },
  {
    text: '历史数据保存天数',
    value: 'clearday',
    align: 'center',
  },
  // {
  //   text: '关联组织',
  //   value: 'deptName',
  //   align: 'center',
  // },
]

const listLoading = ref(false)
const deviceModelList = ref([]) // 设备类型列表
const list = ref([]) // 表格数据列表
// 是否需要序号列
const options = reactive({
  needIndex: false,
})

// 获取数据列表
const fetchData = () => {
  listLoading.value = true
  getTenantList(listQuery).then((response) => {
    list.value = response.data
    listLoading.value = false
  })
}
fetchData()

onMounted(() => {
  normalTableRef.value.initColumnsState(false)
})

const del = (row: any) => {
  ElMessageBox.confirm(
    '确定要删除所选项目吗？',
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    delTenantSys(row.id).then((response) => {
      if (response.code === 200) {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        fetchData()
      }
    })
  })
}
// 新增
const add = () => {
  editTenant.value.initDialog('create')
}
// 修改
const edit = (row: any) => {
  editTenant.value.initDialog('update', row)
}
// 绑定组织
const makeDep = (row: any) => {
  relateDept.value.initDialog(row)
}
</script>

<template>
  <app-container>
    <search-area
      @search="fetchData"
    >
      <!-- 一般查询条件 -->
      <search-item>
        <el-input
          v-model="listQuery.tenantName"
          placeholder="项目名称"
          clearable
        />
      </search-item>
    </search-area>
    <NormalTable
      ref="normalTableRef"
      :data="list"
      :query="listQuery"
      :columns="columns"
      :list-loading="listLoading"
      :options="options"
      size="small"
    >
      <template #btns>
        <el-button size="small" @click="add">
          新增
        </el-button>
      </template>
      <template #columns>
        <el-table-column label="操作" width="140" align="center">
          <template #default="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">
              修改
            </el-button>
            <el-button type="text" size="small" @click="del(scope.row)">
              删除
            </el-button>
            <!-- <el-button type="text" size="small" @click="makeDep(scope.row)">
              关联组织
            </el-button> -->
          </template>
        </el-table-column>
      </template>
    </NormalTable>
    <EditTenant ref="editTenant" @watchChild="fetchData" />
    <RelateDept ref="relateDept" @watchChild="fetchData" />
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
</style>