<template>
	<div>
		<!-- 标题按钮部分开始 -->
		<div class="tab-header webtop">
			<!-- 标题 -->
			<div>{{ viewTitle }}</div>
			<!-- start 添加修改按钮 -->
			<div>
				<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
				<el-button type="info" size="small" @click="handleReturn()">返回</el-button>
			</div>
			<!-- end 添加修改按钮 -->
			<!-- end 详情按钮 -->
		</div>
		<!-- 标题按钮部分结束 -->
		<!-- Start 新增修改部分 -->
		<div class="listconadd">
			<el-form ref="form_obj">
			<el-card class="box-card">
			 <div class="wlInfo"><span>风险类别</span></div>
             <div class="item">
                <span class="item_text">编号：</span>
				<el-input v-model="formobj.code" placeholder="类别编号" class="item_input" clearable />
              </div>
			  <div class="item">
                <span class="item_text">指标名称：</span>
                <el-input v-model="formobj.name" placeholder="指标名称" class="item_input" clearable />
              </div>
			  <div class="item"  >
                <span class="item_text">风险程度：</span>
                <el-select
                    v-model="formobj.levelName"
                    class="item_input"
                    placeholder="请选择风险等级名称"
					          @change="getType"
                  >
                    <el-option
                      v-for="(item, i) in arrList"
                      :key="i"
                      :label="item.name"
                      :value="item.sid"
                    />
                </el-select>
              </div>
			    <div class="item"  >
                <span class="item_text">风险类别：</span>
                <el-cascader ref="cascaderAddr" :options="options" :props="optionProps" v-model="selectedOptions" :show-all-levels="false" @change="handleChange3" class="item_input"></el-cascader>
              </div>
              <div class="item">
                <span class="item_text">指标说明：</span>
				     <el-input v-model="formobj.content" placeholder="分类说明" class="item_input" clearable />
              </div>
              <div class="item"  >
                <span class="item_text">报送单位：</span>
                <el-select
                    v-model="formobj.reportTarget"
                    class="item_input"
                    placeholder="请选择报送单位"
                  >
                    <el-option
                      v-for="(item, i) in plable"
                      :key="i"
                      :label="item.type"
                      :value="item.value"
                    />
                </el-select>
              </div>
              <div class="item" style="height: 110px;">
                <span class="item_text">备注信息：</span>
                <el-input  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }" v-model="formobj.remarks"  class="item_input" placeholder="备注信息" />
              </div>
			</el-card>
		</el-form>
		</div>
		<!-- End 添加修改部分 -->
	</div>
</template>

<script>
import req from '@/api/Risk/index'
export default {
	name: 'DispatchStandardsAdd',
	data() {
		return {
			submitdisabled: false,
			viewTitle: '',
			viewState: 1,
			arrLists: [],
			arrList: [],
			rangeArr: [],
			option: [],
			options: [],
			hierarchys: false,
			formobj: {
				name: '', 
				code: '', 
				content: '', 
				levelSid: '', 
        levelCode: '', 
				levelName: '', 
				typeCode:'',
				typeName:'',
				typeSid:'',
        remarks:'',
        reportTarget:''
			},
			rules: {
				name: [{ required: true, message: '风险等级名称不能为空', trigger: 'blur' }],
				code: [{ required: true, message: '风险等级代码不能为空', trigger: 'blur' }], 
				content: [{ required: true, message: '分类说明不能为空', trigger: 'blur' }], 
				reportTarget: [{ required: true, message: '报送单位不能为空', trigger: 'blur' }], 
			},
      optionProps: {
				value: 'code',
				label: 'name',
				children: 'down',
				expandTrigger: 'hover',
			},
       plable: [{value:1,type:'监管公司'},{value:2,type:'贷款支行'},{value:3,type:'总行'}],
       selectedOptions: [], //配送选择值
		}
	},
	created() {
        this.superior()
        this.selectTypes()
    },
	methods: {
		handleReturn(isreload) {
			if (isreload === 'true') this.$emit('reloadlist')
			this.formobj.sid = '' 
			this.formobj.name= '', 
			this.formobj.code= '', 
			this.formobj.content= '', 
			this.formobj.levelSid= '', 
			this.formobj.levelCode= ''
			this.formobj.levelName= ''
			this.formobj.typeCode='',
      this.formobj.typeName='',
      this.formobj.typeSid='',
      this.formobj.remarks='',
      this.formobj.reportTarget='',
      this.selectedOptions=[],
			
			this.$refs['form_obj'].resetFields()
			this.$emit('doback')
		},
		showAdd() {
			this.$nextTick(() => {
				this.$refs['form_obj'].clearValidate()
			})
			this.viewTitle = '【新增】风险指标'
			this.hierarchys= false
		},
		showEdit(row) {
			this.$nextTick(() => {
				this.$refs['form_obj'].clearValidate()
			})
			this.viewTitle = '【修改】风险指标'
			this.hierarchys= true
			const _this = this
			const vdata = row
			_this.formobj.id = vdata.id
			_this.formobj.sid = vdata.sid 
			_this.formobj.name = vdata.name 
			_this.formobj.code = vdata.code 
			_this.formobj.content = vdata.content 
			_this.formobj.levelName = vdata.levelName 
			_this.formobj.levelSid = vdata.levelSid 
			_this.formobj.levelCode = vdata.levelCode 
			_this.formobj.typeName = vdata.typeName
			_this.formobj.typeSid = vdata.typeSid
			_this.formobj.typeCode = vdata.typeCode 
			_this.formobj.reportTarget = vdata.reportTarget 
			_this.formobj.remarks = vdata.remarks
      
      _this.selectedOptions = JSON.parse(vdata.typeName);
		},
    getParentsById(list, id) {
      for (let i in list) {
        if (list[i].no == id) {//这里的no根据你的需求可进行改变
          //查询到就返回该数组对象的value
          return [list[i].no];
        }
        if (list[i].children) {
          let node = this.getParentsById(list[i].children, id);
          if (node !== undefined) {
            //查询到把父节把父节点加到数组前面
            node.unshift(list[i].no);
            return node;
          }
        }
      }
    },
		saveOrUpdate() {
      if(this.formobj.sid){
        this.formobj.typeName = JSON.stringify(this.selectedOptions)
      }
      if(this.formobj.reportTarget==='监管公司'){
        this.formobj.reportTarget===1
      }else if(this.formobj.reportTarget==='贷款支行'){
        this.formobj.reportTarget===2
      }else{
        this.formobj.reportTarget===3
      }
			req
			.saveRiskIndicator(this.formobj)
				.then(resp => {
					if (resp.success) {
						this.$message({ showClose: true, type: 'success', message: resp.msg })
						this.handleReturn('true')
					} else {
						// 根据resp.code进行异常情况处理
					}
				})
				.catch(() => {
			})
		},
        superior(){
            req
			.selectRiskLevel()
				.then(resp => {
          if(resp.code==200){
            this.arrLists=resp.data					
						for (var i = 0; i < this.arrLists.length; i++) {

            let item = {
              name: this.arrLists[i].name,
              sid: this.arrLists[i].sid,
            
            }
            this.arrList.push(item)
            }
           }
			})
        },
        selectTypes(){
            req
			.selectType()
				.then(resp => {
          if(resp.code==200){
          this.options=resp.data
         }
			})
        },
		getType(value) {
        const choose = this.arrLists.filter((item) => item.sid === value)
        this.formobj.levelSid = value
        this.formobj.levelCode = choose[0].code
        this.formobj.levelName = choose[0].name
      },
      handleChange3(value) {
      var getSId = this.$refs.cascaderAddr.getCheckedNodes()[0].data.sid
      this.formobj.typeSid=getSId
			var thsAreaCode = this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels;  //注意2： 获取label值
			var len=value.length-1;
			var lens=thsAreaCode.length-1;
			this.formobj.typeCode=value[len];//这是最终修改后的要提交的选中后的数据值
			this.formobj.typeName=thsAreaCode[lens];//这是最终修改后的要提交的选中后的数据值
			this.$refs.cascaderAddr.toggleDropDownVisible();// 选择之后将下拉界面收起
	},
	},
    watch: {
        selectedOptions() {
          if (this.$refs.cascaderAddr) {
            this.$refs.cascaderAddr.dropDownVisible = false;
            console.log(this.$refs.cascaderAddr,'cascader')
          }
        }
      },
}
</script>

<style lang="scss">
  .box-card {
    margin-left: 60px;
    margin-right: 60px;
    min-width: 70%;
    margin-top: 20px;
    padding-bottom: 50px;

    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 15px;
      height: 40px;
      line-height: 40px;

      .item_text {
        flex: 0.8;
        font-size: 18px;
        text-align: right;
      }

      .item_input {
        flex: 4;
        font-size: 16px;
        margin-left: 10px;
        margin-right: 80px;
      }

      .item_left_input {
        width: 20%;
      }

      .item_left_text {
        height: 30px;
        margin-left: 20px;
        line-height: 30px;
        color: #018AD2;
        padding: 0px 15px;
        border: 1.5px solid #018AD2;
        border-radius: 5px;

      }

      .item_right {
        flex: 1;
        justify-items: center;

        .item_right_list_text {
          font-size: 16px;
        }

        .item_right_list_delect {
          color: #5E94FF;
          margin-left: 20px;
          font-size: 16px;
          text-decoration: underline;
        }
      }

    }

  }
</style>
