<route lang="yaml">
  name: analysisReports
  </route>

<script lang="ts" setup name="analysisReports">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import Table from '@/components/Table/index.vue'
import TableTools from '@/components/Tools/table_tools.vue'
import {getAnalysisReportList,delAnalysisRepor,updateAnalysisRepor} from "@/api/modules/dataMetaService"
import { getImageContent } from "@/api/modules/queryService";
import Dialog from '@/components/Dialog/index.vue'
import { getDownloadUrl, download } from "@/utils/common";
import { useRouter } from 'vue-router';
const router = useRouter()
const page = ref({
  limit: 50,
  curr: 1,
  sizes: [
    { label: "10", value: 10 },
    { label: "50", value: 50 },
    { label: "100", value: 100 },
    { label: "150", value: 150 },
    { label: "200", value: 200 },
  ],
  analysisReportName: ''
});
const { proxy } = getCurrentInstance() as any;
const tableInfo = ref({
  id: 'analysis-reports-table',
  fields: [
    { label: "序号", type: "index", width: 56, align: "center" },
    { label: "血缘关系名称", field: "analysisReportName", width: 150 },
    { label: "数据源中文名称", field: "databaseChName", width: 150 },
    { label: "表名称", field: "table", width: 150 },
    { label: "创建人", field: "updateUserName", width: 140 },
    { label: "创建时间", field: "updateTime", width: 180 }
  ],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 185,
    fixed: 'right',
    btns: (scope) => {
      let btnsArr: any = [
        { label: "查看", value: "view" },
        { label: "下载", value: "export" },
        { label: "重命名", value: "rename" },
        { label: "删除", value: "delete" },
      ]
      return btnsArr;
    },
  },
  loading: false
})

const currTableData: any = ref({});
const formItems: any = ref([
 {
    label: '血缘关系名称',
    type: 'input',
    placeholder: '请输入',
    field: 'analysisReportName',
    default: '',
    clearable: true,
    required: true
  },
])
const formRules: any = ref({
  analysisReportName: [
    {
      required: true,
      message: "请填写血缘关系名称",
      trigger: "blur",
    },
  ],
})
const formInfo = ref({
  type: 'form',
  title: '',
  formInfo: {
    id: 'add-dict-form',
    items: formItems.value,
    rules: formRules.value
  }
})
const reportDialogRef = ref();
const dialogInfo = ref({
  visible: false,
  size: 500,
  direction: "column",
  header: {
    title: "重命名",
  },
  type: '',
  contents: [
    formInfo.value,
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "保存", value: "submit" },
    ],
  },
});
const rowData:any = ref({})
const tableSearchItemList: any = ref([{
  type: 'input',
  label: '',
  field: 'analysisReportName',
  default: '',
  maxlength: 50,
  placeholder: '血缘关系名称',
  clearable: true
}]);
const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  let row = scope.row;
  rowData.value = row
  currTableData.value = row;
  if (type == 'view') {
    getImageContent(row.analysisReportUrl).then((res: any) => {
    if (res && !res.msg) {
      let name = row.analysisReportUrl;
      var fileSuffix = name ? name.substring(name.lastIndexOf('.') + 1) : '';
      if (fileSuffix === 'png') { //浏览器可以支持图片和pdf预览
        let fileUrl = getDownloadUrl(res, name, fileSuffix);
        let win = window.open(fileUrl, name);
        win && (win.document.title = name);
      } else {
        download(res, row.analysisReportName, fileSuffix);
      }
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
   });
  } else if (type == 'export') {
    getImageContent(row.analysisReportUrl).then((res: any) => {
    if (res && !res.msg) {
      let name = row.analysisReportUrl;
      var fileSuffix = name ? name.substring(name.lastIndexOf('.') + 1) : '';
      download(res, row.analysisReportName, fileSuffix);
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
   });
  } else if (type == "rename") {
    dialogInfo.value.visible = true
    formItems.value[0].default = row.analysisReportName
  } else if (type == "delete") {
    open("此操作将永久删除, 是否继续?", "warning");
  }
};

const dialogBtnClick = (btn,scope)=>{
  if(btn.value==="cancel") {
    dialogInfo.value.visible = false
  } else {
    const analysisReportName = reportDialogRef.value.dialogFormRef[0].formInline.analysisReportName;
    if(analysisReportName){
      console.log(analysisReportName)
      updateAnalysisRepor({guid:rowData.value.guid,analysisReportName}).then((res:any)=>{
         if(res.code===proxy.$passCode){
          ElMessage.success("血缘关系名称修改成功！")
          getTableData()
          dialogInfo.value.visible = false
         } else {
          ElMessage.error(res.msg)
         }
      }).catch((res:any)=>{
       ElMessage.error(res.msg)
      })
    }
  }

}

const open = (msg, type) => {
  ElMessageBox.confirm(msg, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type,
  }).then(() => {
    let guid = currTableData.value.guid;
    delAnalysisRepor([guid]).then((res:any)=>{
      if(res.code===proxy.$passCode){
        getTableData()
        ElMessage.success("删除成功")
      } else {
        ElMessage.error(res.msg)
      }
    }).catch((res)=>{
        ElMessage.error(res.msg)
    })
  });
};

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  getTableData()
};


const getTableData = ()=>{
  tableInfo.value.loading = true
  getAnalysisReportList({pageIndex:page.value.curr,pageSize:page.value.limit, analysisReportName: page.value.analysisReportName}).then((res:any)=>{
     
    if(res.code===proxy.$passCode){
      tableInfo.value.data = res.data.records || []
      tableInfo.value.page.rows = res.data.totalRows
      tableInfo.value.page.curr = res.data.pageIndex
      tableInfo.value.page.limit = res.data.pageSize
      tableInfo.value.loading = false
    } else {
      ElMessage.error(res.msg)
      tableInfo.value.loading = false
    }

  })
}
const toSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    page.value.analysisReportName = '';
  } else {
    page.value.analysisReportName = val.analysisReportName;
  }
  page.value.curr = 1;
  getTableData();
};
onActivated(() => {
  getTableData()
});

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="tableSearchItemList" :init="false" searchId="report-table-search" @search="toSearch" />
    </div>
    <div class="table_panel_wrap full">
      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
    </div>
    <Dialog ref="reportDialogRef" :dialogInfo="dialogInfo" @btnClick="dialogBtnClick"  />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-overlay .el-form .el-form-item) {
    width: calc(100%);
}
</style>