<template>
  <!-- <div>
    <button v-if="true" @click="testBreakPoint">TestBreakPoint</button>
  </div> -->

  <el-row>
    <el-col :span="8">
      <span>Env</span>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple">

        <el-select v-model="env">
          <el-option v-for="item in envOpts" :key="item.env" :label="item.env" :value="item.env"></el-option>
        </el-select>
      </div>
    </el-col>
  </el-row>


  <el-row>
    <el-col :span="8">
      <span>ProjectId</span>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple">
        <!-- <span>projectId</span> -->
        <el-input v-model="projectId" />
      </div>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="8">
      <span>EmployeeId</span>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple-light">
        <el-input v-model="employeeId" />
      </div>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="8">
      <span>StartDate</span>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple-light">
        <el-input v-model="startDate" />
      </div>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="8">
      <span>DateDate</span>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple-light">
        <el-input v-model="endDate" />
      </div>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="8">
      <span>Workflows</span>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple-light">
        <el-input v-model="workflows" />
      </div>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="12">
      <div class="grid-content bg-purple-light">
        <el-button type="primary" @click="onQuerySubmit">Submit</el-button>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple-light">
        <el-button type="primary" @click="onClear">Clear</el-button>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-table :data="processMsgs">
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.data">
              <!-- <el-table-column prop="groupId"></el-table-column>
              <el-table-column prop="groupName"></el-table-column> -->
              <el-table-column v-for="(item, key) in props.row.dataTitles" :key="key" :prop="item.value"
                :label="item.label"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="component" label="Component"></el-table-column>
        <el-table-column prop="message" label="Message"></el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-light">
        <el-input v-model="rawProcessMsgs" :autosize="{ minRows: 2 }" type="textarea" />
      </div>
    </el-col>
    </el-row> -->

</template>

<script>
import axios from "axios";
// import { ipcRenderer } from "electron";
export default {
  name: "FaasAttendReplay",
  data() {
    return {
      count: 1,
      componentName: "FaasAttendReplayComponent",
      employeeId: 2020639594,
      projectId: "035C4B8C-7099-1EDD-95BB-3DF915FC4A30",
      startDate: "2023-02-01",
      endDate: "2023-02-15",
      workflows: 16,
      rawProcessMsgs: null,
      processMsgs: null,
      baseUrl: null,
      env: "PROD-Sandbox",
      envOpts: [
      //   {
      //   env: "PROD",
      //   // baseUrl: "https://faas.longfor.com/MarketCenter_ChannelSupportTeam/hit/xrobot?intent=API&tenantid=MarketCenter_ChannelSupportTeam&appid=RuntimeCalPayProject&skill=RealtimeCalPaySkillSet-CalPerfReplay"
      // },
      {
        env: "PROD-Sandbox",
        baseUrl: "https://faas.longfor.com/MarketCenter_ChannelSupportTeam/hit/xrobot?tenantid=MarketCenter_ChannelSupportTeam&appid=sandbox&skill=RuntimeCalPaySkillSet-ReplaySalaryAttendanceServiceSkillV2&intent=APIGateway&tenant_uid=renxiaoyin"
      },
      {
        env: "UAT",
        baseUrl: "http://10.231.143.223:18991/hit/xrobot?intent=APIGateway&tenantid=MarketCenter_ChannelSupportTeam&appid=RuntimeCalPayProject&skill=RealtimeCalPaySkillSet-ReplaySalaryAttendanceServiceSkillV2"
      },
      {
        env: "UAT-Sandbox",
        baseUrl: "http://10.231.143.223:18992/hit/xrobot?intent=APIGateway&tenantid=MarketCenter_ChannelSupportTeam&appid=RuntimeCalPayProject&skill=RealtimeCalPaySkillSet-ReplaySalaryAttendanceServiceSkillV2&tenant_uid=renxiaoyin"
      }]
    };
  },
  mounted() {
    console.log(this.count);
    window.ipcRenderer.receive("navigate", (param) => {
      console.log(param)
      if (param == "Performance") {
        console.log(" Go Performance")
        this.$router.push('/perf');
      }
    });
  },
  methods: {
    onToggle() {
      this.$router.push('/perf')
    },
    onClear(){
      this.processMsgs = [];

    },

    testBreakPoint() {

      this.count++;
      // console.log(this.count);
      console.log(this.baseUrl);

      axios.post("https://api-uat.longfor.com/mfp-pc/a/login", {}).then((res) => {
        console.log(res.data);
        event.sender.send("get-result", res.data);
      }).catch((err) => {
        console.log(err);
      });
    },
    onQuerySubmit() {
      console.log(this.mobilePhone);
      console.log(this.projectId);
      // var url =
      // "https://faas.longfor.com/MarketCenter_ChannelSupportTeam/hit/xrobot?intent=API&tenantid=MarketCenter_ChannelSupportTeam&appid=RuntimeCalPayProject&skill=RealtimeCalPaySkillSet-CalPerfReplay";
      var request = {
        projectId: this.projectId,
        workflows: this.workflows,
        startDate: this.startDate,
        endDate: this.endDate,
        employeeId: this.employeeId,
        companyId: "Placeholder3",
        companyName: "Placeholder1",
        projectName: "Placeholder2"

      };
      console.log(this.env)
      var ipcReceiverName = "query-attend-" + this.env;
      console.log(ipcReceiverName)
      var encodedRequest = JSON.stringify(request);
      window.ipcRenderer.send(ipcReceiverName, encodedRequest);
      window.ipcRenderer.receive("get-result", (param) => {
        console.log("ipc receive");
        console.log(param);
        var rawProcessMsgs = JSON.parse(param.rs);
        this.processMsgs = this.reformMsgs(rawProcessMsgs);
        console.log(this.processMsgs);
        this.processMsgs.forEach(item => {

          if (Array.isArray(item.data)) {
            // extract data title
            var firstRow = item.data[0];
            if (firstRow == undefined || firstRow == null) {
              item.data = [];
              item.dataTitles = [{
                value: "Result",
                label: "Result"
              }]
            }
            else {
              item.dataTitles = [];
              for (var property in firstRow) {
                if (Object.prototype.hasOwnProperty.call(firstRow, property)) {
                  item.dataTitles.push({
                    value: property,
                    label: property
                  })
                }
              }
              console.log(JSON.stringify(item.dataTitles));

            }
          }
          else {
            if (typeof (item.data) == "string" || typeof (item.data) == "number" || typeof (item.data) == "bigint" || typeof (item.data) == "boolean") {
              // set fixed data title
              item.dataTitles = [{
                value: "Result",
                label: "Result"
              }]
              item.data = [{ Result: item.data }];
            }
            else {
              item.dataTitles = [];
              item.data = [item.data];
              var firstRow2 = item.data[0];
              for (var property2 in firstRow2) {
                if (Object.prototype.hasOwnProperty.call(firstRow2, property2)) {
                  item.dataTitles.push({
                    value: property2,
                    label: property2
                  })
                }
              }
            }
          }
        });
        this.rawProcessMsgs = param.rs
      });
    },
    reformMsgs(msgs) {
      var normalizedMsgs = [];
      console.log("begin reform")
      msgs.forEach(msg => {
        if (Array.isArray(msg.data) || typeof (msg.data) == "string" || typeof (msg.data) == "number" || typeof (msg.data) == "bigint" || typeof (msg.data) == "boolean") {
          normalizedMsgs.push(msg);
        }
        else {
          if (this.isMixed(msg.data)) {
            if (msg.message == '业绩与模板相匹配') {
              console.log(1);
              var template = msg.data.template;
              var newMsg = {
                message: `业绩与模板相匹配:basicTemplateId=${template.basicId},templateCode=${template.paymentCode} subTemplateId=${template.subTemplateId}`,
                data: msg.data.performance,
                component: msg.component
              }
              console.log(2);
              normalizedMsgs.push(newMsg);
            }
            else if (msg.message == '业绩与模板不匹配') {
              var subTemplates = msg.data.template.subTemplates;
              console.log(3);
              var templateMsg = {
                message: `业绩与模板不匹配: basicTemplateId=${msg.data.template.basicId}`,
                data: subTemplates,
                component: msg.component
              };
              console.log(4);
              normalizedMsgs.push(templateMsg);
              var perfMsg = {
                message: `未匹配业绩`,
                data: msg.data.performance,
                component: msg.component
              }
              normalizedMsgs.push(perfMsg);
            } else {
              normalizedMsgs.push(msg)
            }
          }
          else {
            normalizedMsgs.push(msg);
          }
        }
      });
      console.log("end reform")
      return normalizedMsgs;


    },
    isMixed(data) {
      console.log('ismixed')
      if (data == null || data == undefined) return false;
      if (data.performance != null && data.performance != undefined && data.template != null && data.template != undefined)
        return true;
      return false;
    }
  },
};
</script>

<style scoped>

</style>