<template>
  <appConfigPage v-if="isAppInfo" :app-info="currentAppInfo" @back-up="backUpFun"></appConfigPage>

  <div class="gl-page-content" v-else>
    <BaseTable tableName="APP_CENTER" ref="baseTableRef" hidePagination :actionList="actionList">
      <template #leftOptions>
        <div>
          <el-form inline class="search-form">
            <el-form-item label="应用搜索:" >
              <el-input v-model="appSearchName" @input="searchAppFun"></el-input>
            </el-form-item>
            <el-form-item >
              <el-button type="primary" @click="editAppInfoFun">新增应用 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #appName="{ row }">
        <div class="app-center-cell-content">
          <img v-if="row.appImage" :src="getImgPathFun(row.appImage)" width="28" class="mr10" alt="">
          <div v-else class="no-img mr5">
            <appNameBg :app-name="row.appName" :size="14"></appNameBg>
          </div>

          <span class="app-name" :title="row.appName" @click="setAppConfigInfoFun(row)">{{ row.appName }}</span>
          <!-- <el-button link type="primary" @click="setAppConfigInfoFun(row)">{{ row.appName }}</el-button> -->
        </div>
      </template>
      <template #appType="{ row }">
        <div class="app-center-cell-content flex-center">
          <el-tag v-if="row.appType === '3'" type="primary">{{ getTypeNameFun(row.appType) }}</el-tag>
          <el-tag v-else-if="row.appType === '2'" type="success">{{ getTypeNameFun(row.appType) }}</el-tag>
          <el-tag v-else-if="row.appType === '1'" type="warning">{{ getTypeNameFun(row.appType) }}</el-tag>
          <el-tag v-else type="primary">{{ getTypeNameFun(row.appType) }}</el-tag>
        </div>
      </template>
      <template #appStatus="{ row }">
        <div class="app-center-cell-content flex-center">
          <div :class="row.appStatus === '1' ? 'point success mr5' : 'point error mr5'"></div>
          <span>{{ row.appStatus === '1' ? '启用' : '禁用' }}</span>
        </div>
      </template>

      <template #appPath="{row}">
        <div class="app-center-cell-content flex-center">
          <span class="ellipsis" :title="row.appPath">{{ row.appPath }}</span>
        </div>

      </template>
      <template #operate="{ row }">
        <div class="app-center-cell-content flex-center">
          <el-button type="primary" link @click="editAppInfoFun(row)">编辑</el-button>
          <el-button type="primary" link @click="disabledAppFun(row)">{{ row.appStatus === '1' ? '禁用' : '启用'
          }}</el-button>
          <el-button type="danger" link @click="deleteAppFun(row)">删除</el-button>
        </div>
      </template>
    </BaseTable>
    <addOrEditApp
      v-if="detailVisible"
      :table-name="'APP_CENTER'"
      :current-app-info="currentAppInfo"
      @cancel="closeAddOrEditAppFun"
      @submit="updateAppInfoFun"
    ></addOrEditApp>
  </div>

</template>
<script lang="ts" setup>
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import addOrEditApp from '../application/components/addOrEditApp.vue';
import { execApi, getdeviceuuidApi, startupPlugin } from '@/api/application/application';
import appConfigPage from './components/appConfigPage.vue';
import { addApplicationApi, queryAllApplicationApi, updateApplicationApi, deleteApplicationApi } from '@/api/system/application';
import appNameBg from '@/views/task/appCenter/components/appNameBg.vue';
import { getDictionaryDataApi } from '@/api/system/systemData';

const env = import.meta.env;
const baseTableRef = ref();
const detailVisible = ref(false);
const isAppInfo = ref(false);
const tableData = ref<any>([
]);

const appSearchName = ref('');

const actionList = ref([
  {
    title: '启动',
    type: 'primary',
    click: (row:any) => {
      startAppFun(row);
    },
  },
  {
    title: '编辑',
    type: 'primary',
    click: (row:any) => {
      editAppInfoFun(row);
    },
  },
  {
    title: '启用',
    type: 'primary',
    hide: (row:any) => {
      return row.appStatus === '1';
    },
    click: (row:any) => {
      disabledAppFun(row);
    },
  },
  {
    title: '禁用',
    type: 'danger',
    hide: (row:any) => {
      return row.appStatus != '1';
    },
    click: (row:any) => {
      disabledAppFun(row);
    },
  },
  {
    title: '删除',
    type: 'danger',
    needConfirm: true,
    confirmTip: '确认删除吗？',
    click: (row:any) => {
      deleteAppFun(row);
    },
  },
]);

const setTableDataFun = async () => {

  const res: any = await queryAllApplicationApi();
  if (res && res.code === 200) {
    tableData.value = res.data.map((item: any) => {
      return {
        ...item,
        appStatus: item.appStatus.toString(),
        appType: item.appType.toString(),
      };
    });

    tableData.value = tableData.value.filter((item:any) => {
      return item.appName.includes(appSearchName.value);
    });
  }

  if (baseTableRef.value) {
    baseTableRef.value.setDataFun(tableData.value);
  }

};

const currentAppInfo = ref<any>({});
// 打开编辑应用弹窗
const editAppInfoFun = (row?: any) => {

  const uuid = localStorage.getItem('USER_UUID');

  if (uuid) {
    if (row) {
      currentAppInfo.value = row;
    } else {
      currentAppInfo.value = {};
    }
    currentAppInfo.value = row;
    detailVisible.value = true;
  } else {
    getdeviceuuidFun();

  }

  console.log('编辑应用', row);
};

const closeAddOrEditAppFun = () => {
  currentAppInfo.value = {};
  detailVisible.value = false;
};

// 禁用应用
const disabledAppFun = async (row: any) => {
  console.log('禁用应用', row);
  ElMessage.success(row.appStatus === '1' ? '应用已禁用' : '应用已启用');
  // row.status = !row.status;
  if (row.appStatus === '1') {
    row.appStatus = '0';
  } else {
    row.appStatus = '1';
  }

  const res: any = await updateApplicationApi({
    appName: row.appName,
    appType: Number(row.appType),
    appPath: row.appPath,
    appImage: (row.appImage).toString(),
    appStatus: Number(row.appStatus),
    appVersion: row.appVersion,
    appVendor: row.appVendor,
    machineCode: row.machineCode,
    comment: row.comment,
    uuid: row.uuid,
    creator: row.creator,
  });
  if (res && res.code === 200) {

  }
  await setTableDataFun();

};

// 删除应用
const deleteAppFun = async (row: any) => {
  // console.log('删除应用', row);
  // ElMessage.success('应用已删除');
  // tableData.value = tableData.value.filter((item: any) => item.appName !== row.appName);
  // if (baseTableRef.value) {
  //   baseTableRef.value.setDataFun(tableData.value);
  // }

  ElMessageBox.confirm(
    '确认要删除这个应用吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {

      const res: any = await deleteApplicationApi({
        appId: row.uuid,
      });

      if (res && res.code === 200) {
        ElMessage.success('删除成功！');
        await setTableDataFun();
      }

    })
    .catch(() => {

    });

};

const updateAppInfoFun = async (data: any) => {

  console.log(data, 'datadatadatadatadata');
  if (data?.id) {
    detailVisible.value = false;

    const res: any = await updateApplicationApi({
      appName: data.appName,
      appType: Number(data.appType),
      appPath: data.appPath,
      appImage: (data.appImage).toString(),
      appStatus: Number(data.appStatus),
      appVersion: data.appVersion,
      appVendor: data.appVendor,
      machineCode: data.machineCode,
      comment: data.comment,
      uuid: data.uuid,
      // creator: 'vu0151d',
    });
    if (res && res.code === 200) {

    }

  } else {

    const param = {

      appName: data.appName,
      appType: Number(data.appType),
      appStatus: Number(data.appStatus),
      appPath: data.appPath || '',
      appImage: data?.appImage ? (data.appImage).toString() : '',
      appVersion: data.appVersion || '',
      appVendor: data.appVendor || '',
      machineCode: localStorage.getItem('USER_UUID'),
      comment: data.comment || '',
      creator: '1980235559149838337',
    };

    const res: any = await addApplicationApi(param);
    if (res && res.code === 200) {

    }

  }
  await setTableDataFun();

  detailVisible.value = false;

};

const getImgPathFun = (fileId: any) => {
  const url = `${env.VITE_API_IMAGE_PREVIEW_URL}/data/previewImage?fileId=${fileId}`;
  return url;
};

const getdeviceuuidFun = async () => {
  try {
    const res: any = await getdeviceuuidApi();
    if (res) {
      const uuid = res
        .replace('UUID', '')
        .replace(/\ +/g, '')
        .replace(/[\r\n]/g, '');

      localStorage.setItem('USER_UUID', uuid);
    }
  } catch (error) {
    console.log(error);

    startupPlugin();
  }
};

const setAppConfigInfoFun = (row: any) => {
  currentAppInfo.value = row;
  isAppInfo.value = true;
};

const backUpFun = () => {
  isAppInfo.value = false;

  nextTick(() => {
    baseTableRef.value.setDataFun(tableData.value);

  });
};

const timer:any = ref(null);

const searchAppFun = async () => {
  if (timer.value) {
    clearTimeout(timer.value);
  }

  timer.value = setTimeout(async () => {
    await setTableDataFun();
  }, 1000);

};

const startAppFun = async (data: any) => {

  await getdeviceuuidFun();

  const uuid = localStorage.getItem('USER_UUID');
  if (uuid) {

    const res = await execApi({
      path: data.appPath,
      param: '',
    });

    if (res) {

      ElMessage.success('应用正在启动中，请等待');

    } else {

    }
  } else {
    return;
  }

};

const appTypeList = ref<any>([]);
const getDictionaryDataFun = async () => {
  const res:any = await getDictionaryDataApi({
    dictClass: 'APP_TYPE',
  });
  if (res && res.code === 200) {
    appTypeList.value = res.data;
  }
};

const getTypeNameFun = (type:any) => {
  const str = appTypeList.value.find((item:any) => {
    return item.dictValue === type;
  })?.dictName || '';

  return str;
};

onMounted(async () => {
  await getDictionaryDataFun();
  setTableDataFun();
});

onBeforeUnmount(() => {
  clearTimeout(timer.value);
});

</script>
<style lang="scss" scoped>
.app-center-cell-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .app-name {
    width: 100px;
    text-align: left;
    cursor: pointer;
    color: #409EFF;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
  }

  .ellipsis{
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
  }

  .no-img {

    width: 28px;
    height: 28px;
    border-radius: 5px;
    overflow: hidden;
  }

  .mr5 {
    margin-right: 5px;
  }

  .mr10 {
    margin-right: 10px;
  }

  .point {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .success {
    background-color: #67C23A;
  }

  .error {
    background-color: #F56C6C;
  }
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.search-form{
.el-form-item{
  margin-bottom: 0 !important;
}
}
</style>
