<template>
	<div>
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/' }">{{$t('foots.home')}}</el-breadcrumb-item>
		  <el-breadcrumb-item>{{$t('foots.Management')}}</el-breadcrumb-item>
		  <el-breadcrumb-item>{{$t('foots.Commodityfood')}}</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>
		<div style="display: flex;width: 100%;margin-top: 20px;">
			<div style="width: 200px;background-color: #f7f7f7;margin-right: 20px;padding: 20px;">
				<div style="font-size: 13px;font-weight: bold">{{$t('foots.classification')}}</div>
				<div style="margin-top: 10px;">
					<div :class="dqfl==item.id?'flxz':'flwx'" v-for="item in fllist" @click="xzfenlei(item.id)">{{item.name}}</div>
				</div>
			</div>
			<div style="width: 100%;">
				<el-row :gutter="10" style="margin-bottom: 10px;">
				  <el-col :span="12" style="display: flex; align-items: center;">
				    <el-input
				      v-model="searchName"
				      :placeholder="$t('foots.Enterproductname')"
				      clearable
				      style="width: 240px; margin-right: 12px;"
				    />
				    <el-button
				      type="primary"
				      icon="el-icon-search"
				      @click="onSearch"
				      style="margin-right: 8px;"
				    >{{$t('foots.search')}}</el-button>
				    <el-button
				      type="default"
				      icon="el-icon-refresh"
				      @click="onReset"
				    >{{$t('foots.reset') || '重置'}}</el-button>
				  </el-col>
				</el-row>
				<el-row :gutter="10" style="margin-bottom: 20px;">
				  <el-col :span="6">
				    <el-button
				      type="primary"
				      plain
				      icon="el-icon-plus"
				      size="mini"
					  @click="addfood"
				    >{{$t('foots.addproduct')}}</el-button>
				  </el-col>
				</el-row>
				<el-table  ref="filterTable" v-loading="loding"  :data="filteredTableData" :header-cell-style="{background:'#f0f0f0'}">
					<el-table-column
						prop="id"
						label="id"
					>
					</el-table-column>
					<el-table-column
						prop="name"
						:label="$t('foots.Tradename')"
					>
					</el-table-column>
					<el-table-column
						prop="image"
						:label="$t('foots.Commoditypicture')"
					>
						<template slot-scope="scope">
							<img style="width: 50px;height: 50px;" :src="seruer+scope.row.image" alt="" />
						</template>
					</el-table-column>
					<el-table-column
						prop="price"
						:label="$t('foots.commodityprice')"
					>
					</el-table-column>
					<el-table-column
						prop="introduce"
						:label="$t('foots.illustrate')"
					>
					</el-table-column>
					<el-table-column
						fixed="right"
						:label="$t('foots.operate')"
						:width="$t('loding.language')=='en'?'150':'100'">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="small">{{$t('foots.modify')}}</el-button>
							<el-button @click="delechansu(scope.row)" type="text" size="small">{{$t('foots.delete')}}</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<!-- 添加或修改门店分类对话框 -->
		<el-dialog :title="text" :visible.sync="open" :width="$t('loding.language')=='en'||$t('loding.language')=='vi'?'690px':'600px'" 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('foots.Commoditypicture')" prop="image">
			    <el-upload
			      class="avatar-uploader"
			      :action="seruer+'/utils/Upload'"
			      :show-file-list="false"
			      :on-success="handleAvatarSuccess"
			      :before-upload="beforeAvatarUpload">
			      <img v-if="form.image" :src="seruer+form.image" class="avatar">
			      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			    </el-upload>
			</el-form-item>
		    <el-form-item :label="$t('foots.Tradename')" prop="name">
				<el-input v-model="form.name" :placeholder="$t('foots.Enterproductname')" />
		    </el-form-item>
			<el-form-item :label="$t('foots.commodityprice')" prop="price">
				<el-input v-model="form.price" type="number" :placeholder="$t('foots.Enterproductprice')" />
			</el-form-item>
			<el-form-item :label="$t('foots.Attributes')" prop="sku">
				<el-button type="primary" round @click="dakaitjlx">{{$t('foots.AddType')}}</el-button>
				<div>
					<div v-for="(item,idx) in form.sku" style="width: 400px;padding: 20px;background-color: #f7f7f7;margin-top: 10px;">
						<div style="display: flex;align-items: center;justify-content: space-between;">
							<div style="font-size: 15px;font-weight: bold;display: flex;">{{item.title}}
								<div style="margin-left: 10px;">{{item.type==1?$t('foots.Radio'):$t('foots.multiplechoice')}}/{{item.state==2?$t('foots.optional'):$t('foots.required')}}</div>
							</div>
							<div style="display: flex;align-items: center;width: 60px;justify-content: space-between;">
								<el-button  type="primary" icon="el-icon-plus" circle  @click="tanchuguige(idx)"></el-button>
								<el-button type="danger" icon="el-icon-delete" circle @click="deleleixing(idx)"></el-button>
							</div>
						</div>
						<div v-for="(cc,inx) in item.objects" style="background-color: #ffffff;padding: 10px 20px;margin-top: 10px;font-size: 13px;display: flex;align-items: center;justify-content: space-between;">
							<div style="display: flex;align-items: center;justify-content: space-between;width: 280px;">
								<div style="color: #4c4c4c;display: flex;">{{cc.name}}<div style="color: #9d9d9d;font-size: 10px;margin-left: 10px;">{{cc.note}}</div></div>
								<div style="color: #ff5500;">{{cc.price}}</div>
							</div>
							<el-button type="danger" icon="el-icon-delete" circle @click="deleguige(idx,inx)"></el-button>
						</div>
					</div>
				</div>
			</el-form-item>
			<el-form-item :label="$t('foots.Introduction')" prop="introduce">
				<el-input v-model="form.introduce" type="textarea"  :placeholder="$t('foots.EnterIntroduction')" />
			</el-form-item>
			<el-form-item :label="$t('foots.Dorecommendit')" prop="recommend">
				<el-switch
				    v-model="form.recommend"
				    active-color="#55aaff"
				    inactive-color="#d5d5d5"
				    :active-value="1"
				    :inactive-value="0">
				  </el-switch>
			</el-form-item>
			<el-form-item :label="$t('foots.Productsorting')" prop="sort">
				<el-input v-model="form.sort" type="number"  :placeholder="$t('foots.Anynumber')" />
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="tijiaosb">{{$t('foots.determine')}}</el-button>
		    <el-button @click="cancel">{{$t('foots.cancellation')}}</el-button>
		  </div>
		</el-dialog>
		<!-- 添加类型弹出框 -->
		<el-dialog :title="$t('foots.AddType')" :visible.sync="lxop" width="600px" append-to-body>
			<el-form ref="splx" :model="splx" label-width="200px">
				<el-form-item :label="$t('foots.typename')" prop="title">
					<el-input v-model="splx.title" :placeholder="$t('foots.InputMerchantType')" />
				</el-form-item>
				<el-form-item :label="$t('foots.Multiplechoices')" prop="type">
					<el-radio v-model="splx.type" label="1">{{$t('foots.Radio')}}</el-radio>
					<el-radio v-model="splx.type" label="2">{{$t('foots.multiplechoice')}}</el-radio>
				</el-form-item>
				<el-form-item :label="$t('foots.Isitmandatory')" prop="state">
					<el-radio v-model="splx.state" label="1">{{$t('foots.required')}}</el-radio>
					<el-radio v-model="splx.state" label="2">{{$t('foots.optional')}}</el-radio>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
			  <el-button type="primary" @click="tianzspleix">{{$t('foots.determine')}}</el-button>
			  <el-button @click="lxquxxiao">{{$t('foots.cancellation')}}</el-button>
			</div>
		</el-dialog>
		<!-- 添加类型弹出框 -->
		<el-dialog :title="$t('foots.Addspecifications')" :visible.sync="ggop" width="600px" append-to-body>
			<el-form ref="lxgg" :model="lxgg" label-width="200px">
				<el-form-item :label="$t('foots.formname')" prop="name">
					<el-input v-model="lxgg.name" :placeholder="$t('foots.Entercationname')" />
				</el-form-item>
				<el-form-item :label="$t('foots.Specificationprice')" prop="price">
					<el-input v-model="lxgg.price" :placeholder="$t('foots.Enterandprices')" />
				</el-form-item>
				<el-form-item :label="$t('foots.description')" prop="note">
					<el-input v-model="lxgg.note" type="textarea" :placeholder="$t('foots.Entercationiption')" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
			  <el-button type="primary" @click="tianjguige">{{$t('foots.determine')}}</el-button>
			  <el-button @click="quxiaguige">{{$t('foots.cancellation')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {storelistlist,getordfenlei,getidlist,setposfood,delefood} from '@/api/food';
	import Bus from '../utils/Bus.js'
	export default{
		name:"AcidrollingCapacity",
		data(){
			return {
				seruer: process.env.VUE_APP_BASE_URL,
				loding:false,
				mdlist:[],
				fllist:[],
				dqmd:0,
				dqfl:0,
				tableData:[],
				form:{},
				text:'',
				open:false,
				lxop:false,
				ggop:false,
				splx:{},
				lxgg:{},
				ggindex:0,
				language:this.$t('loding.lass'),
				searchName: '',
				// 表单校验
				rules: {
				  image: [
				    { required: true, message: this.$t('foots.Imagebeempty'), trigger: "blur" }
				  ],
				  name: [
				    { required: true, message:this.$t('foots.Namebeempty'), trigger: "blur" }
				  ],
				  price: [
				    { required: true, message: this.$t('foots.Pricebeempty'), 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:{
			format(str) {
			  var arr = [];
			    var counter = 0;
			    str = (str || 0).toString().split("");
			    for (var i = str.length - 1; i >= 0; i--) {
			      counter++;
			      arr.unshift(str[i]);
			      if (!(counter % 3) && i !== 0) {
			        arr.unshift(",");
			      }
			    }
			    return arr.join("");
			},
			// 提交添加商品
			tijiaosb(){
				this.form.language = this.language=='zh'?'2':this.language=='tw'?'3':this.language=='en'?'1':'0';
				this.$refs["form"].validate(valid => {
				  if (valid) {
					setposfood(this.form).then(res=>{
						// console.log('操作成功',res)
						if(res.code==200){
							this.getfoodlist(this.dqfl);
							this.open = false;
							this.reset();
						}
					})
				  }
				});
			},
			//添加商品规格
			tianjguige(){
				if(this.lxgg.name==null){
					this.$message.error(this.$t('foots.Thenamebeempty'));
					return
				}
				this.form.sku[this.ggindex].objects = this.form.sku[this.ggindex].objects.concat(this.lxgg);
				this.quxiaguige();
			},
			//添加商品类型
			tianzspleix(){
				if(this.splx.title==null){
					this.$message.error(this.$t('foots.Typenamebeempty'));
					return
				}
				this.form.sku = this.form.sku.concat(this.splx);
				this.lxquxxiao();
			},
			// 删除商品类型
			deleleixing(idx){
				this.$confirm(this.$t('foots.Confirmdeletion'), this.$t('foots.prompt'), {
					confirmButtonText: this.$t('foots.determine'),
					cancelButtonText: this.$t('foots.cancellation'),
					type: 'warning'
				}).then(() => {
					if(this.form.sku[idx].objects.length>0){
						this.$message.error(this.$t('foots.Unabletodelete'));
						return
					}
					this.form.sku.splice(idx, 1);
				}).catch(() => {

				});
			},
			deleguige(idx,inx){
				this.$confirm( this.$t('foots.DeleteSpecification'), this.$t('foots.prompt'), {
					confirmButtonText: this.$t('foots.determine'),
					cancelButtonText: this.$t('foots.cancellation'),
					type: 'warning'
				}).then(() => {
					this.form.sku[idx].objects.splice(inx, 1);
				}).catch(() => {

				});
			},
			tanchuguige(idx){
				this.czguige();
				this.ggindex = idx;
				this.ggop = true;
			},
			//关闭规格输入
			quxiaguige(){
				this.ggop = false;
				this.ggindex = 0;
				this.czguige();
			},
			czguige(){
				this.lxgg={
					name:null,
					note:null,
					price:null,
					state:0
				}
			},
			czlex(){
				this.splx={
					title:null,
					type:'1',
					state:'1',
					objects:[]
				}
			},
			//弹出添加类型
			dakaitjlx(){
				this.czlex();
				this.lxop = true;
			},
			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);
			},
			// 选择分类
			xzfenlei(id){
				this.dqfl = id;
				this.getfoodlist(this.dqfl);
			},
			//获取分类
			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)
          if(res.data.length>0) {
            this.dqfl = res.data[0].id;
            this.fllist = res.data;
            this.getfoodlist(this.dqfl);
          }
				})
			},
			//获取商品
			getfoodlist(id){
				this.loding = true;
				var lang = this.language=='zh'?'2':this.language=='tw'?'3':this.language=='en'?'1':'0';
				getidlist(id,lang,this.searchName).then(res=>{
					// console.log('商品列表',res)
					var list = res.data;
					for(let i=0;i<list.length;i++){
					  list[i].price = this.format(list[i].price);
					}
					this.tableData = list;
					this.loding = false;
				})
			},
			reset() {
				this.form = {
					flId: this.dqfl,
					mdid: this.dqmd,
					name:null,
					image:null,
					price:null,
					introduce:null,
					recommend:0,
					sort:null,
					language:null,
					sku:[]
				};
			},
			// 添加商品
			addfood(){
				this.reset();
				this.text =this.$t('foots.addproduct');
				this.open = true;

			},
			handleClick(res){
				this.reset();
				this.text = this.$t('foots.Modifyproduct');
				this.form = {
					id:res.id,
					flId: res.fenlei.id,
					mdid: res.store.id,
					name:res.name,
					image:res.image,
					price:res.price.replace(/,/g, ""),
					introduce:res.introduce,
					recommend:res.recommend,
					sort:res.sort,
					sku:res.foodSku
				};
				this.open = true;
			},
			delechansu(e){
				this.$confirm(this.$t('foots.Deletethisproduct'), this.$t('foots.prompt'), {
					confirmButtonText: this.$t('foots.determine'),
					cancelButtonText: this.$t('foots.cancellation'),
					type: 'warning'
				}).then(() => {
					delefood(e.id).then(res=>{
						// console.log('删除',res);
						if(res.code==200){
							this.getfoodlist(this.dqfl);
							this.$message({
								type: 'success',
								message:  this.$t('foots.successful')
							});
						}else{
							this.$message({
								type: 'info',
								message:  this.$t('foots.Deletefailed')
							});
						}

					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message:  this.$t('foots.undelete')
					});
				});
			},
			// 取消添加
			cancel(){
				this.open = false;
				this.reset();
			},
			lxquxxiao(){
				this.lxop = false;
				this.czlex();
			},
			handleAvatarSuccess(res, file) {
				// this.upimg = URL.createObjectURL(file.raw);
				this.form.image = file.response.data;
				// console.log('上传图片',file.response);

			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
				  this.$message.error(this.$t('foots.ItcanonlyJPG'));
				}
				if (!isLt2M) {
				  this.$message.error(this.$t('foots.Cannotexceed'));
				}
				return isJPG && isLt2M;
			},
			onSearch() {
				// 目前先前端过滤
				 this.getfoodlist(this.dqfl);
			},
			onReset() {
				this.searchName = '';
				this.onSearch();
			},
		},
		computed: {
			filteredTableData() {
				 return this.tableData;
				// return this.tableData.filter(item => item.name && item.name.indexOf(this.searchName) !== -1);
			}
		},
	}
</script>

<style>
	.biaoqian{
		width: 180px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
	}
	.flxz{
		padding: 10px 20px;
		font-size: 12px;
		background-color: #ffffff;
		border-radius: 5px;
		color: #ff557f;
		font-weight: bold;

	}
	.flwx{
		padding: 10px 20px;
		font-size: 12px;
		color: #acacac;

	}
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 100px;
	    height: 100px;
	    line-height: 100px;
	    text-align: center;
	  }
	  .avatar {
	    width: 100px;
	    height: 100px;
	    display: block;
	  }
</style>
