<template>
  <div>
    <el-dialog title="新增调解记录" :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-24">
          <div class="flex-column">
            <span class="f16 f-weight500">沟通类型</span>
            <div class="mt-16">
              <el-radio-group v-model="mrObj.radio">
                <el-radio :label="3">电话</el-radio>
                <el-radio :label="6">视频</el-radio>
              </el-radio-group>
            </div>
            <span class="f16 f-weight500 mt-16">电话情况</span>
            <div class="mt-16">
              <el-radio-group v-model="mrObj.radio">
                <el-radio :label="3">已接</el-radio>
                <el-radio :label="6">未接</el-radio>
                <el-radio :label="9">拒接</el-radio>
                <el-radio :label="9">关机</el-radio>
                <el-radio :label="9">空号</el-radio>
                <el-radio :label="9">停机</el-radio>
                <el-radio :label="9">设置</el-radio>
                <el-radio :label="9">正在通话中</el-radio>
                <el-radio :label="9">暂时无法接通</el-radio>
              </el-radio-group>
            </div>
            <span class="f16 f-weight500 mt-16">沟通对象</span>
            <div class="mt-16">
              <el-select v-model="mrObj.FollowStatus"
                      clearable placeholder="请选择沟通对象"
                      @keydown.enter.native="handleSearch"
                      class="width100">
                  <el-option
                          v-for="item in FollowStatusEnum"
                          :key="item.label"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
              </el-select>
            </div>
            <span class="f16 f-weight500 mt-16">沟通情况</span>
            <div class="mt-16">
              <el-radio-group v-model="mrObj.communicateResult">
                <el-radio v-for="(item,index) in CommunicationOptions" :key="index" :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </div>
            <div class="mt-16">
              <el-input type="textarea" :rows="2"
                placeholder="请输入内容" v-model="mrObj.remark">
              </el-input>
            </div>
            <span class="f16 f-weight500 mt-16">调解进度</span>
            <div class="mt-16 mr—schedule">
              <span :class="mrObj.recordStatus == item.value ? 'active':''" v-for="(item,index) in materialTypeOptions" :key="index" @click="mrObj.recordStatus = item.value">{{item.label}}</span>
            </div>
            <span class="f16 f-weight500 mt-16">下次跟进时间</span>
            <div class="mt-16 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.nextDate"
                              type="date"
                              placeholder="选择先还日期"
                              value-format="yyyy-MM-dd"
                              format="yyyy-MM-dd">
              </el-date-picker>
            </div>
            <span class="f16 f-weight500 mt-16">录音或录像文件</span>
            <div class="mt-16">
              <upload-file :file-list="fileList" :max-count="1"
                           :show-file-name="false"
                           uploadName=""
                           accept=".mp3,mp4"
                           :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 caseMaterial from "@/services/caseMaterial";
export default {
  components: {
    uploadFile: () => import('@/components/uploadFile.vue'),//上传
  },
  props: {
    eventDialog: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      CommunicationOptions:[{ label: '继续沟通', value: 'CONTINUE' },{ label: '一次性全部回款', value: 'ALL' },{ label: '全部分期', value: 'STAGES' },
      { label: '部分还款', value: 'PART' },{ label: '拒绝沟通', value: 'REFUSE' }],
      materialTypeOptions: [
        { label: '承诺账户', value: 'COMMITMENT_ACCOUNTS' },
        { label: '重点账户', value: 'FOCUSED_ACCOUNTS' },
        { label: '拒联账户', value: 'DISCONNECTED_ACCOUNTS' },
        { label: '失联账户', value: 'CLOSED_ACCOUNTS' },
        { label: '疑难账户', value: 'DIFFICULT_ACCOUNTS' },
        { label: '失联账户', value: 'LOST_ACCOUNTS' },
        { label: '半失联账户', value: 'SEMI_DISCONNECTED_ACCOUNTS' },
        { label: '部分还款账户', value: 'PARTIAL_REPAYMENT_ACCOUNT' },
        { label: '诉讼案件', value: 'LITIGATION_CASES' },
      ],
      mrObj: {
        timeType:1,
        caseId: '',
        contactName: '',//联系人姓名	
        contactPhone: '',//联系人电话	
        paybackId: '',//关联还款计划id	
        communicateResult: '',//沟通情况	
        remark: '',//备注
        nextDate: '',//下次跟进日期	
        recordStatus: '',//调解进度	
        recordFileIds: '',//调解记录相关录音，录像文件id，使用逗号隔开
        labelIds: '',//人物画像标签id，使用逗号隔开	
        debtorId: '',//债务人id	
      },
      fileList: [],
    };
  },
  mounted() {
    this.daysAfterDate()
  },
  methods: {
    daysAfterDate() {
      console.log(this.mrObj.timeType,'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.nextDate = 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
        }
      })
      this.repaymentObj.url = this.fileList.length?this.fileList[0].fileName : '';
      this.repaymentObj.name = this.fileList.length?this.fileList[0].objectName : '';
    },
    handleClose() {
      this.$emit('update:visiblemediatRecord', false)
    },
    handleSubmit() {
      if(!this.$clickThrottle()) { return }//防止重复点击
      console.log(this.mrObj,'this.mrObj')
      // caseMaterial.addCaseFile(this.repaymentObj).then(res => {
      //       this.$parent.getFileCaseList()
      //       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>