<template>
	<div class="app-container">
		<div v-show="viewState == 1">
			<button-bar ref="btnbar" view-title="风险指标" :btndisabled="btndisabled" @btnhandle="btnHandle" />
			<div class="main-content">
			<div class="searchcon">
				<el-button size="small" class="searchbtn" @click="isSearchShow = !isSearchShow">{{ isSearchShow ? '隐藏查询条件' : '显示查询条件' }}</el-button>
				<div v-show="isSearchShow" class="search">
					<el-form ref="queryParams" :model="queryParams.params"  :inline="true" class="tab-header">
						<el-form-item label="指标名称"><el-input v-model="queryParams.params.name" placeholder="请输入指标名称" clearable /></el-form-item>
						<el-form-item label="风险等级"><el-input v-model="queryParams.params.levelName" placeholder="请输入风险等级" clearable /></el-form-item>
						<el-form-item label="风险类别"><el-input v-model="queryParams.params.bigTypeName" placeholder="请输入风险类别" clearable /></el-form-item>
						<el-form-item label="风险小类"><el-input v-model="queryParams.params.typeName" placeholder="请输入风险小类" clearable /></el-form-item>
						<div class="btn" style="text-align: center;">
							<el-button type="primary" size="small" icon="el-icon-search"  @click="dosearch">查询</el-button>
							<el-button type="primary" size="small" icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
						</div>
					</el-form>
				</div>
			</div>
			<!-- Start 项目列表头部 -->
			<div class="listtop">
				<div class="tit">风险指标列表</div>
				<pageye v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" class="pagination" @pagination="loadList" />
			</div>
			<!-- End 项目列表头部 -->

			<!-- Start 项目列表 -->
			<div>
				<el-table v-loading="tableLoading" :data="dataList" border style="width: 100%" >
					<el-table-column width="80px" label="序号" type="index" :index="indexMethod" align="center" />
					<el-table-column prop="name" label="指标名称" align="center" />
					<el-table-column prop="code" label="指标编码" align="center" />
					<el-table-column prop="levelName" label="风险等级" align="center" />
					<el-table-column prop="bigTypeName" label="风险类别" align="center" />
					<el-table-column prop="typeName" label="风险小类" align="center" />
					<el-table-column prop="content" label="指标说明" align="center" />
					<!-- <el-table-column prop="hierarchy" :formatter="formatorderdegree"  label="层级" align="center" /> -->
          <el-table-column prop="remarks" label="备注信息" align="center" />
					<el-table-column fixed="right" label="操作"  align="center">
                        <template slot-scope="scope">
						   <el-tooltip class="item" effect="dark" content="编辑" placement="top-end">
								<i  class="el-icon-edit-outline"  @click="toEdit(scope.row)"></i>
                           </el-tooltip>
						   <el-tooltip class="item" effect="dark" content="删除" placement="top">
							<i  class="el-icon-delete"  @click="doDel(scope.row)"></i>
                           </el-tooltip>
               </template>
             </el-table-column>
				</el-table>
			</div>
			<!-- End 项目列表 -->
			<div class="pages">
				<div class="tit" />
				<!--  翻页  -->
				<pagination
					v-show="dataList.length > 0"
					:total="queryParams.total"
					:page.sync="queryParams.current"
					:limit.sync="queryParams.size"
					class="pagination"
					@pagination="loadList"
				/>
			</div>
		</div>
		</div>
		<!-- End 查询和其列表部分 -->
		<el-dialog
          title="二级类别信息"
          :visible.sync="drawer"
          width="65%">
		  <el-table v-loading="listLoading" :data="formobj" border style="width: 100%;"
                :row-style="{height: '40px'}">
                <!-- <el-table-column type="selection" align="center" width="50"/> -->
                <el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center" />
                <el-table-column label="类别名称" width="120" prop="name" align="center" />
                <el-table-column label="类别编号" width="160" prop="code" align="center" />
                <el-table-column label="分类说明"  prop="content" align="center" />
                <el-table-column label="层级" width="70" :formatter="formatorderdegree" prop="hierarchy" align="center" />
                <el-table-column label="备注信息" width="200" prop="remarks" align="center" />
				<el-table-column label="操作" wid align="center" width="200">
                  <template slot-scope="scope">
                    <!-- <el-button type="primary" size="mini" @click="toPersonnelDetail(scope.row.sid)">查看</el-button> -->
                    <el-button type="primary" size="mini" @click="toEdit(scope.row)">编辑</el-button>
                    <el-button type="primary" size="mini" @click="doCommoditylDel(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>

        </el-dialog>
		<!-- 新增修改部分组件 -->
		<div-add v-show="viewState == 2 || viewState == 3" ref="divadd" @doback="resetState" @reloadlist="loadList" />
	</div>
</template>

<script>
import req from '@/api/Risk/index'
import ButtonBar from '@/components/ButtonBar'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import divAdd from './RiskAdd'

export default {
	name: 'DispatchOrderinfoIndex',
	components: {
		ButtonBar,
		Pagination,
		pageye,
		divAdd,
	},
	data() {
		return {
			btndisabled: false,
			viewState: 1, // 1、列表 2、添加 3、修改 4、查看
			isSearchShow: false,
			tableLoading: false,
			drawer: false,
			listLoading: false,
			dataList: [],
			queryParams: {
				current: 1,
				size: 10,
				total: 0,
				params: {
                    name:'',
                    levelName:'',
                    bigTypeName:'',
                    typeName:'',
				}
			},
			multipleSelection: [],
			btnList: [
                 {
                  type: 'primary',
                  size: 'small',
                  icon: 'plus',
                  btnKey: 'toAdd',
                  btnLabel: '新增'
                },
                {
                  type: 'info',
                  size: 'small',
                  icon: 'cross',
                  btnKey: 'doClose',
                  btnLabel: '关闭'
                }
              ],
			size:'',
			TableList:[],
			formobj:[]
		}
	},
	mounted() {
      // 初始化按钮
      this.$refs['btnbar'].setButtonList(this.btnList)
    },
	created() {
		this.loadList()
	},
	methods: {
		resetState() {
			this.viewState = 1
		},
		btnHandle(btnKey) {
			switch (btnKey) {
				case 'toAdd':
					this.toAdd()
					break
			   case 'doClose': // 关闭
         this.doClose()
         break
				default:
					break
			}
		},
		toAdd() {
			this.viewState = 2
			this.$refs['divadd'].showAdd()
		},
		toEdit(row) {
			this.viewState = 3
			this.$refs['divadd'].showEdit(row)
			this.drawer=false
		},
		doDel(row) {
			const sids = []
		    sids.push(row.sid)
			const tip = '请确认是否是否删除该条记录?'
			this.$confirm(tip, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					req
						.riskIndicatorsDel(sids)
						.then(resp => {
							if (resp.success) {
								this.$message({ type: 'success', message: resp.msg, showClose: true })
								this.loadList()
							} else {
								// 根据resp.code进行异常情况处理
							}
						})
				})
				.catch(() => {})
		},
		dosearch() {
			this.queryParams.current = 1
			this.loadList()
		},
		resetQuery() {
			this.queryParams.params = {
				    name:'',
                    levelName:'',
                    bigTypeName:'',
                    typeName:'',
			}
			this.queryParams.params.sid = '' // sid
			this.queryParams.params.name = '' // 登录名
			this.dosearch()
		},
		loadList() {
			const _this = this
			this.tableLoading = true
			req
				.riskIndicatorsListPage(this.queryParams)
				.then(resp => {
					_this.tableLoading = false
					if (resp.success) { 
						const data = resp.data
						_this.queryParams.total = data.total
						_this.dataList = data.records
					} else {
						// 根据resp.code进行异常情况处理
					}
				})
				.catch(() => {
					_this.tableLoading = false
				})
		},
		// 序号
		indexMethod(index) {
			var pagestart = (this.queryParams.current - 1) * this.queryParams.size
			var pageindex = index + 1 + pagestart
			return pageindex
		},
		doClose() {
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
        },
		purchase(row){	
			this.drawer=true
			req
				.selectRiskTypeSubordinate(row.sid)
				.then(resp => {
					this.listLoading = false
					if (resp.code==200) { 
						this.formobj=resp.data
					} else {
						// 根据resp.code进行异常情况处理
					}
				})
				.catch(() => {
					this.listLoading = false
				})
		},
        formatorderdegree: function( row, column) {
         if(row.hierarchy === 1){
             return '一级'
         }else if(row.hierarchy === 2) {
			return '二级'
		 }else{
			return ''
		 }
        },
		doCommoditylDel(row){
			req
				.delriskType(row.sid)
				.then(resp => {
					if (resp.code==200) {
						this.$message({ type: 'success', message: resp.msg, showClose: true })
						this.drawer=false
					} else {
						// 根据resp.code进行异常情况处理
					}
				})
		},
	}
}
</script>
<style scoped>
.margin-top {
  border-bottom: 1px solid #ebebeb;
}
.item {
   margin: 6px;
 }
</style>
