<template>
    <div class="header-container">
        <div class="back-to-home" @click="backToHomeFn">
            <span><i class="awsui-iconfont">&#xe6fa;</i></span>
            <span>返回</span>
        </div>
        <div class="search-container">
            <span>
                共有{{ history.tableData.length }}条记录
            </span>
            <span>
                <el-input v-model="searchText" placeholder="请输入流程名称进行搜索">
                    <template #prefix>
                        <i class="awsui-iconfont">&#xe6e9;</i>
                    </template>
                </el-input>
            </span>
        </div>
    </div>
    <div class="main-container">
        <el-table ref="tableRef" :data="history.tableData" style="width: 100%;padding: 0 20px;">
            <el-table-column prop="serialNumber" label="序号" min-width="180" />
            <el-table-column prop="convertType" label="类型" min-width="180"
                             column-key="convertType"
                             :filters="convertTypeFilters"
                             :filter-method="filterHandlerFn"
            />
            <el-table-column prop="operatorName" label="操作人" min-width="180" />
            <el-table-column prop="operationTime" label="操作时间" min-width="180" />
            <el-table-column prop="convertCount" label="转换数量" min-width="180" />
            <el-table-column prop="repositoryNames" label="转换流程" min-width="400" />
            <el-table-column label="操作" min-width="180">
                <template #default="scope">
                    <span style="color: rgb(80,168,246);cursor: pointer" @click="openProcessListFn(scope.$index, scope.row)">查看流程清单</span>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer
                custom-class="history-detail-drawer"
                v-model="drawer.visible"
                :title="drawer.title"
                :direction="drawer.direction"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                size="45%"
        >
            <div class="drawer-body-container">
                <div class="drawer-body-header">
                    <span>
                        <i class="awsui-iconfont" style="color: #0d84ff">&#xe635;</i>
                        总计:
                    </span>
                    <span>
                         {{ drawer.processList.length }}支流程
                    </span>
                </div>
                <div class="drawer-body-main">
                    <el-table :data="drawer.processList" style="width: 100%" :header-row-style="drawer.headerRowStyle">
                        <el-table-column prop="serialNumber" label="序号" min-width="180" />
                        <el-table-column prop="repositoryName" label="流程名称" min-width="180" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <span style="color: rgb(80,168,246);cursor: pointer" @click="openModelFn(scope.$index, scope.row)">打开文件</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-drawer>
    </div>

</template>

<script lang="ts">
  import {defineComponent,getCurrentInstance,onMounted,ref,reactive} from 'vue';
  import {openDesigner} from "@/api/commonFun";

  export default defineComponent({
    name: "history",
    setup() {

      const { proxy: $this } = getCurrentInstance();

      const history = reactive({
        historyRecordList: [] as any,
        tableData: [] as any
      });

      const convertTypeFilters = [
        {text: 'EPC转FlowChart',sourceMethod: 'EPC',targetMethod: 'FlowChart',value: 'EPC转FlowChart'},
        {text: 'EPC转BPMN',sourceMethod: 'EPC',targetMethod: 'BPMN',value: 'EPC转BPMN'},
        {text: 'FlowChart转BPMN',sourceMethod: 'FlowChart',targetMethod: 'BPMN',value: 'FlowChart转BPMN'},
      ]

      const searchText = ref('');

      const drawer =  reactive({
        visible: false,
        title: '流程清单',
        direction: 'rtl',
        headerRowStyle: {
          paddingTop: '10px'
        },
        processList: []
      });

      // 加载历史记录信息
      const loadHistoryFn = () => {
        let param = {
          url: './jd',
          data: {
            cmd: 'com.actionsoft.apps.coe.pal.model_convert_history_record_list',
            sid: settingParam.sessionId,
            wsId: settingParam.wsId ? settingParam.wsId : "6f4e292c-1b90-4dd2-8c20-7da159cb20a5",
            teamId: settingParam.teamId
          }
        }
        $this.awsuiaxios.post(param)
          .then((ro: any) => {
            if (ro.result === 'ok'){
              history.historyRecordList = [...ro.data.recordList];
              history.tableData = [...ro.data.recordList];
            }
          })
          .catch((err: any) => {
            console.log(err)
          })
      }
      // 查看流程清单
      const openProcessListFn = (index: any,row: any) => {
        drawer.visible =  true;
        let param = {
          url: './jd',
          data: {
            cmd: 'com.actionsoft.apps.coe.pal.model_convert_history_record_detail_list',
            sid: settingParam.sessionId,
            historyId: row.historyId
          }
        }
        $this.awsuiaxios.post(param)
          .then((ro: any) => {
            // console.log('历史记录列表',ro)
            if (ro.result === 'ok'){
              drawer.processList = [];
              ro.data.detailList.forEach((item: any,index: any) => {
                item.serialNumber = index+1;
                drawer.processList.push(item);
              })
            }
          })
          .catch((err: any) => {
            console.log(err)
          })
      }

      const filterHandlerFn = (value: string, row: any, column: any) => {
        // console.log('value',value,'row',row,'column',column);
        const property = column['property']
        return row[property] === value
      }

      // 打开模型文件
      const openModelFn = (index: any,row: any) => {
        openDesigner(settingParam.teamId, row.repositoryId,settingParam.sessionId);
      }

      const backToHomeFn = () => {
        $this.$router.push('/');
      }

      onMounted(() => {
        loadHistoryFn();
      })

      return {
        history,
        searchText,
        openProcessListFn,
        convertTypeFilters,
        filterHandlerFn,
        backToHomeFn,
        drawer,
        openModelFn
      }
    }
  });
</script>

<style scoped lang="less">
    .header-container {
        padding: 15px 25px;
        .back-to-home {
            cursor: pointer;
            span {
                padding: 0 2px;
            }
        }
        .search-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
                margin: 0 30px;
            }
        }
    }
    .main-container {
        :deep(.history-detail-drawer) {
            .el-drawer__header {
                font-size: 18px;
            }
            .el-drawer__body {
                .drawer-body-container {
                    height: 100%;
                    padding: 10px 20px;
                    .drawer-body-header {
                        width: 100%;
                        height: 25px;
                        border: 1px solid skyblue;
                        border-radius: 6px;
                        background-color: rgb(228,247,254);
                        span {
                            display: inline-block;
                            line-height: 25px;
                        }
                        span:first-child {
                            margin-left: 18px;
                        }
                        span:last-child {
                            font-size: 15px;
                            font-weight: 600;
                            margin-left: 12px;
                        }
                    }
                }
            }
        }
    }
</style>