<template>
  <div class="module-cont">
    <div class="add-perate-icon" @click.stop="addOperate">
      <img :src="icon" alt="" title="For Each">
      <img
        v-if="typeof(stageData.enable) != 'undefined' && stageData.enable === false"
        class="perate-enable"
        :src="enable"
        alt="禁用"
        title="禁用">
    </div>
    <div class="row-content">
      <el-row class="mb-10">
        <b>路由选项</b>
        <span>以覆盖以下默认设置：</span>
      </el-row>
      <el-row class="mb-10">
        <el-checkbox v-model="stageData.isUseUri" @change="value => uriChange(value, 'uri')">
          URI：
        </el-checkbox>
        <expression
          :exprType="['simple']"
          :messageExpr="{valueExpr: stageData.uri,exprType: this.exprTypeValue}"
          @confirm="data => handleExpression(data, 'uri')" />
        <span class="isrequired">*</span>
      </el-row>
      <!--<el-row class="mb-10">-->
      <!--  <el-checkbox v-model="stageData.ttttt">-->
      <!--    重试间隔：-->
      <!--    <el-input v-model="stageData.llllll" class="ml-5 mr-5" style="width: 120px;"></el-input>-->
      <!--   <span class="isrequired">*</span>-->
      <!--    <span>（秒）</span>-->
      <!--  </el-checkbox>-->
      <!--</el-row>-->
      <!--<el-row class="mb-10">-->
      <!--  <el-checkbox v-model="stageData.kkkkkk">-->
      <!--    重试计数：-->
      <!--    <el-input v-model="stageData.jjjjj" class="ml-5 mr-5" style="width: 120px;"></el-input>-->
      <!--    <span class="isrequired">*</span>-->
      <!--  </el-checkbox>-->
      <!--</el-row>-->
      <!-- <el-row class="mb-10">
        <b>REST选项</b>
      </el-row>
      <el-row class="mb-10">
        <el-checkbox v-model="stageData.aaaaa">
          命令动词：
        </el-checkbox>
        <el-select v-model="stageData.fffff" placeholder="请选择" style="width: 70px">
          <el-option
            v-for="item in postType"
            :key="item.value"
            :label="item.key"
            :value="item.value">
          </el-option>
        </el-select>
        <span class="isrequired">*</span>
      </el-row> -->
      <el-row class="mb-10">
        <el-checkbox v-model="stageData.isUseRelativePath" @change="value => uriChange(value, 'relativePath')">
          相对路径：
        </el-checkbox>
        <expression
          :exprType="['simple']"
          :messageExpr="{valueExpr: stageData.relativePath,exprType: this.exprTypeValue}"
          @confirm="data => handleExpression(data, 'relativePath')" />
        <span class="isrequired">*</span>
      </el-row>
      <el-row class="mb-10">
        <el-col :span="4">
        <el-checkbox v-model="stageData.isHttpMethod" @change="$forceUpdate()">
          请求方法：
        </el-checkbox>
        </el-col>
        <el-col :span="10">
        <el-radio-group v-model="httpMethod">
          <el-radio label="GET">GET</el-radio>
          <el-radio label="POST">POST</el-radio>
          <el-radio label="PUT">PUT</el-radio>
          <el-radio label="DELETE">DELETE</el-radio>
        </el-radio-group>
        </el-col>
        <el-col :span="1">
        <span class="isrequired">*</span>
        </el-col>
      </el-row>
      <!-- <el-row class="mb-10">
        <el-checkbox v-model="stageData.bbbbb">
          接受：
        </el-checkbox>
        <el-select v-model="stageData.level" placeholder="请选择" style="width: 115px">
          <el-option
            v-for="item in dataType"
            :key="item.value"
            :label="item.key"
            :value="item.value">
          </el-option>
        </el-select>
        <span class="isrequired">*</span>
      </el-row> -->
      <el-row class="mb-10">
        <el-checkbox v-model="stageData.isFormData" @change="value => objAdd(value,'f')">
          form-data：<el-button type="text" v-if="stageData.isFormData" @click="formdatas.push({})"> 添加 </el-button>
        </el-checkbox>
        <el-table
          v-if="stageData.isFormData"
          :data="formdatas"
          max-height="120"
          border
          >
          <el-table-column
            prop="key"
            label="键"
            align="center"
            >
            <template slot-scope="scope">
              <el-input type="text" @input="toFormdatas" v-model="scope.row.key"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="values"
            label="值"
            align="center"
            >
            <template slot-scope="scope">
              <el-input type="text" @input="toFormdatas" v-model="scope.row.values"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            >
            <template slot-scope="scope">
              <el-button @click.native.prevent="deleteRow(scope.$index, formdatas)" type="text" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row class="mb-10">
        <el-checkbox v-model="stageData.isQueryParam" @change="value => objAdd(value,'q')">
          queryparam：<el-button type="text" v-if="stageData.isQueryParam"  @click="queryparam.push({})"> 添加 </el-button>
        </el-checkbox>
        <!-- v-if="stageData.isQueryParam" -->
        <el-table
          v-if="stageData.isQueryParam"
          :data="queryparam"
          max-height="120"
          border
          >
          <el-table-column
            prop="key"
            label="键"
            align="center"
            >
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.key"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="values"
            label="值"
            align="center"
            >
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.values"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            >
            <template slot-scope="scope">
              <el-button @click.native.prevent="deleteRow(scope.$index, queryparam)" type="text" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
  </div>
</template>

<script>
import icon from '@/assets/img/webservice_callout.gif'
import enable from '@/assets/img/enable.gif'
import Expression from '../expression'

export default {
  name: 'ForEach',
  components: {
    Expression,
    FlowStage: () => import('../FlowStage')
  },
  data() {
    return {
      icon: icon,
      enable: enable,
      postType: [
        { key: 'get', value: 'get' },
        { key: 'put', value: 'put' },
        { key: 'post', value: 'post' },
        { key: 'delete', value: 'delete' }
      ],
      dataType: [
        { key: 'application/json', value: 'get' }
      ],
      formdatas: [],
      queryparam: [],
      httpMethod: '',
      exprTypeValue: 'simple'
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {
          uri: '',
          relativePath: '',
          isUseRelativePath: false,
          isUseUri: false,
          isFormData: false,
          isQueryParam: false,
          formdatas: [],
          queryParams: ''
        }
      }
    }
  },
  watch: {
    queryparam: {
      handler: function(val) {
        if (val.length > 0) {
          let str = ''
          val.forEach((item, index) => {
            if (item.key && item.values) {
              str += item.key
              str += '='
              str += item.values
              if (index !== (val.length - 1)) {
                str += '&'
              }
            }
          })
          this.stageData.queryParams = str
        }
      },
      deep: true,
      immediate: true
    },
    httpMethod: {
      handler: function(val) {
        if (val.length > 0) {
          this.stageData.httpmdthod = val
        }
      },
      deep: true,
      immediate: true
    },
    stageData: {
      handler: function(val) {
        console.log(val)
        if (!val.isUseUri) {
          val.isUseUri = false
        }
        if (!val.isUseRelativePath) {
          val.isUseRelativePath = false
        }
        if (!val.isFormData) {
          val.isFormData = false
        }
        if (!val.isQueryParam) {
          val.isQueryParam = false
        }
        if (!val.isHttpMethod) {
          val.isHttpMethod = false
        }
        if (val.formdatas) {
          this.formdatas = val.formdatas
        }
        if (val.httpmdthod) {
          this.httpMethod = val.httpmdthod
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    if (this.stageData.formdatas) {
      this.formdatas = this.stageData.formdatas
    }
    if (this.stageData.queryParams) {
      const i = this.stageData.queryParams.split('&')
      const io = []
      for (let ind = 0; ind < i.length; ind++) {
        const index = i[ind].indexOf('=')
        io[ind] = {
          key: i[ind].substring(0, index),
          values: i[ind].substring(index + 1, i[ind].length)
        }
      }
      this.queryparam = io
    }
  },
  methods: {
    // 1
    objAdd(val, name) {
      if (name === 'q') {
        this.$set(this.stageData, 'isQueryParam', val)
      }
      if (name === 'f') {
        this.stageData.isFormData = true
        this.$set(this.stageData, 'isFormData', val)
      }
      this.$forceUpdate()
    },
    
    toFormdatas() {
      this.stageData.formdatas = []
      this.stageData.formdatas = this.formdatas
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    handleExpression(data, type) {
      console.log('data', data)
      console.log('type', type)
      if (type === 'uri') {
        this.$set(this.stageData, 'uri', data.valueExpr)
      } else {
        this.$set(this.stageData, 'relativePath', data.valueExpr)
      }
    },
    addOperate(e) {
      this.$emit('confirm', e, '0', this.index)
    },
    uriChange(value, type) {
      console.log(value, type)
      if (value) {
        if (type === 'uri') {
          this.stageData.relativePath = ''
          this.$set(this.stageData, 'isUseUri', true)
          this.$set(this.stageData, 'isUseRelativePath', false)
          this.$forceUpdate()
        } else if (type === 'relativePath') {
          this.stageData.uri = ''
          this.$set(this.stageData, 'isUseRelativePath', true)
          this.$set(this.stageData, 'isUseUri', false)
          this.$forceUpdate()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
