<template>
	<!-- 权限规则 -->
	<div>
		<!-- <Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
			<div class="new_card_pd">
          <Form
          ref="roleData"
          inline
          :model="roleData"
          :label-width="labelWidth"
          :label-position="labelPosition"
          @submit.native.prevent
         >
          <FormItem label="规则状态：">
              <Select
                v-model="roleData.is_show"
                placeholder="请选择"
                clearable
                class="input-add"
              >
                <Option value="1">显示</Option>
                <Option value="0">不显示</Option>
              </Select>
            </FormItem>
         <FormItem label="按钮名称：" prop="status2" label-for="status2">
            <Input
              v-model="roleData.keyword"
              placeholder="请输入按钮名称"
              class="input-add mr14"
            />
            <Button @click="getData()" type="primary">查询</Button>
          </FormItem>
      </Form>
			</div>
		</Card> -->
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Button v-auth="['setting-system_menus-add']" type="primary" @click="menusAdd('添加部门')">添加部门</Button>
			<vxe-table :border="false" class="ivu-mt" highlight-hover-row highlight-current-row :loading="loading"
				ref="xTable" row-id="id" header-row-class-name="false"
				:tree-config="{ children: 'children',reserve:true }" :data="tableData">
				<vxe-table-column field="department_id" title="ID" tooltip max-width="70"></vxe-table-column>
				<vxe-table-column field="name" tree-node title="部门名称" min-width="200"></vxe-table-column>
				<vxe-table-column
		  field="srot"
		  tree-node
		  title="排序"
		  min-width="200"
		></vxe-table-column>
				<!-- <vxe-table-column field="api_url" title="接口路径" min-width="150">
          <template v-slot="{ row }">
            <span>{{
              row.methods
                ? "[" + row.methods + "]  " + row.api_url
                : row.api_url
            }}</span>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="unique_auth"
          title="前端权限"
          min-width="300"
        ></vxe-table-column>
        <vxe-table-column
          field="menu_path"
          title="页面路由"
          min-width="240"
          tooltip="true"
        ></vxe-table-column>
        <vxe-table-column field="flag" title="规则状态" min-width="120">
          <template v-slot="{ row }">
           <i-switch
						  v-if="row.auth_type==1"
              v-model="row.is_show"
              :value="row.is_show"
              :true-value="1"
              :false-value="0"
              @on-change="onchangeIsShow(row)"
              size="large"
            >
              <span slot="open">显示</span>
              <span slot="close">隐藏</span>
            </i-switch>
          </template>
        </vxe-table-column> -->
				<vxe-table-column field="date" title="操作" align="center" width="200" fixed="right">
					<template v-slot="{ row }">
						<a @click="edit(row, '编辑')">编辑</a>
						<Divider type="vertical" />
						<a @click="del(row, '删除部门')">删除</a>
					</template>
				</vxe-table-column>
			</vxe-table>
		</Card>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		getTable,
		menusDetailsApi,
		isShowApi,
		editMenus
	} from "@/api/systemMenus";
	import {
		getDepartmentList,
		delDepartment
	} from "@/api/store"
	import formCreate from "@form-create/iview";
		import Setting from "@/setting";
	export default {
		name: "systemMenus",
		data() {
			return {
				roterPre: Setting.roterPre,
				spinShow: false,
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24,
				},
				roleData: {
					is_show: "",
					keyword: "",
				},
				loading: false,
				tableData: [],
				FromData: null,
				icons: "",
				formValidate: {},
				titleFrom: "",
				modalTitleSs: "",
			};
		},
		components: {
			formCreate: formCreate.$form()
		},
		computed: {
			...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		mounted() {
			// this.formValidate.auth_type = '1';
			this.getData();
		},
		methods: {
			// 修改规则状态
			onchangeIsShow(row) {
				let data = {
					id: row.id,
					is_show: row.is_show,
				};
				isShowApi(data)
					.then(async (res) => {
						this.$Message.success(res.msg);
						this.$store.dispatch("admin/menus/getMenusNavList");
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 请求列表
			getList() {
				this.formValidate = Object.assign({}, this.$options.data().formValidate);
				this.getData();
			},
			selectRule(data) {
				this.formValidate.menu_name = data.real_name;
				this.formValidate.methods = data.method;
				this.formValidate.api_url = data.rule;
			},
			// 清除表单数据
			clearFrom() {
				this.formValidate = Object.assign({}, this.$options.data().formValidate);
			},
			// 删除
			del(row, tit) {
				let delfromData = {
					title: tit,
					url: `/work/deleteDepartment?id=` + row.id + '&department_id=' + row.department_id,
					method: "post"
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.getData();
						this.$store.dispatch("admin/menus/getMenusNavList");
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 规则详情
			menusDetails(id) {
				menusDetailsApi(id)
					.then(async (res) => {
						this.formValidate = res.data;
						this.$refs.menusFrom.modals = true;
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 编辑
			edit(row, title, index) {
				this.$router.push({
					path: this.roterPre + "/store/department/create?id=" + row.id + '&name=' + row.name + '&name_en=' + row.name_en + '&srot=' + row.srot + '&department_leader=' + row.department_leader + '&parentid=' + row.parentid + '&department_id=' + row.department_id
				});
			},
			// 添加
			menusAdd(title) {
				this.$router.push({
					path: this.roterPre + "/store/department/create"
				});
			},
			// 列表
			getData() {
				this.loading = true;
				this.roleData.is_show = this.roleData.is_show || "";
				getDepartmentList(this.roleData)
					.then(async (res) => {
						this.tableData = res.data;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			// 关闭按钮
			cancel() {
				this.$emit("onCancel");
			},
		},
	};
</script>

<style scoped lang="stylus">
</style>