<template>
  <view class="shopInfo-container">
    <view class="logo-content" @click="updateLogo">
      <u--image
        class="logo-img"
        :src="form.store_logo"
        shape="circle"
        width="110"
        height="110"
      ></u--image>
      <view class="logo-text">更换店铺logo</view>
    </view>
    <u-form :model="form" ref="uForm" class="form" label-width="100">
      <u-form-item label="店铺名称" prop="store_name">
        <u-input
          class="form-input"
          disabled
          disabledColor="#fff"
          inputAlign="right"
          v-model="form.store_name"
          placeholder=""
        />
      </u-form-item>
      <u-form-item label="经营品类" prop="biz_category">
        <u-input
          class="form-input"
          disabled
          disabledColor="#fff"
          inputAlign="right"
          v-model="bizCategory"
          placeholder=""
        />
      </u-form-item>

      <u-form-item label="到账比例" prop="split_ratio">
        <u-input
          class="form-input"
          disabled
          disabledColor="#fff"
          inputAlign="right"
          v-model="splitRatio"
          placeholder=""
        />
      </u-form-item>
      <u-form-item label="合同信息" prop="" @click="skipuContract">
        <u-icon
          style="display: inline-block; margin-left: 8rpx"
          slot="right"
          name="arrow-right"
          size="16"
          color="#cccccc"
        ></u-icon>
      </u-form-item>

      <u-form-item label="营业状态" prop="" class="form-item-20">
        <u-input
          class="form-input"
          disabled
          inputAlign="right"
          disabledColor="#fff"
          color="#5ac725"
          v-model="businessName"
          placeholder=""
        />
      </u-form-item>
      <u-form-item
        class="form-item-time"
        label="营业时间"
        prop="store_name"
        @click="handleShowTime"
      >
        <u-input
          class="form-input form-input-time"
          disabled
          disabledColor="#ffffff"
          v-model="form.businessTime"
          placeholder="请选择营业时间"
        />
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-form-item label="店铺口号" prop="store_slogan" class="form-item-20">
        <u-input
          class="form-input"
          disabledColor="#fff"
          v-model="form.store_slogan"
          placeholder="请输入店铺口号"
        />
      </u-form-item>
      <u-form-item label="店铺电话" prop="info.store_tel">
        <u-input
          class="form-input"
          disabledColor="#fff"
          v-model="form.info.store_tel"
          placeholder="请输入店铺电话"
        />
      </u-form-item>

      <u-form-item label="店铺所在地" prop="store_slogan">
        <u-input
          class="form-input"
          disabledColor="#fff"
          disabled
          v-model="form.store_area"
          placeholder=""
        />
      </u-form-item>
      <u-form-item label="店铺详细地址" prop="store_name">
        <u-input
          class="form-input"
          disabledColor="#fff"
          disabled
          v-model="form.store_address"
          placeholder=""
        />
      </u-form-item>
      <u-form-item label="" prop="store_name" v-if="form.company">
        <view class="shop-description">
          <view class="title">
            店铺介绍（只支持简单的文字，具体请去PC端修改）
          </view>
          <u--textarea
            class="textarea"
            border="surround"
            height="120"
            v-model="form.company.company_description"
            placeholder="请输入内容"
          ></u--textarea>
        </view>
      </u-form-item>
    </u-form>
    <view class="btn-content">
      <u-button class="btn-submit" @click="handleSubmit">保存修改</u-button>
    </view>
    <tpfTimeRange
      ref="time"
      :startDefaultTime="form.info.store_opening_hours"
      :endDefaultTime="form.info.store_close_hours"
      @timeRange="handleTimeRange"
    ></tpfTimeRange>
  </view>
</template>

<script>
import { GetShopBaseInfo, UpdataShopInfo } from "../../api/shop";
import { GetBizCategoryList } from "../../api/audit";
import { UploadFilePromise } from "../../api/upload";
import tpfTimeRange from "@/components/tpf-time-range/tpf-time-range.vue";
export default {
  components: {
    tpfTimeRange,
  },
  data() {
    return {
      form: {
        company: {
          company_description: "",
        },
        info: {
          store_tel: "",
          store_opening_hours: "00:00",
          store_close_hours: "00:00",
        },
        store_logo: "../../static/user-img.png",
        store_slogan: "",
      },
      bizCategoryList: [],
      splitRatio: "",
      bizCategory: "",
      businessName: "营业中",
      showBusinessTimeTPF: false,
    };
  },
  onShow() {
    this.getShopBaseInfo();
    this.getBizCategoryList();
  },
  onReady() {
    // this.$refs["uForm"].setRules(this.rules);
  },
  methods: {
    async getBizCategoryList() {
      let auditInfo = uni.getStorageSync("auditInfo");

      let res = await GetBizCategoryList();
      if (res && res.status == 200) {
        this.bizCategoryList = res.data;
        if (this.bizCategoryList.length > 0) {
          this.bizCategoryList = this.bizCategoryList
            .reduce((prev, curr) => {
              prev.push(curr);
              if (curr.children.length > 0) {
                prev = prev.concat(curr.children);
              }
              return prev;
            }, [])
            .forEach((item) => {
              if (item.id == auditInfo.biz_category) {
                this.bizCategory = item.category_name;
              }
            });
        }
      }

      this.splitRatio = auditInfo.split_ratio + "%";
    },
    async getShopBaseInfo() {
      let res = await GetShopBaseInfo();
      if (res && res.status == 200) {
        this.form = res.data;
        this.form.businessTime =
          res.data.info.store_opening_hours +
          "-" +
          res.data.info.store_close_hours;
      }
    },
    skipuContract() {
      uni.navigateTo({
        url: "/pages/my/contract",
      });
    },
    updateLogo() {
      let that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        success: async (res) => {
          var imgUrl = res.tempFilePaths[0];

          let result = await UploadFilePromise(imgUrl);
          if (result && result.status == 200) {
            that.form.store_logo = result.data.url;
          }
        },
      });
    },
    handleShowTime() {
      this.$refs["time"].open();
    },
    handleTimeRange(e) {
      this.form.businessTime = e[0] + e[1];
      this.form.store_opening_hours = e[0];
      this.form.store_close_hours = e[1];
    },
    async handleSubmit() {
      let params = {
        store_logo: this.form.store_logo,
        store_slogan: this.form.store_slogan,
        store_tel: this.form.info.store_tel,
        company_description: this.form.company.company_description,
      };

      let res = await UpdataShopInfo(params);
      if (res && res.status) {
        uni.showToast({
          title: `修改成功`,
          icon: "success",
          duration: 600,
        });
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/variables.scss";
.shopInfo-container {
  height: calc(100vh - 88rpx);
  background: #f6f6f6;

  .logo-content {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 60rpx 0;
    background: #fff;

    .logo-img {
      margin-bottom: 20rpx;
    }

    .logo-text {
      color: #ec5d29;
    }
  }

  .form {
    padding: 40rpx 0;

    .u-form-item {
      padding: 0 32rpx;
      border-top: 1px solid #f4f4f4;
      background: #fff;

      .form-input {
        background: #fff;
      }

      .form-input-time {
        outline: none;
      }

      .shop-description {
        display: flex;
        flex-flow: column;

        .title {
          margin-bottom: 40rpx;
        }

        .textarea {
          border: 1px solid #f4f4f4;
          width: 100%;
        }
      }
    }
  }

  .form-item-20 {
    margin-top: 40rpx;
  }

  .btn-content {
    margin: 0 auto;
    padding: 48rpx 24rpx;
    width: 80%;
  }

  .btn-submit {
    height: 88rpx;
    border-radius: 48rpx;
    background: $base-color;
    color: #fff;
  }
}
</style>
