<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="坐席组" prop="groupcode">
        <el-input v-model="ruleForm.groupcode" :disabled="true"/>
      </el-form-item>
      <el-form-item label="ivr类型" prop="ivrtype">
        <el-radio-group v-model="ruleForm.ivrtype">
          <el-radio label="1" disabled>呼入</el-radio>
          <el-radio label="2" disabled>满意度</el-radio>
          <el-radio label="3" disabled>自动外呼</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否启用" prop="isenable">
        <el-radio-group v-model="ruleForm.isenable">
          <el-radio label="0" >不启用</el-radio>
          <el-radio label="1">启用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="ivr内容" prop="ivrcontent">
        <el-input :autosize="{ minRows: 10}" v-model="ruleForm.ivrcontent" type="textarea" placeholder="请输入ivr内容"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" >立即保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getIVRConfigure, editIVRConfigure } from '@/api/telCall/ivrConfigureManage'
// import { getSeatGroup } from '@/api/commonAPI'
export default {
  name: 'EditIvrConfigure',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        id: '',
        groupcode: '',
        ivrtype: '',
        isenable: '0',
        ivrcontent: ''
      },
      rules: {
        groupcode: [
          { required: true, message: '请选择坐席组', trigger: 'blur' }
        ],
        ivrtype: [
          { required: true, message: '请选择IVR类型', trigger: 'blur' }
        ],
        isenable: [
          { required: true, message: '请选择是否启用', trigger: 'blur' }
        ],
        ivrcontent: [
          { required: true, message: '请输入ivr内容', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.rowid) {
      this.ruleForm.id = this.rowid
      this.getDetail(this.rowid)
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const datas = {
            id: this.ruleForm.id,
            groupcode: this.ruleForm.groupcode,
            ivrtype: this.ruleForm.ivrtype,
            isenable: this.ruleForm.isenable,
            ivrcontent: this.ruleForm.ivrcontent
          }
          // 修改
          editIVRConfigure(datas).then(response => {
            this.loading = false
            if (response.state.toLowerCase() === 'success') {
              this.$parent.$layer.close(this.layerid)
              this.$parent.getList() // 重新加载父级数据
              this.$message.success('恭喜你，IVR配置信息修改成功!')
            }
          }).catch(() => {
            this.loading = false
          })
          return
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    },
    // 获取详情
    getDetail(rid) {
      getIVRConfigure(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.ruleForm.groupcode = res.groupname
          // alert(typeof (res.isenable))
          this.ruleForm.isenable = res.isenable.toString()
          this.ruleForm.ivrtype = res.ivrtype.toString()
          this.ruleForm.ivrcontent = res.ivrcontent
        }
      })
    }
  }

}
</script>

