<template>
  <div>
    <el-form ref="dataForm" :rules="rules" :model="callForm" status-icon label-position="right" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="电访结果" prop="callResult">
            <el-select v-model="callForm.callResult"  @change="HandleResultChange" size="mini">
              <el-option v-for="type in defaultResultOptions" :key="type.label" :label="type.value" :value="type.label" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" v-if="callForm.callResult=='9'">
          <el-form-item label="拒访原因" prop="rejectReason">
            <el-select v-model="callForm.rejectReason" size="mini" :disabled="disabledReject">
              <el-option v-for="type in defaultRejectOptions" :key="type.label" :label="type.value" :value="type.label" />
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="callForm.remark" size="mini" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="回拨时间" prop="callbackTime">
            <el-date-picker v-model="callForm.callbackTime" :disabled="disabledCallBack" type="datetime"   size="mini" />
          </el-form-item>
        </el-col>
          <el-col :span="12">  </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="回拨备注" prop="callbackRemark">
            <el-input v-model="callForm.callbackRemark" size="mini" type="text" :disabled="disabledCallBack" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
       <el-col :span="24">
          <el-form-item label="关联工单" prop="tickets">
            <el-select v-model="tickets" multiple  size="mini" style="width:100%">
              <el-option v-for="item in this.$store.state.panel.ticketList" :key="item.id" :label="item.ticketSn" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary"  size="mini" @click="handleCreate">保存</el-button>
    </div>
  </div>
</template>

<script>
import { createCalllog } from '@/api/calllog'
import panelApi from '@/api/panel'
const defaultResultMap = [
  { label: '1', value: '个人回拨' },
  { label: '2', value: '无应答' },
  { label: '3', value: '通话中' },
  { label: '4', value: '关机' },
  { label: '5', value: '停机' },
  { label: '6', value: '成功' },
  { label: '7', value: '空号' },
  { label: '8', value: '无法接通' },
  { label: '9', value: '拒访' }
]

const defaultRejectMap = [
  { label: '1', value: '接到太多' },
  { label: '2', value: '直接挂掉' },
  { label: '3', value: '不感兴趣' },
  { label: '4', value: '不信任' },
  { label: '5', value: '客户太忙' },
  { label: '6', value: '其他' }
]

export default {
  name: 'CalllogIB',
  filters: {
  },
  data() {
    return {
      defaultResultOptions: Object.assign({}, defaultResultMap),
      defaultRejectOptions: Object.assign({}, defaultRejectMap),
      disabledCallBack: true,
      disabledReject:true,
      callForm: {
        callResult: '6',
        callType: 'OB',
        callbackTime: null,
        callbackRemark: undefined,
        // builtId: 0,
        mobile:undefined,
        startTime: null,
        rejectReason: undefined
      },
      callRecords: [], // 话务保存结果id
      //ticketOptions:[],//工单list
      // tickets:[],//选中工单
      rules: {
        callResult: [{ required: true, message: '电访结果不能为空', trigger: 'blur' }],
        rejectReason: [{ required: true, message: '拒访原因不能为空', trigger: 'blur' }],
        // callbackTime: [{ required: true, message: '下次回拨时间不能为空', trigger: 'blur' }],
        // callbackRemark: [{ required: true, message: '下次回拨备注不能为空', trigger: 'blur' }]
      }
    }
  },
  created() { 
    //this.ticketOptions=this.$store.state.panel.ticketList;
    //console.info(this.ticketOptions)
  },
  computed: {
    tickets: {
      get() {
        return this.$store.state.panel.tickets;
      },
      set(value){
        this.$store.state.panel.tickets=value;
      }
    },
  },
  methods: {
    handleCreate() {
       this.$refs['dataForm'].validate((valid) => {
          if(valid){

            console.log(this.callForm);
            console.log(this.$store.state.panel);

         let params=this.callForm;
          params.builtId=this.$store.state.panel.builtId;
          params.startTime=this.$store.state.panel.startTime;
          params.customerId=this.$store.state.panel.customerId;
          params.mobile=this.$store.state.panel.customerPhone;
          params.callbackTime=this.formateDate(this.callForm.callbackTime);
          console.log(params);
       panelApi.calllogCreate({calllog:params,tickets:this.tickets})
      .then(res => {
          console.log(res.data);
             this.$message.success('保存成功');
             this.callForm={
        callResult: '6',
        callType: 'OB',
        callbackTime: null,
        callbackRemark: undefined,
        startTime: null,
        rejectReason: undefined
      };
      // 保存话务记录 callid
      hollyglobal.saveRecordEvent(res.data.data);
  //  更新客户信息
           this.$store.dispatch('CUSTOMER_DETAIL',{id:this.$store.state.panel.user.id});
           this.tickets=[];

      })
      .catch((error) => {
          console.log(error)
      })



          }
        });
      
    },
    updateUser() {

    },
    HandleResultChange(value) {
      this.callForm.rejectReason = undefined
      if (value == '1') {
        this.disabledCallBack = false
        // this.callForm.callbackTime = Date.now() + 3 * 60 * 60 * 1000
        this.callForm.callbackTime = new Date(new Date().getTime() + 3 * 60 * 60 * 1000);
        this.callForm.callbackRemark = undefined
      } else {
        this.disabledCallBack = true
        this.callForm.callbackTime = null
        this.callForm.callbackRemark = undefined
      }

      if (value == '9')// 拒访
      { this.disabledReject = false }
    },
    handleCall(mobile) { 
      console.info(mobile)
    }
  }
}
</script>

<style>
.el-table th.gutter {
  display: table-cell !important;
}
.dialog-footer{
    padding: 20px;
    padding-bottom: 0px !important; 
    padding-top: 0px !important; 
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.el-input-group__append
{
  padding:0 10px;
  cursor:pointer
}
.el-form-item
{
  margin-bottom: 12px;
}
</style>
