<template>
  <div class="withinLine_cloud_call">
    <i class="el-icon-phone" @click="letClick" @contextmenu.prevent.stop="rigClick"></i>
    <el-dialog
      :modal="true"
      title="设置联通云呼登入名"
      :visible.sync="dialogbol"
      width="700px"
      :show-close="false"
      :close-on-click-modal="false"
      :modal-append-to-body="true"
      :append-to-body="true"
    >
      <el-form :model="form" :rules="formRules" ref="ruleForm" label-width="130px" label-position="top">
        <el-form-item label="联通云呼登录名" prop="unicomIntegratedId">
          <el-input style="width: 300px" v-model="form.unicomIntegratedId"></el-input>
        </el-form-item>
        <el-form-item label="联通云呼-接听方式" prop="unicomIntegratedType">
          <el-radio-group v-model="form.unicomIntegratedType">
            <el-radio label="ExtenType">默认</el-radio>
            <el-radio label="Local">直线电话/手机</el-radio>
            <el-radio label="sip">电脑客户端</el-radio>
            <el-radio label="gateway">语音网关/IP话机</el-radio>
          </el-radio-group>
          <div>
            （<span style="color: red">选择任意一种成功即可，不成功就换个方式试试</span
            >）对应云呼平台登录界面选择的接听方式。
          </div>
          <div>（按对方平台说的两个地方都选择IP话机，可以不需要每天都登录）</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="Cancel">取 消</el-button>
        <el-button size="mini" @click="Confirm" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { commonUnicomeCall, commonUnicomeConfigSave } from '@/api/cloudCall.js'
import buttonMixin from './button_mixin.js'
import { getUserInfo } from '@/api/setting'
import { mapGetters } from 'vuex'
export default {
  mixins: [buttonMixin],
  props: {
    phone: {
      type: [String, Number],
      default: ''
    }
  },

  data() {
    return {
      dialogbol: false,
      form: {
        unicomIntegratedId: '',
        unicomIntegratedType: ''
      },
      formRules: {
        unicomIntegratedId: [{ required: true, message: '请输入', trigger: 'blur' }],
        unicomIntegratedType: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  computed: {
    ...mapGetters(['userid'])
  },
  methods: {
    letClick() {
      if (this.phone) {
        commonUnicomeCall({
          orderBaseId: this?.orderInfo?.id,
          phone: this.phone
        }).then(res => {
          this.$message({
            type: 'success',
            message: '成功'
          })
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择工程师'
        })
        return
      }
    },
    rigClick() {
      getUserInfo({ adminUserId: this.userid }).then(res => {
        this.form.unicomIntegratedId = res?.data?.unicomIntegratedId || ''
        this.form.unicomIntegratedType = res?.data?.unicomIntegratedType || ''
        this.dialogbol = true
      })
    },
    Cancel() {
      this.dialogbol = false
    },
    Confirm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          commonUnicomeConfigSave(this.form).then(res => {
            this.$message({
              type: 'success',
              message: '设置成功'
            })
            this.dialogbol = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.el-input-group__append {
  position: relative !important;
}
.withinLine_cloud_call {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  .el-icon-phone {
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    line-height: 26px;
    background-color: #409eff !important;
    color: #fff !important;
  }
}
</style>
