<template>
  <el-dialog
   :close-on-click-modal="false"
    title="全局变量配置"
    :visible.sync="dialogFormVisible"
    style="padding-bottom: 20px"
    :before-close="handleClose"
    append-to-body
  >
    <div class="agencyinfo">
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <div class="formGroup">
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="名称：" prop="name" v-model="formData.name">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
              <el-form-item
                label="属性名："
                prop="attributeName"
                v-model="formData.attributeName"
              >
                <el-input v-model="formData.attributeName"></el-input>
              </el-form-item>
              <el-form-item
                label="描述："
                prop="description"
                v-model="formData.description"
              >
                <el-input
                  type="textarea"
                  v-model="formData.description"
                ></el-input>
              </el-form-item>
              <el-form-item label="类型：" prop="type">
                <el-select v-model="formData.type" placeholder="请选择">
                  <el-option label="静态变量" value="static"></el-option>
                  <el-option label="外部变量" value="external"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="提供方："
                prop="provider"
                v-model="formData.provider"
                v-if="formData.type == 'external'"
              >
                <el-input v-model="formData.provider"></el-input>
              </el-form-item>
              <el-form-item
                label="变量值："
                prop="variableValue"
                v-model="formData.variableValue"
              >
                <el-input v-model="formData.variableValue"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button
type="primary"
@click="submit"
        ><span>{{ content }}</span></el-button
      >
    </span>
  </el-dialog>
</template>

<script>
// import { saveStatus, getStatus } from '@/api/esb_service'

import {
  getVariableDetail,
  saveVariableDetail
} from '@/api/esb_global_management'
import { checkFormData } from '@/utils/common'
import EsbServiceInfoMixins from '@/mixins/esb_service_info_mixins'
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('app')
export default {
  mixins: [EsbServiceInfoMixins],
  name: 'StatusList',
  data() {
    return {
      formData: {
        serviceParamsMap: {}
      },
      isShow: ''
    }
  },
  props: ['flag', 'dialogFormVisible', 'content'],
  watch: {
    currentRow: {
      handler: function(val) {
        this.formData = {
          serviceParamsMap: {}
        }
        console.log('current', val)
        if (val && val.id) {
          this.getVariableDetail(val.id)
          this.isShow = 'block'
          this.editbtn()
        }
      },
      deep: true
    }
  },
  methods: {
    ...mapMutations(['setPayloadType']),
    getVariableDetail(id) {
      getVariableDetail(id)
        .then((rt) => {
          if (rt.status === '200' && rt.data) {
            this.formData = rt.data
            if (!this.formData.serviceParamsMap) {
              this.$set(this.formData, 'serviceParamsMap', {})
            }
            this.setPayloadType(this.formData.payloadType)
          }
        })
        .catch(() => {})
    },
    async submit() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          saveVariableDetail(this.formData)
            .then((rt) => {
              if (rt.status === '200') {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$emit('confirm')
              }
            })
            .catch((err) => {
              const data = err.data || []
              const hint = [
                { fieName: '名称', field: 'name' },
                { fieName: '属性名', field: 'attributeName' },
                { fieName: '描述', field: 'description' },
                { fieName: '类型', field: 'type' },
                // { fieName: '提供方', field: 'tigongfang' },
                { fieName: '变量值', field: 'variableValue' }
              ]
              checkFormData(data, hint)
            })
        }
      })
    },
    handleClose(done) {
      this.$refs.formData.clearValidate()
      this.$emit('closedialog', '')
    },
    editbtn() {
      if (this.isShow) {
        this.$emit('closepop', '')
      }
    },
    add(formData) {
      this.formData = {
        serviceParamsMap: {}
      }
      // console.dir(this.$refs['formData'])
      // this.$refs['formData'].resetFields()
    }
  },
  mounted() {
    if (this.content == '确定') {
      this.formData = {
        serviceParamsMap: {}
      }
    }
    //   this.requestData()
  }
}
</script>

<style lang="css" scoped>
.agencyinfo {
  width: 70%;
}
</style>
