<template>
  <el-dialog
    custom-class="center-dialog"
    height="600px"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="70%"
    @close="close"
  >
    <el-scrollbar style="height: 600px">
      <el-form ref="form" label-width="190px" :model="form" size="medium">
        <el-col :span="12">
          <el-form-item :label="__('管理员账号')" label-width="100px"  prop="user_nickname">
            <el-input
              v-model="form.user_nickname"
              clearable
              :disabled="true"
              :placeholder="__('管理员账号')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('管理员昵称')" label-width="100px" prop="user_nickname">
            <el-input
              v-model="form.user_nickname"
              clearable
              :disabled="true"
              :placeholder="__('管理员昵称')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('店铺名称')" label-width="100px" prop="store_name">
            <el-input
              v-model="form.store_name"
              clearable
              :disabled="true"
              :placeholder="__('店铺名称')"
              :style="{ width: '90%' }"
              suffix-icon="el-icon-goods"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item :label="__('有效期至')" label-width="100px" prop="store_end_time">
              <el-date-picker
                v-model="form.store_end_time"
                :placeholder="__('选择日期')"
                :style="{ width: '90%' }"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('企业全称')" label-width="100px" prop="company_name">
            <el-input
              v-model="form.company_name"
              clearable
              :placeholder="__('请输入企业全称')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('公司所在地')" label-width="100px" prop="company_area">
            <Area
              v-model="queryArea"
              :clearable="true"
              @fetch-data="fetchData"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('地址')" label-width="100px" prop="company_address">
            <el-input
              v-model="form.company_address"
              clearable
              :placeholder="__('请输入地址')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('邮编')" label-width="100px" prop="company_zipcode">
            <el-input
              v-model="form.company_zipcode"
              clearable
              :placeholder="__('请输入邮编')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('电话')" label-width="100px" prop="contacts_phone">
            <el-input
              v-model="form.contacts_phone"
              clearable
              :placeholder="__('请输入电话')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('公司网站')" label-width="100px" prop="company_website">
            <el-input
              v-model="form.company_website"
              clearable
              :placeholder="__('请输入公司网站')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('公司介绍')" label-width="100px" prop="company_description">
            <el-input
              v-model="form.company_description"
              clearable
              :placeholder="__('请输入公司介绍')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('联系人email')" label-width="100px" prop="contacts_email">
            <el-input
              v-model="form.contacts_email"
              clearable
              :placeholder="__('请输入联系人email')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="__('注册资金')"
            label-width="100px"
            prop="company_registered_capital"
          >
            <el-input
              v-model="form.company_registered_capital"
              clearable
              :placeholder="__('请输入注册资金')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('员工人数')" label-width="100px" prop="company_employee_count">
            <el-input
              v-model="form.company_employee_count"
              clearable
              :placeholder="__('请输入员工人数')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('纳税人识别号')" label-width="100px" prop="company_taxnum">
            <el-input
              v-model="form.company_taxnum"
              clearable
              :placeholder="__('请输入纳税人识别号')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('发票抬头')" label-width="100px" prop="company_invoice">
            <el-input
              v-model="form.company_invoice"
              clearable
              :placeholder="__('请输入发票抬头')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('法人姓名')" label-width="100px" prop="legal_person">
            <el-input
              v-model="form.legal_person"
              clearable
              :placeholder="__('请输入法人姓名')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('法人身份证')" label-width="100px" prop="legal_person_number">
            <el-input
              v-model="form.legal_person_number"
              clearable
              :placeholder="__('请输入法人身份证')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('银行开户名')" label-width="100px" prop="bank_account_name">
            <el-input
              v-model="form.bank_account_name"
              clearable
              :placeholder="__('请输入银行开户名')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('公司银行账号')" label-width="100px" prop="bank_account_number">
            <el-input
              v-model="form.bank_account_number"
              clearable
              :placeholder="__('请输入公司银行账号')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('支行名称')" label-width="100px" prop="bank_name">
            <el-input
              v-model="form.bank_name"
              clearable
              :placeholder="__('开户银行支行名称')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="__('开户银行支行')"
            label-width="100px"
            prop="bank_code"
          >
            <el-input
              v-model="form.bank_code"
              clearable
              :placeholder="__('请输入开户银行支行联行号')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('开户银行地址')" label-width="100px" prop="bank_address">
            <el-input
              v-model="form.bank_address"
              clearable
              :placeholder="__('请输入开户银行所在地')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('付款凭证')" label-width="100px" prop="payment_voucher">
            <el-input
              v-model="form.payment_voucher"
              clearable
              :placeholder="__('请输入付款凭证')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="__('付款凭证说明')"
            label-width="100px"
            prop="payment_voucher_explain"
          >
            <el-input
              v-model="form.payment_voucher_explain"
              clearable
              :placeholder="__('请输入付款凭证说明')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="__('保证金')" label-width="100px" prop="contacts_deposit">
            <el-input
              v-model="form.contacts_deposit"
              clearable
              :placeholder="__('请输入保证金')"
              :style="{ width: '90%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="__('营业执照')"
            label-width="100px"
            prop="business_license_electronic"
          >
            <upload
              height="100px"
              :image="form.business_license_electronic"
              width="100px"
              @upImage="
                (image) => {
                  form.business_license_electronic = image
                }
              "
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="__('其他证件')" label-width="100px"
            prop="company_other_files"
          >
            <picUpload
              :auto-upload="true"
              :file-list="form.company_other_files"
              :height="100"
              :show-file-list="true"
              style="width: 100%"
              :width="100"
              @get-file="
                (value) => {
                  form.company_other_files.push(value)
                }
              "
              @remove-file="(value) => form.company_other_files.push(value)"
            />
          </el-form-item>
        </el-col>
      </el-form>
    </el-scrollbar>
    <div slot="footer">
      <el-button
        icon="el-icon-s-tools"
        style="width: 100%; background-color: #0f2027"
        @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 Upload from '@/components/upload'
import picUpload from '@/components/material/PicUpload'

export default {
  name: 'StoreBaseDetailEdit',
  components: { Area, Upload, picUpload },
  inheritAttrs: false,
  props: [],
  data() {
    return {
      store_id: undefined,
      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_other_files: [],
        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_name: undefined,
        bank_address: undefined,
        contacts_deposit: undefined,
        payment_voucher_explain: undefined,
        payment_voucher: undefined,
      },
    }
  },
  methods: {
    __,
    showEdit(row) {
      this.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

          let params = Object.assign({}, this.form)
          params.company_other_files = this.form.company_other_files.join(',')
          const { msg, status } = await editInfo(params)

          if (status == 200) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
        } else {
          return false
        }
      })
    },
    async fetchData() {
      const { data } = await get({ store_id: this.store_id })
      if (!data) return
      this.form.company_id = data.company.company_id
      this.form.user_id = data.user_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_other_files = data.company.company_other_files.split(',')
      this.form.company_other_files = company_other_files

      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]
    },

    close() {
      this.store_id = undefined
      this.form = this.$options.data().form
      this.dialogFormVisible = false
    },
  },
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-form-item--medium .el-form-item__content{
    line-height: 39px!important;
  }
}
</style>
