<template>
  <a-modal
    :title="title"
    :width="width"
    :bodyStyle="bodyStyle"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
    :visible="visible"
    :footer="null">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">


        <a-form-item label="身份证正面" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <template>
            <img :src="getAvatarView()" :preview="getAvatarView()" alt="身份证正面" style="height:104px;max-width:300px"/>
          </template>
        </a-form-item>

        <a-form-item label="身份证反面" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <template>
            <img :src="getAvatarView1()" :preview="getAvatarView1()" alt="身份证反面" style="height:104px;max-width:300px"/>
          </template>
        </a-form-item>
      </a-form>
    </a-spin>


  </a-modal>
</template>

<script>

  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import Vue from 'vue'
  import JDate from '@/components/jeecg/JDate'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import data1 from '../../tools/area.json'
  import { duplicateCheck } from '@/api/api'

  export default {
    name: 'HwViewPhotoModal',
    components: {
      JDate,
    },
    data() {
      return {
        disableSubmit:false,
        options: [{
          value: '',
          label: '',
          isLeaf: false
        }],
        companyId: '',
        form: this.$form.createForm(this),
        picUrl: '',
        title: '操作',
        width: 800,
        bodyStyle: {
          paddingTop: '20px',
          paddingBottom:'50px',
          height: (window.innerHeight * 0.62) + 'px',
          'overflow-y': 'auto'
        },
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        uploadLoading: false,
        confirmLoading: false,
        headers: {},
        validatorRules: {
          idcardFront:{}

        },
        url: {
          add: '/saasmanager/hwPlatformCompany/add',
          edit: '/saasmanager/hwPlatformCompany/edit',
          fileUpload: window._CONFIG['domianURL'] + '/hpSys/common/ossUpload',
          imgerver: window._CONFIG['imgDomainOssURL']
        }

      }
    },

    created() {
      const token = Vue.ls.get(ACCESS_TOKEN)
      this.headers = { 'X-Access-Token': token }

    },
    computed: {
      uploadAction: function() {
        return this.url.fileUpload
      }
    },
    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,'idcardFront','idcardBack'))
        })
      },
      close() {
        this.visible = false
      },
      beforeUpload: function(file) {
        var fileType = file.type
        if (fileType.indexOf('image') < 0) {
          this.$message.warning('请上传图片')
          return false
        }
        //TODO 验证文件大小
      },
      handleChange(info) {
        this.picUrl = ''
        if (info.file.status === 'uploading') {
          this.uploadLoading = true
          return
        }
        if (info.file.status === 'done') {
          var response = info.file.response
          this.uploadLoading = false
          console.log(response)
          if (response.success) {
            this.model.businessLicense = response.message
            this.picUrl = 'Has no pic url yet'
          } else {
            this.$message.warning(response.message)
          }
        }
      },
      getAvatarView() {
        if(this.model.idcardFront){
          if( this.model.idcardFront.indexOf("http")!=-1){
            return this.model.idcardFront
          }else{
            return this.url.imgerver + this.model.idcardFront
          }
        }
      },
      getAvatarView1() {
       if( this.model.idcardFront){
         if( this.model.idcardFront.indexOf("http")!=-1){
           return this.model.idcardBack
         }else{
           return this.url.imgerver + this.model.idcardBack
         }
       }

      },
      validatePhone(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)) {
            callback()
          } else {
            callback('请输入正确格式的手机号码!')
          }
        }
      },
      handleOk() {
        const that = this

        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            let formData = Object.assign(this.model, values)
            if(this.selectedDepartKeys[0]){
              formData.subcontractorId = this.selectedDepartKeys[0];
            }
            console.log('表单提交数据', formData)
            httpAction(httpurl, formData, method).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() {
        this.close()
      },
      popupCallback(row) {
        this.form.setFieldsValue(pick(row, 'idcardFront', 'idcardBack'))
      },

    }
  }
</script>

<style lang="less" scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 30px;
    /*margin-bottom: 5px;*/
    float: right;
  }

  .avatar-uploader > .ant-upload {
    width: 104px;
    height: 104px;
  }

  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>