<template>
  <div class="module-cont">
    <div class="add-perate-icon" @click.stop="addPerate">
      <img :src="icon" alt="" title="审计日志">
      <img
        v-if="typeof(stageData.enable) !='undefined' && stageData.enable === false"
        class="perate-enable"
        :src="enable"
        alt=""
        title="禁用">
    </div>
    <div class="row-content">
      <p class="mb-5">
        <b>审计日志</b>
        <br />
        <span class="demonstration">阶段</span>
        <!--<el-cascader-->
        <!--  v-model="stageData.stage"-->
        <!--  :options="options"-->
        <!--  @change="handleChange"></el-cascader>-->
        <el-select
          v-model="stageData.stage"
          clearable
          placeholder="请选择"
          style="width: 70px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </p>
      <p class="mb-5">
        <b>内容</b>
        <expression
          :exprType="exprType2"
          messageExprType="ContentExpr"
          :messageExpr="stageData.contentExpr"
          @confirm="handleExpression"
        />
      </p>
      <p class="mb-5" v-if="stageData.stage === 'request'">
        <b>事务ID</b>
        <expression
          :exprType="exprType"
          messageExprType="BaseExpr"
          :messageExpr="stageData.bizContentExpr"
          @confirm="handleExpression3"
        />
      </p>
      <p class="mb-5" v-if="stageData.stage === 'request'">
        <b>调用系统</b>
        <expression
          :exprType="exprType"
          messageExprType="BaseExpr"
          :messageExpr="stageData.consumerContentExpr"
          @confirm="handleExpression4"
        />
      </p>
      <p>
        <span class="demonstration">批注</span>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-input
              type="textarea"
              :rows="2"
              v-model="stageData.label">
            </el-input>
          </el-col>
        </el-row>
      </p>
      <p>
        <span class="demonstration">状态码</span>
        <el-table
          ref="singleTable"
          :data="tableData"
          v-loading="tableLoading"
          highlight-current-row
          @current-change="handleCurrentChange"
          border
        >
          <el-table-column
            prop="name"
            label="条件"
            width="">
            <template slot-scope="scope">
              <span class="isrequired">*</span>
              <expression
                class="ml-5"
                :exprType="exprType"
                messageExprType=""
                :messageExpr="scope.row.contentExpr"
                :tabIndex="scope.$index"
                @confirm="handleExpression2" />
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态码"
            width="100">
            <template slot-scope="scope">
              <span class="isrequired">*</span>
              <el-button @click="selClick(scope.$index)" type="text" size="small">{{scope.row.code}}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="opr"
            label="操作"
            width="60">
            <template slot="header">
              <el-button type="text" icon="el-icon-circle-plus-outline" @click="addrow" size="small">操作</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-delete"
                @click="delrow(scope.$index)"
                size="small"
                style="padding-left:15px"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </p>
    </div>
    <!-- 状态码弹窗 -->
    <el-dialog
     :close-on-click-modal="false"
      title="状态码"
      :visible.sync="dialogFormVisible"
      style="padding-bottom:20px"
      :before-close="handleClose"
      append-to-body>
      <el-form ref="searchForm" :model="searchForm" @submit.native.prevent>
        <el-row class="tool-common-wrap">
          <el-col :span="24">
            <div class="search-wrap" style="margin-top:10px;margin-left:10px">
              <el-input placeholder="请输入搜索内容" v-model="searchForm.subject" clearable @keyup.enter.native="search">
                <span slot="append" @click="search"><i class="iconfont icon-sousuo2" /></span>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <div class="tableWrap">
          <div slot="header" class="clearfix" style="color:#fff">
            1
          </div>
          <!-- 表格主体 -->
          <el-table
            ref="singleTable"
            :data="tableList"
            v-loading="tableLoading"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="margin-top:10px;margin-left:0;width: 100%;">
            <el-table-column align="center" prop="name" label="名称" width="150"></el-table-column>
            <el-table-column align="center" prop="code" label="状态码" width="150"></el-table-column>
            <el-table-column align="center" prop="description" label="描述"></el-table-column>
            <el-table-column
              prop="operate"
              label="选择"
              width="150"
              align="center">
              <template slot-scope="scope">
                <el-button @click="sel(scope.row)" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer" style="color:#fff">
            1
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              :page-size="page.pageSize"
              :current-page.sync="page.pageNum"
              background
              @current-change="getDataCurrent()"
              :total="page.total">
            </el-pagination>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import icon from '@/assets/img/logging_icon_small.gif'
import enable from '@/assets/img/enable.gif'
import Expression from '../expression'
import { queryStatus } from '@/api/esb_service'
import EsbServiceListMixins from '@/mixins/esb_service_list_mixins'

import { createNamespacedHelpers } from 'vuex'

const { mapGetters } = createNamespacedHelpers('app')
export default {
  mixins: [EsbServiceListMixins],
  name: 'AuditReport',
  components: {
    Expression
  },
  data() {
    return {
      dialogFormVisible: false,
      icon: icon,
      enable: enable,
      textarea: '',
      exprType: [],
      exprType2: [],
      // exprTy peValue: 'simple',
      value: [],
      options: [{
        value: '',
        label: '请选择'
      }, {
        value: 'request',
        label: '请求'
      }, {
        value: 'response',
        label: '响应'
      }, {
        value: 'flow',
        label: '流转'
      }, {
        value: 'error',
        label: '异常'
      }
      ],
      tableData: [],
      k: 0
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    delrow(item) {
      this.k = item
      this.tableData.splice(this.k, 1)
    },
    addrow() {
      this.tableData.push({
        name: '',
        code: '请选择',
        // required:true,
        contentExpr: {
          exprType: '',
          valueExpr: ''
          // namespace:""
        }
      })
    },
    addPerate(e) {
      this.$emit('confirm', e, '0', this.index, this.list)
    },
    sel(item) {
      // this.tableData[this.k].status = item.code
      this.tableData[this.k].code = item.code
      this.dialogFormVisible = false
    },
    handleExpression(data) {
      console.log(data, '11')
      this.$set(this.stageData.contentExpr, 'resourceType', data.resourceType)
      this.$set(this.stageData.contentExpr, 'exprType', data.exprType)
      this.$set(this.stageData.contentExpr, 'valueExpr', data.valueExpr)
      this.$set(this.stageData.contentExpr, 'resourcePath', data.resourcePath)
      this.$set(this.stageData.contentExpr, 'resourceId', data.resourceId)
    },
    handleExpression3(data) {
      this.$set(this.stageData.bizContentExpr, 'exprType', data.exprType)
      this.$set(this.stageData.bizContentExpr, 'valueExpr', data.valueExpr)
    },
    handleExpression4(data) {
      this.$set(this.stageData.consumerContentExpr, 'exprType', data.exprType)
      this.$set(this.stageData.consumerContentExpr, 'valueExpr', data.valueExpr)
    },
    handleExpression2(data, index) {
      this.$set(this.tableData[index].contentExpr, 'exprType', data.exprType)
      this.$set(this.tableData[index].contentExpr, 'valueExpr', data.valueExpr)
      if (data.valueExpr.indexOf(':=') !== -1) {
        this.tableData[index].contentExpr.logicalExpr = ':='
      }
      if (data.valueExpr.indexOf(':<') !== -1) {
        this.tableData[index].contentExpr.logicalExpr = ':<'
      }
      if (data.valueExpr.indexOf(':>') !== -1) {
        this.tableData[index].contentExpr.logicalExpr = ':>'
      }
      if (data.valueExpr.indexOf(':!=') !== -1) {
        this.tableData[index].contentExpr.logicalExpr = ':!='
      }
      if (data.valueExpr.indexOf(':ct') !== -1) {
        this.tableData[index].contentExpr.logicalExpr = ':ct'
      }
    },
    // handleLocationExpr (data) {
    //   this.$set(this.stageData.locationExpr, 'exprType', data.exprType)
    //   this.$set(this.stageData.locationExpr, 'valueExpr', data.valueExpr)
    // },
    // handleExpression (data) {
    //   this.$set(this.stageData, 'messageExpr', data.valueExpr)
    //   this.exprTypeValue = data.exprType
    // },
    handleChange(value) {
      console.log('value', value)
    },
    selClick(item) {
      this.k = item
      this.dialogFormVisible = true
    },
    handleClose() {
      this.dialogFormVisible = false
    },
    async getData() {
      this.tableLoading = true
      const rt = await queryStatus({
        filters: [
          {
            key: 'name',
            opt: 'LIKE',
            type: 'S',
            value: this.searchForm.subject
          },
          {
            key: 'code',
            opt: 'LIKE',
            type: 'S',
            value: this.searchForm.subject
          },
          {
            key: 'description',
            opt: 'LIKE',
            type: 'S',
            value: this.searchForm.subject
          }
        ],
        logic: 'or',
        orderby: 'createon',
        sort: 'desc',
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      }).catch(e => {
        this.tableLoading = false
        return Promise.reject(e)
      })

      if (rt.status === '200') {
        this.tableLoading = false
        this.tableList = rt.data.list || []
        this.page.total = rt.data.total
        return Promise.resolve(rt)
      } else {
        this.tableLoading = false
      }
    }
  },
  computed: {
    ...mapGetters(['payloadType'])
  },
  watch: {
    stageData: {
      handler: function(val) {
        if (!val.contentExpr) {
          this.$set(val, 'contentExpr', {})
        }
        if (!val.consumerContentExpr) {
          this.$set(val, 'consumerContentExpr', {})
        }
        if (!val.bizContentExpr) {
          this.$set(val, 'bizContentExpr', {})
        }
        if (!val.locationExpr) {
          this.$set(val, 'locationExpr', [])
        }
        if (!val.stage) {
          this.$set(val, 'stage', '')
        } else {
          this.value[0] = val.stage
        }
        if (val.type === 'ReportNodeDTO' && val.statusCodeTable) {
          // this.tableData=val.locationExpr
          this.tableData = val.statusCodeTable
        } else {
          this.tableData = []
          this.$set(val, 'statusCodeTable', [])
        }
      },
      deep: true,
      immediate: true
    },
    payloadType: {
      handler: function(val) {
        this.exprType2 = val === 'xml' ? ['simple', 'xquery', 'jsonpath'] : val === 'json' ? ['simple', 'xquery', 'jsonpath'] : ['simple']
        this.exprType = ['simple', 'xquery', 'jsonpath']
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .row-content {
    > p {
      line-height: 22px;
    }
  }

  .el-table {
    margin-left: 15px;
    width: 80%;
  }

  .circlebtn:hover {
    border: 2px solid #3B96FA;
  }
</style>
