<template>
  <el-dialog
    :title="title"
    top="20px"
    :visible.sync="dialogFormVisible"
    width="60%"
    @close="close"
  >
    <el-form
      ref="form"
      label-position="top"
      label-width="100px"
      :model="form"
      :rules="rules"
      size="medium"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item :label="__('用户名')" prop="user_account">
            <el-input
              v-model="form.user_account"
              clearable
              :disabled="user_password == undefined"
              :placeholder="__('请输入用户名')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="user_password !== undefined" :span="8">
          <el-form-item :label="__('密码')" prop="user_password">
            <el-input
              v-model="form.user_password"
              clearable
              :placeholder="__('请输入密码')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="__('用户昵称')" prop="user_nickname">
            <el-input
              v-model="form.user_nickname"
              clearable
              :disabled="user_password == undefined"
              :placeholder="__('请输入用户昵称')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="__('客户编号')" prop="customer_number">
            <el-input
              v-model="form.customer_number"
              clearable
              :placeholder="__('请输入客户编号')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="__('客户名称')" prop="customer_name">
            <el-input
              v-model="form.customer_name"
              clearable
              :placeholder="__('请输入客户名称')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="__('客户等级')" prop="customer_level_id">
            <el-select
              v-model="form.customer_level_id"
              :placeholder="__('请选择')"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="__('税率')" prop="customer_tax_rate">
            <el-input
              v-model="form.customer_tax_rate"
              clearable
              :placeholder="__('请输入税率')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="__('备注信息')" prop="customer_remark">
            <el-input
              v-model="form.customer_remark"
              clearable
              :placeholder="__('请输入备注信息')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="__('所属业务员')" prop="seller_id">
            <el-form-item>
              <el-select
                v-model="form.seller_id"
                clearable
                filterable
                :loading="loading"
                :placeholder="__('买家用户名称')"
                remote
                :remote-method="remoteFindUserList"
                reserve-keyword
                @change="change"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.user_id"
                  :label="item.user_account"
                  :value="item.user_id"
                />
              </el-select>
            </el-form-item>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="__('开户银行')" prop="customer_bank">
            <el-input
              v-model="form.customer_bank"
              clearable
              :placeholder="__('请输入开户银行')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="__('银行账号')" prop="customer_card">
            <el-input
              v-model="form.customer_card"
              clearable
              :placeholder="__('请输入银行账号')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="__('开户名称')" prop="customer_account_name">
            <el-input
              v-model="form.customer_account_name"
              clearable
              :placeholder="__('请输入开户名称')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="__('纳税识别号')" prop="customer_taxnum">
            <el-input
              v-model="form.customer_taxnum"
              clearable
              :placeholder="__('请输入纳税识别号')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="__('发票抬头')" prop="customer_invoice">
            <el-input
              v-model="form.customer_invoice"
              clearable
              :placeholder="__('请输入发票抬头')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="__('联系人')" prop="customer_contacter_name">
            <el-input
              v-model="form.customer_contacter_name"
              clearable
              :placeholder="__('请输入联系人')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            :label="__('联系IM,MSN/QQ')"
            prop="customer_contacter_im"
          >
            <el-input
              v-model="form.customer_contacter_im"
              clearable
              :placeholder="__('请输入联系IM,MSN/QQ')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            :label="__('联系人手机')"
            prop="customer_contacter_mobile"
          >
            <el-input
              v-model="form.customer_contacter_mobile"
              clearable
              :placeholder="__('请输入联系人手机')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            :label="__('联系人座机')"
            prop="customer_contacter_telephone"
          >
            <el-input
              v-model="form.customer_contacter_telephone"
              clearable
              :placeholder="__('请输入联系人座机')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            :label="__('联系人区域')"
            prop="customer_contacter_district_ids"
          >
            <el-input
              v-model="form.customer_contacter_district_ids"
              clearable
              :placeholder="__('请输入联系人区域')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            :label="__('联系地址')"
            prop="customer_contacter_address"
          >
            <el-input
              v-model="form.customer_contacter_address"
              clearable
              :placeholder="__('请输入联系地址')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item :label="__('邮编')" prop="customer_contacter_code">
            <el-input
              v-model="form.customer_contacter_code"
              clearable
              :placeholder="__('请输入邮编')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'

  import { doEdit } from '@/api/customer/base'
  import { getList } from '@/api/user/base'

  export default {
    name: 'CustomerBaseEdit',
    data() {
      return {
        loading: true,
        form: {
          user_account: undefined,
          user_nickname: undefined,
        },
        options: [
          {
            value: 1034,
            label: 'v1',
          },
          {
            value: 1038,
            label: 'v2',
          },
          {
            value: 1119,
            label: 'v3',
          },
        ],
        value: '',
        rules: {
          user_account: [
            {
              required: true,
              message: this.__('请输入用户名'),
              trigger: 'blur',
            },
          ],
          user_password: [
            {
              required: true,
              message: this.__('请输入密码'),
              trigger: 'blur',
            },
          ],
          user_nickname: [
            {
              required: true,
              message: this.__('请输入用户昵称'),
              trigger: 'blur',
            },
          ],
          customer_number: [
            {
              required: true,
              message: this.__('请输入客户编号'),
              trigger: 'blur',
            },
          ],
          customer_name: [
            {
              required: true,
              message: this.__('请输入客户名称'),
              trigger: 'blur',
            },
          ],
          customer_level_id: [
            {
              required: true,
              message: this.__('请输入客户等级'),
              trigger: 'blur',
            },
          ],
          customer_tax_rate: [
            {
              required: true,
              message: this.__('请输入税率'),
              trigger: 'blur',
            },
          ],
          customer_remark: [
            {
              required: true,
              message: this.__('请输入备注信息'),
              trigger: 'blur',
            },
          ],
          seller_id: [
            {
              required: true,
              message: this.__('请输入所属业务员'),
              trigger: 'blur',
            },
          ],
          customer_bank: [
            {
              required: true,
              message: this.__('请输入开户银行'),
              trigger: 'blur',
            },
          ],
          customer_card: [
            {
              required: true,
              message: this.__('请输入银行账号'),
              trigger: 'blur',
            },
          ],
          customer_account_name: [
            {
              required: true,
              message: this.__('请输入开户名称'),
              trigger: 'blur',
            },
          ],
          customer_taxnum: [
            {
              required: true,
              message: this.__('请输入纳税识别号'),
              trigger: 'blur',
            },
          ],
          customer_invoice: [
            {
              required: true,
              message: this.__('请输入发票抬头'),
              trigger: 'blur',
            },
          ],
          customer_contacter_name: [
            {
              required: true,
              message: this.__('请输入联系人'),
              trigger: 'blur',
            },
          ],
          customer_contacter_im: [
            {
              required: true,
              message: this.__('请输入联系IM,MSN/QQ'),
              trigger: 'blur',
            },
          ],
          customer_contacter_mobile: [
            {
              required: true,
              message: this.__('请输入联系人手机'),
              trigger: 'blur',
            },
          ],
          customer_contacter_telephone: [
            {
              required: true,
              message: this.__('请输入联系人座机'),
              trigger: 'blur',
            },
          ],
          customer_contacter_district_ids: [
            {
              required: true,
              message: this.__('请输入联系人区域'),
              trigger: 'blur',
            },
          ],
          customer_contacter_address: [
            {
              required: true,
              message: this.__('请输入联系人地址'),
              trigger: 'blur',
            },
          ],
          customer_contacter_code: [
            {
              required: true,
              message: this.__('请输入邮编'),
              trigger: 'blur',
            },
          ],
        },
        userList: [],
        title: '',
        user_password: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      __,
      async getAdderssList(user_id) {
        if (!user_id) {
          user_id = this.user_id
        }
      },
      change(user_id) {
        this.user_id = user_id
        this.getAdderssList(user_id)
      },

      async remoteFindUserList(user_nickname) {
        if (user_nickname !== '') {
          this.loading = true
          setTimeout(() => {
            this.loading = false
            getList({ user_nickname: user_nickname })
              .then((res) => {
                this.userList = res.data.items
              })
              .catch((err) => {
                this.userList = []
              })
          }, 200)
        } else {
          this.userList = []
        }
      },
      showEdit(row) {
        if (!row) {
          console.log(this.user_password)
          this.title = this.__('添加')
        } else {
          this.title = this.__('编辑')
          if (row.user_password) {
            this.user_password = row.user_password
          } else {
            this.user_password = undefined
          }

          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.form = {}
        ;(this.user_password = ''), this.$refs['form'].resetFields()
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(this.form)
            if (200 == status) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
    },
  }
</script>
