<template>
  <div>
    <el-row>
      <el-form ref="form" :rules="rules" :model="oilCompanyInfo" label-width="100px" :size="$store.getters.size">
        <el-row :gutter="gridNum.row.gutter">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="name">
              <el-input v-model="oilCompanyInfo.name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业简称" prop="abbreviaName">
              <el-input v-model="oilCompanyInfo.abbreviaName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司级别" prop="parentMark">
              <el-select v-model="oilCompanyInfo.parentMark" placeholder="请选择">
                <el-option label="主体公司" :value="0" />
                <el-option label="分公司" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="oilCompanyInfo.parentMark === 1" :span="12">
            <el-form-item label="上级公司" prop="parentId">
              <el-select v-model="oilCompanyInfo.parentId" remote filterable :remote-method="companyOrginQuery" style="width: 100%" placeholder="请输入公司名称">
                <el-option
                  v-for="item in queryCompanyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业性质" prop="companyNature">
              <el-select v-model="oilCompanyInfo.companyNature" placeholder="请选择">
                <el-option label="零售客户" :value="0" />
                <el-option label="外请客户" :value="1" />
                <el-option label="渠道客户" :value="2" />
                <el-option label="存量客户" :value="3" />
                <el-option label="批发客户" :value="4" />
                <el-option label="LNG客户" :value="5" />
                <el-option label="推广业务" :value="6" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账户类型" prop="companyType">
              <el-select v-model="oilCompanyInfo.companyType" placeholder="请选择">
                <el-option label="柴油账户" :value="0" />
                <el-option label="LNG账户" :value="2" />
                <el-option label="汽油账户" :value="1" />
                <el-option label="尿素账户" :value="3" />
                <el-option label="油批账户" :value="4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业负责人" prop="businessLeader">
              <el-select
                v-model="oilCompanyInfo.businessLeader"
                clearable
                filterable
                remote
                reserve-keyword
                placeholder="企业负责人姓名或联系方式"
                :remote-method="userRemoteMethod"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.phone+'('+(item.nickName?item.nickName+'-':'')+item.userCode+')'"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司对接类型" prop="companyDockType">
              <el-select v-model="oilCompanyInfo.companyDockType" placeholder="请选择">
                <el-option label="对接客户" :value="0" />
                <el-option label="平台客户" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24" style="text-align: right">
          <el-button @click="close">取消</el-button>
          <el-button
            :disabled="!twoNo"
            type="primary"
            @click="submit"
          >提交</el-button>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import oilCompanyInfoApi from '@/api/customerManagement/oilCompanyInfo'
import sysCustomerInfoApi from '@/api/user/sysCustomerInfo'
export default {
  data() {
    return {
      queryCompanyList: [], // 企业列表
      twoNo:true,
      gridNum: {
        row: {
          gutter: 2
        },
        cols: {
          xs: 24,
          sm: 24,
          md: 12,
          lg: 12,
          xl: 6
        }
      },
      oilCompanyInfo: {
        name: undefined,
        abbreviaName: undefined,
        parentMark: 0,
        parentId: undefined,
        companyNature: 0,
        companyType:0,
        createSource: 'WEBM',
        enableMark: 1,
        auditMark: 0
      },
      userList: [],
      rules: {
        name: [
          { required: true, message: '请输入企业名称', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        abbreviaName: [
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        parentMark: [
          { required: true, message: '请选择是否主体公司', trigger: 'change' }
        ],
        companyNature: [
          { required: true, message: '请选择企业性质', trigger: 'change' }
        ],
        companyType: [
          { required: true, message: '请选择账户类型', trigger: 'change' }
        ],
        parentId: [
          { required: true, message: '请选择上级公司', trigger: 'change' }
        ]
      }
    }
  },
  created() {
  },
  methods: {
    companyOrginQuery(value) { // 远程搜索
      if (value) {
        oilCompanyInfoApi.getLikeByName({ 'name': value }).then(res => {
          this.queryCompanyList = res.data
        })
      }
    },
    userRemoteMethod(value) { // 远程搜索
    if (value) {
      sysCustomerInfoApi.liekQuery(value).then(res => {
        this.userList = res.data
      })
    }
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.save(this.oilCompanyInfo)
          this.twoNo = false
          setTimeout(()=>{
            this.twoNo=true
          },1000)
        }
      })
    },

    save() {
      if (this.oilCompanyInfo.parentMark === 0) {
        this.oilCompanyInfo.parentId = 0
      }
      // 保存
      oilCompanyInfoApi.save(this.oilCompanyInfo).then(res => {
        this.$message.success(res.msg)
        this.$emit('closeDialog')
        this.$emit('getByPage')
      })
    },
    close() {
      this.$emit('closeDialog')
    }
  }
}
</script>
