<template>
  <div>
    <el-button size="mini" type="primary" @click="onShow">编 辑</el-button>
    <el-drawer title="编辑线索" :show-close="false" append-to-body :visible.sync="dialogFormVisible" size="800px" @close="onClose">
      <div class="drawer__panel">
        <el-row :gutter="10">
          <el-form :model="form" :rules="rules" label-position="right" label-width="120px" size="small">
            <el-col :span="20">
              <el-form-item label="客户名称:" prop="enterprisename">
                <el-input v-model="form.enterprisename" size="small" placeholder="请填写客户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <businessMessage ref="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" size="small" placeholder="请填写联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系方式:" prop="phonenumber">
                <el-input v-model="form.phonenumber" size="small" 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="地址:">
                <el-input v-model="form.address" autocomplete="off" 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="sat_campaignid">
                <el-popover
                    placement="bottom"
                    trigger="manual"
                    v-model="activityVisible"
                    width="400">
                  <selectActivity ref="member" :radio="true" @onSelect="centerChange" @onCancel="activityVisible = false"></selectActivity>
                  <el-input readonly type="text" slot="reference" size="small" @focus="activityVisible=true" v-model="form.campaign_name" placeholder="请填写市场活动"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="来源:">
                <el-input v-model="form.cluesource" autocomplete="off" placeholder="请填写来源"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="线索概况:">
                <el-input v-model="form.notes" type="textarea" :rows="4" autocomplete="off" placeholder="请填写线索概况"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onClose" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" 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";
export default {
  props:['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();
        }
      },
      activityVisible:false,
      dialogFormVisible:false,
      form:{
        "sat_orderclueid": 0,
        "enterprisename":"",
        "name": "",
        "phonenumber": "",
        "province": "",
        "city": "",
        "county": "",
        "address": "",
        "notes": "",
        "cluesource": "",
        "sat_campaignid":0,//活动id，当活动id大于0是默认业务员创建
        "isprivate":1,//0表示公海，1表示私域
      },
      arealist:[],
      rules: {
        phonenumber:[
          {required:true,message:'请输入手机号',trigger:'blur'},
          { pattern:/^1[3-9]\d{9}$/, message: '请输入正确手机号码',trigger: 'blur' }
        ],
        begdate_due:[
          { required: false, validator: begdateTime, trigger: 'change' }
        ],
        enddate_due:[
          { required: false, validator: enddateTime, trigger: 'change' }
        ],
      },
    }
  },
  methods:{
    onShow () {
      this.dialogFormVisible = true
      this.form = Object.assign({},this.form,this.data)
      this.form.province = [this.data.province,this.data.city,this.data.county]
      this.form.enterprisename = this.data.enterprisename_customer
      this.form.totalinvestment !== 0 ? this.form.totalinvestment =  this.tool.formatAmount(this.form.totalinvestment,2): this.form.totalinvestment =''
      this.form.costofconstruction !== 0 ? this.form.costofconstruction =  this.tool.formatAmount(this.form.costofconstruction,2): this.form.costofconstruction =''
      console.log(this.form);
      
    },
    async onSubmit () {
      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.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.dialogFormVisible = false
        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.areaSelectResult = [val.regProvince,val.regCity,val.regArea]
      this.form.province = [val.regProvince,val.regCity,val.regArea]
    },
    onClose(){
      this.dialogFormVisible = false
      this.activityVisible = false
      this.$refs.businessMessage.businessShow = false
    }
  },
  mounted () {
  }
}

</script>
<style>
</style>