<style scoped>
.icon {
	height: 30px;
}
</style>
<template>
	<div class="flexOne">
		<div class="query-box">
			<ul>
				<li>
					<span><em>名称</em><el-input  v-model='msg.CategoryName' class="permiss-input" :placeholder="$t('fnc.qsrneirong')"></el-input></span>
				</li>
                
				<li>
					<span><em>层级</em><el-select v-model="msg.Level"  :placeholder="$t('pub.pleaseSel')">
							    <el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
							    <el-option label="一级" value="1"></el-option>
							    <el-option label="二级" value="2"></el-option>
							    <el-option label="三级" value="3"></el-option>
							  </el-select>
				      </span>
				</li>
				<li>
					<span><em>状态</em><el-select v-model="msg.Enable"  :placeholder="$t('pub.pleaseSel')">
							    <el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
							    <el-option label="启用" value="1"></el-option>
							    <el-option label="禁用" value="2"></el-option>
							  </el-select>
				      </span>
				</li>
				<li>
					<input type="button" class="hollowFixedBtn" name="" id="" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" />
					<input type="button" @click="outerVisible = true,dialogTitle='新增分类',clearMessage();" class="normalBtn" :value="$t('pub.addBtn')" /> 
				</li>
			</ul>
		</div>
              <el-table :data="DataList" style="width:100%" border v-loading='loading'>
                <el-table-column fixed label="分类名称">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.CategoryName}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed label="层级">
                  <template slot-scope="scope">
                    <div>
                      {{['', '一级', '二级','三级'][scope.row.Level]}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed label="父级">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.ParentName}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed label="是否热门">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.IsHot === 1 ? '是' : '否'}}</div>
                    <div>{{scope.row.TotalInventory}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed label="排序码">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.Sort}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed label="图标">
                  <template slot-scope="scope">
					  <img class="icon" @click="showImage(scope.row.Icon)" :src="scope.row.Icon"/>
                  </template>
                </el-table-column>
                <el-table-column fixed label="背景图片">
                  <template slot-scope="scope">
					  <img class="icon" @click="showImage(scope.row.BackgroundImage)" :src="scope.row.BackgroundImage"/>
                  </template>
                </el-table-column>
                <el-table-column fixed label="状态">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.Enable === 1 ? '启用' : '禁用'}}</div>
                  </template>
                </el-table-column>
				<el-table-column :label="$t('system.table_operation')"> header-align="center" align="center">
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
					<el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,dialogTitle='编辑分类',updateData(scope.row)">
					</el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
					<el-button v-if="!scope.row.IsLock" type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row)"></el-button>
					</el-tooltip>
				</template>
				</el-table-column>
              </el-table>
		<el-pagination 
			background 
			@current-change="handleCurrentChange"
			 :current-page.sync="currentPage" 
			 layout="total,prev, pager, next, jumper" 
			 :page-size=msg.pageSize
			 :total='total'>
		</el-pagination>

		<el-dialog :title="dialogTitle" :visible.sync="outerVisible" center width="1000px" :before-close="closeChangeMachie">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('system.query_airName')" prop="CategoryName">
              <el-input style="width:217px" type="text" :disabled="addMsg.IsLock === 1" v-model="addMsg.CategoryName" maxlength="50" placeholder="名称">
              </el-input>
            </el-form-item>
          </el-col>
			<el-col :span="12">
            <el-form-item label="排序" prop="Sort">
              <el-input style="width:217px" type="number" v-model="addMsg.Sort" maxlength="10" placeholder="排序">
              </el-input>
            </el-form-item>
			</el-col>
        </el-row>
		<el-row>
		  <el-col :span="12">
            <el-form-item label="层级" prop="Level">
              <el-select :disabled="addMsg.IsLock === 1" v-model="addMsg.Level" :placeholder="$t('pub.pleaseSel')" @change="handleLevelChange">
                <el-option label="一级" :value="1"></el-option>
                <el-option label="二级" :value="2"></el-option>
                <el-option label="三级" :value="3"></el-option>
              </el-select>
            </el-form-item>
            </el-col>
			<el-col :span="12">
            <el-form-item label="父级分类" prop="ParentId">
			  <!-- <el-tree show-checkbox ref="tree" node-key="Id" :data="cateGoryTree" :props="{label: 'CategoryName', children: 'SubList'}"
			   check-strictly highlight-current @check-change="handleClick"></el-tree> -->
              <el-select :disabled="addMsg.IsLock === 1" filterable v-model="addMsg.ParentId" :placeholder="$t('pub.pleaseSel')">
				  <el-option v-for="item in cateGoryList" :key="item.Id" :label="item.CategoryName"
                             :value="item.Id">
                  </el-option>
              </el-select>
            </el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
            <el-form-item label="是否热门" prop="IsHot">
			  <el-switch v-model="addMsg.IsHot"></el-switch>
            </el-form-item>
            </el-col>
			<el-col :span="12"><el-form-item :label="$t('visa.v_shifouqiyong')" prop="Enable">
			  <el-switch :disabled="addMsg.IsLock === 1" v-model="addMsg.Enable"></el-switch>
            </el-form-item></el-col>
		</el-row>
		<el-row>
			<el-col :span="12"><el-form-item label="图标" prop="Icon">
              <!-- <el-input :value="addMsg.Icon" style="dispaly: none;" /> -->
              <uploadImg :maxNum="1" ref="Icon"></uploadImg>
            </el-form-item>
            </el-col>
			<el-col :span="12"><el-form-item label="背景图片" prop="BackgroundImage">
              <!-- <el-input :value="addMsg.BackgroundImage" style="dispaly: none;"/> -->
              <uploadImg :maxNum="1" ref="BackgroundImage"></uploadImg>
            </el-form-item></el-col>
		</el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
    <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
      <template slot-scope="scope">
        <img v-for="src in scope.images" :src="src" :key="src">
      </template>
    </viewer>
	</div>
</template>

<script>
import uploadImg from '../../pubComponents/uploadImg'
	export default {
        components: {uploadImg},
		data() {
			return {
				imageOptions: {
				navbar: false,
				title: false
				},
				images: [],
				dialogTitle: '',
				loading: false,
				DataList: [],
				cateGoryTree: [],
				cateGoryList: [],
				total: 0,
				pageSize: '',
				currentPage: 1,
				outerVisible: false,
				msg: { //列表查询请求数据
					"pageIndex": 1,
					'pageSize': 15,
					Enable: '1'
				},
				addMsg: {
					'Level': '',
					'ParentId': '',
					'CategoryName': '',
					'Icon': '',
					'IsHot':false,
					'Sort':'',
					'BackgroundImage': '',
					'Enable': true,
				},
				rules:{
					CategoryName:[
					  { required: true, message: '请输入分类名称', trigger: 'blur' }
					],
					Level:[
					  { required: true, message: '请选择层级', trigger: 'change' }
					],
				},
			}
		},
		mounted() {
			this.getList();
		},
		methods: {
			showImage(src) {
				this.$set(this.images, 0, src);
				setTimeout(() => {
				this.$viewer.show();
			}, 1000);
			},
			inited(viewer) {
				this.$viewer = viewer
			},
			handleClick(data,checked, node){
				if(checked){
					this.$refs.tree.setCheckedNodes([data]);
					this.addMsg.ParentId = data.Id
				}
			},
			getList() { //列表查询
			this.loading = true
				this.apipost('ws_post_GetCategoryPageList', this.msg, res => {
					if(res.data.resultCode == 1) {
						this.DataList = res.data.data.pageData;
						this.total = res.data.data.count;						
					}
					this.loading = false
				}, err => {this.loading = false})
			},
			handleLevelChange() {
				this.addMsg.ParentId = ''
				if(this.addMsg.Level <= 1) {
                  this.cateGoryList = []
				} else {
				  this.getCateGoryList()
				}
			},
			getCateGoryList() {
				this.apipost('ws_post_GetCategoryList', {Level: Number(this.addMsg.Level) - 1, CategoryName: '', pageIndex: 1, pageSize: 100}, res => {
					if(res.data.resultCode == 1) {
						this.cateGoryList = res.data.data;						
					}
				}, err => {})
			},
			addData() { //新增数据
				const icon = this.$refs.Icon.ImageList[0]
				const background = this.$refs.BackgroundImage.ImageList[0]
				this.addMsg.Icon = icon
				this.addMsg.BackgroundImage = background
				if(!this.addMsg.ParentId && this.addMsg.Level !== 1) {
					this.$message.error('请选择父级分类!');
                    return	
				}
				// if(!icon) {
				// 	this.$message.error('请上传图标!');
                //     return
				// }
				// if(!background) {
				// 	this.$message.error('请上传背景图片!');
                //     return
				// }
				let params = {...this.addMsg}
				params.IsHot = params.IsHot ? 1 : 2
				params.Enable = params.Enable ? 1 : 2
				this.apipost('ws_post_SetCategory', params, res => {
					if(res.data.resultCode == 1){
						this.outerVisible=false;
						this.$message.success(res.data.message)
						this.getList();		
					}else{
						this.$message.error(res.data.message);
					}
				}, err => {})

			},
			updateData({Id}) { //修改
				this.apipost('ws_post_GetCategory',{Id},res=>{
					let params = res.data.data
					params.IsHot = params.IsHot === 1
					params.Enable = params.Enable === 1
					this.addMsg = params
					this.$refs.Icon.ImageList = params.Icon ? [params.Icon] : []
					this.$refs.BackgroundImage.ImageList = params.BackgroundImage ? [params.BackgroundImage] : []
					if(this.addMsg.Level > 1) {
						this.getCateGoryList()
					}
				},err=>{})
			},
			//删除
			deleteData(item) {
				var that = this;
				that.Confirm(this.$t('tips.shifoushanchu'), function () {
				that.apipost(
					"ws_post_RemoveCategory", {
					Id: item.Id
					},
					res => {
					if (res.data.resultCode == 1) {
						that.Success(res.data.message);
						that.getList();
					} else {
						that.Error(res.data.message);
					}
					},
					null
				);
				});
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList();
			},
			clearMessage() {
				this.addMsg = {
					'Level': '',
					'ParentId': '',
					'CategoryName': '',
					'Icon': '',
					'IsHot':false,
					'Sort':'',
					'BackgroundImage': '',
					'Enable': true,				
				}
              this.$refs.Icon.ImageList = []
			  this.$refs.BackgroundImage.ImageList = []
			  this.$refs.tree.setCheckedKeys([]);
			},
			resetPageIndex() {
				this.msg.pageIndex = 1
				this.currentPage = 1
			},
			submitForm(addMsg) {//提交创建、修改表单
				// const icon = this.$refs.Icon.ImageList[0]
				// const background = this.$refs.BackgroundImage.ImageList[0]
				// this.addMsg.Icon = icon
				// this.addMsg.BackgroundImage = background
	            this.$refs[addMsg].validate((valid) => {
	                if (valid) {
	                    this.addData()
	                } else {
	                    return false;
	                }
	            });
	        },
		    closeChangeMachie(done){//弹出框关闭初始化弹框内表单
		         done();
		         this.resetForm('addMsg');
		    },
	        resetForm(formName) {//弹出框取消 初始化谈框内表单
	         this.$refs[formName].resetFields();
	        }
		}

	}
</script>