<template>
  <div class="shopList" v-loading="loading" element-loading-text="数据加载中">
    <div class="shop-list">
      <div class="item" v-for="(v,i) in shopList" :key="i" @click.stop="addShop(2, v)">
        <div class="shop-top">
          <div class="code">门店编号：{{v.code}}</div>
          <div class="edit" @click.stop="addShop(2, v)">编辑</div>
        </div>
        <div class="cell">
          <img class="img" src="../../../static/image/shop-name.png" alt="">
          <div class="con">{{v.name}}</div>
        </div>
        <div class="cell">
          <img class="img" src="../../../static/image/shop-address.png" alt="">
          <div class="con1">{{v.poiAddress}}{{v.address}}</div>
        </div>
        <div class="cell">
          <img class="img" src="../../../static/image/shop-contact.png" alt="">
          <div class="con1">{{v.contactName}} {{v.mobile}}</div>
        </div>
        <div class="delivery">
          <div class="name">配送运力：</div>
          <img class="img" :src="d.logo" v-for="(d,idx) in v.deliveries" :key="idx" alt="">
        </div>
      </div>
      <div class="item1" @click.stop="addShop(1)">
        <img class="img" src="../../../static/image/icon-add.png" alt="">
        <div class="shop-name">添加门店</div>
      </div>
    </div>
    <shop-add @getData="getData" ref="shopAdd" :products="productList"></shop-add>
  </div>
</template>

<script>
import shopAdd from "./shopAdd";
import { getShopList, getProductList, shopDelete } from "../../api/shop";
export default {
  name: "shopList",
  components: {
    shopAdd,
  },
  data() {
    return {
      loading: false,
      shopList: [],
      productList: [],
      memberType: this.$store.state.userInfo.memberType,
    };
  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.memberType = newVal.memberType;
      },
      deep: true,
    },
  },
  mounted() {
    if (this.memberType !== 1) {
      this.getData();
    }
    this.getProductList();
    // this.$refs.map.setDialogStatus()
  },

  methods: {
    addShop(val, e) {
      if (val == 1) {
        this.$refs.shopAdd.init();
      } else {
        this.$refs.shopAdd.init(JSON.parse(JSON.stringify(e)));
      }
    },

    getData() {
      this.loading = true;
      getShopList().then((res) => {
        if (res.code === 200) {
          this.shopList = res.data.map((v) => {
            if (
              v.poiAddress === "null" ||
              v.poiAddress === "undefined" ||
              !v.poiAddress
            ) {
              v.poiAddress = "";
            }
            return v;
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.loading = false;
      });
    },

    getProductList() {
      getProductList().then((res) => {
        if (res.code === 200) {
          this.productList = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },

    deleteItem(e) {
      this.$confirm("此操作将永久删除该门店, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        shopDelete({
          shopId: e.id,
        }).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getData();
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      });
    },
  },
};
</script>

<style lang="scss">
.shopList {
  .shop-list {
    display: flex;
    flex-wrap: wrap;
    .item {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 290px;
      height: 150px;
      background: #ffffff;
      margin: 10px 20px 0 0;
      padding: 16px;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      &:hover {
        background: rgba(255, 255, 255, 0.39);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      }
      .shop-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 8px;
        border-bottom: 1px solid #ebebeb;
        .code {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #999999;
        }
        .edit {
          font-size: 14px;
          font-weight: 500;
          line-height: 20px;
          color: #fc7200;
        }
      }
      .cell {
        display: flex;
        align-items: center;
        margin-top: 8px;
        .img {
          width: 12px;
          height: 12px;
          margin-right: 5px;
        }
        .con {
          font-size: 16px;
          font-weight: bold;
          line-height: 20px;
          color: #333333;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .con1 {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #333333;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .delivery {
        display: flex;
        align-items: center;
        border-top: 1px solid #ebebeb;
        margin-top: 8px;
        padding-top: 8px;
        .name {
          flex-shrink: 0;
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #333333;
        }
        .img {
          width: 16px;
          height: 16px;
          margin-left: 10px;
        }
      }
    }
    .item1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      width: 322px;
      height: 182px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      margin: 10px 20px 0 0;
      cursor: pointer;
      .shop-name {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        color: #333333;
      }
    }
  }
}
</style>
