<template>
  <div style="height: 100%;" class="take-out" v-loading="loading" element-loading-text="数据加载中">
    <div class="content">
      <div class="left">
        <div :class="['list',curIndex === i ? 'active' : '']" v-for="(v,i) in waimaiList" :key="i" @click="changeTab(i)">
          <img :src="v.logo" alt="" srcset="">
          <div class="name">{{v.name}}</div>
        </div>
      </div>
      <div class="right">
        <div class="shop" v-for="(v,i) in bindShopList" :key="i">
          <div class="top">
            <div class="name">{{v.shopName}}</div>
            <img @click="editShop(v)" src="../../../static/image/icon-edit.png" alt="">
          </div>
          <div class="shop-content">
            <div class="info">
              <div class="info-line">店铺 ID：{{ v.thirdShopId }}</div>
              <div class="balance">类 型：{{ v.productName }}</div>
              <div class="refuse">关联门店：{{ v.thirdShopName }}</div>
            </div>
          </div>

          <div class="but">
            <div @click="bind(v)" v-if="!v.bindStatus" class="but-con">绑定</div>
          </div>
          <div class="but" @click="release(v)" v-if="v.bindStatus === 1">
            <div class="but-con unbind">解绑</div>
          </div>
        </div>
        <div class="shop-bind" v-if="waimaiList.length&&[6,7,8].includes(waimaiList[curIndex].type)">
          <img src="../../../static/image/icon-customer.png" alt="" srcset="">
          <div class="name">联系客服绑定</div>
        </div>
        <div class="shop-bind" @click="goBind" v-else>
          <img src="../../../static/image/icon-add.png" alt="" srcset="">
          <div class="name">绑定{{waimaiList[curIndex] && waimaiList[curIndex].name}}</div>
        </div>
      </div>
    </div>
    <!-- 绑定外卖平台 -->
    <el-dialog :title="`绑定${waimaiList[curIndex] && waimaiList[curIndex].name}`" :visible.sync="centerDialogVisible" @close="close" width="520px" center>
      <el-form label-width="80px">
        <el-form-item label="店铺">
          <el-select v-model="params.shopId" placeholder="请选择店铺">
            <el-option v-for="(v,i) in shopList" :key="i" :label="v.name" :value="v.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台ID" v-if="type === 3 || type === 5">
          <el-input v-model="params.code"></el-input>
        </el-form-item>
        <el-form-item label="授权方式" v-if="type === 1">
          <div class="bind">
            <el-radio-group class="choose" fill="#FC7200" v-model="params.mtBindType">
              <el-radio :label="1">直接绑定</el-radio>
              <span class="tip tip1">绑定后美团外卖订单将自动推送给本台</span>
              <el-radio v-if="showMT" :label="2">无冲突模式绑定</el-radio>
              <span v-if="showMT" class="tip">已绑定其他第三方平台，请使用无冲突模式</span>
            </el-radio-group>
            <div v-if="!showMT" @click="showMT = true" class="more">更多授权方式</div>
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="centerDialogVisible = false">取 消</el-button>
        <el-button class="btn" size="small" type="primary" @click="bindMT">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 店铺详情 -->
    <el-dialog title="店铺详情" :visible.sync="showDetail" width="30%" center>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="店铺名称">
          <el-input disabled v-model="form.thirdShopName"></el-input>
        </el-form-item>
        <el-form-item label="店铺ID">
          <el-input disabled v-model="form.thirdShopId"></el-input>
        </el-form-item>
        <el-form-item label="店铺类型">
          <el-input disabled v-model="form.productName"></el-input>
        </el-form-item>
        <el-form-item label="关联门店">
          <el-select v-model="form.shopId" placeholder="请选择店铺">
            <el-option v-for="(v,i) in shopList" :key="i" :label="v.name" :value="v.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showDetail = false">取 消</el-button>
        <el-button size="small" type="primary" @click="bindChangeShop">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
let newWindowWidth = 1100,
  newWindowHeight = 600,
  left = (window.screen.width - newWindowWidth) / 2,
  top = (window.screen.height - newWindowHeight) / 2 - 100;
import {
  getShopListNew,
  getTakeOutList,
  bindTakeOutNew,
  deleteTakeOut,
  releaseTakeOut,
  setTakeOut,
  getBindWaimaiShop,
  bindChangeShop,
} from "../../api/shop";
export default {
  name: "bindTakeOut",
  data() {
    return {
      curIndex: 0,
      waimaiList: [],
      bindShopList: [],
      shopList: [],
      takeOutList: [],
      jumpUrl: "",
      fullscreenLoading: false,
      loading: false,
      centerDialogVisible: false,
      showMT: false,
      waimaiId: "",
      merchantId: "",
      params: {
        shopId: "",
        waimaiId: "",
        mtBindType: 1,
        code: "",
      },
      showDetail: false,
      form: {
        thirdShopName: "",
        thirdShopId: "",
        productName: "",
        shopId: "",
      },
    };
  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.merchantId = newVal.merchantId;
      },
      deep: true,
      immediate: true,
    },
    jumpUrl(newVal, oldVal) {
      if (this.jumpUrl) {
        this.fullscreenLoading = true;

        let features = `width=${newWindowWidth},height=${newWindowHeight},left=${left},top=${top}`;
        let windowOpen = window.open(newVal, "name", features);
        let loop = window.setInterval(() => {
          console.log("windowOpen.closed", windowOpen.closed);
          if (windowOpen.closed) {
            this.jumpUrl = null;
            this.fullscreenLoading = false;
            window.clearInterval(loop);
            this.close();
            this.getBindWaimaiShop();
          }
        }, 1000);
      }
    },
  },
  computed: {
    // 1 美团 2 饿了吗 3 饿百零售 5 美团闪购
    type() {
      return (
        this.waimaiList[this.curIndex] && this.waimaiList[this.curIndex].type
      );
    },
  },
  created() {
    let memberType = this.$store.state.userInfo.memberType;
    if (memberType !== 1) {
      this.getTakeOutList();
    }
  },
  methods: {
    bindChangeShop() {
      bindChangeShop({ id: this.form.id, shopId: this.form.shopId }).then(
        (res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "保存成功",
            });
            this.showDetail = false;
            this.getBindWaimaiShop();
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        }
      );
    },
    async editShop(v) {
      console.log("门店编辑：", v);
      await this.getShopListNew();
      this.form = JSON.parse(JSON.stringify(v));
      this.showDetail = true;
    },
    close() {
      console.log("进来关闭");
      this.showMT = false;
      this.centerDialogVisible = false;
      this.params = {
        shopId: "",
        waimaiId: "",
        mtBindType: 1,
        code: "",
      };
    },
    getBindWaimaiShop() {
      this.loading = true;
      getBindWaimaiShop({
        waimaiId: this.waimaiId,
        merchantId: this.merchantId,
      }).then((res) => {
        if (res.code === 200) {
          this.bindShopList = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.loading = false;
      });
    },
    changeTab(i) {
      this.curIndex = i;
      this.waimaiId = this.waimaiList[i].id;
      this.getBindWaimaiShop();
    },
    getTakeOutList() {
      this.loading = true;
      getTakeOutList().then((res) => {
        if (res.code === 200) {
          this.waimaiList = res.data;
          this.changeTab(this.curIndex);
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.loading = false;
      });
    },
    getShopListNew() {
      this.loading = true;
      getShopListNew({
        waimaiId: this.waimaiId,
        merchantId: this.merchantId,
      }).then((res) => {
        if (res.code === 200) {
          this.params.code = res.data.shopCode;
          this.shopList = res.data.shopList;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.loading = false;
      });
    },

    async goBind() {
      await this.getShopListNew();
      this.centerDialogVisible = true;
    },
    bindMT() {
      // this.centerDialogVisible = false;
      if (!this.params.shopId) {
        return this.$message({
          type: "warning",
          message: "请选择店铺",
        });
      }
      this.bind();
    },
    bind() {
      this.params.waimaiId = this.waimaiId;
      console.log("绑定", this.params);
      bindTakeOutNew(this.params).then((res) => {
        if (res.code === 200) {
          this.jumpUrl = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    release(v) {
      this.$confirm("解绑后将无法同步店铺订单，确认要解绑吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          releaseTakeOut({ id: v.id }).then((res) => {
            if (res.code === 200) {
              if (res.data) {
                this.jumpUrl = res.data;
              } else {
                this.$message({
                  type: "success",
                  message: "成功解绑!",
                });
                this.getBindWaimaiShop();
              }
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解绑！",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.take-out {
  min-height: 200px;
  .store-list {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    &-item {
      padding: 8px 27px;
      background-color: #fff;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b1b1b1;
      box-sizing: border-box;
      border: 1px solid #eee;
      border-radius: 17px;
      cursor: pointer;
      margin-right: 10px;
      &.active {
        color: #fc7200;
      }
    }
  }
  .store-list::-webkit-scrollbar {
    height: 6px;
  }
  .store-list::-webkit-scrollbar-track {
    background-color: #eee;
    /*border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;*/
  }
  .store-list::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
  }
  .content {
    display: flex;
    height: 100%;
    .left {
      display: flex;
      flex-direction: column;
      background: #fefefe;
      height: 100%;

      .active {
        background: #ffffff;
        color: #fc7200;
        font-weight: bold;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
      }
      .list {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 10px 20px;
        &:hover {
          background: #ffffff;
          color: #fc7200;
          font-weight: bold;
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
        }
        img {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
        .name {
          font-size: 16px;
          white-space: nowrap;
        }
      }
    }
    .right {
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;
      margin-left: 10px;
      width: 100%;
      height: 100%;
      overflow-y: auto;
      .shop-bind {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 305px;
        height: 170px;
        background: #ffffff;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        margin: 0 20px 20px 0;
        color: #cccccc;
        font-size: 16px;
        cursor: pointer;
        img {
          height: 60px;
          width: 60px;
          margin-bottom: 5px;
        }
      }
      .shop {
        position: relative;
        width: 305px;
        height: 170px;
        background: #ffffff;
        border-radius: 8px;
        margin: 0 20px 20px 0;
        overflow: hidden;
        cursor: pointer;
        &:hover {
          box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
          background: rgba(255, 255, 255, 0.39);
        }
        .status {
          position: absolute;
          top: 60px;
          right: 20px;
          padding: 0 5px;
          font-size: 14px;
          height: 20px;
          line-height: 20px;
          color: #007aff;
          border: 1px solid #007aff;
          transform: rotate(-20deg);
        }
        .bt-refuse {
          color: #999999;
          border: 1px solid #999999;
        }
        .top {
          padding: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name {
            font-size: 18px;
            font-weight: 500;
            line-height: 25px;
            color: #333333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          img {
            width: 30px;
            height: 30px;
            cursor: pointer;
          }
        }
        .shop-content {
          padding: 10px 0;
          margin: 0 10px;
          display: flex;
          justify-content: space-between;
          border-top: 1px solid #ebebeb;
          .info {
            width: 100%;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            color: #333333;
            .balance {
              margin: 5px 0;
            }
            .refuse {
              width: 100%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }
        .but {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;

          .but-con {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #ffffff;
            background: #fc7200;
            cursor: pointer;
          }
          .unbind {
            background: rgba(252, 114, 0, 0.6);
          }
        }
      }
    }
  }
  .take-out-list {
    .item {
      background-color: #fff;
      .item-top {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20px 18px;
        align-items: center;
        border-bottom: 1px solid #eee;
        .top-left {
          display: flex;
          align-items: center;
          .top-left-img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
          }
          .name {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffa608;
          }
        }
        .top-right {
          display: flex;
          align-items: center;
          span {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #b1b1b1;
            margin-right: 12px;
          }
        }
      }
      .item-bottom {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 25px 18px;
        align-items: center;
        .left {
          display: flex;
          align-items: center;
          .l-l {
            width: 160px;
            height: 50px;
            font-size: 0;
            .l-l-img {
              width: 100%;
              height: 100%;
            }
          }
          .take-out-name {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 20px;
            margin-left: 30px;
          }
        }
        .right {
          .right-btn {
            background-color: #fc7200;
            border: #fc7200;
          }
        }
      }
    }
  }
  .btn {
    background-color: #fc7200;
    border: #fc7200;
  }
  .bind {
    display: flex;
    margin-top: 13px;
    justify-content: space-between;
    .more {
      color: #175199;
      cursor: pointer;
      font-size: 12px;
    }
    .choose {
      display: flex;
      flex-direction: column;
      /deep/ .el-radio__label {
        font-size: 14px;
        color: #222222;
        font-weight: bold;
      }
      /deep/ .el-radio__input.is-checked .el-radio__inner {
        border-color: #fc7200;
        background: #fc7200;
      }
      .tip {
        color: #9ea7b7;
        margin-left: 20px;
        font-size: 12px;
      }
      .tip1 {
        margin: 5px 0 33px 20px;
      }
    }
  }
}
</style>
