<template>
  <!-- 1->绑定，0：未绑定，2-> 审核中，3->拒绝，4->待完善资料 -->
  <div style="height: 100%;" v-loading="loading" element-loading-text="数据加载中">
    <div class="content">
      <div class="left">
        <div :class="['list',curIndex === i ? 'active' : '']" v-for="(v,i) in deliveryList" :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 shopList" :key="i">
          <div class="top">
            <div class="name">{{v.shopName}}</div>
            <img @click="editShop(v)" v-if="[1,9].includes(type)&& v.dadaBindType === 1" src="../../../static/image/icon-edit.png" alt="">
          </div>
          <div class="shop-content">
            <div class="info">
              <div v-if="[1, 2, 5, 9, 13].includes(type)" class="info-line">门店编号：{{type === 1 ? (v.dadaShopNo || '--') : type ===9 ? (v.dadaYzShopNo || '--') : type === 5 ? v.thirdShopId || '--' : '--'}}</div>
              <div v-else class="info-line">商户编号：{{ v.thirdShopId || '--' }}</div>
              <div class="balance">账户余额：{{typeof v.balance === 'number' ? '￥ ' + v.balance : '--'}}</div>
              <el-tooltip v-if="type === 5 && v.bindStatus === 3" effect="dark" placement="top-start">
                <div slot="content">{{v.authMsg}}</div>
                <div class="refuse">审核失败：
                  {{v.authMsg}}
                </div>
              </el-tooltip>
            </div>
          </div>
          <div v-if="type === 5 && [2,3].includes(v.bindStatus)" :class="['status',v.bindStatus === 2 ? '' : 'bt-refuse']">{{v.bindStatus === 2 ? '审核中' : '审核失败'}}</div>
          <div class="but" v-if="[1,9].includes(type)">
            <div @click="bind(v)" v-if="!v.dadaBindType" class="but-con">绑定</div>
          </div>
          <div class="but" v-else-if="[5].includes(type)">
            <div @click="bind(v)" v-if="v.bindStatus === 3 || !v.bindStatus" class="but-con">绑定</div>
          </div>
          <div class="but" v-else>
            <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>
    </div>
    <!-- 账号绑定 -->
    <el-dialog title="账号绑定" :visible.sync="centerDialogVisible3" width="40%" center>
      <el-form ref="form" :model="params" label-width="100px">
        <el-form-item label="商户编号">
          <el-input v-model="params.merchantNo" placeholder="请输入商户编号"></el-input>
        </el-form-item>
        <el-form-item label="门店编号">
          <el-input v-model="params.shopNo" placeholder="请输入门店编号"></el-input>
        </el-form-item>
        <el-form-item label="注册手机号">
          <el-input v-model="params.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="goBind">重新绑定</el-button>
          <el-button size="small" type="primary" @click="confirm">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- UU跑腿 -->
    <el-dialog :title="title" :visible.sync="centerDialogVisible" width="40%" center>
      <el-form v-if="title === 'UU跑腿绑定'" :model="UUData" ref="UUData" label-width="80px" class="demo-ruleForm">
        <el-form-item label="城市" prop="cityName">
          <el-input v-model="UUData.cityName" placeholder="请输入当前城市名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="UUData.mobile" placeholder="请输入用户手机号"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="validateCode">
          <div class="code">
            <el-input v-model="UUData.validateCode" placeholder="请输入验证码"></el-input>
            <div class="get-code" v-if="!showCode" @click.stop="getCode">
              获取短信验证码
            </div>
            <div class="get-code" v-else>{{ count }}秒</div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="resetForm('UUData')">取 消</el-button>
          <el-button size="small" type="primary" @click="bindUU">确 定</el-button>
        </el-form-item>
      </el-form>
      <el-form v-if="title === 'UU跑腿解绑'" :model="UUData" ref="UUData" label-width="80px" class="demo-ruleForm">
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="UUData.mobile" placeholder="请输入用户手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="resetForm('UUData')">取 消</el-button>
          <el-button size="small" type="primary" @click="releaseUU">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 顺丰绑定 -->
    <el-dialog title="顺丰配送" :visible.sync="centerDialogVisible2" width="40%" center>
      <el-form label-width="80px" class="demo-ruleForm">
        <el-form-item label="顺丰ID号" prop="shopNo">
          <el-input v-model="sfId" placeholder="请输入顺丰ID号"></el-input>
        </el-form-item>
        <el-form-item label="顺丰ID号" prop="shopNo">
          <el-input v-model="sfId2" placeholder="请再次输入顺丰ID号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="centerDialogVisible2 = false">取 消</el-button>
          <el-button size="small" type="primary" @click="confirmSF">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
     
<script>
import {
  getDeliveryList,
  releaseDelivery,
  bindDeliveryNew,
  bindUserApplyDeliveryNew,
  bindUserSubmitDeliveryNew,
  explainDelivery,
  updateShopNoNew,
  statusDelivery,
  cancelBindDeliveryNew,
  unBindDeliveryNew,
  getBindDeliveryShopList,
  unBindAptNew,
} from "../../api/shop";
export default {
  data() {
    return {
      deliveryList: [],
      jumpUrl: "",
      fullscreenLoading: false,
      centerDialogVisible: false,
      centerDialogVisible2: false,
      loading: false,
      UUData: {
        cityName: "",
        mobile: "",
        validateCode: "",
      },
      title: "UU跑腿绑定",
      count: 60,
      showCode: false,
      timer: null, // 计时器
      memberType: this.$store.state.userInfo.memberType,
      curIndex: 0,
      shopList: [],
      params: {
        bindId: "",
        deliveryId: "",
        shopId: "",
        shopNo: "",
        merchantNo: "",
        mobile: "",
      },
      centerDialogVisible3: false,
      sfId: "",
      sfId2: "",
    };
  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.memberType = newVal.memberType;
      },
      deep: true,
    },
    jumpUrl(newVal, oldVal) {
      if (this.jumpUrl) {
        this.fullscreenLoading = true;
        let newWindowWidth = 800,
          newWindowHeight = 500,
          left = (window.screen.width - newWindowWidth) / 2,
          top = (window.screen.height - newWindowHeight) / 2 - 100;
        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.getDeliveryList();
          }
        }, 1000);
      }
    },
  },
  computed: {
    type() {
      return (
        this.deliveryList[this.curIndex] &&
        this.deliveryList[this.curIndex].deliveryType
      );
    },
  },
  created() {
    if (this.memberType !== 1) {
      this.getDeliveryList();
    }
  },
  // 1->达达
  // 2->蜂鸟即配
  // 3->美团飞速达
  // 4->闪送
  // 5->顺丰同城
  // 7->UU跑腿
  // 8->爱跑腿
  // 9->达达优质
  // 10->快服务
  // 12->货拉拉
  // 13-> 美图跑腿
  methods: {
    // 顺丰绑定确定
    confirmSF() {
      if (!this.sfId.trim()) {
        return this.$message({
          type: "warning",
          message: "请输入顺丰ID号",
        });
      }
      if (this.sfId.trim() !== this.sfId2.trim()) {
        return this.$message({
          type: "warning",
          message: "请确定输入相同的顺丰ID号",
        });
      }
      this.goBind();
    },
    confirmRelease(v) {
      unBindDeliveryNew({ id: v.id || v.bindId }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "已成功解绑！",
          });
          this.getDeliveryList();
          // this.getBindDeliveryShopList();
        } else {
          this.$message({
            type: "error",
            message: res.data,
          });
        }
      });
    },
    editShop(v) {
      this.shopId = v.shopId;
      this.params = {
        bindId: v.bindId,
        deliveryId: this.deliveryList[this.curIndex].deliveryId,
        shopId: v.shopId,
        shopNo:
          this.type === 1
            ? v.dadaShopNo
            : this.type === 9
            ? v.dadaYzShopNo
            : v.shopNo,
        merchantNo: v.thirdShopId,
        mobile: v.account,
      };
      this.centerDialogVisible3 = true;
    },
    // 进行绑定操作
    bind(v) {
      console.log("点击绑定！", typeof this.type);
      this.shopId = v.shopId;
      // 绑定顺丰同城
      if (this.type === 5) {
        this.sfId = "";
        this.sfId2 = "";
        this.centerDialogVisible2 = true;
        return;
      }
      // 绑定UU跑腿
      if (this.type === 7) {
        this.title = "UU跑腿绑定";
        this.UUData = {
          cityName: "",
          mobile: "",
          validateCode: "",
        };
        this.centerDialogVisible = true;
        return;
      }
      this.$confirm("即将进行绑定操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        this.goBind();
      });
    },
    getBindDeliveryShopList() {
      this.loading = true;
      let deliveryId = this.deliveryList[this.curIndex].deliveryId;
      getBindDeliveryShopList({ deliveryId }).then((res) => {
        if (res.code === 200) {
          this.shopList = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.loading = false;
      });
    },
    changeTab(i) {
      this.curIndex = i;
      if ([1, 2, 5, 9, 13].includes(this.type)) {
        this.sfId = ''
        this.getBindDeliveryShopList();
      } else {
        let shop = this.deliveryList[i];
        console.log("shop", shop);
        this.shopList = [
          {
            id: shop.id,
            shopName: shop.name,
            thirdShopId: shop.thirdShopId,
            balance: shop.balance,
            bindStatus: shop.bindStatus,
          },
        ];
      }
    },

    getDeliveryList() {
      this.loading = true;
      getDeliveryList().then((res) => {
        if (res.code === 200) {
          this.deliveryList = res.data;
          this.changeTab(this.curIndex);
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.loading = false;
      });
    },
    checkPhone(phone) {
      if (!/^1\d{10}$/.test(phone)) {
        return false;
      } else {
        return true;
      }
    },
    // 获取验证码
    getCode() {
      if (!this.UUData.mobile.trim()) {
        return this.$message({
          message: "手机号码不能为空",
          type: "error",
        });
      }
      if (!this.checkPhone(this.UUData.mobile)) {
        return this.$message({
          message: "请输入正确的手机号",
          type: "error",
        });
      }
      let params = {
        mobile: this.UUData.mobile,
      };
      bindUserApplyDeliveryNew(params).then((res) => {
        if (res.code == 200) {
          this.showCode = true;
          this.$message({
            message: "验证码发送成功",
            type: "success",
          });
          this.timer = setInterval(() => {
            this.count--;
            if (this.count <= 1) {
              this.showCode = false;
              this.count = 60;
              clearInterval(this.timer);
            }
          }, 1000);
        } else {
          return this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    goBind() {
      let params = {
        deliveryId: this.deliveryList[this.curIndex].deliveryId,
        sfId: this.sfId,
        shopId: this.shopId,
      };
      bindDeliveryNew(params).then((res) => {
        if (res.code === 200) {
          if (res.data) {
            this.jumpUrl = res.data;
          } else {
            this.$message({
              type: "success",
              message: "已成功绑定！",
            });
            this.getDeliveryList();
            // this.getBindDeliveryShopList();
          }
          this.centerDialogVisible2 = false;
          this.centerDialogVisible3 = false;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    bindUU() {
      if (!this.UUData.cityName.trim()) {
        return this.$message({
          message: "城市不能为空",
          type: "error",
        });
      }
      if (!this.UUData.mobile.trim()) {
        return this.$message({
          message: "手机号不能为空",
          type: "error",
        });
      }
      if (!this.UUData.validateCode.trim()) {
        return this.$message({
          message: "验证码不能为空",
          type: "error",
        });
      }
      bindUserSubmitDeliveryNew(this.UUData).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "绑定成功！",
            type: "success",
          });
          this.getDeliveryList();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
        this.centerDialogVisible = false;
      });
    },
    releaseUU() {
      if (!this.UUData.mobile.trim()) {
        return this.$message({
          message: "手机号不能为空",
          type: "error",
        });
      }
      cancelBindDeliveryNew({ mobile: this.UUData.mobile }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "已成功解除绑定！",
          });
          this.centerDialogVisible = false;
          this.getDeliveryList();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    releaseSF(v) {
      this.$prompt("", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "请输入绑定时顺丰同城ID号",
        center: true,
      }).then(({ value }) => {
        if (!value || v.thirdShopId !== value) {
          this.$message({
            type: "error",
            message: "请输入正确的顺丰同城ID号",
          });
        } else {
          this.confirmRelease(v);
        }
      });
    },
    unBindAptNew(v) {
      unBindAptNew({ bindId: v.id }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "已成功解绑！",
          });
          this.getDeliveryList();
        } else {
          this.$message({
            type: "error",
            message: res.data,
          });
        }
      });
    },
    release(v) {
      // UU跑腿解除绑定
      if (this.type === 7) {
        this.title = "UU跑腿解绑";
        this.UUData.mobile = "";
        this.centerDialogVisible = true;
        return;
      }
      // 顺丰同程解绑
      if (this.type === 5) {
        this.releaseSF(v);
        return;
      }
      this.$confirm("即将进行解绑操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        // 爱跑腿解除绑定
        if (this.type === 8) {
          this.unBindAptNew(v);
          return;
        }
        this.confirmRelease(v);
      });
    },
    // 编辑确认
    confirm() {
      updateShopNoNew(this.params).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "成功完善资料！",
          });
          this.centerDialogVisible3 = false;
          // this.getDeliveryList();
          this.getBindDeliveryShopList();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.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: #017e61;
    }
  }
}
.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%;
    padding: 0 10px;

    .active {
      background: #ffffff;
      color: #fc7200;
      font-weight: bold;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
      border-radius: 40px 2px 4px 40px;
    }
    .list {
      display: flex;
      align-items: center;
      margin: 10px;
      cursor: pointer;
      padding: 0 10px 0 10px;
      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 {
      position: relative;
      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;
      overflow: hidden;
      .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;
        }
        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;
            cursor: pointer;
          }
        }
      }
      .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: #f5f5f5;
          color: #333333;
          border: 1px solid #e6e6e6;
          border-radius: 0 0 8px 8px;
        }
      }
    }
  }
}
.take-out-list {
  .item {
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 5px;
    padding-bottom: 10px;
    .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 0;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        .l-l {
          width: 166px;
          height: 50px;
          border-radius: 25px;
          overflow: hidden;
          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 {
        .reason {
          margin-right: 10px;
          color: red;
        }
        .right-btn {
          background-color: #fc7200;
          border: none;
        }
      }
    }
    .respect {
      margin: 20px 20px 0;
      color: red;
    }
  }
}
.code {
  display: flex;
  align-items: center;
  .get-code {
    min-width: 120px;
    box-sizing: border-box;
    text-align: center;
    padding: 0 6px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #175199;
    cursor: pointer;
  }
}
.tips {
  color: red;
  margin-bottom: 15px;
}
</style>
