<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-24 13:54:14
 -->
<template>
  <div class="app-detail-wrap">
    <div class="task-set-content boder-box">
      <div class="task-set-cell">
        <div class="set-line-item flex">
          <el-tooltip class="item" effect="dark" content="代理商户默认关闭双向呼叫功能，如需开通请联系达摩运营或实施进行开通" placement="top-start" :open-delay="200">
            <span class="set-line-item_title  text-right"> <i style="cursor: pointer;font-style: normal;padding-bottom: 2px; border-bottom: 1px dashed rgb(47, 84, 235);" class="font-14 color-606266">话务任务拨打</i>：</span>
          </el-tooltip>
          <el-checkbox-group v-model="setObj.taskCallTypes">
            <el-checkbox :label="item.value" v-for="item in options" :key="item.value">
              <el-tooltip class="item" effect="dark" placement="top-start" :open-delay="200">
                <template slot="content">
                  <p v-for="tip in item.tooltips" :key="tip">{{ tip }}</p>
                </template>
                <i class="tooltips">{{ item.label }}</i>
              </el-tooltip>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="set-line-item font-0">
          <span class="set-line-item_title font-14 color-606266  text-right">话务任务下发：</span>
          <div class="inline-block vertical-top">
            <table class="font-14">
              <tbody>
                <tr class="el-table__row">
                  <td rowspan="1" colspan="1" class="el-table_3_column_7  ">
                    <div class="font-14 color-303133">微信会员</div>
                  </td>
                  <td rowspan="1" colspan="1" class="el-table_3_column_8  ">
                    <div class="cell">
                      <el-radio v-model="setObj.distributeTypeJudge" :label="0">分配给主门店店长</el-radio>
                      <el-radio v-model="setObj.distributeTypeJudge" :label="1">分配给专属导购</el-radio>
                    </div>
                  </td>
                </tr>
                <tr class="el-table__row">
                  <td rowspan="1" colspan="1" class="el-table_3_column_7  ">
                    <div class="font-14 color-303133">POS会员</div>
                  </td>
                  <td rowspan="1" colspan="1" class="el-table_3_column_8  ">
                    <div class="cell">
                      <el-radio v-model="setObj.posDistributeJudge" :label="0">分配给主门店店长</el-radio>
                      <el-radio v-model="setObj.posDistributeJudge" :label="1">分配给专属导购</el-radio>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- <span class="set-line-item_title font-14 color-606266">微信会员</span> -->
        </div>
        <!-- <div class="set-line-item">
          <span class="set-line-item_title font-14 color-606266"></span>
          <el-radio v-model="setObj.distributeTypeJudge" :label="0">分配给主门店店长</el-radio>
          <el-radio v-model="setObj.distributeTypeJudge" :label="1">分配给专属导购</el-radio>
        </div>
        <div class="set-line-item">
          <span class="set-line-item_title font-14 color-606266"></span>
          <span class="set-line-item_title font-14 color-606266 w-320">POS会员 <i class="font-10 color-909399">注：若无pos会员，请忽略此项设置</i></span>
        </div>
        <div class="set-line-item">
          <span class="set-line-item_title font-14 color-606266"></span>
          <el-radio v-model="setObj.posDistributeJudge" :label="0">分配给主门店店长</el-radio>
          <el-radio v-model="setObj.posDistributeJudge" :label="1">分配给专属导购</el-radio>
        </div> -->
        <div v-if="setObj.taskCallType == 2" class="set-line-item">
          <span class="set-line-item_title font-14 color-606266  text-right">话务任务条件：</span><span class="font-14 color-606266">话务任务下发后 </span> <el-input-number controls-position="right" class="w-100" v-model="setObj.giveUpJudge" placeholder="请输入内容" :step="1" :step-strictly="true" :min="0" :max="99999999"></el-input-number><span class="font-14 color-606266 p-l-10">次</span>
          <span class="font-14 color-606266">呼叫后无响应，导购可放弃该条话务任务</span>
        </div>
        <!-- <div class="set-line-item">
          <span class="set-line-item_title font-14 color-606266 text-right">话务任务释放：</span><el-checkbox v-model="setObj.relaxTaskJudge"></el-checkbox
          ><el-tooltip class="item" effect="dark" content="开启后，导购换绑导购code后，原导购code任务将被释放给门店店长" placement="top-start">
            <span :class="['font-14 color-606266 m-l-10']" style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">释放未绑定/解绑导购任务</span>
          </el-tooltip>
        </div> -->
        <div class="set-line-item">
          <span class="set-line-item_title font-14 color-606266 text-right"></span>
          <el-button type="primary" :loading="loadingBtn" @click="saveSet" :disabled="$store.state.wxEnterpriseType">保存</el-button>
        </div>
      </div>

      <div class="task-set-save m-t-30">
        <!-- <el-button type="primary" @click="saveSet">保 存</el-button> -->
      </div>
    </div>
  </div>
</template>
<script>
import { _debounce } from '@/common/js/public';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import { postRequest } from '@/api/api';
export default {
  name: 'reviewed',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      activeTab: '1',
      activeId: '1',
      activeBrand: this.brandId, // 商户(品牌) id
      options: [
        {
          label: '企业电话',
          value: '1',
          tooltips: ['1.对接第三方呼叫中心，外呼显示第三方号码，可监控通话状态。费用结算及通话记录存储于GIC计费中心；', '2.若任务创建时无双向呼叫权限，此项设置勾选也不生效']
        },
        {
          label: '私人电话',
          value: '2',
          tooltips: ['导购手机呼叫，无法监控通话状态。呼叫结算费用由导购手机自费']
        },
        {
          label: '企微会话',
          value: '3',
          tooltips: ['通过企微会话完成任务，无法监控通话状态。不产生通话费用']
        }
      ],
      setObj: {
        taskCallTypes: [],
        taskType: 1,
        overDayJudge: '',
        distributeTypeJudge: '',
        posDistributeJudge: '',
        giveUpJudge: '',
        relaxTaskJudge: false
      },
      loadingBtn: false
    };
  },
  computed: {},
  methods: {
    /**
     * 保存
     */
    saveSet: _debounce(function() {
      const that = this;
      that.loadingBtn = true;
      that.postSave();
    }, 500),
    postSave() {
      const that = this;
      let para = {
        taskCallTypes: that.setObj.taskCallTypes.join(','),
        enterpriseId: that.activeBrand,
        taskType: 1,
        overDayJudge: that.setObj.overDayJudge,
        giveUpJudge: that.setObj.giveUpJudge,
        distributeTypeJudge: that.setObj.distributeTypeJudge,
        posDistributeJudge: that.setObj.posDistributeJudge,
        relaxTaskJudge: that.setObj.relaxTaskJudge ? 1 : 0
      };
      postRequest('/haoban-app-tel-task-three-web/setting/save-task-setting', para)
        .then(res => {
          let resData = res.data;
          that.loadingBtn = false;
          if (resData.errorCode == 1) {
            showMsg.showmsg('保存成功', 'success');
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loadingBtn = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取设置数据
     */
    getData() {
      let that = this;
      let para = {
        enterpriseId: that.activeBrand,
        taskType: 1
      };
      postRequest('/haoban-app-tel-task-three-web/setting/find-task-setting', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            resData.result.relaxTaskJudge = resData.result.relaxTaskJudge == 1;
            const taskCallTypes = typeof resData.result.taskCallTypes === 'string' ? resData.result.taskCallTypes.split(',') : [];
            that.setObj = Object.assign({}, resData.result, { taskCallTypes });
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.activeBrand = newData;
        that.getData();
      }
    }
  },
  mounted() {
    let that = this;
    document.documentElement.style.backgroundColor = '#f0f2f5';
    that.$emit('showTab', '21');
    if (!!that.brandId) {
      that.getData();
    }
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {}
};
</script>
<style type="text/scss" lang="scss" scoped>
.w-100 {
  width: 100px;
}
.vertical-top {
  vertical-align: top;
}
.task-set-content {
  padding: 30px;
  .task-set-cell {
    /* padding: 30px 0; */
    .el-date-editor.el-input {
      width: 118px;
    }
  }
  .set-line-item {
    margin-bottom: 20px;
    table {
      tr {
        td {
          padding: 17px 30px;
          border: 1px solid #ebeef5;
        }
      }
    }
    .flex {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .set-line-item_title {
      display: inline-block;
      width: 120px;
      &.w-320 {
        width: 320px;
        i {
          font-style: normal;
          padding-left: 10px;
        }
      }
    }
  }
  .set-long-tip {
    display: inline-block;
    vertical-align: middle;
    max-width: 600px;
    line-height: 16px;
    white-space: pre-wrap;
  }
}
.tooltips {
  cursor: pointer;
  font-style: normal;
  padding-bottom: 2px;
  border-bottom: 1px dashed rgb(47, 84, 235);
  font-size: 14px;
  color: #606266;
}
</style>
