<!--
  @description: 对账人管理-编辑对账人弹框
  @Modifier: dijia
  @routerPath:
  @date：2020-08-27
-->
<template>
  <!-- 添加对账人弹框 -->
  <el-dialog :visible.sync="dialogData.dialogFormVisible" custom-class="shop_mall_dialog" title="编辑对账人信息" width="700px">
    <el-form ref="editForm" :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" disabled />
          </el-form-item>
        </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 />
          </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%">
              <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-select 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-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="purple" @click="sendPerson('editForm')">
        确 定
      </el-button>
      <el-button @click="close">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getVopAccounts, updateBilingAccountInfo, selectDepartListByUserName } from '@/api/shoppingmall/order'
/* 校验方法*/
import { characters1_auto } from '@/assets/js/validate'
export default {
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      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: {}
    }
  },
  watch: {
    'dialogData.dialogFormVisible'(val) {
      if (!val) {
        this.resetForm()
      }
    }
  },
  created() {
    this.getData()
    this.searchByName()
  },
  methods: {
    // 新增对账人
    sendPerson(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateBilingAccountInfo(this.userData).then(res => {
            this.$message({
              message: '编辑成功！',
              type: 'success'
            })
            this.$emit('callback')
            // 重置
            this.resetForm()
            this.dialogData.dialogFormVisible = false
          })
        }
      })
    },
    // 关闭弹框
    close() {
      this.dialogData.dialogFormVisible = false
      this.resetForm()
    },
    getData() {
      const list = this.dialogData.account
      this.userData.userName = list.userName
      this.userData.departName = list.departName
      this.userData.billingName = list.billingName
      this.userData.jdAccount = list.jdAccount
      this.userData.id = list.id
      this.userData = JSON.parse(JSON.stringify(this.userData))
      const params = {
        pageNo: 1,
        pageSize: 1000
      }
      getVopAccounts(params).then(res => {
        this.jdAccountList = res.data.records
      })
    },
    searchByName() {
      const list = this.dialogData.account
      const name = list.userName
      selectDepartListByUserName(name).then(res => {
        if (res.header.ret === '0') {
          this.optionList = res.data.departs.slice(0)
        }
      }).catch(() => {
        return
      })
    },
    resetForm() {
      this.$refs.editForm.resetFields()
      this.$refs.editForm.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>
