<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="code" v-model="formData.code">
          <el-input v-model="formData.code"></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-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 { 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: {}
        }
        if (val && val.id) {
          this.getStatus(val.id)
          this.isShow = 'block'
          this.editbtn()
        }
      },
      deep: true
    }
  },
  methods: {
    ...mapMutations(['setPayloadType']),
    getStatus(id) {
      getStatus(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) {
          saveStatus(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: 'code' },
              { fieName: '说明', field: 'description' }
            ]
            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()
    }
  }
}
</script>

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