<template>
  <view class="page-wrapper">
    <view class="page-cell column">
      <view class="extendList">
        <view class="extendTab">
          <view
            class="extendTab_item"
            v-for="(item, index) in vdata.extendList"
            :key="index"
            :class="{ active: vdata.extendIndex == index }"
            @click="extendTabClick(item, index)"
          >
            {{ item.name }}
          </view>
        </view>
        <view class="extend_content">
          <view class="extend_img">
            <view class="u-flex">
              <!-- <view class="extend_title">{{ vdata.extendInfo.name }}背景图片：</view> -->
              <view class="extend_title">当前背景图片：</view>
              <view
                class="color-main u-font-28"
                @click="chooseAndUploadAvatar('extendUp')"
                >更换</view
              >
            </view>
            <view class="fileUp u-m-t-24">
              <up-image
                width="148rpx"
                height="148rpx"
                :src="vdata.extendInfo.value"
              ></up-image>
              <view
                class="file"
                @tap="chooseAndUploadAvatar('extendUp')"
              ></view>
            </view>
          </view>

          <view class="u-m-t-32 u-m-b-24">
            <!-- <view class="extend_title">{{ vdata.extendInfo.name }}背景效果：</view> -->
            <view class="extend_title">当前背景效果：</view>
          </view>
          <view
            class="u-flex"
            :class="['bg-' + vdata.extendIndex]"
            :style="{
              backgroundImage: 'url(' + vdata.extendInfo.value + ')',
            }"
          >
            <image style="width: 100%" :src="imgUrl" mode="widthFix"></image>
            <image
              class="logo"
              v-if="vdata.extendIndex == 4"
              :src="vdata.extendInfo.value"
              mode="widthFix"
            ></image>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view> -->
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import go from "@/commons/utils/go.js";
import { uploadFile } from "@/http/api/index.js";
import {
  getShopInfo,
  editShopInfo,
  getShopExtend,
  editShopExtend,
} from "@/http/api/shop.js";

const vdata = reactive({
  shopInfo: {
    status: 2,
    isAccountPay: 0,
    isMemberPrice: 0,
  },
  extendList: [],
  registerTypeList: [
    {
      name: "先付费",
      value: "before",
    },
    {
      name: "后付费",
      value: "after",
    },
  ],
  extendIndex: 0,
  extendInfo: {},
  dineIn: false,
  takeout: false,
  isTableFee: false,
  label: "",
  type: "",
  inputValue: "",
});
onMounted(() => {
  shopExtend();
});

onShow(() => {
  shopInfo();
  uni.$on("refreshPreviousPage", (params) => {
    // 这里执行刷新数据的操作，例如重新调用API获取数据
    refreshData(params);
  });
});

/**
 * 输入内容修改
 */
let refreshData = (e) => {
  let params = {
    id: vdata.shopInfo.id,
  };
  params[e.name] = e.value;
  vdata.type = e.name;
  vdata.inputValue = e.value;
  updateShopInfo(params, "input");
};

/**
 * 获取店铺信息
 */
const shopInfo = () => {
  getShopInfo({
    id: uni.getStorageSync("shopInfo").id,
  }).then((res) => {
    vdata.isTableFee = res.isTableFee == 1 ? true : false;
    if (res.eatModel.split(",").indexOf("dine-in") != -1) {
      vdata.dineIn = true;
    }
    if (res.eatModel.split(",").indexOf("take-out") != -1) {
      vdata.takeout = true;
    }
    vdata.shopInfo = res;
  });
};

/**
 * 获取店铺图片
 */
let shopExtend = () => {
  getShopExtend().then((res) => {
    if (res && res.length > 0) {
      vdata.extendList = res;
      vdata.extendIndex = 0;
      vdata.extendInfo = res[0];
    }
  });
};

// 台桌清理模式修改
function tableClearChange(n) {
  let params = {
    id: vdata.shopInfo.id,
    tableClearType: n,
  };
  updateShopInfo(params);
}

/**
 * 付费模式修改
 */
let radioChange = (n) => {
  let params = {
    id: vdata.shopInfo.id,
    registerType: n,
  };
  updateShopInfo(params);
};

/**
 * 修改
 */
let updateShopInfo = (params, type) => {
  editShopInfo(params).then((res) => {
    if (type && type == "input") {
      vdata.shopInfo[vdata.type] = vdata.inputValue;
    }
  });
};

/**
 * 修改店铺图片
 */
let updateShopExtend = () => {
  editShopExtend({
    autokey: vdata.extendInfo.autoKey,
    value: vdata.extendInfo.value,
  }).then((res) => {});
};

/**
 * 上传头像
 */
let chooseAndUploadAvatar = (type) => {
  // 选择图片
  uni.chooseImage({
    count: 1, // 默认为1，只选择一张图片
    sizeType: ["original", "compressed"], // 图片质量，原图或压缩
    sourceType: ["album", "camera"], // 图片来源，相册或相机
    success: (res) => {
      let file = res.tempFiles[0];
      uploadFile(file)
        .then((res) => {
          if (type == "coverImg") {
            vdata.shopInfo.coverImg = res;
            let params = {
              id: vdata.shopInfo.id,
              coverImg: vdata.shopInfo.coverImg,
            };
            updateShopInfo(params);
          }
          if (type == "extendUp") {
            vdata.extendInfo.value = res;
            updateShopExtend();
          }
        })
        .catch((res) => {
          if (res.errMsg) {
            uni.showToast({
              title: "图片大小超出限制",
              icon: "error",
            });
          }
        });
    },
    fail: (chooseImageError) => {
      // 选择图片失败处理逻辑
      console.log("choose image fail:", chooseImageError);
    },
  });
};

/**
 * 店铺图片TAB切换
 */
let extendTabClick = (item, index) => {
  vdata.extendInfo = item;
  vdata.extendIndex = index;
};

/**
 * 修改
 */
let switchChange = (type) => {
  let params = {
    id: vdata.shopInfo.id,
  };
  switch (type) {
    case "address":
      params.lng = vdata.shopInfo.lng;
      params.lat = vdata.shopInfo.lat;
      params.address = vdata.shopInfo.address;
      break;
    case "status":
      params.status = vdata.shopInfo.status;
      break;
    case "eatModel":
      params.eatModel = [];
      if (vdata.dineIn) {
        params.eatModel.push("dine-in");
      }
      if (vdata.takeout) {
        params.eatModel.push("take-out");
      }
      params.eatModel = params.eatModel.join(",");
      break;
    case "isAccountPay":
      params.isAccountPay = vdata.shopInfo.isAccountPay;
      break;
    case "isMemberPrice":
      params.isMemberPrice = vdata.shopInfo.isMemberPrice;
      break;
    case "isTableFee":
      if (vdata.isTableFee) {
        params.isTableFee = 1;
      } else {
        params.isTableFee = 0;
      }
      break;
  }
  updateShopInfo(params);
};

const imgUrl = computed(() => {
  if (vdata.extendIndex == 2) {
    return "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/852ace0de85244fcb6524d7aa41034f1.png";
  }
  return (
    "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/" +
    vdata.extendInfo.autoKey +
    ".png"
  );
});
</script>

<style lang="scss" scoped>
.page-wrapper {
  background-color: #f8f8f8;
  padding-bottom: 32rpx;

  .page-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .label {
      font-weight: bold;
      font-size: 28rpx;
      color: #333333;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      margin-right: 20rpx;

      .tableFee {
        width: 186rpx;
        height: 54rpx;
        line-height: 54rpx;
        margin-left: 10rpx;
        font-size: 28rpx;
        color: #333;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #e5e5e5;
        text-align: left;
        padding: 0 18rpx;
        box-sizing: border-box;
      }
    }

    .extendList {
      width: 100%;
      display: flex;
      flex-direction: column;

      .extendTab {
        display: flex;
        justify-content: flex-start;
        background-color: #fff;
        padding: 32rpx 28rpx;

        .extendTab_item {
          font-size: 24rpx;
          font-weight: 400;
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          border: 2rpx solid #e5e5e5;
          margin-right: 20rpx;
        }

        .active {
          background: #318afe;
          border: 2rpx solid #318afe;
          color: #fff;
        }
      }

      .extend_content {
        margin-top: 32rpx;
        margin: 32rpx 28rpx;
        padding: 32rpx 28rpx;
        background: #ffffff;
        border-radius: 18rpx 18rpx 18rpx 18rpx;

        .preview {
          min-width: 146rpx;
          height: 342rpx;
          position: relative;
          margin-right: 32rpx;
          background-color: #f7f7f7;

          ::v-deep .bg,
          ::v-deep .bg .u-image,
          ::v-deep .bg .u-image__image {
            width: 146rpx !important;
            height: 342rpx !important;
            position: absolute;
            top: 0;
          }

          ::v-deep .index_bg .u-image,
          ::v-deep .index_bg .u-image__image {
            width: 146rpx !important;
            height: 242rpx !important;
            position: absolute;
            top: 0;
          }

          ::v-deep .my_bg .u-image,
          ::v-deep .my_bg .u-image__image {
            width: 146rpx !important;
            height: 90rpx !important;
            position: absolute;
            top: 0;
          }

          ::v-deep .member_bg .u-image,
          ::v-deep .member_bg .u-image__image {
            width: 34rpx !important;
            height: 63rpx !important;
            position: absolute;
            top: 22rpx;
            left: 0;
            right: 0;
            margin: auto;
            border-radius: 5rpx !important;
          }

          ::v-deep .shopinfo_bg .u-image,
          ::v-deep .shopinfo_bg .u-image__image {
            width: 146rpx !important;
            height: 50rpx !important;
            position: absolute;
            top: 0;
          }

          ::v-deep .bg.ticket_logo,
          ::v-deep .bg.ticket_logo .u-image,
          ::v-deep .bg.ticket_logo .u-image__image {
            width: 359rpx !important;
            height: 232rpx !important;
            position: absolute;
            top: 0;
          }

          ::v-deep .ticket_logo.img .u-image,
          ::v-deep .ticket_logo.img .u-image__image {
            width: 146rpx !important;
            height: 50rpx !important;
            position: absolute;
            top: 0;
            left: 10rpx;
          }

          .shopinfo_bg_f {
            width: 146rpx;
            height: 290rpx;
            position: absolute;
            bottom: 0;
            background-color: #fff;
          }
        }

        .extend_img {
          display: flex;
          flex-direction: column;

          .extend_title {
            font-weight: 700;
            font-size: 28rpx;
            color: #333333;
          }

          .fileUp {
            width: 148rpx;
            height: 148rpx;
            position: relative;

            .file {
              width: 148rpx;
              height: 148rpx;
              position: absolute;
              top: 0;
            }
          }

          ::v-deep .u-image,
          ::v-deep .u-image__image {
            width: 148rpx !important;
            height: 148rpx !important;
          }
        }
      }
    }
  }

  .column {
    flex-direction: column;

    .label {
      align-self: flex-start;
    }
  }

  .m {
    margin-bottom: 12rpx;
  }

  .cutShop {
    width: 530rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #318afe;
    border-radius: 56rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    margin: 48rpx auto 0 auto;
    text-align: center;
  }

  .right {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    position: relative;

    .file {
      width: 112rpx;
      height: 112rpx;
      line-height: 112rpx;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }

    .fileImg {
      width: 112rpx !important;
      height: 112rpx !important;

      ::v-deep .u-avatar__image {
        width: 112rpx !important;
        height: 112rpx !important;
      }
    }
  }
}

.bg-cover {
  background-size: cover;
  background-position: center;
}

.bg-0 {
  background-size: cover;
}

.bg-1 {
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% auto;
}

.bg-2 {
  background-position: center;
  background-size: cover;
  border-radius: 24rpx;
  overflow: hidden;
}
.bg-3 {
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% auto;
}
.bg-4 {
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% auto;
  position: relative;
  .logo {
    position: absolute;
    left: 30rpx;
    width: 90px;
    height: 30px;
    top: 30rpx;
  }
}
</style>
