<template>
  <div>
    <drag-modal :title="dialogTitle" :width="dialogWidth" :visible="visible" :isFooter="operateBizBtn.length > 0 ? true : false" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleClose" :canClickMask="canClickMask" :leftPosition="leftPosition" :topPosition="topPosition" :initPosition="initPosition" okText="保存" cancelText="关闭" wrapClassName="ant-modal-cust-warp" style="top: 5%; height: 70%; overflow-y: hidden" >
    <a-spin :spinning="confirmLoading" size="large">
      <a-config-provider :locale="locale">
        <a-form class="k-form-build-9136076486841527" layout="horizontal" :hideRequiredMark="undefined" :form="form" @submit="handleSubmit" >
          <div class="build-block" >
            <!-- grid_1665212650377 - 栅格布局 -->
            <a-row class="grid-row" :class="[]" :gutter="0" >
              <a-col class="grid-col" :class="[]" :span="24" >
                <div class="build-block" >
                  <!-- select_1665207953137 - 原因分类 -->
                  <a-form-item :colon="true" :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_abbrReason_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>原因分类</span>
                      </a-tooltip>
                    </span>
                    <j-dict-select-tag v-if="!data_abbrReason_record.options.hidden" :options=" dynamicData['changeInfo'] " :dynamic="3" :dictCode="`changeInfo`" style="width:100%" placeholder="请选择" @change="handleChange($event, 'abbrReason')" v-decorator="[ 'abbrReason', { }, ]" />
                  </a-form-item>
                </div>
              </a-col>
            </a-row>
          </div>
          <div class="build-block" >
            <!-- grid_1665215931455 - 栅格布局 -->
            <a-row class="grid-row" :class="[]" :gutter="0" >
              <a-col class="grid-col" :class="[]" :span="12" >
              </a-col>
              <a-col class="grid-col" :class="[]" :span="12" >
              </a-col>
            </a-row>
          </div>
          <div class="build-block" >
            <!-- grid_1665215759662 - 栅格布局 -->
            <a-row class="grid-row" :class="[]" :gutter="0" >
              <a-col class="grid-col" :class="[]" :span="24" >
                <div class="build-block" >
                  <!-- input_1665212671377 - 申请原因 -->
                  <a-form-item :colon="true" :label-col="{'style':'width:100px'}" :wrapper-col="{'style':'width:auto; flex:1'}" :style="data_reason_record.options.hidden ? 'display: none' : 'display: flex'" >
                    <span slot="label">
                      <a-tooltip>
                        <span>申请原因</span>
                      </a-tooltip>
                    </span>
                    <JInput ref="reason" :recordModel="'reason'" style="width:100%;" placeholder="请输入" type="text" @focus="handleFocus" @change="handleChange" @blur="handleBlur" @enter="handleEnter" v-decorator="[ 'reason', { }, ]" />
                  </a-form-item>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </a-config-provider>
    </a-spin>
    <template slot="footer">
      <a-button v-for="(item, index) in operateBizBtn" :key="index" :type="item.type ? item.type : 'primary'" :icon="item.icon" @click="handleBusiness(item.operation, item)" >{{ item.label }}</a-button >
    </template>
  </drag-modal>
  </div>
  </template>
  
    <script>
    import baseModalMixin from './baseModalMixin'
    import formBuildMixin from './formBuildMixin'
  
    export default {
      mixins: [formBuildMixin, baseModalMixin],
      data() {
        return {
          pageId: 'DELETE_SHORT_LIST_APPLY_MODAL',
          operateBizBtn: [{'hidden':false,'icon':'','hotKey':'','permission':'','label':'关闭','operationMethod':'','sort':0,'type':'primary','params':[],'operation':'close','displayTab':'','direction':'left'},{'hidden':false,'icon':'','hotKey':'','permission':'','label':'确认申请','operationMethod':'','sort':0,'type':'primary','params':[],'operation':'delApplySend','displayTab':'','direction':'right'}],
          dialogTitle: '',
          dialogServiceName: '',
          dialogWidth: '50%',
          dialogBaseCodeType: '',
          dialogModalType: 'dialog',
          dialogUrl: {'add':'save','update':'updateTemplateById'},
  
          data_abbrReason_record: {"options":{"options":[],"dynamic":3,"placeholder":"请选择","dynamicKey":"changeInfo"},"model":"abbrReason","label":"原因分类","type":"select","key":"select_1665207953137"},
          data_reason_record: {"options":{"type":"text","placeholder":"请输入","formatPic":true},"model":"reason","label":"申请原因","type":"input","key":"input_1665212671377"}
        }
      },
      methods: {
        callInMountedCustom(ctos3CommonApi, packageRpcParam){
      this.spinning = false
      console.log()
      let wheres = []
      let where = {}
      where.column = 'IE_ID'
      where.condition = 'andeq'
      where.v1 = 'I'
      wheres.push(where)
      
      let where2 = {}
      where2.column = 'CHANGE_TYPE'
      where2.condition = 'andeq'
      where2.v1 = '4'
      wheres.push(where2)
      this.ctos3CommonApi('codeService', 'getListWhere', [wheres, [{column:'abbr_reason',condition:'asc'}],
          [], 'BasCustCgReason'
      ]).then((res) => {
          if (res.responseData.statusCode === 0) {
              const result = res.responseData.resultData
                                                  let changeInfo = result
                                                              
                          let maxLength = 0;
              debugger
              for(let i of changeInfo){
                if(i.abbrReason.length > maxLength){
                  maxLength = i.abbrReason.length
                }
              }
              
              let abbrReasonList = result
              abbrReasonList.forEach((item) => {
                                  item.label = item.abbrReason.padEnd(maxLength+1,'\u3000') + item.reasonContent
                  item.value = item.reasonContent
              })
              this.$set(this.dynamicData,'changeInfo',abbrReasonList)
                                                                                  }
      })
  },
  handleChangeCustom(value, key){
      if (key === 'abbrReason') {
          this.setData({
              reason: value
          })
      }
      if (key === 'reason') {
          this.setData({
              reason: value
          })
      }
  },
  dynamicFuncCustom(operation){
  this.$emit("ok","delApplySend")
  },
  handleBusinessCustom(operation){
      if (operation == 'delApplySend') {
          this.getData().then((res) => {
              this.reason = res.reason
              this.$emit("ok", 'delApplySend')
              this.visible = false
          })
      }
      if (operation == 'close') {
          this.visible = false
      }
  }
      }
    }
    </script>