<!-- 信息分类 -->
<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>
          <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-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>
          <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>
          <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 axios from "axios";
export default {
  data() {
    return {
	  //1.获取全部信息分类
	  typeManage:{
	    page:1,
	    size:10,
	    total:0,
	    selectdata:[],
		dropData:[],
		addDialog:false,
		 flag:1,
		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:[],
	  },
	  
	  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"}],
		},
    };
  },
 mounted() {
   this.classification();
   this.getSelectInfo()
 },
  methods: {
	  //1.获取全部信息分类
	  classification(params){
		var typeM = this.typeManage;
		var params = {
		  page:typeM.page, 
		  pageSize:typeM.size,
		};
		getAllCategory(params).then((res) => {
		  var selectlist = res.object.records || [];
		  typeM.selectdata = selectlist;
		  typeM.fromData = selectlist;
		  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.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			 
				 };
				  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.name
	 },
	 selectChange(val){
		 this.newval=val
		 this.editString=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.editString		 
					};
				var self = this;
				editClassification(params).then((res) => {
					this.typeManage.editDialog = false;
					this.classification();
				setTimeout(function(){
					self.editFormInfo.flag = 1;
				}, 300);
					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("删除失败");
	       }
	     );
	   });
	 },
  }
};
</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>
