<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div>{{viewTitle}}</div>
      <div>
        <el-button type="primary" size="small" @click="handleCreate()">保存</el-button>
        <el-button type="info" size="small" icon="el-icon-close" @click="handleReturn()">关闭</el-button>
      </div>
    </div>
    <div class="listconadd">
      <el-form ref="dataForm" :model="temp" class="formaddcopy02" :rules="rules">
        <el-row style="border-top: 1px solid #e0e3eb">
          <el-col :span="12">
            <div class="span-sty"><span class="icon">*</span>跟进形式</div>
            <el-form-item prop="follow_form">
              <el-select class="addinputInfo" v-model="temp.follow_form_key" placeholder="" @change="getXingshi" filterable>
                <el-option v-for="item in followupform" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="span-sty">跟进时间</div>
            <el-form-item><el-date-picker class="addinputInfo" v-model="temp.follow_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择" /></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty"><span class="icon">*</span>跟进结果</div>
            <el-form-item prop="follow_result"><el-input v-model="temp.follow_result" maxlength="20" placeholder="" class="addinputInfo addinputw" clearable/></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty">跟进状态</div>
            <el-form-item>
              <el-select class="addinputInfo" v-model="temp.follow_state_key" placeholder="" @change="getZhuaangtai" filterable>
                <el-option v-for="item in followupstatus" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="span-sty">是否开启提醒</div>
            <el-form-item>
              <el-radio-group class="addinputInfo" v-model="temp.isOnRemind">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div v-show="temp.isOnRemind=='是'">
              <div class="span-sty">提醒日期</div>
              <el-form-item><el-date-picker class="addinputInfo" v-model="temp.remind_day" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" /></el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row v-show="temp.isOnRemind=='是'">
          <el-col :span="24">
            <div class="span-sty">提醒备注</div>
            <el-form-item><el-input class="addinputInfo addinputw" v-model="temp.remind_remark" maxlength="20" placeholder="" clearable /></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty">见证材料</div>
            <el-form-item>
              <uploadImg ref="uploadImg" class="addinputInfo" v-model="list1" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import req from '@/api/customerManagement/customerFollowUp'
import { typeValues } from '@/api/Common/dictcommons'
import uploadImg from '@/components/uploadFile/uploadImg'

export default {
  name: 'CustomerFollowUpAdd',
  components: {
    uploadImg
  },
  data() {
    return {
      // 限制日期不可选择当天之前的
      pickerOptions: {
        disabledDate(time) {
          let oneDay = 60 * 60 * 24 * 1000
          return time.getTime() < Date.now() - oneDay
        }
      },
      viewTitle: '',
      FormLoading: false,
      followupform: [],
      followupstatus: [],
      list1: [],
      temp: {
        customerName: '',
        customerSid: '',
        follow_form: '',
        follow_form_key: '',
        follow_result: '',
        follow_state: '',
        follow_state_key: '',
        follow_time: '',
        isOnRemind: '',
        isOnRemindkey: '',
        orgSid: '',
        remind_day: '',
        remind_remark: '',
        sid: '',
        staffName: '',
        staffSid: '',
        visit_witness_materials: '',
        list: []
      },
      rules: {
        follow_form: [{ required: true, message: '请填写', trigger: 'blur' }],
        follow_result: [{ required: true, message: '请填写', trigger: 'blur' }]
      }
    }
  },
  methods: {
    init() {
      this.getShuJuZiDian()
    },
    // 新增
    showAdd(name, sid) {
      this.viewTitle = '【新增】客户跟进记录'
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.init()
      this.temp.customerName = name
      this.temp.customerSid = sid
      this.temp.staffSid = window.sessionStorage.getItem('staffSid')
      this.temp.staffName = window.sessionStorage.getItem('staffName')
      this.temp.orgSid = window.sessionStorage.getItem('orgSid')
    },
    // 修改回显
    showEdit(sid) {
      this.viewTitle = '【编辑】客户跟进记录'
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.init()
      req.fetchBySid(sid).then((response) => {
        if (response.success) {
          this.temp = response.data
          req.getPcAppendix({ attachType: '0004', linkSid: sid }).then((res) => {
            if (res.success) {
              this.list1 = res.data
            }
          })
        }
      })
    },
    // ----------------------------------方法--------------------
    // 返回
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.temp = {
        customerName: '',
        customerSid: '',
        follow_form: '',
        follow_form_key: '',
        follow_result: '',
        follow_state: '',
        follow_state_key: '',
        follow_time: '',
        isOnRemind: '',
        isOnRemindkey: '',
        orgSid: '',
        remind_day: '',
        remind_remark: '',
        sid: '',
        staffName: '',
        staffSid: '',
        visit_witness_materials: '',
        list: []
      }
      this.$emit('doback')
    },
    // 添加数据
    handleCreate() {
      if (this.temp.isOnRemind === '是') {
        this.temp.isOnRemindkey = '1'
      } else if (this.temp.isOnRemind === '否') {
        this.temp.isOnRemindkey = '0'
      }
      const aa = []
      console.log(99, this.list1)
      for (var i = 0; i < this.list1.length; i++) {
        var namese = this.list1[i].name
        var nameArr = namese.split('.')
        aa.push({
          // attachType: '0004',
          fileName: this.list1[i].name,
          filePath: this.list1[i].filePath,
          fileSize: this.list1[i].size,
          createBySid: window.sessionStorage.getItem('userSid'),
          fileType: nameArr[nameArr.length - 1]
        })
      }
      this.temp.list = aa
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.FormLoading = true
          if (this.temp.sid === '') {
            req.save(this.temp).then((response) => {
              this.FormLoading = false
              if (response.success) {
                this.$notify({ title: '提示', message: '添加成功', type: 'success', duration: 2000 })
                this.handleReturn('true')
              }
            })
          } else {
            req.update(this.temp).then((response) => {
              this.FormLoading = false
              if (response.success) {
                this.$notify({ title: '提示', message: '修改成功', type: 'success', duration: 2000 })
                this.handleReturn('true')
              }
            })
          }
        }
      })
    },
    // 数据字典
    getShuJuZiDian() {
      typeValues({ type: 'visitWay' }).then((response) => {
        if (response.success) {
          this.followupform = response.data
        }
      })
      typeValues({ type: 'followState' }).then((response) => {
        if (response.success) {
          this.followupstatus = response.data
        }
      })
    },
    // 跟进形式 处理
    getXingshi(value) {
      const choose = this.followupform.filter((item) => item.dictKey === value)
      if (choose !== null && choose.length > 0) {
        this.temp.follow_form = choose[0].dictValue
      } else {
        this.temp.follow_form = ''
      }
    },
    // 跟进状态 处理
    getZhuaangtai(value) {
      const choose = this.followupstatus.filter((item) => item.dictKey === value)
      if (choose !== null && choose.length > 0) {
        this.temp.follow_state = choose[0].dictValue
      } else {
        this.temp.follow_state = ''
      }
    }
  }
}
</script>
<style scoped>
.span-sty {
  width: 130px !important;
}
.addinputInfo {
  margin-left: 120px !important;
}
/deep/ .el-form-item__error {
  margin-left: 120px !important;
}
.formaddcopy02 .el-row .el-col /deep/ .el-form-item .addinputw {
  margin-left: 120px !important;
  width: calc(100% - 115px);
}
.formaddcopy02 .el-row .el-col /deep/ .el-form-item .el-radio-group {
  display: inline;
  line-height: 1px;
  vertical-align: middle;
}
</style>
