<template>
  <div>
    <p class="customEvent_tittle">自定义事件</p>
    <vxe-toolbar>
      <template #buttons>
        <el-button @click="addFuncClick">新增自定义事件</el-button>
      </template>
    </vxe-toolbar>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="'选择处理方式'"
      :visible.sync="eventTypeVisible"
      append-to-body
      class="dataset-edit-computed-fields"
      width="50%"
    >
        <el-form label-position="left" label-width="100px">
          <el-form-item label="处理方式：">
            <el-radio v-model="eventTypeRadio" :label="0">SQL模式</el-radio>
            <el-radio v-model="eventTypeRadio" :label="1">代码模式</el-radio>
            <el-radio v-model="eventTypeRadio" :label="2">jar包模式</el-radio>
          </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="eventTypeVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFuncClickonSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <customEventExpression ref="customEventExpression" :dbLinkId="cubeId" :modelId="modeId" :dbSourceId="sourceId" @onChangeExp="eventChange" />
    <customCodeMode ref="customCodeMode" :dbLinkId="cubeId" :modelId="modeId" :dbSourceId="sourceId" :eventTypeRadio="eventTypeRadio" @onChangeExp="eventChange"  />
    <div>
      <el-table ref="multipleTable" :data="eventList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" v-if="isCompont"></el-table-column>
        <el-table-column prop="eventName" label="事件名称"></el-table-column>
        <el-table-column prop="eventType" label="处理方式">
          <template slot-scope="scope">
            <span class="eventType" v-if="scope.row.eventType === 0">SQL模式</span>
            <span class="eventType" v-else-if="scope.row.eventType === 1">代码模式</span>
            <span class="eventType" v-else>jar包模式</span>
          </template>
        </el-table-column>
        <el-table-column prop="executeTiming" label="事件执行时机">
          <template slot-scope="scope">
            <span class="eventType executeTiming" v-if="scope.row.executeTiming === 1">前置执行</span>
            <span class="eventType executeTiming" v-else>后置执行</span>
          </template>
        </el-table-column>
        <el-table-column prop="eventStatus" label="是否开启">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.eventStatus" :active-value="0" :inactive-value="1" @change="onEventStatusChange($event, scope.row)"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <el-button @click="onEventLogClick(scope.row)">查看执行日志</el-button>
            <el-button @click="onEditChange(scope.row)">编辑</el-button>
            <el-button @click="onDeleteChange(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="事件执行日志" :visible.sync="dialogTableVisible" append-to-body width="70%">
        <el-table :data="eventLogData" border>
          <el-table-column property="creatorTime" label="执行时间"></el-table-column>
          <el-table-column property="buttonId" label="按钮ID"></el-table-column>
          <el-table-column property="buttonName" label="按钮名称"></el-table-column>
          <el-table-column property="execStatus" label="执行结果">
            <template slot-scope="scope">
              <span v-if="scope.row.execStatus == 0">未开始</span>
              <span v-if="scope.row.execStatus == 1">成功</span>
              <span v-else>失败</span>
            </template>
          </el-table-column>
          <el-table-column property="execLog" label="执行日志">
            <template slot-scope="scope">
              <span v-if="scope.row.execLog.length < 40"> {{ scope.row.execLog }} </span>
              <el-popover v-else placement="top-start" title="执行日志" width="500" trigger="click" :content="scope.row.execLog">
                <div class="eventLog" slot="reference">{{ scope.row.execLog }}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column property="execSql" label="执行SQL"></el-table-column>
        </el-table>
        <template>
          <pagination :total="logTotal" :page.sync="logCurrentPage" :limit.sync="logPageSize" @pagination="getLogList" />
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { addCustomEvent, customEventList, deleteCustomEvent, getEventLog } from '@/api/onlineDev/visualDev'
import customEventExpression from './customEventExpression.vue'
import customCodeMode from './customCodeMode.vue'
export default {
  props: ['cubeId', 'modelId', 'dbSourceId', 'isCompont', 'multipleSelection', 'activeName', 'isEvent'],
  components: { customEventExpression,customCodeMode },
  data() {
    return {
      isShow: false,
      modeId: '',
      sourceId: '',
      eventList: [],
      dialogTableVisible: false,
      eventLogData: [],
      logCurrentPage: 1,
      logPageSize: 10,
      logTotal: 0,
      eventLogId: '',
      multipleSelections: [],
      eventTypeVisible:false,
      eventTypeRadio:0,
    }
  },
  created() {
    this.modeId = this.modelId
    this.sourceId = this.dbSourceId
    this.init()
  },
  watch: {
    activeName: {
      deep: true,
      handler(val) {
        if (val && val === 'customClick') {
          this.init()
        }
      }
    }
  },
  methods: {
    multipass(multipleSelections) {
      customEventList(this.modeId, { current: 1, size: 1000 }).then((res) => {
        this.eventList = res.data.data.records || []
        this.$nextTick(() => {
          if (!this.eventList.length) return
          if (multipleSelections && multipleSelections.length) {
            multipleSelections.forEach((item, index) => {
              const data = this.eventList.find((event) => event.id === item.id)
              if (data) {
                this.$refs.multipleTable.toggleRowSelection(data, true)
              }
            })
          } else {
            this.$refs.multipleTable.clearSelection()
          }
        })
      })
    },
    init() {
      customEventList(this.modeId, { current: 1, size: 1000 }).then((res) => {
        this.eventList = res.data.data.records || []
      })
    },
    eventChange() {
      this.init()
    },
    handleSelectionChange(val) {
      this.$emit('select', val)
    },
    onEventStatusChange(val, row) {
      let params = {
        id: row.id,
        eventName: row.eventName,
        eventDatasourceId: row.eventDatasourceId,
        eventType: 0,
        eventStatus: val,
        eventSql: row.eventSql
      }
      addCustomEvent(this.modelId, params).then((res) => {
        this.$message({ message: res.data.msg, type: 'success', duration: 1500 })
        this.init()
      })
    },
    onEditChange(row) {
      if(row.eventType === 1 || row.eventType === 2){
        this.$refs.customCodeMode.addFuncClick(row)
      }else {
        this.$refs.customEventExpression.addFuncClick(row)
      }
    },
    onEventLogClick(row) {
      this.dialogTableVisible = true
      this.eventLogId = row.id
      this.getLogList()
    },
    getLogList() {
      let parms = {
        pageQuery: {
          pageSize: this.logPageSize,
          currentPage: this.logCurrentPage
        },
        modelId: this.modelId,
        eventId: this.eventLogId
      }
      getEventLog(parms).then((res) => {
        this.eventLogData = res.data.data.records
        this.logTotal = res.data.data.total
      })
    },
    onDeleteChange(id) {
      this.$confirm('是否删除该页签?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = new URLSearchParams()
        param.append('id', id)
        deleteCustomEvent(param).then((res) => {
          this.$message({ message: res.data.msg, type: 'success', duration: 1500 })
          this.init()
        })
      })
    },
    addFuncClick(){
      this.eventTypeVisible = true
    },
    addFuncClickonSubmit(){
      if(this.eventTypeRadio === 1 || this.eventTypeRadio === 2){
        this.$refs.customCodeMode.addFuncClick()
      }else {
        this.$refs.customEventExpression.addFuncClick()
      }
      this.eventTypeVisible = false
    },
  }
}
</script>
<style scoped lang="scss">
.customEvent_tittle {
  font-size: 18px;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 10px;
}
.eventType {
  border-radius: 10px;
  background-color: #ffba00;
  padding: 5px;
  color: #ffffff;
}
.executeTiming{
  background-color: #13ce66;
}
.eventLog {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  //鼠标悬浮字体变蓝色
  &:hover {
    color: #0d84ff;
    cursor: pointer;
  }
}
</style>
