<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;" 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="unit" label="单位" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" align="center"></el-table-column>
      <el-table-column prop="isVisible" label="是否可见" align="center">
        <template #default="scope">
          <el-switch v-model="scope.row.isVisible" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center" fixed="right">
        <template #default="{ row }">
          <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(data.code, row)">编辑</el-button>
          <el-button size="small" text type="danger" v-auth="'del'" @click="del(row)">删除</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()" />
    <attrEdit ref="editFormRef" @get-list="getList(1)"></attrEdit>
  </el-dialog>
</template>

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

const { params, tableData, getList, loading } = useSearch<any[]>(api.template.attr.list, 'Data', { keyWord: '', templateseCode: '' });

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

function show(row: any) {
  data.value = { ...row }
  isShowDialog.value = true
  params.templateseCode = 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 = (row?: any) => {
  ElMessageBox.confirm(row ? `此操作将属性：“${row.name}”，是否继续?` : `此操作将${ids.value.length}个属性`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await api.template.attr.del(row ? [row.id] : ids.value);
    ElMessage.success('删除成功');
    getList(1);
  });
};

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