<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="坐席组" prop="groupcode">
        <el-select v-model="ruleForm.groupcode" placeholder="请选择坐席组">
          <el-option
            v-for="item in seatOptions"
            :key="item.zxzcode"
            :label="item.zxzname"
            :value="item.zxzcode"/>
        </el-select>
      </el-form-item>
      <el-form-item label="ivr类型" prop="ivrtype">
        <el-radio-group v-model="ruleForm.ivrtype">
          <el-radio label="1">呼入</el-radio>
          <el-radio label="2" >满意度</el-radio>
          <el-radio label="3" >自动外呼</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否启用" prop="isenable">
        <el-radio-group v-model="ruleForm.isenable">
          <el-radio label="1">启用</el-radio>
          <el-radio label="0" >不启用</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 { addIVRConfigure } from '@/api/telCall/ivrConfigureManage'
import { getSeatGroup } from '@/api/commonAPI'
export default {
  name: 'AddIvrConfigure',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      seatOptions: [],
      ruleForm: {
        groupcode: '',
        ivrtype: '1',
        isenable: '1',
        ivrcontent: ''
      },
      rules: {
        groupcode: [
          { required: true, message: '请选择坐席组', trigger: 'change' }
        ],
        ivrtype: [
          { required: true, message: '请选择IVR类型', trigger: 'change' }
        ],
        isenable: [
          { required: true, message: '请选择是否启用', trigger: 'change' }
        ],
        ivrcontent: [
          { required: true, message: '请输入ivr内容', trigger: 'blur' }
        ]
      }
    }
  },
  mounted: function() {
    this.getSeatGroupSelects()
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const datas = {
            groupcode: this.ruleForm.groupcode,
            ivrtype: this.ruleForm.ivrtype,
            isenable: this.ruleForm.isenable,
            ivrcontent: this.ruleForm.ivrcontent
          }
          // 添加
          addIVRConfigure(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
        }
      })
    },
    // 获取坐席组下拉数据
    getSeatGroupSelects() {
      return new Promise(resolve => {
        getSeatGroup().then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.seatOptions = response.data
          }
        })
        resolve()
      })
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss">
	.el-form .el-select{
		width: 100%;
	}
</style>
