<template>
  <div class="follow">
    <el-button 
              size="small" 
              type="warning" 
              style="margin-left:10px" 
              v-if="position == 'detail'" 
              :disabled="!isHandle"
              @click="dialogVisible=true">跟进</el-button>
    <p @click="dialogVisible=true" v-else>跟进</p>
    <el-dialog title="线索跟进" :visible.sync="dialogVisible" width="900" :before-close="handleClose">
      <el-form :model="param.content" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm"
        label-position="left">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="跟进时间" label-position="left" label-width="100px">
              <!-- <el-input :value="getNowDate()" size="small" disabled></el-input> -->
              <el-date-picker
                v-model="timer"
                type="date"
                format="yyyy-MM-dd HH:mm:ss"
                disabled
                size="small">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="本次跟进方式" label-width="130px" label-position="left" prop="followupmode">
            <el-select v-model="param.content.followupmode" placeholder="请选择方式" size="small">
              <el-option label="当面拜访" value="当面拜访"></el-option>
              <el-option label="电话沟通" value="电话沟通"></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="本次跟进结果" label-width="150px" label-position="left" prop="logtype">
              <el-radio-group v-model="param.content.logtype" @change="changeClick">
                <el-radio label="跟进">跟进</el-radio>
                <el-radio label="已成交">成交</el-radio>
                <el-radio label="丢单">丢单</el-radio>
                <el-radio label="无效">无效</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="param.content.logtype == '丢单'">
            <el-form-item label="已购买商品" prop="competitor" label-width="200px">
              <el-input v-model="param.content.competitor" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="跟进内容" prop="content" v-if="param.content.logtype == '跟进'">
              <el-input type="textarea" v-model="param.content.content" size="small"></el-input>
            </el-form-item>
            <el-form-item label="丢单原因" prop="content" v-if="param.content.logtype == '丢单'">
              <el-input type="textarea" v-model="param.content.content" size="small"></el-input>
            </el-form-item>
            <el-form-item label="添加备注" prop="content" v-if="param.content.logtype == '已成交'">
              <el-input type="textarea" v-model="param.content.content" size="small"></el-input>
            </el-form-item>
            <el-form-item label="无效原因" prop="content" v-if="param.content.logtype == '无效'">
              <el-input type="textarea" v-model="param.content.content" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="followAction" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils';
export default {
  name: '',
  data () {
    return {
      param: {
        "classname": "saletool.orderclue.web.orderclue",
        "method": "addFollowUpLog",
        "content": {
            "sat_orderclueid":0,
            "content": "",
            "followupmode": "", //当面拜访、电话沟通
            "logtype": "跟进", //跟进、成交、丢单、无效
            "competitor": ""
        }
      },
      timer:new Date(),
      rules: {
        content:[
          {required:true,message:'内容不能为空',trigger:'blur'},
        ],
        followupmode:[
          {required:true,message:'内容不能为空',trigger:'blur'},
        ],
        logtype:[
          {required:true,message:'内容不能为空',trigger:'blur'},
        ],
        competitor:[
          {required:true,message:'内容不能为空',trigger:'blur'},
        ],
      },
      time:'',
      dialogVisible: false,
      isHandle:''
    }
  },
  props: {
    detailInfo: {
      default() {
        return []
      }
    },
    position: {
      type:String
    },
    updataList: {
      type: Function
    },
    getDetail: {
      type: Function
    }
  },
  computed: {
  },
  watch: {
    detailInfo: {
      handler(val) {
        // this.isHandle =
        let is 
        if(JSON.parse(window.sessionStorage.getItem('userInfo')).name == this.detailInfo.data.leadername) {
          is = true
          if(this.detailInfo.data.status == '待跟进' || this.detailInfo.data.status == '跟进中') {
            is = true
          } else {
            is = false
          }
        } else {
          is = false
        }
        this.isHandle = is
      }
    }

  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    changeClick() {
      this.param = {
        "classname": "saletool.orderclue.web.orderclue",
        "method": "addFollowUpLog",
        "content": {
            "sat_orderclueid":0,
            "content": "",
            "followupmode": "", //当面拜访、电话沟通
            "logtype": this.param.content.logtype, //跟进、成交、丢单、无效
            "competitor": ""
        }
      }
    },
    followAction() {
      this.$refs.ruleForm.validate( async val => {
        if(!val) return this.$notify({
          title:'提示',
          message:'请按照要求填写信息',
          type:'warning'
        })
        this.param.content.sat_orderclueid = this.detailInfo.data.sat_orderclueid
        let res = await this.$api.requested(this.param)
        this.tool.showMessage(res,() => {
          this.dialogVisible = false
          this.$emit('updataList')
          this.$emit('getDetail')
          this.$refs.ruleForm.resetFields()
        })
      })
      
    },
  },
};
</script>

<style scoped>
  /deep/.el-form-item__content{
    margin-left: 0 !important;
  }
  
  .follow {
    display: inline-block;
  }
  /deep/.el-dialog__body {
    padding-bottom: 0;
  }
  /deep/.el-dialog__footer {
    display: flex;
    justify-content: space-around;
    padding-top: 0;
  }
  /deep/.el-form-item {
    display: flex;
    flex-direction: column;
  }
  /deep/.el-select {
    width: 100%;
  }
  /deep/.el-form-item {
    margin-bottom: 5px;
  }
 /deep/.dialog-footer span {
   text-align: center;
 } 
</style>
