<!-- 
 * @Description: 学生画像
 * @Author: syy 
 * @Date: 2024-7-24
-->
<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable ref="proTable" title="预警分析" :columns="columns" rowKey="id" :pagination="false" :request-api="abilityApi.warnGroup">
        <!-- 表格 header 按钮 -->
        <template #operation="scope">
          <s-button icon="Download" link :opt="FormOptEnums.EXPORT" @click="exportFn(scope.row)" />
        </template>
      </ProTable>
    </div>
    <el-dialog v-model="timeForm.visible" title="选择导出时间范围" :before-close="closeTime" width="600px">
      <el-form :model="timeForm" :rules="timeRules" ref="timeFormRef" label-width="100px">
        <el-row>
          <el-col :span="21">
            <el-form-item label="时间:" prop="dateArr">
              <el-date-picker
                v-model="timeForm.dateArr"
                type="daterange"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="onTimeSubmit">提交</el-button>
          <el-button @click="closeTime">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="tsx" name="SysUserPersonnel">
import { abilityApi} from "@/api";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
const timeForm:any= reactive({
  dateArr:[],
  rowItem:{},
  visible:false
});
const timeFormRef = ref();
const timeRules = ref({
  dateArr: [
    { required: true, message: "请选择导出时间范围", trigger: "change" }
  ]
});
/** 表单操作类型枚举 */
enum FormOptEnums {
  /** 导出 */
  EXPORT = "导出",
}
// 表格配置项
const columns: ColumnProps[] = [{ type: "index", label: "序号", width: 60, fixed: "left" },
  {
    prop: "cameraName",
    label: "摄像头",
    render: (scope: any) => {
      return scope.row.cameraName.join(", ");
    }
  },
  {
    prop: "name",
    label: "场景"
  },
  {
    prop: "state",
    label: "状态",
    render: (scope: any) => {
      return scope.row.state ?  <el-tag type="success">启用</el-tag> : <el-tag type="danger">禁用</el-tag>;
    }
  },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
/* 导出 */
const onTimeSubmit = ()=>{
  timeFormRef.value.validate((valid: any) => {
    if (valid) {
      abilityApi.reportExport({
        groupCode:timeForm.rowItem.code,
        startTime: timeForm.dateArr[0],
        endTime: timeForm.dateArr[1],
      }).then((res:any) => {
          console.log(res,"....UTF-8''");
          const filename:any = ref()
          filename.value = window.decodeURI(res.headers["content-disposition"].split("=")[2]);
          
          filename.value = filename.value.slice(7,-1)
          let blobUrl = window.URL.createObjectURL(res.data);
          const a = document.createElement('a');
          a.style.display = 'none';
          a.setAttribute("target", "_blank");
          a.download = filename.value
          a.href = blobUrl;
          a.click();
          a.remove();
          ElMessage({
              message: '导出成功',
              type: 'success'
            });
          closeTime();
        });
     
    } else {
      return false;
    }
  });
};
const closeTime = () =>{
  timeForm.visible = false
}
const exportFn = (row: any) => {
  timeForm.rowItem = JSON.parse(JSON.stringify(row));
  timeForm.visible = true
};

</script>
<style scoped lang="scss">
.table-box {
  width: 100%;
  height: 100%;
}
.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 14px;
}
</style>
