<template>
  <view class="first-shop">
    <view
      style="
        background: #ffffff;
        box-shadow: 0px 10px 50px 0px rgba(218, 220, 230, 0.85);
        border-radius: 30rpx;
        padding: 30rpx;
      "
    >
      <view class="label-text" style="margin-top: 0; margin-bottom: 30rpx">
        <text>店铺照片</text>
        <text style="color: #999; font-weight: 400"
          >（上传3-5张照片,第一张为封面图）</text
        >
      </view>
      <view>
        <u-upload
          v-if="isdisabled == false"
          :action="action"
          :max-count="5"
          :max-size="2 * 1024 * 1024"
          :file-list="fileList"
          @on-remove="onRemove1"
          :custom-btn="true"
          @on-success="uploadSuccessHandler"
        >
          <view slot="addBtn" class="slot-btn">
            <image
              class="image"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616498310000_18.png"
              mode="widthFix"
            ></image>
          </view>
        </u-upload>
        <view class="imglist" v-else>
          <view
            class="imglist-item"
            v-for="(x, i) in model.ImageList"
            @click="previewImage(model.ImageList, i)"
          >
            <image
              :src="x"
              style="width: 100%; height: 100%; border-radius: 4px"
            ></image>
          </view>
        </view>
      </view>
      <view class="label-text" style="margin-top: 20px; margin-bottom: 30rpx">
        <text>店铺视频</text>
      </view>
      <view style="margin-bottom: 30rpx">
        <view
          style="
            width: 150px;
            height: 200px;
            position: relative;
            margin-right: 20px;
          "
          v-if="model.VideoUrl != ''"
        >
          <video
            id="myVideo"
            :src="model.VideoUrl"
            :controls="controls"
            :show-center-play-btn="false"
            :show-fullscreen-btn="false"
            @fullscreenchange="videoControl"
          ></video>

          <view
            style="
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            @click="enlarge()"
          >
            <u-icon name="play-circle-o" :size="70" color="#FFF"></u-icon>
          </view>
          <view
            style="
              width: 50rpx;
              height: 50rpx;
              position: absolute;
              right: 10rpx;
              top: 10rpx;
              border-radius: 25rpx;
              background: #f30329;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            @tap.stop="model.VideoUrl = ''"
            v-if="isdisabled == false"
          >
            <u-icon
              class="u-icon"
              name="cross"
              size="30"
              color="#ffffff"
            ></u-icon>
          </view>
        </view>
        <view v-if="model.VideoUrl == '' && isdisabled == false">
          <view slot="addBtn" class="slot-btn" @click="upvideo()">
            <image
              class="image"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616573063000_398.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view v-if="model.VideoUrl == '' && isdisabled == true"> 无 </view>
      </view>
      <view class="bottom-border">
        <view class="label-text">首店名称</view>
        <u-field
          v-model="model.Name"
          :disabled="isdisabled"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请填写首店名称"
          placeholder-style="color:#CECECE;"
        ></u-field>
      </view>
      <view class="bottom-border">
        <view class="label-text">首店类型</view>
        <u-field
          v-model="TypeName"
          @click="isdisabled == false ? (showTypeStatus = true) : ''"
          :disabled="true"
          right-icon="arrow"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请选择首店类型"
          placeholder-style="color:#CECECE;"
        ></u-field>
        <u-action-sheet
          @click="clickItem"
          name="Name"
          :list="typeList"
          v-model="showTypeStatus"
        ></u-action-sheet>
      </view>
      <view class="bottom-border">
        <view class="label-text">
          <text>品牌属地</text>
          <text style="color: #999; font-weight: 400">（国家或地区）</text>
        </view>
        <u-field
          v-model="BrandTypeName"
          @click="isdisabled == false ? (showTypeStatus2 = true) : ''"
          :disabled="true"
          right-icon="arrow"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请选择品牌属地"
          placeholder-style="color:#CECECE;"
        ></u-field>
        <u-action-sheet
          @click="clickItem2"
          name="Name"
          :list="brandTypelist"
          v-model="showTypeStatus2"
        ></u-action-sheet>
      </view>
      <view class="bottom-border">
        <view class="label-text">首店开业时间</view>
        <u-field
          v-model="model.OpenTime"
          @click="isdisabled == false ? (showOpenTime = true) : ''"
          :disabled="true"
          right-icon="arrow"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请选择首店开业时间"
          placeholder-style="color:#CECECE;"
        ></u-field>
        <u-picker
          mode="time"
          v-model="showOpenTime"
          :params="params"
          @confirm="confirmOpenTime"
        ></u-picker>
      </view>
      <view class="bottom-border">
        <view class="label-text">首店地址</view>
        <u-field
          v-model="model.Address"
          :disabled="isdisabled"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请填写首店地址"
          placeholder-style="color:#CECECE;"
        ></u-field>
      </view>
      <view class="bottom-border">
        <view class="label-text">商圈</view>
        <u-field
          v-model="model.TradingArea"
          :disabled="isdisabled"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请填写首店所属商圈"
          placeholder-style="color:#CECECE;"
        ></u-field>
      </view>
      <view class="bottom-border">
        <view class="label-text">
          <text>行业</text>
        </view>
        <u-field
          v-model="BusinessName"
          @click="isdisabled == false ? (showTypeStatus3 = true) : ''"
          :disabled="true"
          right-icon="arrow"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请选择品牌属地"
          placeholder-style="color:#CECECE;"
        ></u-field>
        <u-action-sheet
          @click="clickItem3"
          name="Name"
          :list="yeTaiList"
          v-model="showTypeStatus3"
        ></u-action-sheet>
      </view>
      <view class="bottom-border">
        <view class="label-text">
          <text>品牌</text>
        </view>
        <u-field
          v-model="brandName"
          @click="isdisabled == false ? (showTypeStatus5 = true) : ''"
          :disabled="true"
          right-icon="arrow"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请选择品牌"
          placeholder-style="color:#CECECE;"
        ></u-field>
        <u-action-sheet
          @click="clickItem5"
          name="BrandName"
          :list="brandList"
          v-model="showTypeStatus5"
        ></u-action-sheet>
      </view>
      <view class="bottom-border">
        <view class="label-text">
          <text>首店业种类型</text>
          <text style="color: #999; font-weight: 400"
            >（如书店，超市，川菜，日料等）</text
          >
        </view>
        <u-field
          v-model="model.BusinessDetail"
          :disabled="isdisabled"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请填写首店业种类型"
          placeholder-style="color:#CECECE;"
        ></u-field>
      </view>
      <view class="bottom-border">
        <view class="label-text">
          <text>所属区县</text>
        </view>
        <u-field
          v-model="model.County"
          :disabled="isdisabled"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请填写所属区县"
          placeholder-style="color:#CECECE;"
        ></u-field>
      </view>
      <view class="bottom-border">
        <view class="label-text">
          <text>首店类别</text>
        </view>
        <u-field
          v-model="CategoryName"
          @click="isdisabled == false ? (showTypeStatus4 = true) : ''"
          :disabled="true"
          right-icon="arrow"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请选择品牌属地"
          placeholder-style="color:#CECECE;"
        ></u-field>
        <u-action-sheet
          @click="clickItem4"
          name="Name"
          :list="shenList"
          v-model="showTypeStatus4"
        ></u-action-sheet>
      </view>
      <view class="bottom-border">
        <view class="label-text">联系人</view>
        <u-field
          v-model="model.Contact"
          :disabled="isdisabled"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请填写联系人"
          placeholder-style="color:#CECECE;"
        ></u-field>
      </view>
      <view class="bottom-border">
        <view class="label-text">联系电话</view>
        <u-field
          v-model="model.ContactMobile"
          :disabled="isdisabled"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="请填写联系电话"
          placeholder-style="color:#CECECE;"
        ></u-field>
      </view>
      <view class="bottom-border">
        <view class="label-text">
          <text>首店简介</text>
          <text style="color: #999; font-weight: 400">（100字以内）</text>
        </view>
        <u-field
          v-model="model.Description"
          :disabled="isdisabled"
          maxlength="100"
          type="textarea"
          padding="10px 0px 5px 0"
          label-width="0"
          placeholder="可以填写您的首店简介"
          placeholder-style="color:#CECECE;"
        ></u-field>
      </view>
      <view style="margin-top: 40rpx" v-if="isdisabled == false">
        <u-button
          shape="square"
          :ripple="true"
          @click="tijiao()"
          :custom-style="{
            background: mainColor,
            border: 'none',
            color: '#FFF',
          }"
          >提交申请</u-button
        >
      </view>
      <view
        style="margin-top: 40rpx"
        v-if="isdisabled == true && model.AuditState != 2"
      >
        <u-button
          shape="square"
          :ripple="true"
          @click="showdelete = true"
          :custom-style="{
            background: '#F70027',
            border: 'none',
            color: '#FFF',
          }"
          >删除</u-button
        >
      </view>
    </view>

    <u-modal
      v-model="showdelete"
      content="删除该首店认证？"
      :show-cancel-button="true"
      @cancel="showdelete = false"
      @confirm="deletebtn()"
    ></u-modal>
    <auth
      v-if="showAuth"
      @changeuserinfo="reloadUserinfo"
      @gbAuth="gbAuth"
    ></auth>
  </view>
</template>

<script>
import auth from "../../../components/auth/index.vue";
export default {
  components: {
    auth,
  },
  data() {
    return {
      pageTitle: "首店申请",
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
      showAuth: false,
      action: this.host2 + "/api/File/UploadTencent",
      fileList: [],
      showdelete: false,
      mainColor: "",
      TypeName: "", //类型名称
      BrandTypeName: "", //品牌归属地
      BusinessName: "", //认证行业
      CategoryName: "", //类别
      brandName: "", //品牌
      model: {
        Id: 0,
        VideoUrl: "",
        Name: "",
        CoverImage: "",
        ImageList: [],
        shopType: 0,
        Type: 0,
        OpenTime: "",
        Address: "",
        TradingArea: "",
        BusinessType: 0,
        BusinessDetail: "",
        Description: "",
        County: "",
        Category: 0,
        Contact: "",
        ContactMobile: "",
        BrandType: "",
        ExistBrandId: 0, //选择品牌
      },
      typeList: [],
      brandTypelist: [], //品牌归属地
      yeTaiList: [], //行业枚举
      shenList: [], //
      showTypeStatus: false,
      showTypeStatus2: false,
      showTypeStatus3: false,
      showTypeStatus4: false,
      showTypeStatus5: false,
      showOpenTime: false,
      showYeTai: false,
      showShenQingType: false,
      controls: false, //显示默认控件
      isdisabled: false, //是否是详情过来的
      index: 0, //列表带过来的索引
      brandList: [], //品牌列表
    };
  },
  onLoad(options) {
    if (options && options.Id) {
      this.GetAuthenticationInfo(options.Id); //首店申请详情
      this.isdisabled = true;
      this.index = options.index;
      uni.setNavigationBarTitle({
        title: "申请详情",
      });
    } else {
      this.u = uni.getStorageSync("mall_UserInfo");
      if (!this.u) {
        this.u = {
          nickName: "未登录",
          avatarUrl: "",
        };
        this.showAuth = true;
      } else {
        this.GetAuthenticationTypeEnumList(); //类型
        this.GetBrandTypeEnumList(); //品牌归属地枚举
        this.GetBusinessTypeEnumList(); //申请认证行业枚举
        this.GetAuthenticationCategoryEnumList(); //认证分类枚举
      }
      let currentPages = getCurrentPages();
      let u = "/" + currentPages[currentPages.length - 1].route;
      let pages = wx.getStorageSync("basedata")
        ? wx.getStorageSync("basedata").bar_title
        : [];
      pages.forEach((x) => {
        if (x.value == u) {
          this.pageTitle = x.new_name ? x.new_name : x.name;
        }
      });
      uni.setNavigationBarTitle({
        title: this.pageTitle,
      });
    }
  },
  mounted() {
    this.getMyBrandList();
    this.mainColor = this.$uiConfig.mainColor;
    let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId
      ? uni.getStorageSync("mall_UserInfo").MallBaseId
      : 1;
    this.action =
      this.host2 + "/api/File/UploadTencent?MallBaseId=" + MallBaseId;
  },
  methods: {
    GetAuthenticationInfo(id) {
      this.request2(
        {
          url: "/api/AppletTrade/GetAuthenticationInfo",
          data: { AuthenticationId: id },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.model = res.data;
            this.fileList = [];
            if (this.model.ImageList.length > 0) {
              this.model.ImageList.forEach((x) => {
                let obj = {
                  url: x,
                };
                this.fileList.push(obj);
              });
            }
            this.GetAuthenticationTypeEnumList(); //类型
            this.GetBrandTypeEnumList(); //品牌归属地枚举
            this.GetBusinessTypeEnumList(); //申请认证行业枚举
            this.GetAuthenticationCategoryEnumList(); //认证分类枚举
          }
        }
      );
    },
    GetAuthenticationTypeEnumList() {
      this.request2(
        {
          url: "/api/AppletTrade/GetAuthenticationTypeEnumList",
          data: { Name: "", Id: "" },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.typeList = res.data;
            if (this.isdisabled == true) {
              this.typeList.map((x) => {
                if (x.Id == this.model.Type) {
                  this.TypeName = x.Name;
                  return;
                }
              });
            }
          }
        }
      );
    },
    GetBrandTypeEnumList() {
      this.request2(
        {
          url: "/api/AppletTrade/GetBrandTypeEnumList",
          data: { Name: "", Id: "" },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.brandTypelist = res.data;
            if (this.isdisabled == true) {
              this.brandTypelist.map((x) => {
                if (x.Id == this.model.BrandType) {
                  this.BrandTypeName = x.Name;
                  return;
                }
              });
            }
          }
        }
      );
    },
    GetBusinessTypeEnumList() {
      this.request2(
        {
          url: "/api/AppletTrade/GetBusinessTypeEnumList",
          data: { Name: "", Id: "" },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.yeTaiList = res.data;
            if (this.isdisabled == true) {
              this.yeTaiList.map((x) => {
                if (x.Id == this.model.BusinessType) {
                  this.BusinessName = x.Name;
                  return;
                }
              });
            }
          }
        }
      );
    },
    GetAuthenticationCategoryEnumList() {
      this.request2(
        {
          url: "/api/AppletTrade/GetAuthenticationCategoryEnumList",
          data: { Name: "", Id: "" },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.shenList = res.data;
            if (this.isdisabled == true) {
              this.shenList.map((x) => {
                if (x.Id == this.model.Category) {
                  this.CategoryName = x.Name;
                  return;
                }
              });
            }
          }
        }
      );
    },
    tijiao() {
      if (this.model.ImageList.length == 0) {
        uni.showToast({
          title: "请选择图片",
          icon: "none",
        });
        return;
      }
      this.model.CoverImage = this.model.ImageList[0];

      this.request2(
        {
          url: "/api/AppletTrade/SetAuthenticationInfo",
          data: this.model,
        },
        (res) => {
          if (res.resultCode == 1) {
            uni.showToast({
              title: "提交成功",
              icon: "none",
            });
            let that = this;
            console.log(res.data);
            that.showTemplate(res.data);
          }
        }
      );
    },
    //显示模板
    showTemplate(template) {
      uni.requestSubscribeMessage({
        tmplIds: template,
        complete(res) {
          console.log(res);
          uni.reLaunch({
            url: "/pages/kotra/firstShop/list",
          });
        },
      });
    },
    deletebtn() {
      //删除
      this.request2(
        {
          url: "/api/AppletTrade/DelAuthenticationInfo",
          data: { AuthenticationId: this.model.Id },
        },
        (res) => {
          if (res.resultCode == 1) {
            uni.showToast({
              title: "删除成功",
              icon: "none",
            });
            let that = this;
            let pages = getCurrentPages(); // 当前页面
            let beforePage = pages[pages.length - 2]; // 前一个页面
            setTimeout(() => {
              uni.navigateBack({
                success: function () {
                  beforePage.$vm.getsplice(that.index); // 执行前一个页面的created方法
                },
              });
            }, 500);
          }
        }
      );
    },
    confirmOpenTime(r) {
      this.model.OpenTime = r.year + "-" + r.month + "-" + r.day;
    },

    onRemove1(index) {
      this.model.ImageList.splice(index, 1);
    },
    clickItem(index) {
      //类型选择
      this.TypeName = this.typeList[index].Name;
      this.model.Type = this.typeList[index].Id;
    },
    clickItem2(index) {
      //品牌归属地
      this.BrandTypeName = this.brandTypelist[index].Name;
      this.model.BrandType = this.brandTypelist[index].Id;
    },
    clickItem3(index) {
      //行业
      this.BusinessName = this.yeTaiList[index].Name;
      this.model.BusinessType = this.yeTaiList[index].Id;
    },
    clickItem4(index) {
      //类别
      this.CategoryName = this.shenList[index].Name;
      this.model.Category = this.shenList[index].Id;
    },
    clickItem5(index) {
      //品牌
      this.brandName = this.brandList[index].Name;
      this.model.ExistBrandId = this.brandList[index].ID;
    },
    uploadSuccessHandler(data, index, lists) {
      let r = JSON.parse(data);
      console.log(r);
      this.model.ImageList.push(r.data);
    },
    enlarge(file) {
      // 全屏
      this.videoContext = uni.createVideoContext("myVideo");
      this.videoContext.requestFullScreen({
        direction: 0,
      });
    },
    videoControl(e) {
      if (e.detail.fullScreen == false) {
        this.videoContext.stop();
        this.controls = false;
      } else {
        this.videoContext.play();
        this.controls = true;
      }
    },
    upvideo() {
      let that = this;
      uni.chooseVideo({
        count: 1,
        sourceType: ["camera", "album"],
        success: function (res) {
          console.log(res);
          that.upFile(res.tempFilePath, 1);
          uni.showLoading({
            title: "上传中...",
          });
        },
        fail(err) {
          console.log(err);
        },
      });
    },
    upFile(filePath, type) {
      let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId
        ? uni.getStorageSync("mall_UserInfo").MallBaseId
        : 1;
      let action =
        this.host2 + "/api/File/UploadTencent?MallBaseId=" + MallBaseId;
      let that = this;
      uni.uploadFile({
        url: action,
        filePath: filePath,
        name: "file",
        formData: {
          user: "tesdt",
        },
        success: (uploadFileRes) => {
          uni.hideLoading();
          if (uploadFileRes.statusCode == 200) {
            let data = JSON.parse(uploadFileRes.data);
            that.model.VideoUrl = data.data;
          }
        },
        fail: function (res) {
          console.log(res);
          wx.showToast({
            title: "上传失败!",
            icon: "none",
            duration: 1000,
          });
        },
      });
    },
    previewImage(imgs, i) {
      uni.previewImage({
        urls: imgs,
        current: i,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {},
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    reloadUserinfo() {
      this.u = uni.getStorageSync("mall_UserInfo");
      this.GetAuthenticationTypeEnumList(); //类型
      this.GetBrandTypeEnumList(); //品牌归属地枚举
      this.GetBusinessTypeEnumList(); //申请认证行业枚举
      this.GetAuthenticationCategoryEnumList(); //认证分类枚举
    },
    //关闭登录窗口
    gbAuth() {
      uni.navigateBack();
    },
    getMyBrandList() {
      this.request2(
        {
          url: "/api/applettrade/GetMyBrandList",
          data: {},
        },
        (res) => {
          console.log(806, res);
          if (res.resultCode == 1) {
            this.brandList = res.data;
          }
        }
      );
    },
  },
};
</script>

<style>
.first-shop {
  background: #f6f6f6;
  padding: 30rpx;
  min-height: 100vh;
  font-family: pingfang;
}
.first-shop .label-text {
  font-size: 28rpx;
  color: #1f1f1f;
  font-weight: 600;
  margin-top: 40rpx;
}
.first-shop .slot-btn {
  width: 220rpx;
  height: 220rpx;
  background: #f5f5f5;
  border-radius: 17rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.first-shop .slot-btn .image {
  width: 54rpx;
  height: auto;
}
.first-shop .bottom-border {
  border-bottom: 3rpx #dadce6 solid;
}
#myVideo {
  width: 150px;
  height: 200px;
}
.imglist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.imglist-item {
  width: 180rpx;
  height: 180rpx;
  border-radius: 4px;
  margin-left: 15px;
  margin-bottom: 10px;
}
</style>
