<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    okText="认证通过"
    cancelText="认证不通过">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:10px;">
          {{this.model.companyName}}
        </a-form-item>
        <a-form-item label="税号" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:10px;">
          {{this.model.dutyParagraph}}
        </a-form-item>
        <a-form-item label="营业执照" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:10px;">
          <img :src="getAvatarView()" :preview="getAvatarView()" alt="营业执照" class="ant-upload-dd"/>
        </a-form-item>
        <a-form-item label="企业简称" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:10px;">
          {{this.model.companyAbbreviation}}
        </a-form-item>

        <a-form-item label="所在地区" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:10px;">
          {{this.model.provinceCityCountry}}
        </a-form-item>

<!--        <a-form-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:10px;">-->
<!--          {{this.model.address}}-->
<!--        </a-form-item>-->

<!--        <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:10px;">-->
<!--          {{this.model.contactPerson}}-->
<!--        </a-form-item>-->

<!--        <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:10px;">-->
<!--          {{this.model.contactPhone}}-->
<!--        </a-form-item>-->

        <!--<a-form-item label="服务费率" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:10px;">-->
        <!--<a-input-number :min="0" :max="100" :formatter="value => `${value}%`" :parser="value => value.replace('%', '')" v-decorator="[ 'serviceFeeRate', {}]" placeholder="请输入服务费率" style="width: 100%" />-->
        <!--</a-form-item>-->
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

  import { httpAction, putAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import JDate from '@/components/jeecg/JDate'

  const authCompany = (params) => putAction('/saasmanager/hwPlatformCompany/authCompany', params)


  export default {
    name: 'HwPlatformCompanyAuthModal',
    components: {
      JDate
    },
    data() {
      return {
        form: this.$form.createForm(this),
        title: '操作',
        width: 800,
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        url: {
          add: '/saasmanager/hwPlatformCompany/add',
          edit: '/saasmanager/hwPlatformCompany/edit',
          imgerver: window._CONFIG['imgDomainOssURL']
        }

      }
    },
    created() {
    },
    methods: {
      add() {
        this.edit({})
      },
      edit(record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'companyName', 'companyAbbreviation', 'provinceCode', 'cityCode', 'countryCode', 'provinceCityCountry', 'address', 'contactPerson', 'contactPhone', 'serviceFeeRate', 'dutyParagraph', 'businessLicense', 'authenticationStatus', 'authenticationTime', 'authenticationBy', 'createTime', 'createBy', 'updateTime', 'updateBy', 'sysOrgCode', 'status'))
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        const that = this
        that.confirmLoading = true
        authCompany({ id: that.model.id, authenticationStatus: 2 }).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$emit('ok')
          } else {
            that.$message.warning(res.message)
          }
        }).finally(() => {
          that.confirmLoading = false
          that.close()
        })
      },
      handleCancel(e) {
        const that = this
        if (e.target.tagName != 'BUTTON') {
          that.close()
          return
        }
        authCompany({ id: that.model.id, authenticationStatus: 1 }).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$emit('ok')
          } else {
            that.$message.warning(res.message)
          }
        }).finally(() => {
          that.close()
        })
      },
      popupCallback(row) {
        this.form.setFieldsValue(pick(row, 'companyName', 'companyAbbreviation', 'provinceCode', 'cityCode', 'countryCode', 'provinceCityCountry', 'address', 'contactPerson', 'contactPhone', 'serviceFeeRate', 'dutyParagraph', 'businessLicense', 'authenticationStatus', 'authenticationTime', 'authenticationBy', 'createTime', 'createBy', 'updateTime', 'updateBy', 'sysOrgCode', 'status'))
      },
      getAvatarView() {
        return this.url.imgerver + this.model.businessLicense
      }

    }
  }
</script>
<style>
  .ant-upload-dd {
    border: 1px dashed #d9d9d9;
    height: 104px;
    max-width: 300px;
    min-width: 104px;
    border-radius: 4px;
    background-color: #fafafa;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease;
    vertical-align: top;
    margin-right: 8px;
    margin-bottom: 8px;
    display: table;
  }
</style>