<template>
  <div class="my-customer-wrap common-set-wrap">
    <div class="right-content">
      <div class="flex">
        <p class="m-r-11 font-14 color-606266">电话方式选择：</p>
        <div>
          <el-radio v-model="phoneTypes" label="1">
            <div class="m-b-21" style="display:inline-block;vertical-align:top;">
              <p class="l-h-1 m-b-5">公司电话</p>
              <p class="tip">1.对接第三方呼叫中心，外呼显示第三方号码，可监控通话状态。费用结算及通话记录存储于GIC计费中心</p>
              <p class="tip">2.若任务创建时无双向呼叫权限，此项设置勾选也不生效</p>
            </div>
          </el-radio>
          <el-radio v-model="phoneTypes" label="2" class="m-b-24">
            <div class="m-b-21" style="display:inline-block;vertical-align:top;">
              <p class="l-h-1 m-b-5">私人电话</p>
              <p class="tip">导购手机呼叫，无法监控通话状态。呼叫结算费用由导购手机自费</p>
            </div>
          </el-radio>
          <p><el-button type="primary" @click="submitForm" :loading="loading">保存</el-button><span class="font-14 color-909399 m-l-12">保存后立即生效，历史数据不变，后续下达的任务按新设置运行</span></p>
        </div>
      </div>
    </div>
    <!-- <vue-gic-footer></vue-gic-footer> -->
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'authMerchant',
  data() {
    return {
      bgHeight: window.screen.availHeight - 104 + 'px',
      phoneTypes: '1',
      loading: false
    };
  },
  computed: {},
  methods: {
    /**
     * 路由跳转
     *  @param {path} path
     */
    changeRoute(path) {
      this.$router.push(path);
    },
    submitForm() {
      const that = this;
      if (that.loading === true) {
        return false;
      }
      that.loading = true;
      let para = { ...that.formData };
      postRequest('/haoban-web/market/clue/web/setting-update', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.loading = false;
            return false;
          }
          that.loading = false;
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {},
  mounted() {
    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {
    navCrumb
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.right-content {
  padding: 33px 0 0 50px;
}
.el-radio {
  display: block;
  min-height: 22px;
}
.el-radio + .el-radio {
  margin-left: 0;
}
.m-l-12 {
  margin-left: 12px;
}
.m-r-11 {
  margin-right: 11px;
}
.m-b-5 {
  margin-bottom: 5px;
}
.m-b-21 {
  margin-bottom: 21px;
}
.m-b-24 {
  margin-bottom: 24px;
}
.font-14 {
  font-size: 14px;
}
.l-h-1 {
  line-height: 1;
}
.tip {
  font-size: 12px;
  color: #909399;
  line-height: 22px;
}
</style>
