<!--
  @description: 查看机构之公司基本信息
  @author: hdk
  @date:  2020-11-04 16:42:44
-->
<template>
  <div>
    <!--机构详情-->
    <div class="page-title">
      1.基本信息
    </div>
    <el-form ref="form" :model="formData" :rules="rules" :inline-message="true">
      <table class="from_table">
        <tr>
          <td>
            <el-form-item label="上级单位" prop="parentDepartName" />
          </td>
          <td colspan="3">
            <div>
              <el-input
                ref="departname"
                v-model="formData.parentDepartName"
                placeholder="请选择"
                style="width: calc(100% - 164px)"
                disabled
              />
              <el-button type="primary" class="ml10 choose" @click="organSelect">
                选择
              </el-button>
              <el-button type="primary" plain @click="organTree('clear')">
                清空
              </el-button>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="机构名称" prop="departName" />
          </td>
          <td colspan="3">
            <gx-input
              v-model="formData.departName"
              gx-maxlength="varchar50"
              type="text"
              placeholder="机构名称"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="机构属性" prop="orgType" />
          </td>
          <td>
            <el-select
              v-model="formData.orgType"
              filterable
              placeholder="请选择"
              style="width:100%"
              @change="changeOrgType"
            >
              <el-option
                v-for="(item) in orgTypeList"
                :key="item.typecode"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </td>
          <td>
            <el-form-item label="联系电话" prop="linktel" />
          </td>
          <td>
            <gx-input
              v-model="formData.linktel"
              gx-maxlength="varchar20"
              type="text"
              placeholder="联系电话"
            />
          </td>
        </tr>
        <tr v-if="formData.orgType !== '2'">
          <td>
            <el-form-item label="统一社会信用代码" prop="orgCode" />
          </td>
          <td>
            <gx-input
              v-model="formData.orgCode"
              type="text"
            />
          </td>
          <td>
            <el-form-item label="企业性质" prop="auditNotPassReason" />
          </td>
          <td>
            <el-select v-model="formData.entPrpt" filterable placeholder="请选择" style="width:100%">
              <el-option
                v-for="(item) in entPrptList"
                :key="item.typecode"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </td>
        </tr>
        <tr v-if="formData.orgType !== '2'">
          <td>
            <el-form-item label="联系地址" prop="areaValue" />
          </td>
          <td colspan="3">
            <!--地区组件-->
            <cascader :region-text="formData.areaValue" style="width:220px" @regionData="regionData" />
            <gx-input v-model="formData.address" gx-maxlength="varchar500" placeholder="最多允许输入500个汉字(1000字符)" style="width:calc(100% - 226px)" />
          </td>
        </tr>
        <tr v-if="formData.orgType !== '2'">
          <td>
            <el-form-item label="营业执照扫描件" prop="auditNotPassReason" />
          </td>
          <td colspan="3">
            <!--附件-->
            <upload
              ref="ref_upload"
              title=""
              :data="businessUpLoadData"
              :auto-delete="true"
              :auto-upload="true"
              but-text="图片上传"
              accept="image/jpg,image/jpeg,image/png"
              tip-text="上传格式 (.jpg .png)"
            />
          </td>
          <!-- <td>
            <el-form-item label="营业执照有效期" prop="auditNotPassReason" />
          </td>
          <td>
            <el-date-picker
              v-model="formData.auditNotPassReason"
              style="width: 70%;margin-right: 10px;"
              type="date"
              placeholder="选择日期"
            />
            <el-checkbox>
              长期
            </el-checkbox>
          </td> -->
        </tr>
      </table>
      <div v-if="formData.orgType !== '2'">
        <div class="page-title">
          2.财务信息
        </div>
        <table class="from_table">
          <tr>
            <td>开户银行</td>
            <td>
              <gx-input v-model="formData.bankName" />
            </td>
            <td>账号</td>
            <td>
              <gx-input
                v-model="formData.bankaccount"
                type="number"
              />
            </td>
          </tr>
          <tr>
            <td>注册资本(万元)</td>
            <td>
              <!--金额组件-->
              <money
                width="90%"
                :thousands="true"
                :money-value="formData"
                name="regcapital"
              />
            </td>
            <td>币种</td>
            <td>
              <gx-input v-model="formData.currencies" />
            </td>
          </tr>
        </table>
      </div>
    </el-form>
    <div class="bottom-btn">
      <el-button type="primary" @click="save('form')">
        确认保存
      </el-button>
      <el-button @click="cancel">
        取消保存
      </el-button>
    </div>
    <!-- 所属机构弹框 -->
    <organTree-dialog ref="organTree" :single-choice="true" @call-back="organTree" />
  </div>
</template>

<script>
/* api */
import { getBasicDepartInfoVo, saveDepartInfoNew } from '@/api/rolemanagment/organization'
/* 公共混入 */
import { organizationCommonMixin } from '../mixins/organizationCommonMixin'
import { organizationGroupMixin } from '../mixins/organizationGroupMixin'
/* 公共方法 */
import { filterDictText, randomData } from '@/assets/js/utils'// 常用方法
import { characters1_auto, creditCode } from '@/assets/js/validate'// 校验输入内容
/* 组件 */
import money from '@comp/common/money/money' // 金额组件
import organTreeDialog from '@/views/common/user/organizationTree/organTree-dialog' // 组织机构选择
import upload from '@comp/common/updownload/upload' // 附件上传组件
import cascader from '@comp/common/cascader' // 地区三级联动

export default {
  name: 'OrganizationInfoAddComp',
  components: {
    'organTree-dialog': organTreeDialog, // 组织机构选择
    upload, // 附件上传组件
    money, // 金额组件
    cascader // 地区三级联动
  },
  mixins: [organizationCommonMixin, organizationGroupMixin],
  props: {
    editMethod: { // 编辑模式（01新增、02编辑）
      type: String,
      default: '01'
    },
    organizationInformation: { // 当前选中机构信息
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      formDataInit: { // 表单数据初始化
        parentDepartName: '', // 上级单位名称
        parentdepartid: '', // 上级单位id
        departName: '', // 机构名称
        departId: '', // 机构id
        orgType: '', // 机构属性
        linktel: '', // 联系电话
        orgCode: '', // 统一社会信用代码
        entPrpt: '', // 企业性质
        areaValue: '', // 联系地址
        address: '', // 详细地址
        bankName: '', // 开户银行
        bankaccount: '', // 账号
        regcapital: '', // 注册资本(万元)
        currencies: '' // 币种
      },
      formData: {}, // 表单数据
      rules: { // 校验规则
        departName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 机构名称
        orgType: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 机构属性
        orgCode: [{ required: true, validator: creditCode, trigger: 'blur' }], // 统一社会信用代码
        areaValue: [{ required: true, validator: characters1_auto, trigger: 'blur' }] // 联系地址
      }
    }
  },
  watch: {
    // 01添加机构 02编辑机构信息
    editMethod(val) {
      // 添加机构默认值
      if (val === '01') {
        // 编辑数据重置
        this.resetData()
      } else {
        // 查看请求
        this.getBasicDepartInfo()
      }
    },
    organizationInformation: {
      handler(newVal, oldVal) { // 查看请求
        this.getBasicDepartInfo()
      },
      deep: true
    }
  },
  created() {
    // 获取字典
    this.getGroup(['entPrpt'])
    // 初始执行
    this.initExecution()
  },
  methods: {
    filterDictText,
    // 初始执行
    initExecution() {
      // 新建逻辑
      if (this.editMethod === '01') {
        // 编辑数据重置
        this.resetData()
        // 随机bizId
        this.formData.businesslicenceAttr = randomData()
        this.businessUpLoadData.bizId = this.formData.businesslicenceAttr
      } else {
        // 编辑逻辑
        this.getBasicDepartInfo()
      }
    },
    // 切换机构属性数据处理 orgType机构类型 1单位 2部门
    changeOrgType(orgType) {
      if (orgType === '2') {
        // 部门
        this.formData = {
          parentDepartName: this.organizationInformation.departname, // 上级单位名称
          parentdepartid: this.organizationInformation.id, // 上级单位id
          departName: this.formData.departName, // 机构名称
          departId: this.formData.departId, // 机构id
          orgType: this.formData.orgType, // 机构属性
          linktel: this.formData.linktel // 联系电话
        }
      } else {
        // 单位
        // formData, formDataInit合并保留value
        this.extend(this.formData, this.formDataInit)
      }
    },
    // formData, formDataInit合并保留value
    extend(formData, formDataInit) {
      for (const property in formDataInit) {
        if (!(property in formData)) {
          this.$set(formData, property, formDataInit[property])
        }
      }
    },
    // 编辑数据重置
    resetData() {
      this.formData = JSON.parse(JSON.stringify(this.formDataInit))
      this.formData.parentDepartName = this.organizationInformation.departname // 上级单位名称
      this.formData.parentdepartid = this.organizationInformation.id // 上级单位id
    },
    // 请求组织机构基本信息
    getBasicDepartInfo() {
      // 是否是机构树第一层
      if (this.organizationInformation.orgType !== '0') {
        const params = {
          id: this.organizationInformation.id
        }
        // 请求组织机构基本信息
        getBasicDepartInfoVo(params).then(res => {
          this.formData = res.data
          this.businessUpLoadData.bizId = res.data.businesslicenceAttr
        }).catch(() => {
        })
      } else {
        this.formData = JSON.parse(JSON.stringify(this.formDataInit))
      }
    },
    // 选择机构
    organSelect() {
      this.$refs.organTree.open({
        title: '选择机构', // 弹框标题
        dialog: true, // 弹窗状态
        selectCodes: this.formData.departid && this.formData.departid.split(',')// 当前选中的供货范围Code
      })
    },
    // 选择/清空机构
    organTree(data) {
      // 清空
      if (data === 'clear') {
        this.formData.parentDepartName = ''
        this.formData.parentdepartid = ''
      } else {
        // 选择
        this.$set(this.formData, 'parentDepartName', data.labels)
        this.$set(this.formData, 'parentdepartid', data.keys)
      }
    },
    // 地点三级联动组件回调
    regionData(regionName, location) {
      this.formData.areaValue = regionName
    },
    // 取消保存
    cancel() {
      this.$emit('changeIsEdit', false)
    },
    // 保存
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.formData.address === '' && this.formData.orgType === '1') {
            this.$message({
              message: '请填写详细地址',
              type: 'warning'
            })
            return false
          }
          // 区分是自然人机构还是公司(后端说写固定00)
          this.formData.registerType = '00'
          // 新增、保存调用接口
          saveDepartInfoNew(this.formData).then(res => {
            this.$message({
              message: '操作成功！',
              type: 'success'
            })
            this.$emit('changeIsEdit', true)
          }).catch(() => {
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.bottom-btn {
  text-align: center;
  padding: 15px;
}
</style>
