<template>
  <div>
    <el-dialog :title="visiblemediatRecordObj == null ?'新增调解记录':'编辑调解记录'" :visible="true" class="kk-dialog-class"
      :modal="false" width="880px" append-to-body :close-on-click-modal="false"
        @close="handleClose" v-drag>
      <div class="dialog-content dialog-mr-batch">
        <div class="p-16">
          <div class="flex-column">
            <span class="f16 f-weight500" v-if="mrObj.linkedType == 2">沟通类型</span>
            <div class="mt-8" v-if="mrObj.linkedType == 2">
              <el-radio-group v-model="mrObj.linkedWay">
                <el-radio :label="1">电话</el-radio>
                <el-radio :label="2">视频</el-radio>
                <el-radio :label="3">微信</el-radio>
              </el-radio-group>
            </div>
            <span v-if="mrObj.linkedType == 2" class="f16 f-weight500 mt-8">沟通时间</span>
            <div v-if="mrObj.linkedType == 2" class="mt-8 flex-row">
              <el-date-picker size="small" style="width: 200px;"
              :clearable="false"
                              v-model="mrObj.linkedTime"
                              type="datetime"
                              placeholder="选择沟通时间"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
              <!-- <el-date-picker
              v-model="value1"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker> -->

            </div>
            <span v-if="mrObj.linkedWay == 1" class="f16 f-weight500 mt-8">电话情况</span>
            <div v-if="mrObj.linkedWay == 1" class="mt-8">
              <el-radio-group v-model="mrObj.linkedSituation">
                <el-radio :label="0">已接</el-radio>
                <el-radio :label="1">未接</el-radio>
                <el-radio :label="2">拒接</el-radio>
                <el-radio :label="3">关机</el-radio>
                <el-radio :label="7">空号</el-radio>
                <el-radio :label="4">停机</el-radio>
                <el-radio :label="8">设置</el-radio>
                <el-radio :label="9">正在通话中</el-radio>
                <el-radio :label="5">暂时无法接通</el-radio>
              </el-radio-group>
            </div>
            <span v-if="mrObj.linkedType == 2" class="f16 f-weight500 mt-8">沟通对象</span>
            <div v-if="mrObj.linkedType == 2" class="mt-8">
              <el-select size="small" v-model="mrObj.linkedPerson" multiple :multiple-limit="(mrObj.linkedWay==1||mrObj.linkedWay==3) ? 1:6" placeholder="请选择沟通对象" class="width100">
                  <el-option
                          v-for="item in PersonData"
                          :key="item.id"
                          :label="item.name+'-'+item.phone"
                          :value="item.id">
                  </el-option>
              </el-select>
            </div>
            <span class="f16 f-weight500 mt-8">沟通情况</span>
            <div class="mt-8">
              <el-radio-group v-model="mrObj.communicationSituation">
                <el-radio v-for="(item,index) in CommunicationOptions" :key="index" :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </div>
            <div class="mt-8">
              <el-input type="textarea" :rows="2"
                placeholder="请输入内容" v-model="mrObj.communicationRemarks" maxlength="100">
              </el-input>
            </div>
            <span class="f16 f-weight500 mt-8">调解进度</span>
            <div class="mt-8 mr—schedule">
              <span :class="mrObj.mediateStatus == item.value ? 'active':''" v-for="(item,index) in materialTypeOptions" :key="index" @click="mrObj.mediateStatus = item.value">{{item.label}}</span>
            </div>
            <span class="f16 f-weight500 mt-8">下次跟进时间</span>
            <div class="mt-8 flex-row">
              <el-radio-group v-model="mrObj.timeType" class="pt-8 mr-16" @change="daysAfterDate" >
                <el-radio :label="0">自定义</el-radio>
                <el-radio :label="1">1天后</el-radio>
                <el-radio :label="2">2天后</el-radio>
                <el-radio :label="3">3天后</el-radio>
                <el-radio :label="5">5天后</el-radio>
                <el-radio :label="7">7天后</el-radio>
              </el-radio-group>
              <!-- <el-date-picker v-if="this.mrObj.timeType == 0" size="small" style="width: 150px;"
                              v-model="mrObj.nextFollowDate"
                              type="date"
                              placeholder="选择下次跟进时间"
                              value-format="yyyy-MM-dd"
                              format="yyyy-MM-dd">
              </el-date-picker> -->
              <el-input-number v-if="this.mrObj.timeType == 0" v-model="mrObj.nextFollowDate" controls-position="right" size="small" :min="1" :max="100"></el-input-number>
            </div>
            <span class="f16 f-weight500 mt-8">录音或录像文件</span>
            <div class="mt-8">
              <upload-file :file-list="fileList" :max-count="5"
                           :show-file-name="false"
                           uploadName=""
                           accept=".mp3,.mp4,.jpg,.jpeg,.png"
                           :span="6"
                           :fileSize="50"
                           @handleUploadFile="handleUploadFile">
              </upload-file>
            </div>
          </div>

        </div>

      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose()">取消</el-button>
          <el-button type="primary" @click="handleSubmit()">完成</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from "@/services/caseManagement";
import contactPerson from "@/services/contactPerson";
export default {
  components: {
    uploadFile: () => import('@/components/uploadFile.vue'),//上传
  },
  props: {
    visiblemediatRecordObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
    caseId: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
  data() {
    return {
      CommunicationOptions:[{ label: '继续沟通', value: 4 },{ label: '一次性全部回款', value: 1 },{ label: '全部分期', value: 2 },
      { label: '部分还款', value: 3 },{ label: '拒绝沟通', value: 5 }],
      materialTypeOptions: this.$util.getMediationprogress(),
      mrObj: {
        id:'',
        timeType:0,
        caseId:'',//案件id	
        linkedWay:1,//联系方式：1：电话 2：视频 3：微信
        linkedType:2,//联系类型：1：线上 2：线下	
        linkedPerson:[],//联系人	
        linkedSituation:0,//联系情况
        communicationSituation:4,//沟通情况
        communicationRemarks:'',//沟通备注	
        mediateStatus:'',//调解状态
        linkedTime:'',//联系时间	
        linkedDuration:'',//时长	
        callWay:'',//拨打方式 0 呼入 1 呼出
        callStartTime:'',//拨打开始时间	
        callEndTime:'',//拨打结束时间	
        nextFollowDate:1,//下次跟进时间	
        files:[],//文件
      },
      fileList: [],
      PersonData:[],
    };
  },
  mounted() {
    if(this.visiblemediatRecordObj != null)
    {
      this.mrObj.id = this.visiblemediatRecordObj.id
      this.mrObj.linkedWay = this.visiblemediatRecordObj.linkedWay
      this.mrObj.linkedType = this.visiblemediatRecordObj.linkedType
      this.mrObj.linkedSituation = this.visiblemediatRecordObj.linkedSituation
      if(this.visiblemediatRecordObj.communicationSituation!=null)
      {
        this.mrObj.communicationSituation = this.visiblemediatRecordObj.communicationSituation
      }
      this.mrObj.communicationRemarks = this.visiblemediatRecordObj.communicationRemarks
      this.mrObj.mediateStatus = this.visiblemediatRecordObj.mediateStatus
      this.mrObj.linkedTime = this.visiblemediatRecordObj.linkedTime
      this.mrObj.linkedDuration = this.visiblemediatRecordObj.linkedDuration
      this.mrObj.callWay = this.visiblemediatRecordObj.callWay
      this.mrObj.callStartTime = this.visiblemediatRecordObj.callStartTime
      this.mrObj.callEndTime = this.visiblemediatRecordObj.callEndTime
      this.mrObj.nextFollowDate = this.visiblemediatRecordObj.nextFollowDate
      this.mrObj.linkedPerson = this.visiblemediatRecordObj.linkedPerson
      // console.log(this.visiblemediatRecordObj,'this.visiblemediatRecordObj')
      this.visiblemediatRecordObj.files.forEach(item =>{  
        this.fileList.push({
          url: item,
          fileName: '文件',
        })
      })
    }
    if(this.mrObj.id == ''){
      // 获取当前日期
      let currentDate = new Date();
      this.mrObj.linkedTime = this.$util.getDatetimeValue(currentDate);
    }
    this.getList()
  },
  methods: {
    // 列表数据
    getList() {
      let dataJson = {
        size: 9999,
        current: 1,
        caseId: this.caseId
      }
      contactPerson.debtorPage(dataJson).then(res => {
        if (!res.code) {
          this.PersonData = res.records.map((item) => {
            let surname = item.name.split('')[0];
            return {
              ...item,
              surname: surname
            }
          });
        }

        contactPerson.agentPage(dataJson).then(res => {
          if (!res.code) {
            let PersonAgent = res.records.map((item) => {
              let surname = item.name.split('')[0];
              return {
                ...item,
                surname: surname
              }
            });
            if(PersonAgent.length > 0)
            {
              PersonAgent.forEach(item => {
                this.PersonData.push(item)
              });
            }
          }
        })

      })

      

    },
    daysAfterDate() {
      if(this.mrObj.timeType == 0){this.mrObj.nextFollowDate = 1 ;}
      else{this.mrObj.nextFollowDate = this.mrObj.timeType ;}
      
      // 获取当前日期
      // let currentDate = new Date();
      // // 获取昨天的日期
      // const nextDate = currentDate
      // currentDate.setDate(currentDate.getDate() + this.mrObj.timeType)
      // const year = nextDate.getFullYear();
      // const month = (nextDate.getMonth() + 1).toString().padStart(2, '0');
      // const day = nextDate.getDate().toString().padStart(2, '0');
      // this.mrObj.nextFollowDate = year +'-'+ month +'-'+ day;
    },
    handleUploadFile(fileList){
      console.log('获取上传文件信息',fileList)
      fileList = JSON.parse(JSON.stringify(fileList))
      
      this.fileList = fileList.map((item,i) => {
        return {
          url: item.url,
          fileName: item.fileName,
          previewUrl:item.previewUrl,
          objectName: item.objectName
        }
      })
      console.log(this.fileList ,'fileListfileListfileList')

    },
    handleClose() {
      this.$emit('update:visiblemediatRecord', false)
    },
    handleSubmit() {
      if(!this.$clickThrottle()) { return }//防止重复点击

      if(this.mrObj.linkedPerson.length == 0)
      {
        this.$message.warning("请选择沟通对象");
        return false
      }
      this.mrObj.caseId = this.caseId
      this.fileList.forEach(item =>{
        this.mrObj.files.push(item.url)
      })
      api.mediate_record_save(this.mrObj).then(res => {
          this.$parent.getmediate_record()
          this.handleClose()
          this.$message.success("新增调解记录成功");
      })

    }
  }
};
</script>

<style scoped lang="scss">

.dialog-mr-batch{
  .mr—schedule{
    span{
      border: solid 1px #E5E6EB;
      padding: 5px 15px;
      margin-right: 10px;
      border-radius: 2px;
      margin-top: 5px;
      margin-bottom: 5px;
      display: inline-block;
      cursor: pointer;
    }
    span.active{
      color: #BC6F60;
      border: solid 1px #BC6F60;
    }
  }
}
</style>
<style  lang="scss">
.kk-dialog-class {
  pointer-events: none;
  .el-dialog {
    pointer-events: auto;
  }
}


</style>