<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-checkbox-group v-model="callType">
            <el-checkbox 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-checkbox>
            <el-checkbox 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-checkbox>
          </el-checkbox-group>
          <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',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      bgHeight: window.screen.availHeight - 104 + 'px',
      callType: [], // 0 : 未设置, 1 : 公司电话(双向呼叫), 2 : 私人电话, 多个请用逗号拼接
      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;
      that
        .$confirm('是否确认保存该设置?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          let para = {
            enterpriseId: sessionStorage.getItem('userInfoBrandId'),
            qywxEnterpriseId: JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId
          };
          if (that.callType.length) {
            para.callType = that.callType.join(',');
          } else {
            para.callType = '0';
          }
          postRequest('/haoban-task-manage-web/market/clue/web/setting-update', para)
            .then(res => {
              let resData = res.data;
              if (resData.errorCode == 1) {
                that.$message.success({
                  duration: 1000,
                  message: '保存成功！'
                });
                that.loading = false;
                that.getDeatil();
                return false;
              }
              that.loading = false;
              errMsg.errorMsg(resData);
            })
            .catch(function(error) {
              that.loading = false;
              that.$message.error({
                duration: 1000,
                message: error.message
              });
            });
        })
        .catch(() => {
          that.loading = false;
        });
    },
    getDeatil() {
      const that = this;
      let para = {
        enterpriseId: sessionStorage.getItem('userInfoBrandId'),
        qywxEnterpriseId: JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId
      };
      postRequest('/haoban-task-manage-web/market/clue/web/get-setting', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (resData.result && resData.result.callType !== '0') {
              that.callType = resData.result.callType.split(',');
            } else {
              that.callType = [];
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    brandId(newV, oldV) {
      this.getDeatil();
    }
  },
  mounted() {
    this.$emit('showTab', 3);
    this.getDeatil();
    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-checkbox {
  display: flex;
  min-height: 22px;
  >>> .el-checkbox__label {
    padding-top: 1px;
  }
}
.el-checkbox + .el-checkbox {
  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>
