<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="order_form">
      <el-form-item label="名称" prop="F_Name" >
        <el-input v-model="ruleForm.F_Name" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="坐席组" prop="F_ZXZCode" >
        <el-select v-model="ruleForm.F_ZXZCode" class="form_select" filterable clearable placeholder="请选择坐席组">
          <el-option v-for="item in agentGroupDataLists" :key="item.F_ZXZCode" :label="item.F_ZXZName" :value="item.F_ZXZCode"/>
        </el-select>
      </el-form-item>
      <el-form-item label="底号" prop="F_Tel">
        <el-input v-model="ruleForm.F_Tel" placeholder="请输入底号"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDictionaryValueList } from '@/api/commonAPI'
import { getSeatGroupLists } from '@/api/systemSetup/roleSetting/seatGroup'
import { addBaseNumberList, editBaseNumberList, getBaseNumberListDetail } from "@/api/systemSetup/roleSetting/baseNumberManagement"

export default {
  name: "AddOrEdit",
  props: {
    rowid: {
      type: Number,
      default: ""
    },
    layerid: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      mergeType: [],//订单类型
      agentGroupDataLists: [], //坐席组数据
      ruleForm: {
        F_ID: '',
        F_Name: '', //名称
        F_ZXZCode: '', //坐席组code
        F_Tel: '', //底号
      },
      rules: {
        F_Name: [{
          required: true,
          trigger: 'blur',
          message: '请输入名称',
        }],
        F_ZXZCode: [{
          required: true,
          trigger: 'change',
          message: '请选择坐席组',
        }],
        F_Tel: [{
          required: true,
          trigger: 'blur',
          message: '请输入底号',
        }],
      },
      loading: false
    };
  },
  created() {
    this.getAgentGroup()
    Promise.all([
    ]).then(() => {
      if (this.rowid) {
        this.ruleForm.F_ID = this.rowid
        this.getDetail(this.rowid)
      }
    });
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true;
          //添加
          if (!this.rowid) {
            addBaseNumberList(this.ruleForm).then(response => {
              this.loading = false
              if (response.state.toLowerCase() === 'success') {
                this.$parent.$layer.close(this.layerid)
                this.$parent.getList() // 重新加载父级数据
                this.$message.success('恭喜你，添加成功!')
              }
            }).catch(() => {
              this.loading = false
            })
            return
          }
          // 编辑
          editBaseNumberList(this.ruleForm)
            .then(response => {
              this.loading = false;
              if (response.state.toLowerCase() === "success") {
                this.$parent.$layer.close(this.layerid);
                this.$parent.getList(); // 重新加载父级数据
                this.$message.success("恭喜你，编辑成功!");
              }
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          this.$message.error("请输入有效的必填项信息!");
          return false;
        }
      });
    },
    // 获取订单详情
    getDetail(id) {
      this.loading = true;
      return new Promise(resolve => {
        const params = {
          id: id,
        };
        getBaseNumberListDetail(params).then(response => {
          this.loading = false;
          if (response.state.toLowerCase() === "success") {
            const res = response.data
            this.ruleForm.F_Name = res.F_Name //名称
            this.ruleForm.F_ZXZCode = res.F_ZXZCode //坐席组code
            this.ruleForm.F_Tel = res.F_Tel //底号
          }
        });
        resolve();
      });
    },
    //获取坐席组
    getAgentGroup() {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: 1, // 第几页
          pagesize: 100, // 每页几条信息
          key: '',
        }
        getSeatGroupLists(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.agentGroupDataLists = response.data.Rows
          }
        })
        resolve()
      })
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.order_form .form_select {
  width: 100%;
}
</style>