<script lang="ts" setup name="Process">
import { reactive, ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import type { IlistQuery } from './process'
import EditProcess from './editProcess.vue'
import DetailProcess from './detailProcess.vue'
import { getProcessList } from '@/api/system/process'
import { exportExcel } from '@/utils/exportXlsx'

const { proxy } = getCurrentInstance() as any
const active = ref('main')
const listQuery: IlistQuery = reactive({
  // number: '', // 编号
  // name: '', // 名称
  // business: '', // 关联业务
  // person: '', // 负责人
  // time: '', // 创建时间
  // status: '', // 当前流程状态,
  offset: 1,
  limit: 10,
})
const columns = ref([
  {
    text: '流程编号',
    value: 'number',
    // width: 150,
  },
  {
    text: '流程名称',
    value: 'name',
  },
  {
    text: '关联业务',
    value: 'business',
  },
  {
    text: '当前流程状态',
    value: 'status',
  },
  {
    text: '流程负责人',
    value: 'person',
  },
  {
    text: '创建时间',
    value: 'createTime',
  },
  {
    text: '流程描述',
    value: 'describe',
  },
])
const list = ref([
  {
    number: '11111',
    name: '流程1',
    business: '关联1',
    person: '负责人1',
    time: '2022-12-45 95:45:51',
    status: '废止',
    describe: '流程描述',
    offset: 1,
    limit: 20,
  },
  {
    number: '11111',
    name: '流程1',
    business: '关联1',
    person: '负责人1',
    time: '2022-12-45 95:45:51',
    status: '废止',
    describe: '流程描述',
    offset: 1,
    limit: 20,
  },
])
const total = ref(20)
const logTypeList = ref(null)
const listLoading = ref(true)
const dialogFormVisible = ref(false)
const dialogStatus = ref('')

// 获取日志数据
const fetchData = (isNowPage: boolean) => {
  listLoading.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.offset = 1
  }
  getProcessList(listQuery).then((response) => {
    // list.value = response.data.rows
    // total.value = parseInt(response.data.total)
    // listLoading.value = false
  })
}

fetchData(true)

// 查询数据
const search = () => {
  fetchData(false)
}

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size: number; page: number }) => {
  if (val && val.size) {
    listQuery.limit = val.size
  }
  if (val && val.page) {
    listQuery.offset = val.page
  }
  fetchData(true)
}

// 重置
const reset = () => {
  listQuery.number = '' // 编号
  listQuery.name = '' // 名称
  listQuery.business = '' // 关联业务
  listQuery.person = '' // 负责人
  listQuery.time = '' // 创建时间
  listQuery.status = '' // 当前流程状态,
}
// 编辑
const edit = (row: IlistQuery) => {
  console.log('编辑')
  active.value = 'edit'
}
// 详情
const detail = (row: IlistQuery) => {
  console.log('查看详情')
  active.value = 'detail'
}
// 废止
const abolish = (row: IlistQuery) => {
  console.log('废止')
}
// 删除
const del = (row: IlistQuery) => {
  console.log('删除')
}
// 编辑页面点击关闭
const close = () => {
  active.value = 'main'
}
// 导出
const exportExcelBtn = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(255, 255, 255, 0.8)',
  })
  // fetchData({ ...listQuery, limit: 9999999, offset: 1 }).then((res) => {
  //   if (res.code === 200) {
  //     exportExcel({
  //       json: res.data.rows.map((item: IlistQuery, index: number) => ({ index: index + 1, noticeNo: item.noticeNo, noticeTitle: item.noticeTitle, noticePublisher: item.noticePublisher, noticeSketch: item.noticeSketch, noticeTime: item.noticeTime })),
  //       name: '通知公告',
  //       titleArr: ['序号', '流程编号', '流程名称', '关联业务', '当前流程状态', '流程负责人', '创建时间', '流程描述'],
  //       sheetName: 'sheet1',
  //     })
  //   }
  //   loading.close()
  // }).catch((_) => {
  //   loading.close()
  // })
  exportExcel({
    json: list.value.map((item: IlistQuery, index: number) => (
      {
        index: index + 1,
        number: item.number,
        name: item.name,
        business: item.business,
        status: item.status,
        person: item.person,
        time: item.time,
        describe: item.describe,
      }
    )),
    name: '流程管理',
    titleArr: ['序号', '流程编号', '流程名称', '关联业务', '当前流程状态', '流程负责人', '创建时间', '流程描述'],
    sheetName: 'sheet1',
  })
  loading.close()
}
// 打印
const printObj = ref({
  id: 'print', // 需要打印元素的id
  popTitle: '流程管理', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewBeforeOpenCallback() { console.log('正在加载预览窗口！') }, // 预览窗口打开之前的callback
  previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
  beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
  openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
  closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() { console.log('点击v-print绑定的按钮了！') },
  // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
  // asyncUrl (reslove) {
  //   setTimeout(() => {
  //     reslove('http://localhost:8080/')
  //   }, 2000)
  // },
  standard: '',
  extarCss: '',
})
</script>

<template>
  <div class="process">
    <app-container>
      <!-- 主页面 -->
      <div v-if="active === 'main'">
        <!-- 筛选条件 -->
        <search-area :need-clear="true" @search="search" @clear="reset">
          <search-item>
            <el-input
              v-model.trim="listQuery.number"
              placeholder="流程编号"
              clearable
            />
          </search-item>
          <search-item>
            <el-input
              v-model.trim="listQuery.name"
              placeholder="流程名称"
              clearable
            />
          </search-item>
          <search-item>
            <el-input
              v-model.trim="listQuery.business"
              placeholder="关联业务"
              clearable
            />
          </search-item>
          <search-item>
            <el-input
              v-model.trim="listQuery.status"
              placeholder="当前流程状态"
              clearable
            />
          </search-item>
          <search-item>
            <el-input
              v-model.trim="listQuery.person"
              placeholder="流程负责人"
              clearable
            />
          </search-item>
          <search-item>
            <el-date-picker
              v-model="listQuery.time"
              type="datetime"
              value-format="YYYY/MM/DD HH:mm:ss"
              placeholder="创建时间"
            />
          </search-item>
        </search-area>
        <!-- 查询结果Table显示 -->
        <table-container>
          <template #btns-right>
            <el-button type="primary" @click="exportExcelBtn">
              导出
            </el-button>
            <el-button v-print="printObj" type="primary">
              打印
            </el-button>
          </template>

          <div class="table-area">
            <normal-table
              :data="list"
              :total="total"
              :columns="columns"
              :query="listQuery"
              :list-loading="listLoading"
              @change="changePage"
            >
              <template #preColumns>
                <el-table-column label="#" width="55" align="center">
                  <template #default="scope">
                    {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
                  </template>
                </el-table-column>
              </template>
              <template #columns>
                <el-table-column label="操作" width="200" align="center">
                  <template #default="scope">
                    <el-button type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
                      编辑
                    </el-button>
                    <el-button type="primary" link size="small" class="table-text-button" @click="detail(scope.row)">
                      详情
                    </el-button>
                    <el-button type="primary" link size="small" class="table-text-button" @click="abolish(scope.row)">
                      废止
                    </el-button>
                    <el-button type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </template>
            </normal-table>
          </div>
        </table-container>
      </div>
      <!-- 编辑 -->
      <div v-if="active === 'edit'">
        <edit-process @close="close" />
      </div>
      <!-- 详情 -->
      <div v-if="active === 'detail'">
        <detail-process @close="close" />
      </div>
    </app-container>
  </div>
</template>

<style lang="scss" scoped>
.process {
  .table-area {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
    border-radius: 7px;
  }
}
</style>

<style lang="scss">
  .list-login-log {
    .el-button + .el-button {
      margin-top: -10px;
    }
  }

  .el-message-box {
    overflow: auto;
  }
</style>