<template>
  <div class="imgCube">
    <template v-if="imgCubeAdd">
      <div class="head-title">
        图片魔方列表
        <el-button @click="imgCubeAdd=false,clearInfo()" style="float:right;margin-top: -5px;" size="small"
          type="primary">
          添加图片魔方
        </el-button>
      </div>
      <div class="content">
        <div>
          <div class="searchInput">
            <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入搜索内容" v-model="msg.Name"
              size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()">
            </el-input>
            <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
              @click="msg.pageIndex=1,getList()"> </span>
          </div>
        </div>
        <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
          <el-table-column prop="Id" label="ID" width="150">
          </el-table-column>
          <el-table-column prop="Name" label="名称">
          </el-table-column>
          <el-table-column prop="CreateDateStr" label="创建日期" width="450">
          </el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <img @click="EditRole(scope.row)" src="../../assets/img/userman/edit.png" alt="">
              <img @click="RemmoveRole(scope.row)" style="margin-left:10px;" src="../../assets/img/userman/del.png"
                alt="">
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
          :page-size="msg.pageSize" layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </template>
    <template v-else>
      <div class="head-title">
        <span @click="imgCubeAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">图片魔方列表</span><span
          style="margin:0 9px;color:#C0C4CC">/</span><span>图片魔方编辑</span>
      </div>
      <div class="content">
        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="魔方名称" prop="Name">
                <el-input v-model="addMsg.Name" placeholder="请输入魔方名称" size="small" maxlength="20" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="样式选择">
            <div class="block-box" v-for="(item,index) in styleList" :key="index" :class="isActive==item.Id?'active':''"
              @click="getStyleType(item.Id,item.Style)">
              <img src="../../assets/img/storeDesign/select.png" class="Cubeselect" alt="" />
              <div class="opacity"></div>
              <el-button class="imgCube_chooseBtn" type="primary">启用该样式</el-button>
              <img :src="item.ImgUrl" class="cube_blockImg" alt="">
            </div>
          </el-form-item>
          <el-form-item label="板块设置">
            <template v-if="addMsg.MagicDataList.length==0">
              <el-tag type="danger">请先选择样式</el-tag>
            </template>
            <template v-else>
              <el-row style="margin-bottom:15px;" v-for="(subItem,subIndex) in addMsg.MagicDataList" :key="subIndex">
                <el-col :span="4">
                  <el-tooltip class="item" effect="dark" :content="'建议尺寸：'+subItem.size" placement="top">
                    <el-button size="mini" @click="choicImg=true,commonIndex=subIndex">选择图片</el-button>
                  </el-tooltip>
                  <div class="customize-share-title">
                    <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
                      :style="{backgroundImage:'url(' + getIconLink(subItem.ImgUrl) + ')'}">
                      <i v-if="subItem.ImgUrl==''" class="el-icon-picture-outline"></i>
                    </div>
                  </div>
                </el-col>
                <el-col :span="10">
                  <div style="display:flex;" flex="box:last">
                    <el-input type="text" v-model="subItem.Link" :disabled="true" size="small">
                    </el-input>
                    <div>
                      <el-button size="mini" @click="isShowLink=true,commonIndex=subIndex">选择链接</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
      </el-button>
    </template>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 选择链接 -->
    <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
      <chooseMenu ref="chooseMenu"></chooseMenu>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowLink=false">取 消</el-button>
        <el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import chooseMenu from "../common/chooseMenu.vue";
  export default {
    data() {
      return {
        loading: false,
        isActive: -1,
        choicImg: false,
        isShowLink: false,
        commonIndex: -1,
        dataList: [],
        msg: {
          pageIndex: 1,
          pageSize: 15,
          Name: "",
        },
        total: 0,
        imgCubeAdd: true,
        addMsg: {
          Id: 0, //魔方Id
          Name: '', //魔方名称
          Style: 0, //魔方样式
          MagicDataList: []
        },
        defaultMsg: [{
          ImgUrl: '',
          Link: ''
        }, {
          ImgUrl: '',
          Link: ''
        }, {
          ImgUrl: '',
          Link: ''
        }, {
          ImgUrl: '',
          Link: ''
        }],
        //样式选择枚举
        styleList: [{
          Id:0,
          size:['750*360'],
          Style: 1,
          ImgUrl: this.domainManager().ImageUrl + '/Static/cube1-1.png'
        }, {
          Id:1,
          size:['300*360','450*360'],
          Style: 2,
          ImgUrl: this.domainManager().ImageUrl + '/Static/cube1-2.png'
        }, {
          Id:2,
          size:['300*360','450*180','450*180'],
          Style: 3,
          ImgUrl: this.domainManager().ImageUrl + '/Static/cube1-3.png'
        }, {
          Id:3,
          size:['300*360','450*180','225*180','225*180'],
          Style: 4,
          ImgUrl: this.domainManager().ImageUrl + '/Static/cube1-4.png'
        }, {
          Id:4,
          size:['375*240','375*240'],
          Style: 2,
          ImgUrl: this.domainManager().ImageUrl + '/Static/cube2-1.png'
        }, {
          Id:5,
          size:['250*240','250*240','250*240'],
          Style: 3,
          ImgUrl: this.domainManager().ImageUrl + '/Static/cube2-2.png'
        }, {
          Id:6,
          size:['188*188','188*188','188*188','188*188'],
          Style: 4,
          ImgUrl: this.domainManager().ImageUrl + '/Static/cube2-3.png'
        }, {
          Id:7,
          size:['375*186','375*186','375*186','375*186'],
          Style: 4,
          ImgUrl: this.domainManager().ImageUrl + '/Static/cube3-1.png'
        }],
        rules: {
          Name: [{
            required: true,
            message: "请输入魔方名称",
            trigger: "blur"
          }]
        },
      };
    },
    created() {

    },
    components: {
      ChooseImg,
      chooseMenu
    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getList() {
        this.apipost("/api/Tenant/GetMallMagicPageList", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      submitform(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.saveMsg();
          } else {
            return false;
          }
        });
      },
      //保存
      saveMsg() {
        this.apipost("/api/Tenant/SetMallMagic", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.clearInfo();
            this.imgCubeAdd = true;
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //清空
      clearInfo() {
        this.addMsg.Id = 0;
        this.addMsg.Name = '';
        this.addMsg.Style = 0;
        this.isActive = -1;
        this.addMsg.MagicDataList = [];
        this.defaultMsg.forEach(item => {
          item.Link = "";
          item.ImgUrl = "";
        })
      },
      //修改
      EditRole(item) {
        this.apipost("/api/Tenant/GetMallMagic", {
          Id: item.Id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
            this.isActive=this.addMsg.Style;
            if (this.addMsg.MagicDataList && this.addMsg.MagicDataList.length > 0) {
              this.addMsg.MagicDataList.forEach((item, index) => {
                this.defaultMsg[index] = item;
                item.size=this.styleList[this.addMsg.Style].size[index]
              });
            }
            this.imgCubeAdd = false;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //删除
      RemmoveRole(item) {
        var that = this;
        that.Confirm("是否要删除?", function () {
          that.apipost("/api/Tenant/RemoveMallMagic", {
            Id: item.Id
          }, res => {
            if (res.data.resultCode == 1) {
              that.getList();
            } else {
              that.Info(res.data.message);
            }
          })
        })
      },
      //点击选择样式
      getStyleType(Id, Style) {
        this.isActive = Id;
        this.addMsg.Style=Id;
        this.addMsg.MagicDataList = [];
        for (var i = 0; i < Style; i++) {
          this.addMsg.MagicDataList.push(this.defaultMsg[i]);
        }
        this.addMsg.MagicDataList.forEach((x,index)=>{
          x.size=this.styleList[Id].size[index]
        })
      },
      //选择图片
      SelectId(msg) {
        if (this.commonIndex > -1) {
          this.defaultMsg[this.commonIndex].ImgUrl = msg.url;
        }
        this.choicImg = false;
      },
      //获取选择链接
      getChoiceLink() {
        //调用子组件方法
        var obj = this.$refs.chooseMenu.getChooseMenu();
        if (this.commonIndex > -1) {
          this.defaultMsg[this.commonIndex].Link = obj.PageUrl;
        }
        this.isShowLink = false;
      },

    },
    mounted() {
      this.getList();
    }
  };

</script>
<style>
  .imgCube .content .searchInput {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }

  .imgCube .content .searchInput .el-input__inner {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
  }

  .imgCube .content .searchInput {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    width: 250px;
    margin-right: 20px;
  }

  .imgCube .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .imgCube .block-box {
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    margin-right: 25px;
    height: 280px;
    width: 300px;
    border: 1px solid #D4D4D4;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    position: relative;
  }

  .block-box:hover .opacity {
    display: block;
  }


  .block-box .Cubeselect {
    display: none;
  }

  .imgCube_chooseBtn {
    position: absolute;
    height: 30px;
    width: 80px;
    padding: 0!important;
    text-align: center;
    background-color: #409EFF;
    top: 50%;
    left: 0;
    right: 0;
    margin: -15px auto 0!important;
    z-index: 10;
    display: none;
  }
  .block-box:hover .imgCube_chooseBtn {
    display: block;
  }
  .active .imgCube_chooseBtn{
    display:none!important;
  }
  .active .opacity{
    display:none!important;
  }

  .imgCube .opacity {
    position: absolute;
    height: 250px;
    width: 280px;
    bottom: 0;
    left: 10px;
    z-index: 5;
    background-color: rgba(0, 0, 0, .3);
    display: none;
  }

  .cube_blockImg {
    width: 280px;
    height: 250px;
    position: absolute;
    bottom: 0px;
    left: 10px;
  }

  .active .Cubeselect {
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    display: block;
    z-index: 10;
  }

</style>
