<template>
  <div>
    <div class="container normal-panel normal-margin">
      <el-button type="warning" size="small" icon="el-icon-s-claim" @click="onSubmit">保 存</el-button>
    </div>
    <div class="container normal-panel normal-margin">
      <p class="normal-title normal-margin">经销商信息</p>
      <el-row :gutter="20">
        <el-form :model="form" size="small" status-icon label-position="left" label-width="100px" class="demo-ruleForm">
          <el-col :span="8">
            <el-form-item label="经销商编号" prop="agentnum">
              <el-input class="width-240" type="text" v-model="form.agentnum" placeholder="请输入" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="经销商名称" prop="agentname">
              <el-input class="width-240" type="text" v-model="form.agentname" placeholder="请输入" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="省市县" prop="age">
              <el-cascader
                class="width-240"
                v-model="value"
                :options="basicData.data().areaData"
                @change="cascaderChange">
              </el-cascader>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input type="textarea" class="width-240" v-model.number="form.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人" prop="contact">
              <el-input class="width-240" type="text" v-model="form.contact" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系人手机号" prop="phonenumber">
              <el-input class="width-240" type="number" v-model="form.phonenumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属营销区域" prop="sa_saleareaname">
              <el-input class="width-240" readonly v-model.number="form.sa_saleareaname"></el-input>
            </el-form-item>
            <el-form-item label="合作开始时间" prop="age">
              <el-date-picker
                class="width-240"
                v-model="form.signdate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经销商类别" prop="pass">
              <el-select class="width-240" v-model="form.agenttype" placeholder="请选择">
                <el-option
                  v-for="item in agent_type"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="伙伴类型" prop="partnertype">
              <el-input class="width-240" type="text" readonly v-model="form.partnertype" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上级经销商" prop="age">
              <el-input class="width-240" v-model.number="form.age"></el-input>
            </el-form-item>
            <el-form-item label="经销商等级" prop="age">
              <el-select class="width-240" v-model="form.grade" placeholder="请选择">
                <el-option
                  v-for="item in agent_level"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value:[],
      form:{
        "sa_agentsid": 0,
        "parentid":"",
        "agentnum":"",
        "agentname":"",
        "address":"",
        "agenttype":"",
        "signdate":"",
        "grade":'',
        "sa_saleareaid":'',
        "contact":"",
        "phonenumber":"",
        "province":"",
        "city":"",
        "county":""
      },
      arealist:[],
      agent_type:[],
      agent_level:[]
    }
  },
  methods:{
    initializeData () {
      this.form.sa_saleareaid = this.$route.query.id
      this.form.sa_saleareaname = this.$route.query.area
      this.form.partnertype = '经销商'
    },
    cascaderChange (val) {
      if (val.length === 1) 
        return this.form = Object.assign({},this.form,{province:val[0],city:'',county:''})

      this.form = Object.assign({},this.form,{province:val[0],city:val[1],county:val[2]})
      
    },
    async query_sysoptions () {
      const res = await this.$store.dispatch('optiontypeselect','agentgrade')
      this.agent_level = res.data
      const res1 = await this.$store.dispatch('optiontypeselect','agenttype')
      this.agent_type = res1.data
    },
    onSubmit () {
      console.log(this.form)
    }
  },
  mounted () {
    this.initializeData()
    this.query_sysoptions()
  }
}

</script>
<style>
</style>
<style scoped>
.width-240{
  width: 240px;
}
</style>