<template>
  <a-card :bordered="false" v-show="visible" class="card" title="申请">
    <a-row :gutter="48" slot="extra">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right">
          <!--          <a-popconfirm title="提交审批操作过后将无法更改，确认进行该操作吗？" @confirm="save(1)">-->
          <!--            <a-button type="danger">提交审批</a-button>-->
          <!--          </a-popconfirm>-->
          <a-button style="margin-left: 8px" type="primary" @click="save()">保存</a-button>
          <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>
        </span>
      </a-col>
    </a-row>
    <a-form :form="form" class="form">
      <a-form-item v-show="false">
        <a-input v-decorator="['id']" type="hidden"/>
      </a-form-item>

      <title-divider title="基本信息" width="90px"></title-divider>
      <a-row class="form-row" :gutter="16">
        <a-col :lg="7" :md="12" :sm="24">

          <a-form-item
            label="名称"
          >
            <a-input
              v-decorator="['name', {rules: [{required: true, message: '名称不能为空'}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="类型"
          >

            <a-select v-decorator="['type', { rules: [{required: true, message: '类型不能为空'}]}]" placeholder="请选择" mode="multiple">
              <a-select-option
                v-for="(label,value) in typeMap"
                :key="value"
                :label="label"
                :value="value">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>

        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="单位性质"
          >
            <a-select v-decorator="['unitNature']" placeholder="请选择">
              <a-select-option
                v-for="(label,value) in natureMap"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>

        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="16">
        <a-col :lg="7" :md="12" :sm="24">
          <a-form-item
            label="单位法人"
          >
            <a-input
              v-decorator="['legalPerson']"/>
          </a-form-item>
        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="联系方式"
          >
            <a-input
              v-decorator="['phone', {rules: [{ required: true, message: '请输入联系方式' }]} ]">
            </a-input>
          </a-form-item>

        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="联系人"
          >
            <a-input
              v-decorator="['contactPerson', {rules: [{required: true, message: '联系人不能为空'}]}]">
            </a-input>
          </a-form-item>

        </a-col>
      </a-row>

      <a-row class="form-row" :gutter="16">
        <a-col :lg="7" :md="12" :sm="24">
          <a-form-item
            label="注册资本"
          >
            <a-input
              type="number"
              suffix="万元"
              v-decorator="['registerCapital']"/>
          </a-form-item>
        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="送达地址"
          >
            <a-input
              v-decorator="['arriveAddress']">
            </a-input>
          </a-form-item>

        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="税号"
          >
            <a-input
              v-decorator="['taxNo']"/>
          </a-form-item>
          <!--          <a-form-item-->
          <!--            label="供货区域"-->
          <!--          >-->
          <!--            <a-tree-->
          <!--              checkable-->
          <!--              @expand="onExpand"-->
          <!--              :expandedKeys="expandedKeys"-->
          <!--              :autoExpandParent="autoExpandParent"-->
          <!--              v-model="checkedKeys"-->
          <!--              @check="onCheck"-->
          <!--              @select="onSelect"-->
          <!--              :check-strictly="true"-->
          <!--              :selectedKeys="selectedKeys"-->
          <!--              :treeData="depts"-->
          <!--            />-->
          <!--          </a-form-item>-->
        </a-col>
      </a-row>

      <a-row class="form-row" :gutter="16">
        <a-col :lg="7" :md="12" :sm="24">
          <a-form-item
            label="开户行"
          >
            <a-input
              v-decorator="['bankName']"/>
          </a-form-item>
        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="银行账号"
          >
            <a-input
              v-decorator="['bankNo']">
            </a-input>
          </a-form-item>

        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="委托代理人"
          >
            <a-input
              v-decorator="['agent']">
            </a-input>
          </a-form-item>

        </a-col>
      </a-row>

      <a-row class="form-row" :gutter="16">
        <a-col :lg="7" :md="12" :sm="24">
          <a-form-item
            label="供货类别"
          >
            <a-select v-decorator="['supplyType', { rules: [{required: true, message: '供货类别不能为空'}]}]" placeholder="请选择" mode="multiple">
              <a-select-option
                v-for="(label,value) in supplyTypeMap"
                :key="value"
                :label="label"
                :value="value">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="授权书"
          >
            <a-input
              v-decorator="['authorization']"/>
          </a-form-item>
        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="邮箱"
          >
            <a-input
              v-decorator="['email', {rules: [{ message: '请输入正确的邮箱', pattern: /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/ }], validateTrigger: ['change', 'blur']}]"/>
          </a-form-item>

        </a-col>
      </a-row>

      <a-row class="form-row" :gutter="16">
        <a-col :lg="7" :md="12" :sm="24">
          <a-form-item
            label="QQ"
          >
            <a-input
              v-decorator="['qq']"/>
          </a-form-item>

        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="微信"
          >
            <a-input
              v-decorator="['wechat']"/>
          </a-form-item>

        </a-col>
        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="注册地址"
          >
            <a-input
              v-decorator="['registerAddress']"/>
          </a-form-item>

        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="16">
        <a-col :lg="7" :md="12" :sm="24">
          <a-form-item
            label="供货品牌"
          >
            <a-textarea
              v-decorator="['supplyBrand']"/>
          </a-form-item>

        </a-col>
        <a-col :xl="{span: 15, offset: 1}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="主营业务"
          >
            <a-textarea
              v-decorator="['mainBusiness', {rules: [{required: true, message: '主营业务不能为空'}]}]"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="16">
        <a-col :lg="11" :md="24" :sm="24">
          <a-form-item
            label="经营范围"
          >
            <a-textarea
              v-decorator="['businessScope', {rules: [{required: true, message: '经营范围不能为空'}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :xl="{span: 11, offset: 1}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
          <a-form-item
            label="备注"
          >
            <a-textarea
              v-decorator="['remark']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <title-divider title="资质信息" width="90px"></title-divider>
      <a-row class="form-row" :gutter="16">
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item
            label="资质上传"
          >
            <upload ref="upload" @catchImage="catchImage"></upload>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<script>
import pick from 'lodash.pick'
import { addSupplier, updateSupplier } from '@/api/purchase/supplier'
import { getDeptTree } from '@/api/upms/dept'
import Upload from '@/components/Upload/Upload'

export default {
  name: 'BaseSupplier',
  components: { Upload },
  data () {
    return {
      confirmLoading: false,
      modalTitle: null,
      depts: [],
      form: this.$form.createForm(this),
      expandedKeys: [],
      countryMap: {},
      selectedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      halfCheckedKeys: [],
      visible: false,
      imgUrls: []
      // 下拉框map
    }
  },
  props: {
    statusMap: {
      type: Object,
      default: () => {}
    },
    typeMap: {
      type: Object,
      default: () => {}
    },
    supplyTypeMap: {
      type: Object,
      default: () => {}
    },
    natureMap: {
      type: Object,
      default: () => {}
    }
  },
  created () {
    // 下拉框map
    this.countryMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SYS_USER_COUNTRY)
    getDeptTree({ natureList: ['XIANG_MU_BU', 'FEN_GONG_SI', 'JITUAN'] }).then(res => {
      this.depts = res.data
    })
  },
  methods: {
    base (record) {
      this.visible = true
      // 如果是空标识添加
      if (this.BaseTool.Object.isBlank(record)) {
        this.modalTitle = '添加'
        this.imgUrls = []
        this.$refs.upload.base(20, [])
        return
      }
      this.modalTitle = '编辑'
      const { form: { setFieldsValue } } = this
      record.type = record.type.split(',')
      record.supplyType = record.supplyType.split(',')
      record.deptIds = record.deptIds ? record.deptIds.split(',') : []
      this.checkedKeys = record.deptIds
      this.expandedKeys = record.deptIds
      const fileList = []
      if (record.imgUrls) {
        this.imgUrls = record.imgUrls.split(',')
        this.imgUrls.forEach((value, index) => {
          fileList.push({
            uid: index,
            name: '',
            status: 'done',
            url: value,
            originUrl: value
          })
        })
      }
      this.$refs.upload.base(20, fileList)
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, [
          'id',
          'account',
          'name',
          'type',
          'unitNature',
          'legalPerson',
          'phone',
          'contactPerson',
          'registerCapital',
          'registerAddress',
          'arriveAddress',
          'taxNo',
          'bankName',
          'bankNo',
          'agent',
          'deptIds',
          'supplyType',
          'authorization',
          'supplyBrand',
          'mainBusiness',
          'businessScope',
          'qq',
          'email',
          'wechat',
          'status',
          'remark'
        ])))
      })
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck (checkedKeys, info) {
      this.halfCheckedKeys = info.halfCheckedKeys
      this.checkedKeys = checkedKeys
      console.log('onCheck', [...this.checkedKeys, ...this.halfCheckedKeys])
    },
    onSelect (selectedKeys, info) {
      console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    },
    save (value) {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        values.type = values.type.join(',')
        values.imgUrls = this.imgUrls.join(',')
        values.supplyType = values.supplyType.join(',')
        console.log(this.checkedKeys.checked)
        const ids = this.checkedKeys.checked
        values.deptIds = ids ? ids.join(',') : ''
        values.submitType = value
        if (this.BaseTool.String.isBlank(values.id)) {
          addSupplier(values)
            .then(() => {
              this.$message.info('操作成功')
              this.handleCancel()
            }).catch(() => {
              this.confirmLoading = false
            })
        } else {
          updateSupplier(values)
            .then(() => {
              this.$message.info('操作成功')
              this.handleCancel()
            }).catch(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    catchImage (fileList) {
      this.imgUrls = fileList.map((item) => {
        return item.url
      })
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      this.$emit('ok', {})
    }

  }
}
</script>
<style scoped>

</style>
