<template>
	<div flex>
		<base-layout title="三方系统设置" ref="layout" @pageChange="pageChange" :isPage="true" :showTitle="false"
			@onFuncBtn="getFuncBtn">
			<div slot="main" style="height: 100%;" slot-scope="{ tableHeight }">
				<base-table ref="customtable" :border="true" :showIndex="false" :slotrow="true"
					:tabLoading.sync="tabLoading" :tableHeight="tableHeight" :tableData="tableData"
					:tableColumn="tableColumn" @sortChange="sortChange" @radioChange="radioChange">
					<!-- 单选 -->
					<!-- 	<template v-slot:option="{row}">
						<el-radio v-model="radioIndex" :label="row.$index"><span></span></el-radio>
					</template> -->
				</base-table>
			</div>
		</base-layout>

		<!-- 新增编辑弹窗
		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="RoleAdd"
			@handleConfirmClick="handleConfirmClick" :title="dialogType == 'add' ? '新增用户信息' : '编辑用户信息'" width="700px"
			top="10vh">
			<base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn">
			</base-form>
		</base-dialog> -->

		<base-dialog :closeEscape="false" :showClose="false" :closeModal="false" :dialogVisible.sync="RoleAdd"
			:title="frameTitle + '三方系统信息'" width="520px">
			<el-form validate-on-rule-change :model="ruleForm" :rules="rules" class="formMain" ref="ruleForm"
				label-width="100px">
				<el-form-item prop="r_RoleCode">
					<span class="label" slot="label">角色编码</span>
					<el-input placeholder="请输入角色编码" clearable v-model="ruleForm.r_RoleCode">
					</el-input>
				</el-form-item>
				<el-form-item prop="r_RoleName">
					<span class="label" slot="label">角色名称</span>
					<el-input clearable placeholder="请输入角色名称" v-model="ruleForm.r_RoleName">
					</el-input>
				</el-form-item>
				<el-form-item prop="r_Sort">
					<span class="label" slot="label">排列顺序</span>
					<el-input type="text" placeholder="请输入排列顺序" clearable v-model="ruleForm.r_Sort" :min="1"
						@input="(v) => (ruleForm.r_Sort = v.replace(/[^\d]/g, ''))">
					</el-input>
				</el-form-item>
				<el-form-item prop="r_Description">
					<span class="label" slot="label">描述</span>
					<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="ruleForm.r_Description">
					</el-input>
				</el-form-item>
			</el-form>
			<div flex="cross:center main:right">
				<el-button type="primary" @click="confirmBtn">确认</el-button>
				<el-button @click="cancelBtn">取消</el-button>
			</div>
		</base-dialog>
	</div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import BaseTable from '@/components/base/baseTable/index.vue'
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import BaseSelect from '@/components/base/BaseSelect'
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import { RoleGetBillList, RoleGetBillEditList, RoleDelData, RoleSaveData } from '@/api/apis/roleManagement'
import { GetDataSourcePerson, } from "@/api/apis/documentManagement";
import { OtherGetBillList } from '@/api/apis/tripleSet'
import baseForm from "@/components/base/baseNewForm/index.vue";

export default {
	name: 'RoleSettings',
	components: {
		baseLayout, BaseTable, BaseSelect, baseDialog, baseTree, baseForm
	},
	data() {
		return {
			radioIndex: false,
			radioId: false,
			radioForm: {},

			mainColor: '#f8f8f8 ',
			tabLoading: false,
			tableData: [],
			total: "",
			pageModel: {
				page: 1,
				limit: 20,
				Sequence: '',
				SequenceName: ''
			},
			// 表头
			tableColumn: [
				{
					label: '系统名称',
					prop: 'productName',
					tooltip: true,
					sortable: true,
				},
				{
					label: '角色名称',
					prop: 'r_RoleName',
					tooltip: true,
					sortable: true,
				},
				{
					label: '顺序',
					prop: 'r_Sort',
					tooltip: true,
				},
				{
					label: '备注 ',
					prop: 'remark',
					tooltip: true,
				},
			],
			sort: true,
			isFunBtn: true,
			formRow: [],
			RoleAdd: false,
			ruleForm: {
				R_RoleID: "", //角色id
				r_RoleCode: null, // 角色编码
				r_RoleName: null, // 角色名称
				r_Sort: null, // 排序
				r_Description: null, // 描述
			},
			rules: {
				r_RoleCode: [{
					required: true,
					message: '请输入角色编码',
					trigger: 'blur'
				}],
				r_RoleName: [{
					required: true,
					message: '请输入角色名称',
					trigger: 'blur'
				}],
				r_Sort: [{
					required: true,
					message: '请输入排序',
					trigger: 'blur'
				}],
			},
			frameTitle: '',
		}
	},
	watch: {
		pageModel: {
			deep: true, //深度监听设置为 true
			handler: function (newV, oldV) {
				this.getTableList()
			}
		},
		RoleAdd: {
			deep: true, //深度监听设置为 true
			handler: function (newV, oldV) {
				if (this.RoleAdd == false) {
					this.$nextTick(() => {
						this.$refs.ruleForm.choiceAssignment({});
					})
				}
			}
		}
	},
	mounted() {
		// this.$refs.baseTree.getMenuList()
		this.getTableList()
	},
	methods: {
		// 点击单元格进行多选操作
		radioChange(val) {
			this.radioIndex = val.index
			this.radioId = val.r_RoleID
			this.radioForm = val
		},
		// 获取表格内容
		async getTableList() {
			this.radioIndex = false
			this.tabLoading = true
			let params = {
				...this.pageModel
			}
			let res = await OtherGetBillList(params)
			if (res.code == 1) {
				this.$refs.layout.setPageTotal(res.data[0])
				this.$refs.customtable.clearRadioIndex()
				this.tableData = res.data[1]
			}
			// 
			this.tabLoading = false
		},
		async delData(id) {
			let params = {
				id: id
			}
			let res = await RoleDelData(params)
			if (res.code == 1) {
				this.$vmNews('删除成功', 'success')
				// this.getTableList()
				this.tableResult()
			} else {
				this.$vmNews('删除失败', 'error')
			}
		},
		getFuncBtn(btnEven) {
			if (btnEven.menuName == '新增') {
				this.ruleForm = {}
				this.frameTitle = '添加'
				this.RoleAdd = true
			}
			if (btnEven.menuName == '编辑') {
				// this.ruleForm = row
				if (this.radioIndex === false) {
					this.$vmNews('请选择一条记录')
				} else {
					this.ruleForm = Object.assign({}, this.radioForm)
					this.frameTitle = '编辑'
					this.RoleAdd = true
				}

			}
			if (btnEven.menuName == '删除') {
				if (this.radioIndex === false) {
					this.$vmNews('请选择一条记录')
				} else {
					this.$confirm('确认删除吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.delData(this.radioId)
						this.getTableList()
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消操作'
						});
					});
				}
				// this.tableData.splice(,1)
			}
		},
		// 确定
		async confirmBtn() {
			let params = {
				...this.ruleForm
			}
			let pass
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					pass = true
				} else {
					pass = false

				}
			});
			if (pass) {
				let res = await RoleSaveData({
					dataMain: params
				})
				if (res.code == 1) {
					this.$vmNews('保存成功', 'success')
					this.tableResult()
					this.RoleAdd = false
				}
				this.getTableList()
			} else {
				return
			}
		},
		tableResult() {
			this.ruleForm = {}
			this.radioForm = {}
			this.radioId = false
			this.radioIndex = false
			this.$refs.customtable.clearRadioIndex()
			this.pageModel.page = 1
			this.$nextTick(() => {
				this.$refs.layout.pageClear(1)
				this.$refs.customtable.clearSelect();
			})
			this.getTableList()
		},
		// 取消
		cancelBtn() {
			this.RoleAdd = false
		},
		// 页面改变时
		pageChange(model) {
			// this.pageModel = model
			this.pageModel.page = model.page
			this.pageModel.limit = model.limit
		},
		// 排序
		sortChange(prop, type) {
			this.pageModel.SequenceName = prop
			this.pageModel.Sequence = type
			this.pageModel.page = 1
			this.radioForm = {}
			this.radioId = false
			this.$nextTick(() => {
				this.$refs.layout.pageClear()
			})
			// this.$refs.layout.setPageTotal(1)
		},
		// 弹窗取消
		// handleClose() {
		// 	this.$nextTick(() => {
		// 		this.$refs.customForm.resetForm('ruleForm')
		// 	})
		// },
		//保存
		async handleConfirmClick(data) {
			let params = {
				...data,
				P_PersonID: this.P_PersonID,
			}
			let res = await PersonSaveData({
				dataMain: params
			})
			if (res.code == 1) {
				this.$vmNews('保存成功', 'success')
				this.RoleAdd = false
				this.resetTable()
			}
		},
	},
}
</script>

<style>
textarea {

	resize: none;

}
</style>
