<template>
	<div>
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/' }">{{$t('fenlei.home')}}</el-breadcrumb-item>
		  <el-breadcrumb-item>{{$t('fenlei.Management')}}</a></el-breadcrumb-item>
		  <el-breadcrumb-item>{{$t('fenlei.CATEGORY')}}</el-breadcrumb-item>
		</el-breadcrumb>
		<div style="margin-top: 30px;display: flex;align-items: center;">
			<el-button v-for="item in mdlist" :type="dqmd==item.id?'primary':'info'" class="biaoqian" @click="xuanzhemd(item.id)">{{item.posName}}</el-button>
		</div>
		<el-row :gutter="10" style="margin-top: 20px;margin-bottom: 20px;">
		  <el-col :span="1.5">
		    <el-button
		      type="primary"
		      plain
		      icon="el-icon-plus"
		      size="mini"
		      @click="handleAdd"
		    >{{$t('fenlei.Addcategory')}}</el-button>
		  </el-col>
		</el-row>
		<el-table ref="filterTable" v-loading="loding"  :data="tableData" :header-cell-style="{background:'#f0f0f0'}">
			<el-table-column
				prop="sort"
				label="id"
			>
			</el-table-column>
			<el-table-column
				prop="name"
				:label="$t('fenlei.Classiname')"
			>
			</el-table-column>
			<el-table-column
				fixed="right"
				:label="$t('fenlei.operate')"
				width="150">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small">{{$t('fenlei.modify')}}</el-button>
					<el-button @click="delechansu(scope.row)" type="text" size="small">{{$t('fenlei.delete')}}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog :title="text" :visible.sync="open" :width="$t('loding.language')=='en'||$t('loding.language')=='vi'?'490px':'400px'" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" :label-width="$t('loding.language')=='en'||$t('loding.language')=='vi'?'170px':'80px'">
				<el-form-item :label="$t('fenlei.id')" prop="sort">
					<el-input v-model="form.sort" :placeholder="$t('fenlei.sodi')" />
				</el-form-item>
				<el-form-item :label="$t('fenlei.Classiname')" prop="name">
					<el-input v-model="form.name" :placeholder="$t('fenlei.Plearname')" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dituqiueing">{{$t('fenlei.determine')}}</el-button>
				<el-button @click="cancel">{{$t('fenlei.cancellation')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {getordfenlei,storelistlist,addfenlei,delefenle} from '@/api/fenlei';
	import Bus from '../utils/Bus.js'
	export default{
		name:"AcidrollingCapacity",
		data(){
			return {
				seruer: process.env.VUE_APP_BASE_URL ,
				loding:false,
				dqmd:0,
				tableData:[],
				mdlist:[],
				text:'',
				open:false,
				form:{},
				language:this.$t('loding.lass'),
				// 表单校验
				rules: {
				  name: [
				    { required: true, message:this.$t('fenlei.Classifyempty'), trigger: "blur" }
				  ],
				},
			}
		},
		created() {
			var that = this;
			that.getstorelist();
			Bus.$on('l18zh',function(res){
				that.language = res;
				that.dqmd = that.dqmd==0?0:that.dqmd;
				that.getlenlei(that.dqmd);
			})
		},
		methods:{
			reset() {
				this.form = {
					mendid: null,
					name: null,
					img:null,
					sort:null,
					language:null
				};
			},
			getstorelist(){
				storelistlist().then(res=>{
					// console.log('门店列表',res)
					this.dqmd = this.dqmd==0?res.data.records[0].id:this.dqmd;
					this.mdlist = res.data.records;
					this.getlenlei(this.dqmd);
				})
			},
			//选择门店
			xuanzhemd(id){
				this.dqmd = id;
				this.getlenlei(id);
			},
			getlenlei(id){
				var lang = this.language=='zh'?'2':this.language=='tw'?'3':this.language=='en'?'1':'0';
				getordfenlei(id,lang).then(res=>{
					console.log('分类',res)
					this.tableData = res.data;
				})
			},
			//添加分类
			handleAdd(){
				this.text = this.$t('fenlei.Addcategory');
				this.reset();
				this.form.mendid = this.dqmd;
				this.form.language = this.language=='zh'?'2':this.language=='tw'?'3':this.language=='en'?'1':'0';
				this.open = true;
			},
			//提交分类
			dituqiueing(){
				this.$refs["form"].validate(valid => {
				  if (valid) {
					addfenlei(this.form).then(res=>{
						// console.log('提交分类',res);
						if(res.code==200){
							this.getlenlei(this.dqmd);
							this.cancel();
							this.$message({
								type: 'success',
								message: this.$t('fenlei.successfully')
							});
						}else{
							this.$message({
								type: 'info',
								message: this.$t('fenlei.Deletefailed')
							});
						}

					})
				  }
				});
			},
			cancel() {
			  this.open = false;
			  this.reset();
			},
			//修改分类
			handleClick(res){
				this.text = this.$t('fenlei.Modifyclass');
				this.form = res;
				this.open = true;
			},
			//删除分类
			delechansu(e){
				this.$confirm(this.$t('fenlei.DeleteCategory'), this.$t('fenlei.prompt'), {
					confirmButtonText: this.$t('fenlei.determine'),
					cancelButtonText: this.$t('fenlei.cancellation'),
					type: 'warning'
				}).then(() => {
					delefenle(e.id).then(res=>{
						// console.log('删除',res);
						if(res.code==200){
							this.getlenlei(this.dqmd);
							this.$message({
								type: 'success',
								message: this.$t('fenlei.successful')
							});
						}else{
							this.$message({
								type: 'info',
								message: this.$t('fenlei.Deletefailed')
							});
						}

					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: this.$t('fenlei.undelete')
					});
				});
			}
		}
	}
</script>

<style>
	.biaoqian{
		width: 180px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
	}
</style>
