<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding: 20px;">
      <el-row :gutter="24">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="300px"
          style="padding: 34px 20px 0 20px"
          @keyup.enter.native="save"
          @submit.native.prevent
        >
          <el-form-item label="分机号码:" prop="mobile">
            <el-input
              placeholder="请输入分机号码"
              v-model="form.mobile"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="CTI:" prop="cti">
            <el-input
              placeholder="请输入分机号码"
              v-model="form.cti"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="save">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import { getUserInfo, updateUserMobile } from '@/api/user/userinfo';

  export default {
    name: 'CallConfig',
    components: {},
    data() {
      return {
        // 表单数据
        form: {
          mobile: '',
          cti: ''
        },
        // 表单验证规则
        rules: {
          mobile: [
            {
              required: true,
              message: '请输入分机号码',
              trigger: 'blur'
            }
          ],
          cti: [
            {
              required: true,
              message: '请输入CTI',
              trigger: 'blur'
            }
          ]
        },
        loading: false
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    async created() {
      Object.assign(this.form, this.loginUser);
      await this.loadUserInfo();
    },
    methods: {
      loadUserInfo() {
        getUserInfo()
          .then((res) => {
            console.log(res);
            Object.assign(this.form, res);
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          updateUserMobile({ ...this.form })
            .then((res) => {
              this.loading = false;
              this.$message.success(res);
              this.loadUserInfo();
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    padding-bottom: 0;
  }
</style>
