<template>
  <div>
    <el-button type="primary" :disabled="disabled" size="mini" @click="onShow">新 建</el-button>
    <el-drawer
      title="新建线索"
      :visible.sync="drawer"
      size="800px"
      direction="rtl"
      :show-close="false"
      append-to-body>
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules" ref="form" label-width="120px" label-position="right" size="mini">
            <el-col :span="20">
              <el-form-item label="客户名称:" prop="enterprisename">
                <el-input v-model="form.enterprisename" placeholder="请填写客户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <businessMessage :keyWord="form.enterprisename" @businessData="businessData"></businessMessage>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系人:" prop="name">
                <el-input v-model="form.name" placeholder="请填写联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系方式:" prop="phonenumber">
                <el-input v-model="form.phonenumber" placeholder="请填写手机号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="省市县:" prop="province">
                <el-cascader
                    style="width:100%"
                    class="width-240"
                    v-model="form.province"
                    :options="basicData.data().areaData"
                    @change="cascaderChange">
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地址:" prop="address">
                <el-input v-model="form.address" placeholder="请填写地址"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="项目名称:" prop="projectname">
                <el-input v-model="form.projectname" placeholder="请填写项目名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目规模:" prop="scale">
                <el-input v-model="form.scale" placeholder="请填写建筑面积(㎡)或者吨位(t)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="总投资额(百万):" prop="totalinvestment">
                <el-input v-model="form.totalinvestment" placeholder="请填写金额(百万)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="造价(百万):" prop="costofconstruction">
                <el-input v-model="form.costofconstruction" placeholder="请填写金额(百万)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预计开工时间:" prop="begdate_due">
                <el-date-picker
                    style="width: 100%"
                    v-model="form.begdate_due"
                    type="month"
                    placeholder="选择月"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预计完工时间:" prop="enddate_due">
                <el-date-picker
                    style="width: 100%"
                    v-model="form.enddate_due"
                    type="month"
                    placeholder="选择月"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="市场活动:" prop="cluesource">
                <el-input disabled type="text" size="small" v-model="activityName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="来源:" prop="cluesource">
                <el-input v-model="form.cluesource" placeholder="请填写来源"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="线索概况:" prop="notes">
                <el-input v-model="form.notes" placeholder="请填写线索概况"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawer = false,$refs.form.resetFields()" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="add" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import selectActivity from '@/SManagement/orderclue/components/selectActivity/selectActivity'
import businessMessage from '@/components/businessMessage/index'
import { log } from '@antv/g2plot/lib/utils'
export default {
  props:['disabled','data'],
  components: {selectActivity,businessMessage},
  data () {
    var begdateTime = (rule,value,callback) =>{
      console.log(value,this.form.enddate_due)
      if (this.form.enddate_due !== ''){
        if (value > this.form.enddate_due){
          callback(new Error('预计开工时间不能晚于预计完工时间'))
        }else {
          callback();
        }
      } else {
        callback();
      }
    }
    var enddateTime = (rule,value,callback) =>{
      if (this.form.begdate_due !== ''){
        if (value < this.form.begdate_due){
          callback(new Error('预计完工时间不能早于预计开工时间'))
        }else {
          callback();
        }
      }  else {
        callback();
      }
    }
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      drawer:false,
      activityVisible:false,
      activityName:'',
      form:{
        "sat_orderclueid": 0,
        "enterprisename":"",
        "name": "",
        "phonenumber": "",
        "province": "",
        "city": "",
        "county": "",
        "address": "",
        "notes": "",
        "cluesource": "",
        "sat_campaignid":0,//活动id，当活动id大于0是默认业务员创建
        "isprivate":0,//0表示公海，1表示私域,
        "projectname": "",
        "scale": "",
        "costofconstruction": '', //造价（百万）
        "totalinvestment": '', //总投资额（百万）
        "begdate_due": "", //预计开工时间
        "enddate_due": "", //预计完工时间
      },
      rules:{
        phonenumber:[
          { pattern:/^1[3-9]\d{9}$/, message: '请输入正确手机号码',trigger: 'blur' },
          { required: true, message: '请输入手机号', trigger: 'blur' },

        ],
        begdate_due:[
          { required: false, validator: begdateTime, trigger: 'change' }
        ],
        enddate_due:[
          { required: false, validator: enddateTime, trigger: 'change' }
        ],
      },
      options:[]
    }
  },
  methods:{
    onShow () {
      this.drawer = true
      this.activityName = this.data.name
    },
    add () {
      if (this.form.begdate_due !== ''){
        const data = new Date(this.form.begdate_due)
        if (data.getMonth() +1 < 10){
          this.form.begdate_due = data.getFullYear() + '-0' + (data.getMonth() + 1)
        }else {
          this.form.begdate_due = data.getFullYear() + '-' + (data.getMonth() + 1)
        }
      }else {
        this.form.begdate_due = ''
      }
      if (this.form.enddate_due !== ''){
        const data = new Date(this.form.enddate_due)
        if (data.getMonth() +1 < 10){
          this.form.enddate_due = data.getFullYear() + '-0' + (data.getMonth() + 1)
        }else {
          this.form.enddate_due = data.getFullYear() + '-' + (data.getMonth() + 1)
        }
      }else {
        this.form.enddate_due = ''
      }
      this.form.sat_campaignid = this.$route.query.id

      this.$refs['form'].validate(async (valid) => {
        console.log(valid)
        if (!valid) return false
        if(this.form.province.length > 0) {
          this.form.city = this.form.province[1]
          this.form.county = this.form.province[2]
          this.form.province = this.form.province[0]
        }
        const res = await this.$api.requested({
          "id": 20221205162402,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.drawer = false
          this.$refs.form.resetFields()
          this.form.city = ''
          this.form.county = ''
          this.form.province = ''
          this.$emit('onSuccess')
        })
      });
    },
    cascaderChange (val) {
      this.form.province = val
    },
    centerChange (data) {
      this.form.campaign_name = data[0].name
      this.form.sat_campaignid = data[0].sat_campaignid
      this.activityVisible = false
    },
    /*工商信息*/
    businessData(val){
      console.log(val)
      this.form.enterprisename = val.companyName
      this.form.address = val.address
      this.form.province = [val.regProvince,val.regCity,val.regArea]
    }
  }
}

</script>
<style scoped>
.dialog-footer{
  margin-top:32px;
  text-align: center;
}
</style>