<template>
  <div class="templateMarket">
    <template>
      <div class="head-title">
        模板市场
      </div>
      <div class="content">
        <div style="padding:0 20px;margin-bottom:20px;">
          <el-select size="small" style="width:150px;">
            <el-option label="全部模板" :value="1"> </el-option>
            <el-option label="已拥有模板" :value="2"> </el-option>
            <el-option label="未拥有模板" :value="3"> </el-option>
          </el-select>
        </div>
        <div class="template_MarketList">
          <div class="Market_List" v-for="(item,index) in dataList" :key="index">
            <div class="MarketInner">
              <div flex="dir:top cross:center main:center" class="dialog-img">
                <div class="choose-btn market_useBtn">加载模板</div>
                <div class="choose-btn" @click="getImgSrc(item)">预览模板</div>
              </div>
              <div class="show-img" :style="{backgroundImage:'url('+item.pics[0]+')'}">
              </div>
              <div class="Market_Info">
                <div flex="dir:top main:center">
                  <div flex="main:justify">
                    <div class="item-name">{{item.name}}</div>
                  </div>
                  <div>
                    <div flex="cross:center main:justify">
                      <div class="price">
                        ￥{{item.price}}
                      </div>
                      <button type="button" class="el-button el-button--primary el-button--mini">
                        <span>加载</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <el-dialog title="手机端预览" :visible.sync="viewDialog" width="600px">
      <div class="MarketView" ref="MarketView">
        <img :src="imgUrl" alt="" style="width: 375px;">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="viewDialog = false" size="small">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        //预览弹窗
        viewDialog: false,
        imgUrl: '',
        dataList: [{
            "id": 40,
            "name": "618年中盛典-2",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/35120f94cf467eb8874aa67afe0b12c4.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "618年中盛典-2",
            "cloud_price": "0.00"
          },
          {
            "id": 39,
            "name": "618年中盛典",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/3dec44461189a8c99b157e426ec98aa4.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "618年中盛典",
            "cloud_price": "0.00"
          },
          {
            "id": 38,
            "name": "51劳动节-2",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/a65509e5cee18c6dda134cde50009892.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "51劳动节-2",
            "cloud_price": "0.00"
          },
          {
            "id": 37,
            "name": "51劳动节",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/fdce3d73af8165e0f5652187213950e3.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "51劳动节",
            "cloud_price": "0.00"
          },
          {
            "id": 36,
            "name": "妇女节2",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/df3307934c25cfbf1ae2c1046037d8bc.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "妇女节2",
            "cloud_price": "0.00"
          },
          {
            "id": 35,
            "name": "妇女节",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/be4f913235be3ca1b7a4b4d34bb45216.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "妇女节",
            "cloud_price": "0.00"
          },
          {
            "id": 34,
            "name": "情人节模板2",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/a0dadedd1a511bfa59fa63497a8c974d.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "情人节模板2",
            "cloud_price": "0.00"
          },
          {
            "id": 33,
            "name": "春节模板2",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/2022fc32d157bbdacae989174c75d583.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "春节模板2",
            "cloud_price": "0.00"
          },
          {
            "id": 31,
            "name": "元宵节模板2",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/5f8c2f51b4a9160decb00bed2277952f.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "元宵节模板2",
            "cloud_price": "0.00"
          },
          {
            "id": 30,
            "name": "情人节模板",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/615112ec2dc3e3b0b8aaa9b0b93bd4f0.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "情人节模板",
            "cloud_price": "0.00"
          },
          {
            "id": 29,
            "name": "元宵节模板",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/a5c397ade39f0e76c784d46078f0ea20.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "元宵节模板",
            "cloud_price": "0.00"
          },
          {
            "id": 28,
            "name": "春节模板",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/2be7b8bd21b5b89c1008bcbfbd6fc876.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "春节模板",
            "cloud_price": "0.00"
          },
          {
            "id": 19,
            "name": "超市3",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/63f989c9f7b9663e6ab9de13c03056b6.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "超市3",
            "cloud_price": "0.00"
          },
          {
            "id": 18,
            "name": "超市2",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/81ecb3a4ec8e8248da0e7f7a027bafd2.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "超市2",
            "cloud_price": "0.00"
          },
          {
            "id": 17,
            "name": "超市1",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/3bddad82d6c63870596334e318777fa5.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "超市1",
            "cloud_price": "0.00"
          },
          {
            "id": 16,
            "name": "美妆2",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/dc9370e6666b5cb588d81c1b22c72151.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "美妆2",
            "cloud_price": "0.00"
          },
          {
            "id": 15,
            "name": "美妆1",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/9d24aec77b45951b50343f3bc9708cd9.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "美妆1",
            "cloud_price": "0.00"
          },
          {
            "id": 14,
            "name": "生鲜2",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/7b516ba8fce669badea52aa2452dc3db.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.2",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "生鲜2",
            "cloud_price": "0.00"
          },
          {
            "id": 13,
            "name": "生鲜1",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/3d6b77eb7d512537c8e03e86c1e052f5.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "生鲜1",
            "cloud_price": "0.00"
          },
          {
            "id": 10,
            "name": "服饰3",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/2e86a1ad42ac8ea8b5f9c8e1131e2cc2.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "服饰3",
            "cloud_price": "0.00"
          },
          {
            "id": 9,
            "name": "服饰2",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/7e96634708ed70371f9fbcd3dcba0bb4.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "服饰2",
            "cloud_price": "0.00"
          },
          {
            "id": 8,
            "name": "服饰1",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/42d68cee10e3fa8af2c23ab81241e14e.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "服饰1",
            "cloud_price": "0.00"
          },
          {
            "id": 7,
            "name": "双十二",
            "pics": [
              "http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/d66b72d485ceed26d358e8f142dec60f.png"
            ],
            "price": "0.00",
            "user_id": 8,
            "type": "diy",
            "version": "0.0.1",
            "is_buy": 0,
            "user": {
              "id": 8,
              "name": "程基恩"
            },
            "order": "",
            "is_use": true,
            "is_show": 0,
            "use": true,
            "template": {
              "data": true
            },
            "cloud_name": "双十二",
            "cloud_price": "0.00"
          }
        ],
      };
    },
    components: {

    },
    created() {

    },
    methods: {
      getImgSrc(item) {
        this.viewDialog = true;
        this.imgUrl = item.pics[0];
      },
      //关闭
      closeDialog() {
        this.viewDialog = false;
        this.$refs.MarketView.scrollTop = 0;
      }
    },
    mounted() {}
  };

</script>
<style>
  .templateMarket .content {
    background: #fff;
    padding-top: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .templateMarket .template_MarketList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .templateMarket .Market_List {
    width: 207.5px;
    height: 370px;
    padding: 0 0 20px 20px;
  }

  .templateMarket .MarketInner {
    width: 187.5px;
    position: relative;
    top: 0;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    height: 350px;
  }

  .MarketInner:hover .dialog-img {
    display: flex;
  }

  .Market_List:hover .MarketInner {
    top: -10px;
    box-shadow: 0 4px 4px 4px #ECECEC;
  }

  .templateMarket .dialog-img {
    background-color: rgba(0, 0, 0, .4);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 187.5px;
    height: 270px;
    display: none;
  }

  .dialog-img .choose-btn {
    cursor: pointer;
    border-radius: 6px;
    height: 40px;
    line-height: 38px;
    width: 120px;
    margin: 10px auto;
    text-align: center;
    border: 1px solid #fff;
    color: #fff;
    font-size: 16px;
  }

  .templateMarket .market_useBtn {
    border: 1px solid #3399ff !important;
    background-color: #3399ff;
  }

  .templateMarket .show-img {
    width: 187.5px;
    height: 270px;
    overflow: hidden;
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
  }

  .templateMarket .Market_Info {
    padding: 0 10px;
    width: 100%;
    background-color: #fff;
  }

  .templateMarket .item-name {
    font-size: 16px;
    margin: 5px 0;
    width: 80%;
  }

  .templateMarket .price {
    color: #ff4544;
  }

  .MarketView {
    height: 600px;
    overflow-y: auto;
    text-align: center;
  }

</style>
