<template>
  <div>
    <div class="content">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>营销位管理</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="flex">
        <div class="left">
          <ul>
            <li v-for="(item,index) in asides" :key="index" :class="asideIndex==index?'active':''">{{ item }}</li>
          </ul>
        </div>
        <div class="inherit">
          <div class="right">
            <ul class="flex">
              <li v-for="(item,index) in navs" :key="index" :class="navIndex==index?'active':''" @click="changeNav(index)">{{ item }}</li>
            </ul>
            <!-- banner -->
            <div v-show="navIndex==0" class="banner">
              <ul class="flex shelf">
                <li v-for="(item,index) in shelfs" :key="index" :class="shelfIndex==index?'active':''" @click="changeShelf(index)">{{ item }}</li>
                <el-button type="primary" style="position: absolute;right:0" @click="isAdd=true">添加banner</el-button>
              </ul>
              <div v-show="shelfIndex==0">
                <el-table :data="tableData" border>
                  <el-table-column fixed prop="title" label="标题" align="center">
                  </el-table-column>
                  <el-table-column fixed="right" label="轮播图" align="center">
                    <template slot-scope="scope">
                      <el-image :src="scope.row.url"></el-image>
                    </template>
                  </el-table-column>
                  <el-table-column prop="date" label="上架时间" align="center">
                  </el-table-column>
                  <el-table-column fixed="right" label="排序" align="center">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="handleUp(scope.$index, scope.row)">上移</el-button>
                      <el-button type="text" size="small" @click=" handleDown(scope.$index, scope.row)">下移</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="handleSee(scope.row)">查看</el-button>
                      <el-button type="text" size="small" @click="offShelf(scope.row,scope.$index)">下架</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <h5 style="margin-top: 10px;">最多上传6张banner图</h5>
              </div>
              <div v-show="shelfIndex==1">
                <el-table :data="tableData1" border>
                  <el-table-column fixed prop="title" label="标题" align="center">
                  </el-table-column>
                  <el-table-column fixed="right" label="轮播图" align="center">
                    <template slot-scope="scope">
                      <el-image :src="scope.row.url"></el-image>
                    </template>
                  </el-table-column>
                  <el-table-column prop="date" label="预计上架时间" align="center">
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="editForm=true">编辑</el-button>
                      <el-button type="text" size="small" @click="onShelf(scope.row,scope.$index)">上架</el-button>
                      <el-button type="text" size="small" @click="handleDelete(scope.row,scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 添加框 -->
              <el-dialog :visible.sync="isAdd" title="添加banner" width="30%">
                <el-form :model="addForm" :rules="rules">
                  <el-form-item label="标题" prop="title">
                    <el-input v-model="addForm.title" placeholder="请输入" style="width: 300px;"></el-input>
                  </el-form-item>
                  <el-form-item label="链接">
                    <el-input v-model="addForm.link" placeholder="请输入" style="width: 300px;"></el-input>
                  </el-form-item>
                  <el-form-item label="图片">
                    <el-upload 
                      v-if="uploadDisabled" 
                      ref="upload" 
                      :limit="1" 
                      :on-success="handleAvatarSuccess1" 
                      :before-upload="beforeAvatarUpload"
                      :show-file-list="false" 
                      action="" 
                      list-type="picture-card">
                      <i class="el-icon-plus"></i>
                      <div slot="tip" class="el-upload__tip">上传一张920*540大小的图片，大小不超过5M</div>
                    </el-upload>
                    <div v-if="!uploadDisabled" class="del">
                      <el-image :src="addForm.img" style="width: 148px; height: 148px" fit="cover"></el-image>
                      <div class="tubiao">
                        <img src="@static/images/delete.png" alt @click="handleRemove1(index)" />
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item label="设置上架时间">
                    <el-date-picker v-model="addForm.time" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="isAdd = false">取 消</el-button>
                  <el-button type="primary" @click="isAdd = false">保存</el-button>
                </div>
              </el-dialog>
            </div>
            <!-- 基地直供专区 -->
            <div v-show="isNavindex" class="home">
              <el-form :model="homeForm" :rules="rules" label-width="100px" style="margin-top: 100px;">
                <el-form-item label="图片" >
                  <el-upload 
                    v-if="uploadDisabled" 
                    ref="upload" 
                    :limit="1" 
                    :on-success="handleAvatarSuccess1" 
                    :before-upload="beforeAvatarUpload"
                    :show-file-list="false" 
                    action="" 
                    list-type="picture-card">
                    <i class="el-icon-plus"></i>
                    <div slot="tip" class="el-upload__tip">上传一张920*540大小的图片，大小不超过5M</div>
                  </el-upload>
                  <div v-if="!uploadDisabled" class="del">
                    <el-image :src="addForm.img" style="width: 148px; height: 148px" fit="cover"></el-image>
                    <div class="tubiao">
                      <img src="@static/images/delete.png" alt @click="handleRemove1(index)" />
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="内容" prop="name">
                  <el-input v-model="homeForm.content" placeholder="请输入" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="图片跳转链接">
                  <el-input v-model="homeForm.link" placeholder="请输入" style="width: 300px;"></el-input>
                </el-form-item>
              </el-form>
              <el-button type="primary" style="margin:50px 0 0 150px;">保存</el-button>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'market',
  data() {
    return {
      homeForm: {
        content: '',
        img: '',
        link: ''
      },	
      addForm: {
        title: '',
        img: '',
        link: '',
        time: ''
      },
      uploadDisabled: true,
      isEdit: false,
      isAdd: false,
      shelfIndex: 0,
      navIndex: 0,
      asideIndex: 0,
      asides: ['首页', '保留位置', '保留位置'],
      navs: ['Banner', '基地直供专区', '扶贫专区', '溯源食品专业'],
      shelfs: ['已上架', '待上架'],
      tableData1: [{
        title: '轮播图1',
        url: require('@static/images/item.png'),
        date: '2016-05-02'
      }, {
        title: '轮播图2',
        url: require('@static/images/item.png'),
        date: '2016-05-02'
      }, {
        title: '轮播图3',
        url: require('@static/images/item.png'),
        date: '2016-05-02'
      }],
      tableData: [{
        title: '轮播图1',
        url: require('@static/images/item.png'),
        date: '2016-05-02'
      }, {
        title: '轮播图2',
        url: require('@static/images/item.png'),
        date: '2016-05-02'
      }, {
        title: '轮播图3',
        url: require('@static/images/item.png'),
        date: '2016-05-02'
      }],
      rules: {
        title: [{
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        }],
        time: [{
          required: true,
          message: '请输入时间',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    isNavindex() {
      if (this.navIndex === 1 || this.navIndex === 2 || this.navIndex === 3) {
        return true
      }
    }
  },
  methods: {
    // 图片上传
    handleAvatarSuccess1(res, file) {
      // 隐藏添加图片按钮
      this.uploadDisabled = false
      this.qcrodeimg = res.data.fileUrl
    },
    handleRemove1() {
      this.uploadDisabled = true
    },
    beforeAvatarUpload() {},
    changeNav(index) {
      this.navIndex = index
    },
    // 切换上架
    changeShelf(index) {
      this.shelfIndex = index
    },
    // 查看
    see() {},
    //上架
    onShelf(id, index) {
      this.$confirm('确定要上架么？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$message.success('上架成功')
          this.tableData1.splice(index, 1)
        })
        .catch(() => {})
    },
    // 删除
    handleDelete(id, index) {
      this.$confirm('确定要删除么？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$message.success('删除成功')
          this.tableData1.splice(index, 1)
        })
        .catch(() => {})
    },
    //下架
    offShelf(id, index) {
      this.$confirm('确定要下架么？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$message.success('下架成功')
          this.tableData.splice(index, 1)
        })
        .catch(() => {})
    },
    handleUp(index, row) { // 上移
      const len = this.tableData[index - 1]
      this.$set(this.tableData, index - 1, this.tableData[index])
      this.$set(this.tableData, index, len)
    },
    handleDown(index, row) { // 下移
      const len = this.tableData[index + 1]
      this.$set(this.tableData, index + 1, this.tableData[index])
      this.$set(this.tableData, index, len)
    }
  }

}
</script>

<style scoped>
    .home{
		margin-left: 50px;
	}
	.flex {
		position: relative;
	}

	.left {
		width: 150px;
		float: left;
	}

	.inherit {
		position: absolute;
		width: 88%;
		left: 150px
	}

	.right {}

	.left>ul {
		margin-top: 10px;
		margin-left: 30px;
		border-right: 1px solid #ccc;
	}

	.left>ul>li {
		padding: 10px;
		text-align: center;
	}

	.left>ul>.active {
		border-right: 2px solid #2288EE;
	}

	.right>ul {
		width: 100%;
		margin-top: 10px;
		margin-left: 10px;
		border-bottom: 1px solid #ccc;
	}

	.right>ul>li {
		padding: 10px;
		margin: 0 10px;
	}

	.right>ul>.active {
		border-bottom: 2px solid #2288EE;
	}

	.right>div {
		box-sizing: border-box;
		padding: 10px;

	}

	.shelf {
		margin-bottom: 20px;
		position: relative;
	}

	.shelf>li {
		width: 60px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border: 1px solid #000000;
		margin-right: 30px;
	}

	.shelf>.active {
		background: #F0F2F5;
	}

	.content {
		min-height: 800px;
	}
</style>
