<template>
  <div>
    <el-card class="my-box-card" style="width: 100%">
      <el-form ref="form" :model="form">

        <el-form-item
          :label="__('公司全称')"
          label-width="150px"
          prop="company_name"
        >
          <el-input
            v-model="form.company_name"
            clearable
            :placeholder="__('公司全称')"
            :style="{ width: '100%' }"
          />
        </el-form-item>


        <el-form-item
          :label="__('公司所在地')"
          label-width="150px"
          prop="company_area"
        >
          <el-form-item>
            <Area
              v-model="queryArea"
              :clearable="true"
              width="395"
              @fetch-data="fetchData"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item
          :label="__('详细地址')"
          label-width="150px"
          prop="company_address"
        >
          <el-input
            v-model="form.company_address"
            clearable
            :placeholder="__('请输入详细地址')"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item
          :label="__('邮编')"
          label-width="150px"
          prop="company_zipcode"
        >
          <el-input
            v-model="form.company_zipcode"
            clearable
            :placeholder="__('请输入公司邮编')"
            :style="{ width: '100%' }"
          />
        </el-form-item>


        <el-form-item
          :label="__('公司网站')"
          label-width="150px"
          prop="company_website"
        >
          <el-input
            v-model="form.company_website"
            clearable
            :placeholder="__('请输入公司网站')"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item
          :label="__('公司介绍')"
          label-width="150px"
          prop="company_description"
        >
          <vab-quill
            ref="vab-quill"
            v-model="form.company_description"
            :min-height="300"
            :options="options"
          />
        </el-form-item>


        <el-form-item
          :label="__('联系人')"
          label-width="150px"
          prop="contacts_name"
        >
          <el-input
            v-model="form.contacts_name"
            clearable
            :placeholder="__('联系人')"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item
          :label="__('联系人电话')"
          label-width="150px"
          prop="contacts_phone"
        >
          <el-input
            v-model="form.contacts_phone"
            clearable
            :placeholder="__('联系人电话')"
            :style="{ width: '100%' }"
          />
        </el-form-item>


        <el-form-item
          :label="__('联系人email')"
          label-width="150px"
          prop="contacts_email"
        >
          <el-input
            v-model="form.contacts_email"
            clearable
            :placeholder="__('联系人email')"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item
          :label="__('注册资金')"
          label-width="150px"
          prop="company_registered_capital"
        >
          <el-input
            v-model="form.company_registered_capital"
            clearable
            :placeholder="__('注册资金')"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item
          :label="__('员工人数')"
          label-width="150px"
          prop="company_employee_count"
        >
          <el-input
            v-model="form.company_employee_count"
            clearable
            :placeholder="__('员工人数')"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item
          :label="__('纳税人识别号')"
          label-width="150px"
          prop="company_taxnum"
        >
          <el-input
            v-model="form.company_taxnum"
            clearable
            :placeholder="__('纳税人识别号')"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item
          :label="__('支付宝账号')"
          label-width="150px"
          prop="alipay_account"
        >
          <el-input
            v-model="form.alipay_account"
            clearable
            :placeholder="__('纳税人识别号')"
            :style="{ width: '100%' }"
          />
        </el-form-item>


        <el-form-item
          :label="__('真实姓名')"
          label-width="150px"
          prop="alipay_realname"
        >
          <el-input
            v-model="form.alipay_realname"
            clearable
            :placeholder="__('真实姓名')"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            icon="el-icon-s-tools"
            style="width: 100%"
            type="info"
            @click="handleEdit()"
          >
            {{ __('修改') }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { URL } from '@/config'
  import VabQuill from '@/extra/VabQuill'
  import Area from '@/components/VabArea/area'
  import { getAccounts } from '@/api/user/base'
  import { editcompany, getcompany } from '@/api/store/company'

  export default {
    name: 'SetUpShop',
    components: { VabQuill, Area },
    data() {
      return {
        action: URL.action,

        options: {
          theme: 'snow',
          bounds: document.body,
          debug: 'warn',
          modules: {
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [{ size: ['small', false, 'large', 'huge'] }],
                [{ color: [] }, { background: [] }],
                ['blockquote', 'code-block'],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ script: 'sub' }, { script: 'super' }],
                [{ indent: '-1' }, { indent: '+1' }],
                [{ align: [] }],
                [{ direction: 'rtl' }],
                [{ font: [] }],
                ['clean'],
                ['link', 'image', 'vab-upload-image'],
              ],
            },
          },
          placeholder: '',
          readOnly: false,
        },

        form: {
          company_name: undefined,
          company_address: undefined,
          company_zipcode: undefined,
          company_phone: undefined,
          company_website: undefined,
          company_description: undefined,
          contacts_name: undefined,
          contacts_phone: undefined,
          contacts_email: undefined,
          company_registered_capital: undefined,
          company_employee_count: undefined,
          company_taxnum: undefined,
          alipay_account: undefined,
          alipay_realname: undefined,
        },
        queryArea: {
          province: { code: '', name: '' + '/' },
          city: { code: '', name: '' + '/' },
          district: { code: '', name: '' },
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,
      async remoteMethod(user_nickname) {
        if (user_nickname.trim() !== '') {
          this.loading = true
          const { data } = await getAccounts({ user_nickname })
          this.accountOptions = data
          this.loading = false
        } else {
          this.accountOptions = []
        }
      },
      async handleEdit() {
        this.$baseConfirm(
          this.__('修改立马生效,是否继续？'),
          null,
          async () => {
            this.setaddres()
            const { msg, status } = await editcompany(this.form)
            this.$baseMessage(msg, 'success', false, 'vab-hey-message-success')

            await this.fetchData()
          }
        )
      },
      setaddres() {
        const province = this.queryArea.province
        const city = this.queryArea.city
        const district = this.queryArea.district
        const text = province.name + '/' + city.name + '/' + district.name
        this.form.company_area = text
      },
      async fetchData() {
        const { data } = await getcompany()
        this.form.company_id = data.company_id
        this.form.company_name = data.company_name
        this.form.company_phone = data.company_phone
        this.form.company_website = data.company_website
        this.form.company_zipcode = data.company_zipcode
        this.form.company_address = data.company_address
        this.form.contacts_name = data.contacts_name
        this.form.contacts_phone = data.contacts_phone
        this.form.contacts_email = data.contacts_email
        this.form.company_employee_count = data.company_employee_count
        this.form.company_taxnum = data.company_taxnum
        this.form.company_registered_capital = data.company_registered_capital
        this.form.company_description = data.company_description
        this.form.alipay_account = data.alipay_account
        this.form.alipay_realname = data.alipay_realname
        const company_area = data.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>
<style>
  .my-box-card {
    width: 1200px;
  }
</style>
