<template>
  <el-dialog
   :close-on-click-modal="false"
    title="表达式编辑器"
    :visible.sync="dialogVisible"
    width="800px"
    top="15vh"
    @close="closeDialog"
    :close-on-press-escape="false"
    append-to-body>
    <el-form ref="dialogForm" :model="dialogForm" v-loading="dialogLoading">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="simple" name="simple" v-if="exprType.length === 0 || exprType.includes('simple')">
          <div>
            <el-row class="mb-20 mt-10" v-if="messageExprType === 'ContentExpr'" style="line-height: 24px;">
              <el-col :span="1">
              <!-- {{dialogForm.messageExpr.resourceType}} -->
              <p>xslt :</p>
            </el-col>
            <el-col :span="10">
              <p class="dis-inline" v-if="dialogForm.messageExpr.resourcePath && dialogForm.messageExpr.resourceType === 'xslt' && Sxml != null">
                <el-link type="primary" @click="resourceVisible = true;types = 'xslt'">{{Sxml}}</el-link>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="ml-10"
                  @click="delResource(),Sxml = null" />
              </p>
              <p class="dis-inline" v-else>
                <span>[ 未选择任何内容 ]</span>
                <el-button type="primary" style="width: 80px; margin-left: 20px" :disabled="Sjson != null" @click="resourceVisible = true;types = 'xslt';dialogForm.messageExpr.resourceType ='xslt'">浏览
                </el-button>
              </p>
            </el-col>
              <el-col :span="1">
                <p>jslt :</p>
              </el-col>
              <el-col :span="10">
                <p class="dis-inline" v-if="dialogForm.messageExpr.resourcePath && dialogForm.messageExpr.resourceType === 'jslt' && Sjson != null">
                  <el-link type="primary" @click="resourceVisible = true;types = 'jslt'">{{Sjson}}</el-link>
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="ml-10"
                    @click="delResource(),Sjson = null" />
                </p>
                <p class="dis-inline" v-else>
                  <span>[ 未选择任何内容 ]</span>
                  <el-button type="primary" style="width: 80px; margin-left: 20px" :disabled="Jxml != null" @click="resourceVisible = true;types = 'jslt';dialogForm.messageExpr.resourceType ='jslt'">浏览
                  </el-button>
                </p>
              </el-col>
            </el-row>
            <el-input type="textarea" v-model="dialogForm.messageExpr.valueExpr" :autosize="{ minRows: 5, maxRows: 10}">
            </el-input>
          </div>
        </el-tab-pane>
        <el-tab-pane label="constant" name="constant" v-if="exprType.length === 0 || exprType.includes('constant')">
          <el-input type="textarea" v-model="dialogForm.messageExpr.valueExpr" :autosize="{ minRows: 5, maxRows: 10}">
          </el-input>
        </el-tab-pane>
        <el-tab-pane label="xquery" name="xquery" v-if="exprType.length === 0 || exprType.includes('xquery')">
          <el-row class="mb-20 mt-10" v-if="messageExprType === 'ContentExpr'" style="line-height: 24px;">
            <el-col :span="1">
              <p>xslt :</p>
            </el-col>
            <el-col :span="10">
              <p class="dis-inline" v-if="dialogForm.messageExpr.resourcePath && dialogForm.messageExpr.resourceType === 'xslt' && Xxml != null">
                <el-link type="primary" @click="resourceVisible = true;types = 'xslt'">{{Xxml}}</el-link>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="ml-10"
                  @click="delResource(),Xxml = null" />
              </p>
              <p class="dis-inline" v-else>
                <span>[ 未选择任何内容 ]</span>
                <el-button type="primary" style="width: 80px; margin-left: 20px" :disabled="Xjson != null" @click="resourceVisible = true;types = 'xslt';dialogForm.messageExpr.resourceType ='xslt'">浏览
                </el-button>
              </p>
            </el-col>
            <el-col :span="1">
              <!-- {{dialogForm.messageExpr.resourceType}} -->
              <p>jslt :</p>
            </el-col>
            <el-col :span="10">
              <p class="dis-inline" v-if="dialogForm.messageExpr.resourcePath && dialogForm.messageExpr.resourceType === 'jslt' && Xjson != null">
                <el-link type="primary" @click="resourceVisible = true;types = 'jslt'">{{Xjson}}</el-link>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="ml-10"
                  @click="delResource(),Xjson = null" />
              </p>
              <p class="dis-inline" v-else>
                <span>[ 未选择任何内容 ]</span>
                <el-button type="primary" style="width: 80px; margin-left: 20px" :disabled="Xxml != null" @click="resourceVisible = true;types = 'jslt';dialogForm.messageExpr.resourceType ='jslt'">浏览
                </el-button>
              </p>
            </el-col>
          </el-row>
          <el-input type="textarea" v-model="dialogForm.messageExpr.valueExpr" :autosize="{ minRows: 5, maxRows: 10}">
          </el-input>
        </el-tab-pane>
        <el-tab-pane label="xpath" name="xpath" v-if="exprType.length === 0 || exprType.includes('xpath')">
          <el-input type="textarea" v-model="dialogForm.messageExpr.valueExpr" :autosize="{ minRows: 5, maxRows: 10}">
          </el-input>
        </el-tab-pane>
        <el-tab-pane label="hl7" name="hl7" v-if="exprType.length === 0 || exprType.includes('simple')">
          <div>
            <el-row class="mb-20 mt-10" v-if="messageExprType === 'ContentExpr'" style="line-height: 24px;">
              <el-col :span="1">
              <!-- {{dialogForm.messageExpr.resourceType}} -->
              <p>xslt :</p>
            </el-col>
            <el-col :span="10">
              <p class="dis-inline" v-if="dialogForm.messageExpr.resourcePath && dialogForm.messageExpr.resourceType === 'xslt' && exml != null">
                <el-link type="primary" @click="resourceVisible = true;types = 'xslt'">{{exml}}</el-link>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="ml-10"
                  @click="delResource(),exml = null" />
              </p>
              <p class="dis-inline" v-else>
                <span>[ 未选择任何内容 ]</span>
                <el-button type="primary" style="width: 80px; margin-left: 20px" :disabled="ejson != null" @click="resourceVisible = true;types = 'xslt';dialogForm.messageExpr.resourceType ='xslt'">浏览
                </el-button>
              </p>
            </el-col>
              <el-col :span="1">
                <p>jslt :</p>
              </el-col>
              <el-col :span="10">
                <p class="dis-inline" v-if="dialogForm.messageExpr.resourcePath && dialogForm.messageExpr.resourceType === 'jslt' && ejson != null">
                  <el-link type="primary" @click="resourceVisible = true;types = 'jslt'">{{ejson}}</el-link>
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="ml-10"
                    @click="delResource(),ejson = null" />
                </p>
                <p class="dis-inline" v-else>
                  <span>[ 未选择任何内容 ]</span>
                  <el-button type="primary" style="width: 80px; margin-left: 20px" :disabled="exml != null" @click="resourceVisible = true;types = 'jslt';dialogForm.messageExpr.resourceType ='jslt'">浏览
                  </el-button>
                </p>
              </el-col>
            </el-row>
            <el-input type="textarea" v-model="dialogForm.messageExpr.valueExpr" :autosize="{ minRows: 5, maxRows: 10}">
            </el-input>
          </div>
        </el-tab-pane>
        <el-tab-pane label="jsonpath" name="jsonpath" v-if="exprType.length === 0 || exprType.includes('jsonpath')">
          <div>
            <el-row class="mb-20 mt-10" v-if="messageExprType === 'ContentExpr'" style="line-height: 24px;">
              <el-col :span="1">
              <!-- {{dialogForm.messageExpr.resourceType}} -->
              <p>xslt :</p>
            </el-col>
            <el-col :span="10">
              <p class="dis-inline" v-if="dialogForm.messageExpr.resourcePath && dialogForm.messageExpr.resourceType === 'xslt' && Jxml != null">
                <el-link type="primary" @click="resourceVisible = true;types = 'xslt'">{{Jxml}}</el-link>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="ml-10"
                  @click="delResource(),Jxml = null" />
              </p>
              <p class="dis-inline" v-else>
                <span>[ 未选择任何内容 ]</span>
                <el-button type="primary" style="width: 80px; margin-left: 20px" :disabled="Jjson != null" @click="resourceVisible = true;types = 'xslt';dialogForm.messageExpr.resourceType = 'xslt'">浏览
                </el-button>
              </p>
            </el-col>
              <el-col :span="1">
                <p>jslt :</p>
              </el-col>
              <el-col :span="10">
                <p class="dis-inline" v-if="dialogForm.messageExpr.resourcePath && dialogForm.messageExpr.resourceType === 'jslt' && Jjson != null">
                  <el-link type="primary" @click="resourceVisible = true;types = 'jslt'">{{Jjson}}</el-link>
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="ml-10"
                    @click="delResource(),Jjson = null" />
                </p>
                <p class="dis-inline" v-else>
                  <span>[ 未选择任何内容 ]</span>
                  <el-button type="primary" style="width: 80px; margin-left: 20px" :disabled="Jxml != null" @click="resourceVisible = true;types = 'jslt';dialogForm.messageExpr.resourceType = 'jslt'">浏览
                  </el-button>
                </p>
              </el-col>
            </el-row>
            <el-input type="textarea" v-model="dialogForm.messageExpr.valueExpr" :autosize="{ minRows: 5, maxRows: 10}">
            </el-input>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-row class="mb-20 mt-10" v-if="messageExprType === 'ContentExpr'" style="line-height: 24px;">
        <el-col :span="3">
          <p>{{dialogForm.messageExpr.resourceType}} :</p>
        </el-col>
        <el-col :span="20">
          <p class="dis-inline" v-if="dialogForm.messageExpr.resourcePath">
            <el-link type="primary" @click="resourceVisible = true">{{dialogForm.messageExpr.objname}}</el-link>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="ml-10"
              @click="dialogForm.messageExpr.resourcePath = null" />
          </p>
          <p class="dis-inline" v-else>
            <span>[ 未选择任何内容 ]</span>
            <el-button type="primary" style="width: 80px; margin-left: 20px" @click="resourceVisible = true">浏览
            </el-button>
          </p>
        </el-col>
      </el-row>
      <el-input type="textarea" v-model="dialogForm.messageExpr.valueExpr" :autosize="{ minRows: 5, maxRows: 10}">
      </el-input> -->
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
    <choose-resource-dialog
      v-model="resourceVisible"
      :resourceType="types"
      @confirm="handleResource(arguments)" />
  </el-dialog>
</template>

<script>
import ChooseResourceDialog from '@/components/resource/ChooseResourceDialog'
import { createNamespacedHelpers } from 'vuex'

const { mapGetters } = createNamespacedHelpers('app')
export default {
  name: 'WriteExpression',
  components: {
    ChooseResourceDialog
  },
  data() {
    return {
      dialogVisible: this.value,
      dialogLoading: false,
      dialogForm: {
        messageExpr: {}
      },
      activeName: 'simple',
      Sxml: null,
      Sjson: null,
      Sexpr: null,
      Xxml: null,
      Xjson: null,
      Xexpr: null,
      Jxml: null,
      Jjson: null,
      exml: null,
      ejson: null,
      Jexpr: null,
      types: null,
      resourceVisible: false,
      nnn: ''
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    exprType: {
      type: Array,
      default() {
        return []
      }
    },
    messageExprType: {
      type: String,
      default: 'BaseExpr'
    },
    messageExpr: {
      type: Object,
      default() {
        return {}
      }
    },
    tabIndex: {}
  },
  computed: {
    ...mapGetters(['payloadType'])
  },
  watch: {
    value(val) {
      this.dialogVisible = val
      if (val) {
        console.log(this.messageExprType, this.messageExpr, '你是猪吗')
        this.dialogForm.messageExpr = JSON.parse(JSON.stringify(this.messageExpr))
        console.log('hhh', this.dialogForm.messageExpr)
        console.log('hhhgggg', this.messageExprType)
        this.dialogForm.messageExpr.exprType = this.dialogForm.messageExpr.exprType ? this.dialogForm.messageExpr.exprType : this.exprType && this.exprType.length > 0 ? this.exprType[0] : 'simple'
        // if (this.messageExprType === 'ContentExpr') {
        //   this.dialogForm.messageExpr.resourceType = this.payloadType === 'xml' ? 'xslt' : this.payloadType === 'json' ? 'jslt' : ''
        // }
        // this.dialogForm.messageExpr.resourceType = this.nnn
        this.activeName = this.dialogForm.messageExpr.exprType
        this.values(this.dialogForm.messageExpr.resourceType, this.dialogForm.messageExpr.exprType, this.dialogForm.messageExpr.objname || this.dialogForm.messageExpr.valueExpr)
      }
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    delResource() {
      this.dialogForm.messageExpr.resourceId = null
      this.dialogForm.messageExpr.resourcePath = null
      this.dialogForm.messageExpr.resourceType = null
      this.dialogForm.messageExpr.objname = null
    },
    closeDialog() {
      this.$refs.dialogForm.resetFields()
    },
    handleClick(tab, event) {
      console.log('mmm', tab.name)
      // this.dialogForm.messageExpr = JSON.parse(JSON.stringify(this.messageExpr))
      // if (this.messageExprType === 'ContentExpr') {
      //   // this.nnn = this.activeName === 'xquery' ? 'xslt' : this.activeName === 'jsonpath' ? 'jslt' : ''
      //   this.dialogForm.messageExpr.resourceType = this.activeName === 'xquery' ? 'xslt' : this.activeName === 'jsonpath' ? 'jslt' : this.activeName === 'simple' ? 'simple' : ''
      // }
      this.$set(this.dialogForm.messageExpr, 'exprType', tab.name)
    },
    handleResource(data) {
      console.log(data, '查看一下传过来的数据')
      this.$set(this.dialogForm.messageExpr, 'resourcePath', data[0].path)
      this.$set(this.dialogForm.messageExpr, 'resourceId', data[0].id)
      // this.$set(this.dialogForm.messageExpr, 'objname', `${data[1].name}-${data[0].type}-${data[0].name}`)
      this.$set(this.dialogForm.messageExpr, 'objname', `${data[0].name}`)
      this.values(this.types, this.activeName, this.dialogForm.messageExpr.objname)
    },
    values(val, name, vals, expr) {
      console.log(val, name, vals)
      switch (val) {
        case 'xslt':
          if (name === 'jsonpath') {
            this.Jxml = vals
            // this.Jexpr = expr
          }
          if (name === 'xquery') {
            this.Xxml = vals
            // this.Xexpr = expr
          }
          if (name === 'simple') {
            this.Sxml = vals
            // this.Sexpr = expr
          }
          if (name === 'el7') {
            this.exml = vals
          }
          break
        case 'jslt':
          if (name === 'jsonpath') {
            this.Jjson = vals
            // this.Jexpr = expr
          }
          if (name === 'xquery') {
            this.Xjson = vals
            // this.Xexpr = expr
          }
          if (name === 'simple') {
            this.Sjson = vals
            // this.Sexpr = expr
          }
          if (name === 'el7') {
            this.ejson = vals
          }
          break
      }
    },
    async submit() {
      console.log(this.dialogForm.messageExpr, '你好')
      if (this.tabIndex || this.tabIndex === 0) { // 有index
        this.$emit('confirm', this.dialogForm.messageExpr, this.tabIndex)
      } else {
        this.$emit('confirm', this.dialogForm.messageExpr)
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
  .el-dialog__wrapper {
    /deep/ .el-dialog {
      .el-dialog__body {
        padding: 10px;
      }
    }
  }

  .el-tabs {
    /deep/ .el-tabs__header {
    }
  }

  .el-row {
    font-size: 14px !important;
  }
</style>
