<template>
  <el-form class="compprop-swipernavbar" :class="rootClass" ref="form" label-width="120px">
	  
       <el-form-item label="顶部背景">
          <el-upload
            class="upload-demo"
            :action="url"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="uploadBefore"
            :on-remove="uploadRemove"
            list-type="picture"
            :with-credentials="true"
            :show-file-list="true"
            :file-list="uploadImgList"
            accept="image/jpeg, image/jpg, image/png"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-input placeholder="请输入图片地址" v-model="comp.props.bgImg.val"></el-input>
          <label class="prop-intro">{{comp.props.bgImg.description}}</label>
        </el-form-item>
       <el-form-item  label="返回主页开关">
          <el-switch
            v-model="comp.props.IsShow.val" 
            active-value="1"
            inactive-value="0"
            @change="changeSwitch()"
          ></el-switch>
        </el-form-item>
		<el-form-item label="返回按钮图标">
			<el-input v-model="comp.props.iconimg.val"></el-input>
		</el-form-item>

    <el-table :data="comp.props.items.val" style="width: 100%">
      <el-table-column label="菜单名称">
        <template slot-scope="scope">
		   <el-input  v-model="scope.row.MenuName" placeholder="请输入菜单名称" 
		:maxlength="200"></el-input>
          <el-input  v-model="scope.row.LocationUrl" placeholder="请输入菜单链接"
            :maxlength="200" 
          ></el-input> 
		  
          
        </template>
      </el-table-column>
	  <el-table-column label="菜单Icon">
        <template slot-scope="scope">
	 	<el-input  v-model="scope.row.IconUrl" placeholder="请输入菜单Icon" 
		   :maxlength="200" ></el-input>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <div class="option-bar">
            <i class="option el-icon-delete" title="删除" @click="remove(scope.row.id)"></i>
        
            <i
              v-if="scope.$index!==0"
              class="option el-icon-sort-up"
              title="向上"
              @click="up(scope.row.id,scope)"
            ></i>
            <i
              v-if="scope.$index!==(comp.props.items.val.length-1)"
              class="option el-icon-sort-down"
              title="向下"
              @click="down(scope.row.id)"
              style="margin-left:5px"
            ></i>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-button
      type='default'
      icon="el-icon-plus"
      @click="add()"
      style="margin-top:10px;width:100%;padding:12px !important"
    >添加</el-button>
  </el-form>
</template>

<script>
import apiHelper from "@/assets/js/apiHelper.js";
export default {
	name: "CompSwiperNavBarProps",
	props: ["cfg", "comp"],
	data() {
		return {
			loading:false,
			 uploadImgList: [],
			rootClass: "",
			activeId: "",
			imgIndex:-1,
			url:this.sup8._appConf.apiUrl.alioss,
		};
	},
	methods: {
		add: function() {
			var emptyRow = {
				id: this.sup8.$utils.newGuid(),
				actionType: this.sup8._def.linkType.innerPage.value,
				IconUrl: "",
				LocationUrl:"",
				MenuName:"",
				active: false //初始化时是否显示在当前页面
			};
			if (this.comp.props.items.val.length <= 0) {
				this.activeId = emptyRow.id;
			}
			this.comp.props.items.val.push(emptyRow);
		},

		remove: function(id) {
			this.comp.props.items.val = this.comp.props.items.val.filter(
				t => t.id != id
			);
		},

		up: function(id, scope) {
			var index = _.findIndex(this.comp.props.items.val, {
				id: id
			});
			this.comp.props.items.val.up(index);
		},
		down: function(id) {
			var index = _.findIndex(this.comp.props.items.val, {
				id: id
			});
			this.comp.props.items.val.down(index);
		},
		uploadSuccess(response, file, fileList) {
			if (response.flag && response.data !== undefined) {
				this.uploadImgList = [response.data];
				this.comp.props.bgImg.val = response.data.url;
				this.loading = false;
				this.$message.success("上传成功");
			}
		},
		uploadError(err, file, fileList) {
			this.$message.error("上传失败");
			this.loading = false;
		},
		uploadBefore(file) {
			const size = 1024 * 500;
			const typeArr = ["image/jpeg", "image/jpg", "image/png"];
			if (!typeArr.includes(file.type)) {
				this.$message.warning("请上传png/jpg类型的图片");
				return false;
			}
			if (file.size > size) {
				this.$message.warning("上传图片不能超过500kb");
				return false;
			}
			this.loading = true;
		},
		uploadRemove(file, fileList) {
			this.uploadImgList = [];
			this.comp.props.bgImg.val = "";
		}
	},

	created: function() {
		var that = this;
		that.mergeCompProps(that.comp);
		that.comp.props.items.val = that.comp.props.items.val || [];
		console.log(that.comp.props.items.val);
	},
	watch: {
		activeId(n) {
		console.log("activeId", n);
		_.forEach(this.comp.props.items.val, function(it) {
			it.active = it.id === n;
		});

		this.$forceUpdate();
		}
	},
	mounted: function() {}
};
</script>

<style scoped>
</style>



