
<!--
  @description: 对账人管理-新增/编辑对账人弹框
  @Modifier：wxy
  @routerPath:
  @date：2020-07-30 09:38:40
-->
<template>
  <!-- 添加对账人弹框 -->
  <el-dialog :visible.sync="dialog.dialogFormVisible" custom-class="shop_mall_dialog" :title="title" width="700px">
    <el-form ref="accountForm" :model="userData" label-width="120px">
      <el-row>
        <el-col :span="18" :offset="1">
          <el-form-item :rules="rules.userName" label="账户名称" prop="userName">
            <el-input v-model="userData.userName" placeholder="请输入并搜索账户" />
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="purple" @click="searchByName()">
            搜 索
          </el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="1">
          <el-form-item :rules="rules.billingName" label="对账人名称" prop="billingName">
            <el-input v-model="userData.billingName" disabled placeholder="搜索账户成功后自动获取" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="1">
          <el-form-item :rules="rules.departName" label="经办公司名称" prop="departName">
            <el-select v-model="userData.departName" filterable placeholder="请选择" style="width:100%" :disabled="optionList.length > 0 ? false : true">
              <el-option
                v-for="item in optionList"
                :key="item.departId"
                :label="item.departName"
                :value="item.departName"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="1">
          <el-form-item :rules="rules.jdAccount" label="京东VOP账户" prop="jdAccount">
            <el-input v-if="!flag" v-model="userData.jdAccount" placeholder="输入你想添加的京东VOP账户" />
            <el-select v-if="flag" v-model="userData.jdAccount" filterable placeholder="请选择京东VOP账户" style="width:100%">
              <el-option
                v-for="item in jdAccountList"
                :key="item.id"
                :label="item.username"
                :value="item.username"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-link icon="el-icon-question" :class="{'ques':true,'dis_none':!flag}" @click="flag=!flag">
            没找到
          </el-link>
          <el-link icon="el-icon-question" :class="{'ques':true,'dis_none':flag}" @click="flag=!flag">
            返回
          </el-link>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="purple" @click="sendPerson('accountForm')">
        确 定
      </el-button>
      <el-button @click="close">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addBilingAccountInfo, getVopAccounts, selectDepartListByUserName } from '@/api/shoppingmall/order'
/* 校验方法*/
import { characters1_auto } from '@/assets/js/validate'
import { randomData } from '@/assets/js/utils' // 随机生成id
export default {
  props: {
    dialog: {
      type: Object,
      default: function() {
        return {}
      }
    },
    addData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    status: {
      type: String,
      default: function() {
        return ''
      }
    },
    title: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      options: [], // 经办公司信息
      rules: {
        userName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 账户名称
        billingName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 对账人名称
        departName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 经办公司名称
        jdAccount: [{ required: true, validator: characters1_auto, trigger: 'blur' }] // 京东VOP账户
      },
      optionList: [],
      jdAccountList: [],
      userData: JSON.parse(JSON.stringify(this.addData)),
      flag: true
    }
  },
  watch: {
    'flag'() {
      this.userData.jdAccount = ''
    },
    'dialog.dialogFormVisible'(val) {
      if (!val) {
        this.resetForm()
      }
    },
    'userData.userName'(val) {
      if (!val) {
        this.resetForm()
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 新增对账人
    sendPerson(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 新增
          if (this.status === '01') {
            this.dialog.dialogFormVisible = false
            this.userData.id = randomData() // 新增随机生成id
            const data = {
              billingName: this.userData.billingName, // 对账人名称
              departName: this.userData.departName, // 经办公司名称
              userName: this.userData.userName, // 账户名称
              jdAccount: this.userData.jdAccount, // 京东VOP账户
              id: this.userData.id
            }
            addBilingAccountInfo(data).then(res => {
              this.$message({
                message: '添加成功！',
                type: 'success'
              })
              this.$emit('callback')
              // 重置
              this.resetForm()
            })
          }
        } else {
          return false
        }
      })
    },
    // 关闭弹框
    close() {
      this.dialog.dialogFormVisible = false
      this.resetForm()
    },
    getData() {
      const params = {
        pageNo: 1,
        pageSize: 1000
      }
      getVopAccounts(params).then(res => {
        this.jdAccountList = res.data.records
      })
    },
    searchByName() {
      const name = this.userData.userName
      selectDepartListByUserName(name).then(res => {
        if (res.header.ret === '0') {
          this.optionList = res.data.departs.slice(0)
          this.userData.billingName = res.data.realName
        }
      }).catch(() => {
        this.resetForm()
      })
      this.$refs.accountForm.clearValidate()
    },
    resetForm() {
      this.flag = true
      this.$refs.accountForm.resetFields()
      this.$refs.accountForm.clearValidate()
      this.optionList = []
      this.userData = {
        billingName: '', // 对账人名称
        departName: '', // 经办公司名称
        userName: '', // 账户名称
        jdAccount: '', // 京东VOP账户
        id: ''
      }
    }
  }

}

</script>

<style lang='less' scoped>

.ques {
  color: #225592;
  font-size: 12px;
  margin-top: 6px
}
.dis_none {
  display: none;
}
</style>
