<!-- 信息分类 -->
<template>
      <div class="datamanage-wrapper">
        <div class="search-wrapper">
		 <!-- <el-select
		    v-model="name"
		    placeholder="请选择类别"
		    clearable
		    style="margin-left: 30px;"
		  >
		    <el-option
			v-for="item in typeManage.dropData"
			:key="item.id"
			:label="item.name"
			:value="item.name"
		    />
		  </el-select> -->
			<!-- <treeselect
				v-model="newManage.customerSource"
				:options="infoTree.menus"
				:load-options="loadInfoTreeMenus"
				style="width:230px;margin-left:20px;"
				placeholder="请选择类别"
			/> -->


          <!-- <el-button size="mini" type="primary" icon="el-icon-search" @click="toSearch()" class="searchbtn">搜索</el-button> -->
          <el-button size="mini" type="primary" icon="el-icon-circle-plus" @click="addDialogData()" class="addbtn">新增</el-button>
        </div>
        <div class="table-wrapper">
          <div  class="infoline">信息分类列表</div>
			  <!-- <el-table  :data="typeManage.fromData" style="width: 100%;">
				<el-table-column type="index" label="序号" width="300"/>
				<el-table-column prop="name" label="分类名称"/>
				<el-table-column label="操作" fixed="right">
				  <template slot-scope="scope">
					<el-button
					  size="mini"
					  type="primary"
					  icon="el-icon-edit"
					  @click="typeEdit($event, scope.$index, scope.row)"
					  >编辑</el-button
					>
					<el-button
					  size="mini"
					  type="danger"
					  icon="el-icon-delete"
					  @click="typeDelete(scope.row)"
					  >删除</el-button
					>
				  </template>
				</el-table-column>
			  </el-table> -->

			<el-table
				ref="table"
				lazy
				:load="getDeptDatas"
				:tree-props="{children:'children', hasChildren:'hasChildren'}"
				:data="typeManage.fromData"
				row-key="id"
			>
			  <!-- <el-table-column :selectable="checkboxT" type="selection" width="55" /> -->
			  <el-table-column label="名称" prop="label" style="width:100px;"/>
			  <el-table-column type="index" label="序号" style="width:100px;"/>
			  <el-table-column label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button
					  size="mini"
					  type="primary"
					  icon="el-icon-edit"
					  @click="typeEdit($event, scope.$index, scope.row)"
					  >编辑</el-button
					>
					<el-button
					  size="mini"
					  type="danger"
					  icon="el-icon-delete"
					  @click="typeDelete(scope.row)"
					  >删除</el-button
					>
				</template>
			  </el-table-column>
			</el-table>
          <!-- <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="typeManage.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top: 20px;"
          /> -->
        </div>
        <el-dialog title="新增分类名称" :visible.sync="typeManage.addDialog">
          <el-form
            :model="typeManage.from"
            :rules="formrules"
		     ref="addDataForm"
          >
            <el-form-item prop="addname" label="分类名称:" :label-width="'120px'">
				<el-input
				  clearable
				  v-model="typeManage.from.addname"
				  style="width:220px;"
				  placeholder="请输入类别"
				/>
            </el-form-item>
            <el-form-item prop="test" label="推送信息:" :label-width="'120px'">
				<el-select v-model="typeManage.from.test" multiple placeholder="请选择"  style="width:220px">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
            </el-form-item>
			 <el-form-item prop="id" label="添加到:" :label-width="'120px'">
			 	<treeselect
					v-model="typeManage.from.id"
					:options="infoTree.menus"
					:load-options="loadInfoTreeMenus"
					style="width: 180px;"
					placeholder="选择上级类目"
				/>
			 </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button type="primary" @click="determine" :loading="typeManage.flag === 0">确定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="编辑分类名称" :visible.sync="typeManage.editDialog">
          <el-form
            :model="editFormInfo"
            :rules="rules"
			 ref="editDataForm"
          >
            <el-form-item prop="type" label="分类名称:" :label-width="'120px'">
            <el-input
              v-model="editFormInfo.type"
			  clearable
              style="width:220px;margin-left: 20px;"
              placeholder="请输入类别"
            />
            </el-form-item>
            <el-form-item prop="choose" label="推送信息:" :label-width="'120px'">
				<el-select v-model="editFormInfo.choose" multiple placeholder="请选择" @change="selectChange" style="width:220px;margin-left: 20px;">
				    <el-option
				      v-for="item in newoptions"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
            </el-form-item>
			 <el-form-item prop="pid" label="添加到:" :label-width="'120px'">
			 	<treeselect
					v-model="editFormInfo.pid"
					:options="infoTree.menus"
					:load-options="loadInfoTreeMenus"
					style="width: 180px;"
					placeholder="选择上级类目"
				/>
			 </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button type="primary" @click="uploadAddForm" icon="el-icon-success" :loading="editFormInfo.flag === 0">确定</el-button>
          </div>
        </el-dialog>
        </div>
</template>

<script>
import {
  getAllCategory,getNameCategory,addClassification,editClassification,deleteTypeDict
} from "@/api/category.js";
import {reqInformationTreeList, reqAllInfoTreeList} from "@/api/treeMenus.js";
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
export default {
  data() {
    return {
	  //1.获取全部信息分类
	  typeManage:{
	    page:1,
	    size:10,
	    total:0,
	    selectdata:[],
		dropData:[],
		addDialog:false,
		flag:1,
		pid:0,
		from:{
			addname:'',
			 test:[], // 默认选项，要在el-checkbox-group里绑定一个空数组
		},
		editDialog:false,
		fromData:[]
	  },
	  //2.根据名称获取信息分类
	  name: '',
	  
	  // 3.新增信息分类
	  options: [{
	           value: '姓名',
	           label: '姓名'
	         }, {
	           value: '电话',
	           label: '电话'
	         }, {
	           value: '公司名称',
	           label: '公司名称'
	         }, {
	           value: '需求描述',
	           label: '需求描述'
	  }], 
		chooseString:'',
	  // 4.编辑信息分类
	  editFormInfo: {
		flag:1,
	    type: "",
		send:'',
		id:'',
		choose:[],
		pid:0,
	  },
	  editString:'',
	  checkList:[],
	  newoptions: [{
	         value: '姓名',
	         label: '姓名'
	       }, {
	         value: '电话',
	         label: '电话'
	       }, {
	         value: '公司名称',
	         label: '公司名称'
	       }, {
	         value: '需求描述',
	         label: '需求描述'
	       }],
		newval:[],
	   // 验证
	   formrules:{
			addname: [{ required: true, message: "请输入类别", trigger: "blur"}],
			test: [{ required: true, message: "请选择推送信息", trigger: "change"}],
		},
		rules:{
			type: [{ required: true, message: "请输入类别", trigger: "blur"}],
			choose: [{ required: true, message: "请选择推送信息", trigger: "change"}],
		},
		infoTree:{
			menus:[{id:0, label:'信息分类', children:null, pid:-1}],
		},
    };
  },
  components: {Treeselect},
  mounted() {
	  var that = this;
	  // 信息分类字典
	  this.reqBuildTreeList();

	   this.classification();
	   this.getSelectInfo();

  },
  methods: {
		// 构建 Tree列表
		reqBuildTreeList: function(){
			var that = this;
			reqAllInfoTreeList().then(function(res){
				if(res.code === 200){
					var list = res.object.records || [];
					that.infoTree.menus = [{id:0, label:'信息分类', children:null, pid:-1}];
					list.push(that.infoTree.menus[0]);
					qf.Utils.treeListBuild(list);
				} 
			});
		},

	  //1.获取全部信息分类
	  classification(params){
		var typeM = this.typeManage;
		var params = {
			page:typeM.page, 
			pageSize:typeM.size,
		};
		reqInformationTreeList({pid:0}).then((res) => {
			var list = res.object.records || [];
			for(var item of list){
				item.hasChildren = !item.leaf;
			};
			typeM.selectdata = list;
			typeM.fromData = list;
			typeM.total = res.object.total;
		});
	  },
	  // 获取分类下拉列表
	  getSelectInfo(){
		  var typeM = this.typeManage;
		  var params = {
			page:1, 
			pageSize:999,
		  };
		  getAllCategory(params).then((res) => {
		    var dropDown = res.object.records || [];
		    typeM.dropData = dropDown;
		  });
	  },
	  //获取全部信息分类分页
	  handleSizeChange(val) {
		// 每页多少条
		this.typeManage.size =val ;
		this.classification();
	  },
	  handleCurrentChange(val) {
		// 当前是多少页
		this.typeManage.page = val;
		this.classification();
	  },
	  
	  //2.根据名称获取信息分类
	  toSearch() {
		var typeM = this.typeManage;
		var param = {
			page: this.typeManage.page,
			pageSize: this.typeManage.size,
		};
		this.name && (param.name = this.name);
		var typeM = this.typeManage;
		getNameCategory(param).then((res) => {
			var selectlist = res.object.records || [];
			typeM.fromData = selectlist;
			typeM.total = res.object.total;
		});
	  },
		// 新增
	 addDialogData(){
	   this.typeManage.addDialog = true;
	   this.typeManage.from.addname='';
	   this.typeManage.from.id=0;
	   this.typeManage.from.test=''
	 },
	 determine(){
		if(this.typeManage.flag){  
			this.typeManage.flag = 0;
			this.chooseString=this.typeManage.from.test.join();
			this.$refs.addDataForm.validate((valid) => {
			    if (valid) {
				 var params = {
					 name:this.typeManage.from.addname,
					 pushNew:this.chooseString,
					 pid:this.typeManage.from.id,
				 };

				  var self = this;
				 addClassification(params).then((res) => {
					this.typeManage.addDialog = false;
					this.classification();
					setTimeout(function(){
						self.typeManage.flag = 1;
					}, 300);
					self.$message({
					  type: "success",
					  message: "新增成功",
					});
				  }, 
				  () => {
					self.$message.error("新增失败");
					}
				   );
			    }
			}) 
		}
	 },
	 
	 // 4、修改信息分类
	 typeEdit(e, index, item){
		this.typeManage.editDialog = true; 
		this.editFormInfo.send=item.pushnew;
		this.editFormInfo.id=item.id;
		this.editFormInfo.choose=this.editFormInfo.send.split(",")
		this.editFormInfo.type=item.label;
		this.editFormInfo.pid=item.pid;

		this.CacheItem = item;
	 },
	 selectChange(val){
		this.newval=val
		this.editFormInfo.send = this.newval.join();
	 },
	 uploadAddForm(){
		if(this.editFormInfo.flag){ 
			this.editFormInfo.flag = 0;
			this.$refs.editDataForm.validate((valid) => {
				if (valid) {
					var params = {
						id:this.editFormInfo.id,
						name:this.editFormInfo.type,
						pushNew:this.editFormInfo.send,	 
						pid:this.editFormInfo.pid,	 
					};
					var self = this;
					editClassification(params).then((res) => {
						if(res.code === 200){
							this.typeManage.editDialog = false;
							
							this.CacheItem.label = params.name;
							this.CacheItem.pushnew = params.pushNew;
							setTimeout(function(){
								self.editFormInfo.flag = 1;
							}, 300);
							// 重新构建列表
							this.classification();
						};

						// message
						self.$message({
							type: "success",
							message: "编辑成功",
						}, ()=>{
							self.$message.error("编辑失败");
						});
					}); 
				 }
			}) 
		}
	 },

	 // 5.删除
	 typeDelete(item) {
	 	var id = item.id;
	   this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
	     confirmButtonText: "确定",
	     cancelButtonText: "取消",
	     type: "warning",
	   }).then(() => {
	     deleteTypeDict({id:id}).then(
	       (res) => {

				this.$message({
					message: "删除成功",
					type: "success",
				});
				this.classification();
	       },
	       () => {
	         this.$message.error("删除失败");
	       }
	     );
	   });
	 },

	 getDeptDatas(tree, treeNode, resolve) {
		const params = { pid: tree.id };
		reqInformationTreeList(params).then((res) => {
			var list = res.object.records || [];
			for(var item of list){
				item.hasChildren = !item.leaf;
			};
			resolve(list)
		});
	 },


		// 加载信息分类列表
		loadInfoTreeMenus({ action, parentNode, callback }) {
			if(action === 'LOAD_CHILDREN_OPTIONS'){
				setTimeout(() => {
					callback()
				}, 100)
			};
		},
  }
};
</script>

<style lang="scss" scoped>
	.datamanage-wrapper{
	width: 100%;
		height:100%;
		padding: 10px;
		border-radius: 5px;
		background-color: #f5f6fb;
	}
	.search-wrapper {
		width:100%;
		display: flex;
		padding: 10px;
		border-radius: 5px;
		margin: 10px 0px 10px 0px;
		background: #fff;
	}

  .table-wrapper {
	width: 100%;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0px 10px 0px;
    background: #fff;
  }
.searchbtn{
  margin-left: 30px;
  padding:6px 15px;
  font-size:14px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  background-color: #13ce66;
  border-color:#13ce66;

}
.addbtn{
  margin-left: 30px;
  padding:6px 15px;
  font-size:14px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;

}
.infoline{
  width:100%;
  height:100px;
  font-weight:bold;
  font-size: 24px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;

}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
    height: 30px;
    line-height: 30px;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
