<template>
  <div>
    <el-button size="mini" type="primary" @click="dialogFormVisible = true">授 权</el-button>
    <el-dialog append-to-body :visible.sync="dialogFormVisible" width="500px" @close="dialogFormVisible = false;$refs.form.resetFields()">
      <div slot="title" style="font-size: 15px">
        授权领域
      </div>
      <el-row :gutter="20">
        <el-form :model="form" :rules="rules" ref="form" label-width="90px" label-position="right" size="mini">
          <el-col :span="24">
            <el-form-item label="营销区域" prop="label">
              <Tree ref="tree" @onClick="onClick">
                <el-input slot="input" type="text" placeholder="请选择营销区域" v-model="form.label" @focus="$refs.tree.dialogFormVisible=true"></el-input>
              </Tree>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-show="form.label">
            <el-form-item label="业务员" prop="name">
              <selectSaler :customParam="salerParam" ref="saler" @selectRow="selectRow">
                <el-input slot="input" type="text" placeholder="请选择业务员" v-model="form.name" @focus="$refs.saler.visible=true"></el-input>
              </selectSaler>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="领域" prop="tradefield">
              <el-select placeholder="请选择领域" v-model="form.tradefield" @change="tradefieldChange">
                <el-option v-for="item in field" :key="item.rowindex" :value="item.value" :label="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="领域明细" prop="tradefieldmx">
              <el-select :disabled="field.fieldmx > 0" placeholder="请选择领域明细" v-model="form.tradefieldmx">
                <el-option v-for="item in fieldmx" :key="item" :value="item" :label="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false;$refs.form.resetFields()" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Tree from './area'
import selectSaler from '@/template/selectSaler/index'
export default {
  name: "add",
  components:{Tree,selectSaler},
  inject:['detailInfo'],
  data(){
    return {
      dialogFormVisible:false,
      field:[],
      fieldmx:[],
      form:{
        "sys_enterprise_tradefieldid": 0,//0新增，大于0更新
        "sys_enterpriseid": '',
        "tradefield": "",
        "sa_saleareaid": '',
        "sa_agentsid":'',
        "label":'',
        "hrid": '',
        "name":'',
        "tradefieldmx": ""
      },
      rules:{
        label:[
          { required: true, message: '请选择营销区域', trigger: 'change'},
        ],
        name:[
          { required: true, message: '请选择业务员', trigger: 'change'}
        ],
        tradefield:[
          { required: true, message: '请选择领域', trigger: 'change'}
        ]
      },
      salerParam: {
        "id":20221011144603,
        "content": {
          sa_saleareaid:'',
          "pageNumber":1,
          "pageSize":20,
          "where": {
            "condition": ""
          }
        }
      }
    }
  },
  created () {
    this.fieldList()
  },
  methods:{
    onClick (data) {
      this.form.sa_saleareaid = data.sa_saleareaid
      this.form.label = data.label
      this.salerParam.content.sa_saleareaid = data.sa_saleareaid
      console.log(data);
      
      this.$nextTick(() => {
        this.$refs.saler.listData()
      })
    },
    selectRow (data) {
      this.form.name = data.name
      this.form.hrid = data.hrid
      this.$refs.saler.visible = false
      console.log(data);
      
    },
    async fieldList () {
      const res = await this.$store.dispatch('optiontypeselect','tradefield')
      this.field = res.data
      console.log(this.field);
    },
    tradefieldChange (data) {
      this.form.tradefieldmx = ''
      this.fieldmx = this.field.filter(item => item.value == data)[0].subvalues
      console.log(this.fieldmx);
      
    },
    onSubmit(){
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        this.form.sa_agentsid = this.$route.query.id
        this.form.sys_enterpriseid = this.detailInfo().sys_enterpriseid
        const res = await this.$api.requested({
          "id": "20221223141602",
          "version":1,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false
        })
      })
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
.el-select {
  width: 100% !important;
}
</style>