<style>
  .myStore_list {
    min-height: 100px;
    background: #fff;
  }

  .myStore_item {
    border-bottom: 1px solid #e2e2e2;
    padding: 20px;
    color: #606266;
  }

  .myEdit_item {
    border: 1px solid #dcdfe6;
    padding: 5px;
    margin-bottom: 5px;
    line-height: normal;
    color: #606266;
  }

  .myEdit_item-options {
    position: relative;
  }

  .myEdit_item-options .el-button {
    height: 25px;
    line-height: 25px;
    width: 25px;
    padding: 0;
    text-align: center;
    border: none;
    border-radius: 0;
    position: absolute;
    margin-left: 0;
  }

  .store_pic_box {
    width: 70px;
    height: 70px;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #fff;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }

  .store_size_tip {
    line-height: 1.35;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
    letter-spacing: -1px;
  }

  .store_image_delete {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px !important;
    visibility: hidden;
    z-index: 1;
  }

  .store_pic_box:hover .store_image_delete {
    visibility: visible;
  }

  .store_pic_box i {
    font-size: 22px;
    color: #909399;
  }

  .store_image_delete i {
    font-size: 12px;
    color: #fff;
  }

</style>
<template>
  <div :class="{'active':storeData.isCked}">
    <div class="diy-component-options" v-if="storeData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-component-preview">
      <div class="myStore_list">
        <div class="myStore_item" v-for="(item,index) in data.list" flex="box:last cross:center" :key="index">
          <div flex="box:first cross:center">
            <div>
              <img :src="getIconLink(item.CoverImg)" style="width: 120px;height: 120px;margin-right: 20px">
            </div>
            <div style="line-height: 42px">
              <div v-if="data.showName">{{item.name}}</div>
              <div v-if="data.showScore" flex>
                <div>评分：</div>
                <div>
                  <img :src="getIconLink(data.scorePicUrl)" style="width: 20px;height: 20px;margin-right: 5px;">
                  <img :src="getIconLink(data.scorePicUrl)" style="width: 20px;height: 20px;margin-right: 5px;">
                  <img :src="getIconLink(data.scorePicUrl)" style="width: 20px;height: 20px;margin-right: 5px;">
                  <img :src="getIconLink(data.scorePicUrl)" style="width: 20px;height: 20px;margin-right: 5px;">
                  <img :src="getIconLink(data.scorePicUrl)" style="width: 20px;height: 20px;margin-right: 5px;">
                </div>
              </div>
              <div v-if="data.showTel">
                <span>电话: </span>
                <span>{{item.mobile}}</span>
              </div>
            </div>
          </div>
          <div style="text-align: center">
            <img :src="getIconLink(data.navPicUrl)" style="width: 50px;height: 50px;display: block;margin: 0 auto;">
            <div>一键导航</div>
          </div>
        </div>
      </div>
    </div>
    <div class="diy-component-edit" v-if="storeData.isCked">
      <el-form label-width="100px" @submit.native.prevent>
        <el-form-item label="导航图标">
          <div class="store_pic_box" @click="choicImg=true,checkIndex=1" flex="main:center cross:center"
            :style="{backgroundImage:'url(' + getIconLink(data.navPicUrl) + ')'}">
            <i v-if="data.navPicUrl==''" class="el-icon-picture-outline"></i>
            <div class="store_size_tip">50 × 50</div>
            <el-button type="danger" v-if="data.navPicUrl!=''" class="store_image_delete" size="mini"
              icon="el-icon-close" @click.stop="data.navPicUrl=''" circle></el-button>
          </div>
        </el-form-item>
        <el-form-item label="评分图标">
          <div class="store_pic_box" @click="choicImg=true,checkIndex=2" flex="main:center cross:center"
            :style="{backgroundImage:'url(' + getIconLink(data.scorePicUrl) + ')'}">
            <i v-if="data.scorePicUrl==''" class="el-icon-picture-outline"></i>
            <div class="store_size_tip">50 × 50</div>
            <el-button type="danger" v-if="data.scorePicUrl!=''" class="store_image_delete" size="mini"
              icon="el-icon-close" @click.stop="data.scorePicUrl=''" circle></el-button>
          </div>
        </el-form-item>
        <el-form-item label="显示门店名称">
          <el-switch v-model="data.showName"></el-switch>
        </el-form-item>
        <el-form-item label="显示评分">
          <el-switch v-model="data.showScore"></el-switch>
        </el-form-item>
        <el-form-item label="显示电话">
          <el-switch v-model="data.showTel"></el-switch>
        </el-form-item>
        <el-form-item label="门店列表">
          <div v-for="(item,index) in data.list" class="myEdit_item" :key="index">
            <div class="myEdit_item-options">
              <el-button @click="deleteStore(index)" icon="el-icon-delete" type="primary"
                style="top: -6px;right: -31px;"></el-button>
            </div>
            <div flex>
              <div style="width: 40px;">ID:</div>
              <div>{{item.id}}</div>
            </div>
            <div flex>
              <div style="width: 40px;">名称:</div>
              <div>{{item.name}}</div>
            </div>
            <div flex>
              <div style="width: 40px;">电话:</div>
              <div>{{item.mobile}}</div>
            </div>
          </div>
          <el-button size="small" @click="storeDialogVisible = true">添加门店</el-button>
          <!-- 添加门店未做 -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 选择门店 -->
    <el-dialog title="选择门店" :visible.sync="storeDialogVisible" width="960px">
      <choiceStore @getStore="getStore"></choiceStore>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import choiceStore from "../../common/choiceStore.vue";
  export default {
    props: ["storeData", "index", "dataLeng"],
    components: {
      ChooseImg,
      choiceStore
    },
    data() {
      return {
        choicImg: false,
        storeDialogVisible: false,
        data: this.storeData.data,
        checkIndex: 0,

      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        if (this.checkIndex == 1) {
          this.data.navPicUrl = msg.url;
        } else if (this.checkIndex == 2) {
          this.data.scorePicUrl = msg.url;
        }
        this.choicImg = false;
      },
      deleteStore(index) {
        this.data.list.splice(index, 1);
      },
      getStore(obj) {
        var newObj = {
          id: obj.Id,
          name: obj.Name,
          mobile: obj.Tel,
          CoverImg:obj.CoverImg
        };
        this.data.list.push(newObj);
        this.storeDialogVisible = false;
      }
    },
    computed: {

    },
    mounted() {

    }
  };

</script>
