<template>
  <!-- 调配弹窗 -->
  <a-modal v-model="show" title="调配岗位" :centered="true" footer="">
    <a-form-model :model="form" :label-col="{span: 8}" :wrapper-col="{span: 14}" ref="deployForm" :rules="deployrules">
      <a-form-model-item label="名称">
        <span class=" text-sm text-black">cssc</span>
      </a-form-model-item>
      <a-form-model-item label="UID">
        <span class=" text-sm text-black">cscs</span>
      </a-form-model-item>
      <a-form-model-item label="手机号">
        <span class=" text-sm text-black">scs</span>
      </a-form-model-item>
      <a-form-model-item label="所在机构层级">
        <span class=" text-sm text-black">csa</span>
      </a-form-model-item>
      <!-- 现属信息 -->
      <a-form-model-item :label="'现属'+label[i-1]" v-for="i in level_org" :key="i.id" >
        <span class=" text-sm text-black">{{i}}</span>
      </a-form-model-item>
      <a-form-model-item label="现地址">
        <span class=" text-sm text-black">dc</span>
      </a-form-model-item>
      <!-- 调配级别 -->
       <a-form-model-item label="选择调配级别">
        <a-select class="w-200"
                  @change="getDeployTo"
                  placeholder="请选择调配级别">
          <a-select-option v-for="(bank,i) in selectableDeployLevel" 
                           :key="bank"
                           :value="i">
                           {{bank}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <div v-if="showDeployInfo">
        <!-- 调配信息 -->
          <a-form-model-item :label="'调配'+selectableDeployLevel[form.deployTo]" >
            <a-select :placeholder="'选择调配的'+selectableDeployLevel[form.deployTo]"  
                      class="w-200">
              <a-select-option v-for="bank in bankList" 
                              :key="bank">
                              {{bank}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <!-- 调配银行的所属信息 -->
          <a-form-model-item :label="'所属'+detailDeployLabel[n-1]" 
                              v-for="n in detailDeployLength" 
                              :key="n.id">
            <a-select :placeholder="'选择现属'+detailDeployLabel[n-1]"  
                      class="w-200">
              <a-select-option v-for="(bank,i) in bankList" 
                              :key="bank" 
                              :value="i">
                              {{bank}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="详细地址" :required="true" prop="location" >
            <a-input v-model="form.location" class="w-200"/>
          </a-form-model-item>
      </div>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onConfirm">发布</a-button>
        <a-button style="margin-left: 10px;" @click="show=false">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script lang="ts">
import { eLevel } from '@/types/level'
import Vue, { PropType } from 'vue'
import { FormModel } from 'ant-design-vue'
import { LEVE_ORG } from '@/views/Root/OutletManagement/const'

export default Vue.extend({
  props:{
    label:{
      type:Array as PropType<String[]>,
      default(){
        return [ "一级分行", "二级分行","一级支行","二级支行"]
      }
    },
    level:{
      type:Number as PropType<eLevel>,
      default:0
    },
  },
  computed:{
    level_org():Number{
      return LEVE_ORG
    },
    bankList():Array<String>{
      return ['ada','ads','ds','dsa']
    },
    selectableDeployLevel():Array<String>{
      return this.label.slice(this.level-1,this.label.length)
    },
    detailDeployLength():number{
      return this.selectableDeployLevel.length-this.form.deployTo-1
    },
    detailDeployLabel():Array<String>{
      return this.selectableDeployLevel.slice(this.form.deployTo+1,this.selectableDeployLevel.length)
    }
  },
  data(){
    return{
      form:{
        deployTo:0,
        location:'vsdfc',
        firstBranch:'',
        secondaryBranch:'',
        firstSubBranch:'',
        secondarySubBranch:''
      },
      show:false,
      showDeployInfo:false,
      deployrules:{
        location: [
          { required: true, message: '请输入新地址', trigger: 'blur' },
        ]
      },
    }
  },
  methods:{
    showModal(){
      this.show = true
    },
    getDeployTo(val:number){
      this.showDeployInfo = true
      this.form.deployTo = val
    },
    onConfirm(){
      (this.$refs.deployForm as FormModel).validate(valid => {
        if (valid) {
          this.show = false
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
  },
  
})
</script>

<style scoped>
.ant-form-item{
  margin-bottom:5px;
}

.w-200{
  width:200px;
}
</style>