<style scoped>
.icon {
	height: 30px;
}
</style>
<template>
	<div class="flexOne">
		<div class="query-box">
			<ul>
				<li>
					<span><em>{{$t('system.query_airName')}}</em><el-input  v-model='msg.NavTitle' class="permiss-input" :placeholder="$t('fnc.qsrneirong')"></el-input></span>
				</li>

				<li>
					<span><em>{{$t('objFill.cengji')}}</em><el-select v-model="msg.Level"  :placeholder="$t('pub.pleaseSel')">
							    <el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
							    <el-option :label="$t('objFill.jibies')[0]" value="1"></el-option>
							    <el-option :label="$t('objFill.jibies')[1]" value="2"></el-option>
							    <el-option :label="$t('objFill.jibies')[2]" value="3"></el-option>
							  </el-select>
				      </span>
				</li>
				<li>
					<span><em>{{$t('advmanager.v_type')}}</em><el-select v-model="msg.Type"  :placeholder="$t('pub.pleaseSel')">
						<el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
						<el-option :label="$t('objFill.v101.dingbu')" :value="1"></el-option>
						<el-option :label="$t('objFill.v101.dibu')" :value="2"></el-option>
						<el-option :label="$t('objFill.v101.dibutub')" :value="3"></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=$t('objFill.v101.xinzengdhang'),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="$t('objFill.v101.daohangminc')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.NavTitle}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('objFill.v101.daohangdizhi')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.NavUrl}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('system.query_type')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.TypeName}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('objFill.cengji')">
                  <template slot-scope="scope">
                    <div>
                      {{['', $t('objFill.jibies')[0],$t('objFill.jibies')[1],$t('objFill.jibies')[2]][scope.row.Level]}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('objFill.v101.shifoudkxyem')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.IsNewOpen === 1 ? $t('pub.yes') : $t('pub.no')}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('objFill.v101.Rest.fuji')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.ParentName}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('system.table_rank')">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.SortNum}}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed :label="$t('objFill.v101.activity.col6.t8')">
                  <template slot-scope="scope">
					  <img class="icon" @click="showImage(scope.row.Icon)" :src="scope.row.Icon"/>
                  </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=$t('objFill.v101.bianjidaohang'),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('objFill.v101.daohangminc')" prop="NavTitle">
              <el-input style="width:217px" type="text" :disabled="addMsg.IsLock === 1" v-model="addMsg.NavTitle" maxlength="50" :placeholder="$t('objFill.v101.daohangminc')">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('objFill.v101.tiaozhuandizhi')" prop="NavUrl">
              <el-input style="width:217px" type="text" :disabled="addMsg.IsLock === 1" v-model="addMsg.NavUrl" maxlength="50" :placeholder="$t('objFill.v101.tiaozhuandizhi')">
              </el-input>
            </el-form-item>
          </el-col>
			<el-col :span="12">
            <el-form-item :label="$t('system.query_type')" prop="Type">
              <el-select :disabled="addMsg.IsLock === 1" v-model="addMsg.Type" :placeholder="$t('system.ph_type')" @change="handleLevelChange">
                <el-option :label="$t('objFill.v101.dingbu')" :value="1"></el-option>
                <el-option :label="$t('objFill.v101.dibu')" :value="2"></el-option>
                <el-option :label="$t('objFill.v101.dibutub')" :value="3"></el-option>
              </el-select>
            </el-form-item>
			</el-col>
			<el-col :span="12">
            <el-form-item :label="$t('system.table_rank')" prop="SortNum">
              <el-input style="width:217px" type="number" v-model="addMsg.SortNum" maxlength="10" :placeholder="$t('system.table_rank')">
              </el-input>
            </el-form-item>
			</el-col><el-col :span="12">
            <el-form-item :label="$t('objFill.cengji')" prop="Level">
              <el-select :disabled="addMsg.IsLock === 1" v-model="addMsg.Level" :placeholder="$t('pub.pleaseSel')" @change="handleLevelChange">
                <el-option :label="$t('objFill.jibies')[0]" :value="1"></el-option>
                <el-option :label="$t('objFill.jibies')[1]" :value="2"></el-option>
                <el-option :label="$t('objFill.jibies')[2]" :value="3"></el-option>
              </el-select>
            </el-form-item>
            </el-col>
			<el-col :span="12">
            <el-form-item :label="$t('objFill.v101.fujifenl')" prop="ParentId">
			  <!-- <el-tree show-checkbox ref="tree" node-key="Id" :data="cateGoryTree" :props="{label: 'NavTitle', 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.NavTitle"
                             :value="item.Id">
                  </el-option>
              </el-select>
            </el-form-item>
			</el-col>
			<el-col :span="12">
            <el-form-item :label="$t('objFill.v101.shifoudkxck')" prop="IsNewOpen">
			  <el-switch v-model="addMsg.IsNewOpen"></el-switch>
            </el-form-item>
            </el-col>
			<el-col :span="12"><el-form-item :label="$t('objFill.v101.activity.col6.t8')" prop="Icon">
              <!-- <el-input :value="addMsg.Icon" style="dispaly: none;" /> -->
              <uploadImg :maxNum="1" ref="Icon"></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,
				},
				addMsg: {
					'Level': '',
					'ParentId': '',
					'NavTitle': '',
					'NavUrl': '',
					'Icon': '',
					'TypeId':'',
					'SortNum':'',
					'IsNewOpen': true,
				},
				rules:{
					NavTitle:[
					  { required: true, message: this.$t('objFill.v101.qingshurdhmc'), trigger: 'blur' }
					],
					Level:[
					  { required: true, message: this.$t('objFill.v101.qingxzcenji'), trigger: 'change' }
					],
					NavUrl:[
					  { required: true, message: this.$t('objFill.v101.qingsrdhdiz'), trigger: 'blur' }
					],
					SortNum:[
					  { required: true, message: this.$t('objFill.v101.qingshrpxz'), trigger: 'blur' }
					],
				},
			}
		},
		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_get_GetNavPageList', 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_get_GetNavList', {Level: Number(this.addMsg.Level) - 1, Type: this.addMsg.Type, NavTitle: '', pageIndex: 1, pageSize: 100}, res => {
					if(res.data.resultCode == 1) {
						this.cateGoryList = res.data.data;
					}
				}, err => {})
			},
			addData() { //新增数据
				const icon = this.$refs.Icon.ImageList[0]
				this.addMsg.Icon = icon
				if(!this.addMsg.ParentId && this.addMsg.Level !== 1) {
					this.$message.error(this.$t('objFill.v101.qingxzfujifl'));
                    return
				}
				// if(!icon) {
				// 	this.$message.error('请上传图标!');
                //     return
				// }
				let params = {...this.addMsg}
				params.IsNewOpen = params.IsNewOpen ? 1 : 2
				this.apipost('ws_post_SetNav', 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_get_GetNav',{Id},res=>{
					let params = res.data.data
					params.IsNewOpen = params.IsNewOpen === 1
					params.ParentId = params.ParentId || ''
					this.addMsg = params
					this.$refs.Icon.ImageList = params.Icon ? [params.Icon] : []
					if(this.addMsg.Level > 1) {
						this.getCateGoryList()
					}
				},err=>{})
			},
			//删除
			deleteData(item) {
				var that = this;
				that.Confirm(that.$t('tips.shifoushanchu'), function () {
				that.apipost(
					"ws_post_RemoveNav", {
					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': '',
					'NavTitle': '',
					'NavUrl': '',
					'Icon': '',
					'TypeId':'',
					'SortNum':'',
					'IsNewOpen': true,
				}
              this.$refs.Icon.ImageList = []
			  this.$refs.tree.setCheckedKeys([]);
			},
			resetPageIndex() {
				this.msg.pageIndex = 1
				this.currentPage = 1
			},
			submitForm(addMsg) {//提交创建、修改表单
	            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>