<template>
  <div class="evaluate-set">
    <el-form>
      <el-form-item>
        <dm-sub-title type="fill">订单评价设置</dm-sub-title>
      </el-form-item>
      <el-form-item>
        <el-switch v-model="formData.guideReplyFlag" :active-value="1" :inactive-value="0"></el-switch>
        <span class="switch-label">禁止订单关联导购回复评价</span>
        <p class="switch-tip">&nbsp;开启后，订单关联导购不可回复评价</p>
      </el-form-item>
      <el-form-item>
        <el-switch v-model="formData.allOrderFlag" :active-value="1" :inactive-value="0"></el-switch>
        <span class="switch-label">允许店员查看所有订单评价</span>
      </el-form-item>
      <el-form-item>
        <dm-sub-title type="fill">不良评价回访设置</dm-sub-title>
      </el-form-item>
      <el-form :model="formData" :rules="formRules" ref="formData" label-width="120px">
        <el-form-item label="不良评价拨打" prop="taskCallTypes">
          <el-checkbox-group v-model="formData.taskCallTypes">
            <el-checkbox v-for="el in callTypes" :key="el.value" :label="el.value">
              {{ el.label }}
              <el-tooltip placement="top">
                <template slot="content">
                  <p v-for="(tip, index) in el.tooltips" :key="index">{{ tip }}</p>
                </template>
                <i class="call-type-icon iconfont-components3 icon-cp-QuestionCircleOutlined"></i>
              </el-tooltip>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="任务分配" prop="distributeCustomerJudge">
          <el-radio-group v-model="formData.distributeCustomerJudge">
            <el-radio :label="1">
              分配给消费门店店长
              <el-tooltip class="item" effect="dark" content="勾选此项，不良评价回访任务将分配给产生该笔消费订单的所在门店店长" placement="top">
                <i class="call-type-icon iconfont-components3 icon-cp-QuestionCircleOutlined"></i>
              </el-tooltip>
            </el-radio>
            <el-radio :label="2">
              分配给专属导购
              <el-tooltip class="item" effect="dark" content="勾选此项，不良评价回访任务将分配给产生该笔消费订单的会员的专属导购" placement="top">
                <i class="call-type-icon iconfont-components3 icon-cp-QuestionCircleOutlined"></i>
              </el-tooltip>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="逾期设置" prop="overDayJudge">
          <div class="delay-config">
            不良评价回访下发后<el-input-number class="delay-count" controls-position="right" v-model="formData.overDayJudge" placeholder="请输入内容" :step="1" :step-strictly="true" :min="0" :max="99999999"></el-input-number>天
            <p class="delay-tip">注：0天即为当天下发，当天完成，1天即为当天下发，次日24：00之前完成</p>
          </div>
        </el-form-item>
      </el-form>
    </el-form>
    <hb-form-bottom v-if="$getButtonLimit($buttonCode.saveEvaluateSet)">
      <el-button :limit-code="$buttonCode.saveEvaluateSet" type="primary" :loading="loading" @click="onSave">保存</el-button>
    </hb-form-bottom>
  </div>
</template>
<script>
import errMsg from '@/common/js/error';
import { postRequest } from '@/api/api';
export default {
  name: 'evaluate-set',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    const valiDistributeCustomer = (rules, value, callback) => {
      if (value != 1 && value != 2) {
        return callback(new Error('请设置任务分配'));
      }
      callback();
    };
    return {
      wxEnterpriseRelatedId: sessionStorage.getItem('userInfos') ? JSON.parse(sessionStorage.getItem('userInfos')).wxEnterpriseId : '',
      formData: {
        enterpriseId: '',
        guideReplyFlag: 0, // 导购回复状态1不可回复0可回复
        allOrderFlag: 0, // 店员查看所有订单评价，1:是，0:否
        taskCallTypes: [],
        distributeCustomerJudge: '',
        overDayJudge: 2
      },
      formRules: {
        distributeCustomerJudge: { required: true, validator: valiDistributeCustomer, trigger: 'blur' },
        overDayJudge: { required: true },
        taskCallTypes: { required: true, message: '请选择拨打方式', trigger: 'change' }
      },
      callTypes: [
        {
          label: '企业电话',
          value: '1',
          tooltips: ['1.对接第三方呼叫中心，外呼显示第三方号码，可监控通话状态。费用结算及通话记录存储于GIC计费中心；', '2.若任务创建时无双向呼叫权限，此项设置勾选也不生效']
        },
        {
          label: '私人电话',
          value: '2',
          tooltips: ['导购手机呼叫，无法监控通话状态。呼叫结算费用由导购手机自费']
        },
        {
          label: '企微会话',
          value: '3',
          tooltips: ['通过企微会话完成任务，无法监控通话状态。不产生通话费用']
        }
      ],
      loading: false
    };
  },
  methods: {
    onSave() {
      this.loading = true;
      this.$refs.formData.validate(vali => {
        if (!vali) {
          this.loading = false;
          return;
        }
        const { enterpriseId, guideReplyFlag, allOrderFlag, taskCallTypes, distributeCustomerJudge, overDayJudge } = this.formData;
        postRequest('/haoban-app-tel-task-three-web/setting/save-task-setting', {
          enterpriseId,
          guideReplyFlag,
          allOrderFlag,
          taskCallTypes: taskCallTypes.join(','),
          distributeCustomerJudge,
          overDayJudge,
          taskType: 0
        })
          .then(res => {
            const { errorCode } = res.data || {};
            if (errorCode != 1) {
              return errMsg.errorMsg(res.data);
            }
            this.$message.success('保存成功');
          })
          .finally(() => {
            setTimeout(() => (this.loading = false), 100);
          });
      });
    },
    getConfig() {
      postRequest('/haoban-app-tel-task-three-web/setting/find-task-setting', { enterpriseId: this.formData.enterpriseId, taskType: 0 }).then(res => {
        const { errorCode, result } = res.data || {};
        if (errorCode != 1) {
          return errMsg.errorMsg(res.data);
        }
        Object.assign(this.formData, {
          guideReplyFlag: result.guideReplyFlag,
          allOrderFlag: result.allOrderFlag,
          taskCallTypes: typeof result.taskCallTypes == 'string' ? result.taskCallTypes.split(',') : [],
          distributeCustomerJudge: result.distributeCustomerJudge,
          overDayJudge: result.overDayJudge
        });
      });
    }
  },
  created() {
    this.formData.enterpriseId = this.brandId;
    this.getConfig();
  }
};
</script>
<style lang="scss" scoped>
.evaluate-set {
  padding: 20px;
  .switch-label {
    margin-left: 16px;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
  }
  .switch-tip {
    padding-left: 56px;
    font-size: 12px;
    font-weight: 400;
    color: #909399;
    line-height: 17px;
  }
  .call-type-icon {
    font-size: 12px;
    color: #606266;
  }
  .delay-config {
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    .delay-count {
      margin: 0 10px;
      width: 115px;
    }
    .delay-tip {
      margin-top: 5px;
      font-size: 12px;
      font-weight: 400;
      color: #909399;
      line-height: 17px;
    }
  }
}
</style>
