<template>
  <view class="setPage">
    <view class="topBox">
      <image
        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/bg.png"
        mode="widthFix"
        class="bg"
      />
      <view class="headImgBox"></view>
      <view class="nameBox"
        >饭粒汪
        <u-icon
          name="edit"
          style="margin-left: 10rpx"
          @click="showBox1 = true"
        ></u-icon>
      </view>
      <u-modal
        v-model="showBox1"
        :show-cancel-button="true"
        title="修改商城名称"
        contentSlot
        @confirm="showBox1 = false"
      >
        <input type="text" v-model="username" class="nameInput" />
      </u-modal>
    </view>
    <view class="boxGroup">
      <view class="boxItem">
        <view class="leftBox flex-center">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/shop.png"
            mode="widthFix"
            style="width: 100%"
          />
        </view>
        <view class="rightBox">
          <view class="name">营业状态</view>
          <u-switch v-model="msg.business"></u-switch>
        </view>
      </view>
      <view class="boxItem">
        <view class="leftBox"></view>
        <view
          class="rightBox"
          :style="businessKey == 1 ? 'border:none' : ''"
        ></view>
        <u-radio-group
          v-model="msg.businessTime"
          @change="radioGroupChange"
          class="radioGroup"
        >
          <u-radio
            v-for="(item, index) in businessTimeList"
            :key="index"
            :name="item.key"
            shape="circle"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </view>
      <view class="boxItem" v-if="businessKey == 2">
        <view class="leftBox"></view>
        <view class="rightBox" @click="showBox2 = true">
          <view class="name">选择日期</view>
          <view class="flex-center">
            <view class="weeek">{{ weekStr }}</view>
            <u-icon name="arrow" style="margin-left: 10rpx"></u-icon
          ></view>
        </view>
      </view>
      <u-modal
        v-model="showBox2"
        :show-cancel-button="true"
        title="选择日期"
        contentSlot
        @confirm="showBox2 = false"
      >
        <view class="modelBox2">
          <view
            v-for="(item, index) in weekArr"
            :key="index"
            class="modelBox2Item"
            :class="item.choose ? 'modelBox2ItemActive' : ''"
            @click="chooseWeek(item)"
          >
            {{ item.name }}
          </view>
        </view>
      </u-modal>
      <view class="boxItem" v-if="businessKey == 2">
        <view class="leftBox"></view>
        <view
          class="rightBox"
          style="border: none"
          @click="jumpPage('/pages/MallMange/timeQuantum')"
        >
          <view class="name">选择时间段</view>
          <view class="flex-center">
            <view class="weeek">{{ timeArr.join("、") }}</view>
            <u-icon name="arrow" style="margin-left: 10rpx"></u-icon
          ></view>
        </view>
      </view>
    </view>
    <view class="boxGroup">
      <view class="boxItem">
        <view class="leftBox flex-center">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/shortmsg.png"
            mode="widthFix"
            style="width: 100%"
          />
        </view>
        <view class="rightBox" style="border: none">
          <view class="name">短信通知</view>
          <u-switch v-model="msg.business"></u-switch>
        </view>
      </view>
    </view>
    <view class="boxGroup">
      <view class="boxItem">
        <view class="leftBox flex-center">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/money.png"
            mode="widthFix"
            style="width: 100%"
          />
        </view>
        <view class="rightBox" @click="showBox3 = true">
          <view class="name">删除未支付订单限时</view>
          <view class="flex-center">
            {{ msg.delOrderTime }}分
            <u-icon name="arrow" style="margin-left: 10rpx"></u-icon
          ></view>
        </view>
      </view>
      <view class="boxItem">
        <view class="leftBox flex-center">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/shouhuo.png"
            mode="widthFix"
            style="width: 100%"
          />
        </view>
        <view class="rightBox" @click="showBox4 = true">
          <view class="name">自动确认收货时间</view>
          <view class="flex-center">
            {{ msg.incomeDay }}天
            <u-icon name="arrow" style="margin-left: 10rpx"></u-icon
          ></view>
        </view>
      </view>
      <view class="boxItem">
        <view class="leftBox flex-center">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/shouhou.png"
            mode="widthFix"
            style="width: 100%"
          />
        </view>
        <view class="rightBox" style="border: none" @click="showBox5 = true">
          <view class="name">可申请售后时间</view>
          <view class="flex-center">
            {{ msg.afterSaleDay }}天
            <u-icon name="arrow" style="margin-left: 10rpx"></u-icon
          ></view>
        </view>
      </view>
      <u-modal
        v-model="showBox3"
        :show-cancel-button="true"
        title="删除未支付订单限时"
        contentSlot
        @confirm="showBox3 = false"
      >
        <view class="modelBox3 flex-center">
          <input type="number" class="input3" v-model="msg.delOrderTime" />分钟
        </view>
      </u-modal>
      <u-modal
        v-model="showBox4"
        :show-cancel-button="true"
        title="自动确认收货时间"
        contentSlot
        @confirm="showBox4 = false"
      >
        <view class="modelBox3 flex-center">
          <input type="number" class="input3" v-model="msg.incomeDay" />天
        </view>
      </u-modal>
      <u-modal
        v-model="showBox5"
        :show-cancel-button="true"
        title="可申请售后时间"
        contentSlot
        @confirm="showBox5 = false"
      >
        <view class="modelBox3 flex-center">
          <input type="number" class="input3" v-model="msg.afterSaleDay" />天
        </view>
      </u-modal>
    </view>
    <view class="boxGroup">
      <view class="boxItem">
        <view class="leftBox flex-center">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/Payment.png"
            mode="widthFix"
            style="width: 100%"
          />
        </view>
        <view class="rightBox" style="border: none" @click="showBox6 = true">
          <view class="name">支付方式</view>
          <view class="flex-center">
            <view class="weeek">{{ payTypeStr }}</view>
            <u-icon name="arrow" style="margin-left: 10rpx"></u-icon
          ></view>
        </view>
      </view>
      <u-modal
        v-model="showBox6"
        :show-cancel-button="true"
        title="支付方式"
        contentSlot
        @confirm="showBox6 = false"
      >
        <view class="modelBox6 flex-center">
          <view
            v-for="(item, index) in payTypeArr"
            :key="index"
            class="flex-between modelBox6Item"
            :class="item.choose ? 'modelBox6ItemActive' : ''"
            @click="changePayType(item)"
          >
            <view class="flex-center">
              <image
                :src="item.img"
                mode="aspectFit"
                style="
                  width: 60rpx;
                  height: 60rpx;
                  border-radius: 6rpx;
                  margin-right: 20rpx;
                "
              />
              <view class="modelBox6ItemName">{{ item.name }}</view>
            </view>
            <u-icon
              name="success"
              color="#446dfc"
              size="30"
              v-if="item.choose"
            ></u-icon>
          </view>
        </view>
      </u-modal>
    </view>
    <view class="boxGroup">
      <view class="boxItem">
        <view class="leftBox flex-center">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/Payment.png"
            mode="widthFix"
            style="width: 100%"
          />
        </view>
        <view class="rightBox" @click="showBox7 = true">
          <view class="name">发货方式</view>
          <view class="flex-center">
            <view class="weeek">{{ deliveryTypeStr }}</view>
            <u-icon name="arrow" style="margin-left: 10rpx"></u-icon
          ></view>
        </view>
      </view>
      <view class="boxItem">
        <view class="leftBox flex-center">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/dizhi.png"
            mode="widthFix"
            style="width: 100%"
          />
        </view>
        <view class="rightBox" style="border: none" @click="">
          <view class="name">退货地址</view>
          <view class="flex-center">
            <view class="weeek">{{ addrStr }}</view>
            <u-icon name="arrow" style="margin-left: 10rpx"></u-icon
          ></view>
        </view>
      </view>
      <u-modal
        v-model="showBox7"
        :show-cancel-button="true"
        title="发货方式"
        contentSlot
        @confirm="showBox7 = false"
      >
        <view class="modelBox6 flex-center">
          <view
            v-for="(item, index) in deliveryTypeArr"
            :key="index"
            class="flex-between modelBox6Item"
            :class="item.choose ? 'modelBox6ItemActive' : ''"
            @click="changeDeliveryType(item)"
          >
            <view class="flex-center">
              <image
                :src="item.img"
                mode="aspectFit"
                style="
                  width: 60rpx;
                  height: 60rpx;
                  border-radius: 6rpx;
                  margin-right: 20rpx;
                "
              />
              <view class="modelBox6ItemName">{{ item.name }}</view>
            </view>
            <u-icon
              name="success"
              color="#446dfc"
              size="30"
              v-if="item.choose"
            ></u-icon>
          </view>
        </view>
      </u-modal>
    </view>
    <view class="boxGroup">
      <view class="boxItem">
        <view class="leftBox flex-center">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/jizhi.png"
            mode="widthFix"
            style="width: 100%"
          />
        </view>
        <view class="rightBox" @click="showBox8 = true">
          <view class="name">积分抵扣</view>
          <view class="flex-center"
            >{{ msg.integral }}积分抵扣一元
            <u-icon name="arrow" style="margin-left: 10rpx"></u-icon
          ></view>
        </view>
      </view>
      <view class="boxItem">
        <view class="leftBox flex-center">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/jifenguize.png"
            mode="widthFix"
            style="width: 100%"
          />
        </view>
        <view class="rightBox" style="border: none" @click="showBox9 = true">
          <view class="name">积分使用规则</view>
          <view class="flex-center"
            >{{
              msg.IntegralRule && msg.IntegralRule != "" ? "已填写" : "未填写"
            }}
            <u-icon name="arrow" style="margin-left: 10rpx"></u-icon
          ></view>
        </view>
      </view>
      <u-modal
        v-model="showBox8"
        :show-cancel-button="true"
        title="积分抵扣"
        contentSlot
        @confirm="showBox8 = false"
      >
        <view class="modelBox8 flex-center">
          <input
            type="number"
            class="input8"
            v-model="msg.integral"
          />积分抵扣一元
        </view>
      </u-modal>
      <u-modal
        v-model="showBox9"
        :show-cancel-button="true"
        title="积分使用规则"
        contentSlot
        @confirm="showBox9 = false"
      >
        <view class="modelBox8 flex-center">
          <textarea v-model="msg.IntegralRule" class="modelBoxItem" />
        </view>
      </u-modal>
    </view>
    <tabbar></tabbar>
  </view>
</template>
<script>
import tabbar from "./components/tabbar.vue";
export default {
  components: {
    tabbar,
  },
  data() {
    return {
      showBox1: false,
      username: "",
      showBox2: false,
      showBox3: false,
      showBox4: false,
      showBox5: false,
      showBox6: false,
      showBox7: false,
      showBox8: false,
      showBox9: false,
      msg: {
        business: false,
        businessTime: 1,
        delOrderTime: 0,
        incomeDay: 1,
        afterSaleDay: 1,
        integral: 0, //积分抵扣
        IntegralRule: "", //积分使用规则
      },
      businessTimeList: [
        {
          name: "全天24小时",
          key: 1,
        },
        {
          name: "自定义营业时间",
          key: 2,
        },
      ],
      businessKey: 1,
      weekArr: [
        {
          name: "周一",
          key: 1,
          choose: false,
        },
        {
          name: "周二",
          key: 2,
          choose: false,
        },
        {
          name: "周三",
          key: 3,
          choose: false,
        },
        {
          name: "周四",
          key: 4,
          choose: false,
        },
        {
          name: "周五",
          key: 5,
          choose: false,
        },
        {
          name: "周六",
          key: 6,
          choose: false,
        },
        {
          name: "周日",
          key: 7,
          choose: false,
        },
      ],
      weekStr: "",
      timeArr: [],
      payTypeArr: [
        {
          img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/cloudypay.png",
          name: "线上支付",
          choose: true,
        },
        {
          img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/yuezhifu.png",
          name: "余额支付",
          choose: false,
        },
        {
          img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/huodaofukuan.png",
          name: "货到付款",
          choose: false,
        },
      ],
      payTypeStr: "线上支付",
      deliveryTypeArr: [
        //发货方式
        {
          img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/cloudypay.png",
          name: "快递配送",
          choose: true,
        },
        {
          img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/yuezhifu.png",
          name: "到店自提",
          choose: false,
        },
        {
          img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/huodaofukuan.png",
          name: "同城配送",
          choose: false,
        },
      ],
      deliveryTypeStr: "快递配送",
      addrStr: "退货地址",
    };
  },
  methods: {
    radioGroupChange(e) {
      this.businessKey = e;
    },
    //选择日期
    chooseWeek(e) {
      e.choose = !e.choose;
      this.weekStr = this.weekArr
        .filter((item) => {
          return item.choose;
        })
        .map((item) => item.name)
        .join("、");
    },
    jumpPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
    // 修改营业时间段
    getTimeArr(arr) {
      this.timeArr = arr;
      this.$forceUpdate();
    },
    //切换支付方式
    changePayType(e) {
      e.choose = !e.choose;
      this.payTypeStr = this.payTypeArr
        .filter((item) => {
          return item.choose;
        })
        .map((item) => item.name)
        .join("、");
      if (this.payTypeStr == "") {
        this.payTypeArr[0].choose = true;
        this.payTypeStr = "线上支付";
      }
    },
    //切换发货方式
    changeDeliveryType(e) {
      e.choose = !e.choose;
      this.deliveryTypeStr = this.deliveryTypeArr
        .filter((item) => {
          return item.choose;
        })
        .map((item) => item.name)
        .join("、");
      if (this.deliveryTypeStr == "") {
        this.deliveryTypeArr[0].choose = true;
        this.deliveryTypeStr = "快递配送";
      }
    },
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: "商城设置",
    });
  },
};
</script>
<style lang="scss" scoped>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setPage {
  min-height: 100vh;
  background-color: #f7f7f7;
  box-sizing: border-box;
  padding-bottom: 100rpx;
}
.topBox {
  position: relative;
  margin-bottom: 20rpx;
  .bg {
    width: 100%;
  }
  .headImgBox {
    position: absolute;
    top: 30rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    border: 4rpx solid #fff;
    overflow: hidden;
    background-color: #f00;
  }
  .nameBox {
    width: 700rpx;
    height: 200rpx;
    border-radius: 10rpx;
    position: absolute;
    top: 110rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: #fff;
    font-size: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.boxGroup {
  width: 700rpx;
  padding: 0 30rpx;
  margin: 20rpx auto;
  background-color: #fff;
  border-radius: 10rpx;
  .boxItem {
    height: 100rpx;
    display: flex;
    align-items: center;
    position: relative;
    .leftBox {
      width: 50rpx;
      margin-right: 20rpx;
    }
    .rightBox {
      width: 560rpx;
      height: 100rpx;
      border-bottom: 2rpx solid #ccced5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        font-size: 28rpx;
        color: #606266;
      }
    }
    .radioGroup {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
/deep/.u-radio {
  margin-right: 60rpx;
}
/deep/.u-radio__icon-wrap {
  margin-right: 20rpx;
}
/deep/.u-model {
  border-radius: 10rpx;
}
.weeek {
  max-width: 300rpx;
  white-space: nowrap;
  overflow: hidden;
  font-size: 28rpx;
  color: #606266;
}
.nameInput {
  width: 560rpx;
  height: 70rpx;
  border-radius: 10rpx;
  margin: 20rpx auto;
  box-sizing: border-box;
  padding: 0 20rpx;
  background-color: #f7f7f7;
}
.modelBox2 {
  width: 560rpx;
  border-radius: 10rpx;
  margin: 20rpx auto;
  box-sizing: border-box;
  padding: 0 20rpx;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  .modelBox2Item {
    width: 160rpx;
    height: 60rpx;
    border-radius: 30rpx;
    border: 2rpx solid #dfdfdf;
    font-size: 30rpx;
    color: #a4a4a4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10rpx 20rpx 10rpx 0;
  }
  & .modelBox2Item:nth-child(3n) {
    margin-right: 0;
  }
  .modelBox2ItemActive {
    border-color: #111 !important;
    color: #111;
  }
}
.modelBox3 {
  margin: 40rpx auto;
  font-size: 26rpx;
  .input3 {
    width: 280rpx;
    height: 80rpx;
    border-radius: 10rpx;
    background-color: #f7f7f7;
    padding: 0 30rpx;
    font-size: 26rpx;
  }
}
.modelBox6 {
  margin: 30rpx auto;
  font-size: 26rpx;
  flex-wrap: wrap;
  .modelBox6Item {
    width: 550rpx;
    height: 100rpx;
    border-radius: 50rpx;
    margin: 10rpx 0;
    border: 2rpx solid #ccced5;
    padding: 0 50rpx;
    .modelBox6ItemName {
      font-size: 30rpx;
    }
  }
  .modelBox6ItemActive {
    border-color: #446dfc;
  }
}
.modelBox8 {
  margin: 40rpx auto;
  font-size: 26rpx;
  .input8 {
    width: 200rpx;
    height: 80rpx;
    border-radius: 10rpx;
    background-color: #f7f7f7;
    padding: 0 30rpx;
    font-size: 26rpx;
  }
  .modelBoxItem {
    width: 550rpx;
    border: 2rpx solid #999;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 20rpx;
  }
}
</style>