<template>
  <el-dialog
    custom-class="center-dialog"
    height="600px"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="1200px"
  >
    <el-scrollbar style="height: 600px">
      <el-form ref="form" label-width="190px" :model="form" size="medium">
        <el-form-item :label="__('管理员账号')" prop="user_nickname">
          <el-input
            v-model="form.user_nickname"
            clearable
            :disabled="true"
            :placeholder="__('管理员账号')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('管理员昵称')" prop="user_account">
          <el-input
            v-model="form.user_account"
            clearable
            :disabled="true"
            :placeholder="__('管理员昵称')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('店铺名称')" prop="store_name">
          <el-input
            v-model="form.store_name"
            clearable
            :disabled="true"
            :placeholder="__('店铺名称')"
            :style="{ width: '100%' }"
            suffix-icon="el-icon-goods"
          />
        </el-form-item>

        <div class="grid-content bg-purple">
          <el-form-item :label="__('活动开始时间')" prop="store_end_time">
            <el-date-picker
              v-model="form.store_end_time"
              :placeholder="__('选择日期')"
              :style="{ width: '100%' }"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </div>

        <el-form-item :label="__('企业全称')" prop="company_name">
          <el-input
            v-model="form.company_name"
            clearable
            :placeholder="__('请输入企业全称')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('公司所在地')" prop="company_area">
          <Area v-model="queryArea" :clearable="true" @fetch-data="fetchData" />
        </el-form-item>
        <el-form-item :label="__('地址')" prop="company_address">
          <el-input
            v-model="form.company_address"
            clearable
            :placeholder="__('请输入地址')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('邮编')" prop="company_zipcode">
          <el-input
            v-model="form.company_zipcode"
            clearable
            :placeholder="__('请输入邮编')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('电话')" prop="contacts_phone">
          <el-input
            v-model="form.contacts_phone"
            clearable
            :placeholder="__('请输入电话')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('公司网站')" prop="company_website">
          <el-input
            v-model="form.company_website"
            clearable
            :placeholder="__('请输入公司网站')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('公司介绍')" prop="company_description">
          <el-input
            v-model="form.company_description"
            clearable
            :placeholder="__('请输入公司介绍')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('联系人email')" prop="contacts_email">
          <el-input
            v-model="form.contacts_email"
            clearable
            :placeholder="__('请输入联系人email')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('注册资金')" prop="company_registered_capital">
          <el-input
            v-model="form.company_registered_capital"
            clearable
            :placeholder="__('请输入注册资金')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('员工人数')" prop="company_employee_count">
          <el-input
            v-model="form.company_employee_count"
            clearable
            :placeholder="__('请输入员工人数')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('纳税人识别号')" prop="company_taxnum">
          <el-input
            v-model="form.company_taxnum"
            clearable
            :placeholder="__('请输入纳税人识别号')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('发票抬头')" prop="company_invoice">
          <el-input
            v-model="form.company_invoice"
            clearable
            :placeholder="__('请输入发票抬头')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('法人姓名')" prop="legal_person">
          <el-input
            v-model="form.legal_person"
            clearable
            :placeholder="__('请输入法人姓名')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('法人身份证')" prop="legal_person_number">
          <el-input
            v-model="form.legal_person_number"
            clearable
            :placeholder="__('请输入法人身份证')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item
          :label="__('营业执照电子版')"
          label-width="150px"
          prop="business_license_electronic"
          style="margin-top: 30px; margin-left: 45px"
        >
          <el-upload
            ref="business_license_electronic"
            :action="action"
            :before-upload="BeforeUpload"
            class="avatar-uploader"
            :on-success="
              (value) =>
                handleAvatarSuccess('business_license_electronic', value)
            "
            :show-file-list="false"
          >
            <img
              v-if="form.business_license_electronic"
              class="avatar"
              :src="form.business_license_electronic"
              style="width: 155px; height: 155px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item :label="__('银行开户名')" prop="bank_account_name">
          <el-input
            v-model="form.bank_account_name"
            clearable
            :placeholder="__('请输入银行开户名')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('公司银行账号')" prop="bank_account_number">
          <el-input
            v-model="form.bank_account_number"
            clearable
            :placeholder="__('请输入公司银行账号')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('开户银行支行名称')" prop="bank_name">
          <el-input
            v-model="form.bank_name"
            clearable
            :placeholder="__('开户银行支行名称')"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item :label="__('请输入开户银行支行联行号')" prop="bank_code">
          <el-input
            v-model="form.bank_code"
            clearable
            :placeholder="__('请输入开户银行支行联行号')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('请输入开户银行所在地')" prop="bank_address">
          <el-input
            v-model="form.bank_address"
            clearable
            :placeholder="__('请输入开户银行所在地')"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item :label="__('付款凭证')" prop="payment_voucher">
          <el-input
            v-model="form.payment_voucher"
            clearable
            :placeholder="__('请输入付款凭证')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item
          :label="__('付款凭证说明')"
          prop="payment_voucher_explain"
        >
          <el-input
            v-model="form.payment_voucher_explain"
            clearable
            :placeholder="__('请输入付款凭证说明')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('保证金')" prop="contacts_deposit">
          <el-input
            v-model="form.contacts_deposit"
            clearable
            :placeholder="__('请输入保证金')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <div slot="footer">
      <el-button
        icon="el-icon-s-tools"
        style="width: 100%; background-color: #0f2027"
        type="info"
        @click="handleEditcompany"
      >
        {{ __('修改') }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { editInfo, get } from '@/api/store/base'
  import Area from '@/components/VabArea/area'
  import { timestampToTime } from '@/utils/date'
  import { URL } from '@/config'

  export default {
    components: { Area },

    inheritAttrs: false,
    props: [],
    data() {
      return {
        pram: {},

        action: URL.action,
        queryArea: {
          province: { name: '' },

          city: { name: '' },
          district: { name: '' },
        },
        title: '',
        dialogFormVisible: false,
        form: {
          user_nickname: undefined,
          company_id: undefined,
          store_end_time: undefined,
          user_id: '',
          user_account: undefined,
          store_name: undefined,
          company_name: undefined,
          company_address: undefined,
          business_license_electronic: undefined,

          company_zipcode: undefined,
          contacts_phone: undefined,
          company_website: undefined,
          company_description: undefined,
          contacts_email: undefined,
          company_registered_capital: undefined,
          company_employee_count: undefined,
          company_taxnum: undefined,
          company_invoice: undefined,
          legal_person: undefined,
          legal_person_number: undefined,
          bank_code: undefined,
          bank_account_name: undefined,
          bank_account_number: undefined,
          bank_address: undefined,
          contacts_deposit: undefined,
          payment_voucher_explain: undefined,
          payment_voucher: undefined,
        },
      }
    },
    computed: {},
    watch: {},
    created() {},
    methods: {
      __,
      showEdit(row) {
        this.pram.store_id = row.store_id
        this.fetchData()
        this.dialogFormVisible = true
      },
      handleEditcompany() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const province = this.queryArea.province
            const city = this.queryArea.city
            const district = this.queryArea.district
            this.form.company_area =
              province.name + '/' + city.name + '/' + district.name
            const { msg } = await editInfo(this.form)
            this.$baseMessage(msg, 'success', false, 'vab-hey-message-success')
          } else {
            return false
          }
        })
      },
      BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      handleAvatarSuccess(name, res) {
        this.form[name] = res.data
      },

      async fetchData() {
        const { data } = await get(this.pram)
        this.form.company_id = data.company.company_id
        this.form.store_id = data.store_id
        this.form.user_nickname = data.user_nickname
        this.form.store_end_time = timestampToTime(data.store_end_time)
        this.form.store_name = data.store_name
        this.form.company_name = data.company.company_name
        this.form.company_address = data.company.company_address
        this.form.company_zipcode = data.company.company_zipcode
        this.form.company_website = data.company.company_website
        this.form.company_description = data.company.company_description
        this.form.contacts_email = data.company.contacts_email
        this.form.company_registered_capital =
          data.company.company_registered_capital
        this.form.company_taxnum = data.company.company_taxnum
        this.form.legal_person = data.company.legal_person
        this.form.company_invoice = data.company.company_invoice
        this.form.legal_person_number = data.company.legal_person_number
        this.form.bank_account_name = data.company.bank_account_name
        this.form.bank_account_number = data.company.bank_account_number
        this.form.bank_address = data.company.bank_address
        this.form.contacts_phone = data.company.contacts_phone
        this.form.contacts_name = data.company.contacts_name
        this.form.contacts_deposit = data.company.contacts_deposit
        this.form.payment_voucher_explain = data.company.payment_voucher_explain
        this.form.payment_voucher = data.company.payment_voucher
        this.form.bank_name = data.company.bank_name
        this.form.company_employee_count = data.company.company_employee_count
        this.form.bank_code = data.company.bank_code
        this.form.business_license_electronic =
          data.company.business_license_electronic
        const company_area = data.company.company_area.split('/')
        this.queryArea.province.name = company_area[0]
        this.queryArea.city.name = company_area[1]
        this.queryArea.district.name = company_area[2]
      },
    },
  }
</script>
