<template>
  <div>
    <template v-if="labDesign.renderItem.actions && labDesign.renderItem.actions.length > 0">
      <el-divider>组件事件</el-divider>
      <el-table :data="labDesign.renderItem.actions" border>
        <el-table-column prop="label" align="center" label="事件">
          <el-tag slot-scope="scope" type="warning" effect="dark">{{ scope.row.label }}</el-tag>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="props">
            <el-button type="success" circle icon="el-icon-edit" @click="() => {openEvent(props.row)}" />
            <el-button type="danger" circle icon="el-icon-delete" @click="() => {removeEvent(props.row)}" />
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="labDesign.renderItem.apis && labDesign.renderItem.apis.length > 0" >
      <el-divider>组件请求</el-divider>
      <el-table :data="labDesign.renderItem.apis" border>
        <el-table-column prop="label" align="center" label="请求">
          <el-tag slot-scope="scope" type="danger" effect="dark">{{ scope.row.label }}</el-tag>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="props">
            <el-button type="success" circle icon="el-icon-edit" @click="() => {openRequest(props.row)}" />
            <el-button type="danger" circle icon="el-icon-delete" @click="() => {removeRequest(props.row)}" />
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog :visible.sync="eventVisible" title="事件编辑" width="80%">
      <span> return new Promise((resolve) => {</span>
      <lab-code ref="codeRef" v-model="eventInfo.eventScript" :config="{language: 'javascript'}" style="height: 400px" />
      <span>})</span>
      <div style="text-align: center">
        <el-button @click="saveEvent" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="requestVisible" title="请求配置" width="80%">
      <request-config :request-info="requestInfo" @save="saveRequest"></request-config>
    </el-dialog>
  </div>
</template>

<script>
import LabDesign from "../../../mixins/LabDesign";
import RequestConfig from "./RequestConfig";

export default {
  name: "EventConfig",
  components: {RequestConfig},
  mixins: [LabDesign],
  data(){
    return {
      eventInfo: { trigger: '', eventScript: '' },
      eventVisible: false,
      defaultCode: 'const { element, modelData, $this } = args; \n//业务逻辑\n \n //返回结果\nresolve({code:200});',
      requestVisible: false,
      requestInfo: { trigger: '',params: [], filters: [] }
    }
  },
  methods: {
    openEvent(row) {
      this.eventVisible = true
      const { events } = this.labDesign.activity
      const targetEvent = events.find(item => item.trigger === row.value)
      if (targetEvent) {
        this.$Util.copyAttr(targetEvent, this.eventInfo, null, this)
      } else {
        this.eventInfo.trigger = row.value
        this.eventInfo.eventScript = this.defaultCode
      }
      const $codeRef = this.$refs.codeRef
      if ($codeRef) {
        $codeRef.setValue(this.eventInfo.eventScript)
      }
    },
    removeEvent(row){
      const { events } = this.labDesign.activity
      const index = events.findIndex(item => item.trigger === row.value)
      if (index > -1) {
        events.splice(index, 1)
      }
      this.$resultMsg(this, { code: 200, msg: '删除成功'} )
    },
    saveEvent() {
      const { events } = this.labDesign.activity
      const index = events.findIndex(item => item.trigger === this.eventInfo.trigger)
      if (index < 0) {
        events.splice(0, 0, this.$Util.copy(this.eventInfo))
      } else {
        events.splice(index, 1, this.$Util.copy(this.eventInfo))
      }
      this.eventVisible = false
    },
    openRequest(row) {
      const { requests } = this.labDesign.activity
      const targetRequest = requests.find(item => item.trigger === row.value)
      this.$Util.cleanObj(this, this.requestInfo)
      if (targetRequest) {
        this.$Util.copyAttr(targetRequest, this.requestInfo, null, this)
      } else {
        this.requestInfo.trigger = row.value
        this.requestInfo.params = [ ]
        this.requestInfo.filters = [ ]
      }
      this.requestVisible = true
    },
    removeRequest(row){
      const { requests } = this.labDesign.activity
      const index = requests.findIndex(item => item.trigger === row.value)
      if (index > -1) {
        requests.splice(index, 1)
      }
      this.$resultMsg(this, { code: 200, msg: '删除成功'} )
    },
    saveRequest(){
      const { requests } = this.labDesign.activity
      const index = requests.findIndex(item => item.trigger === this.requestInfo.trigger)
      if (index < 0) {
        requests.splice(0, 0, this.$Util.copy(this.requestInfo))
      } else {
        requests.splice(index, 1, this.$Util.copy(this.requestInfo))
      }
      this.requestVisible = false
    }
  }
}
</script>