<template>
	<view class="custom-content">
    <!--标题-->
    <view class="title">{{ Number(service_id) > 0 ? '编辑' : '添加' }}员工</view>
    <!--表单-->
    <view class="form-content">
      <view class="line">
        <view class="line-content">
          <view class="title">用户</view>
          <view class="right">
            <view class="right-btn" v-if="!is_regular" @click="showConsumePopup">选择用户</view>
          </view>
        </view>
        <view class="user-content" v-if="consume_info.uid > 0">
          <image class="image-img-image" :src="consume_info.avatar" mode="widthFix"></image>
          <view class="user-info">
            <view class="nickname">{{ consume_info.nickname}}</view>
            <view class="uid">UID：{{ consume_info.uid}}</view>
          </view>
        </view>
      </view>
      <view class="line">
        <view class="line-content">
          <view class="title">员工头像</view>
          <view class="right">
            <view class="box-value">
              <!--图片内容-->
              <view class="image-img image-size-set" v-if="info.avatar" @click="uploadImage">
                <image class="image-img-image" :src="info.avatar" mode="widthFix"></image>
              </view>
              <!--上传图片按钮-->
              <view class="upload-btn-box image-size-set" v-else @click="uploadImage">
                <image class="upload-btn-icon" src="@/static/images/custom/creamer.png" mode="widthFix"></image>
                上传凭证
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="line">
        <view class="line-content">
          <view class="title">员工名称</view>
          <input type="text" v-model="info.nickname" maxlength="15" placeholder="请输入员工名称" />
        </view>
      </view>
      <view class="line">
        <view class="line-content">
          <view class="title">员工账号</view>
          <input type="text" v-model="info.account" maxlength="20" placeholder="请输入员工账号" />
        </view>
      </view>
      <view class="line">
        <view class="line-content">
          <view class="title">员工密码</view>
          <input type="password" v-model="info.pwd" maxlength="20" placeholder="请输入员工密码" />
        </view>
      </view>
      <view class="line">
        <view class="line-content">
          <view class="title">确认密码</view>
          <input type="password" v-model="info.confirm_pwd" maxlength="20" placeholder="请确认密码" />
        </view>
      </view>
      <template v-if="!is_regular">
        <view class="line">
          <view class="line-content">
            <view class="title">账号状态</view>
            <switch :checked="info.is_open == 1"  @change="changeSwitch($event,'is_open')" color="#437ffd" style="transform:scale(0.8)" />
          </view>
        </view>
        <template v-if="info.is_open == 1">
          <view class="line">
            <view class="line-content">
              <view class="title">客服功能</view>
              <switch :checked="info.status == 1"  @change="changeSwitch($event,'status')" color="#437ffd" style="transform:scale(0.8)" />
            </view>
          </view>
          <view class="line">
            <view class="line-content">
              <view class="title">订单管理</view>
              <switch :checked="info.customer == 1"  @change="changeSwitch($event,'customer')" color="#437ffd" style="transform:scale(0.8)" />
            </view>
          </view>
          <view class="line">
            <view class="line-content">
              <view class="title">商品管理</view>
              <switch :checked="info.is_goods == 1"  @change="changeSwitch($event,'is_goods')" color="#437ffd" style="transform:scale(0.8)" />
            </view>
          </view>
          <view class="line">
            <view class="line-content">
              <view class="title">开启核销</view>
              <switch :checked="info.is_verify == 1"  @change="changeSwitch($event,'is_verify')" color="#437ffd" style="transform:scale(0.8)" />
            </view>
          </view>
          <view class="line">
            <view class="line-content">
              <view class="title">客户管理</view>
              <switch :checked="info.is_user == 1"  @change="changeSwitch($event,'is_user')" color="#437ffd" style="transform:scale(0.8)" />
            </view>
          </view>
          <view class="line">
            <view class="line-content">
              <view class="title">员工管理</view>
              <switch :checked="info.staff_manage == 1"  @change="changeSwitch($event,'staff_manage')" color="#437ffd" style="transform:scale(0.8)" />
            </view>
          </view>
          <view class="line">
            <view class="line-content">
              <view class="title">订单通知</view>
              <switch :checked="info.notify == 1"  @change="changeSwitch($event,'notify')" color="#437ffd" style="transform:scale(0.8)" />
            </view>
          </view>
          <view class="line" v-if="info.notify == 1">
            <view class="line-content">
              <view class="title">通知电话</view>
              <input type="text" v-model="info.phone" placeholder="请输入通知电话" />
            </view>
          </view>
          <view class="line">
            <view class="line-content">
              <view class="title">推广二维码</view>
              <switch :checked="info.qr_code_show == 1"  @change="changeSwitch($event,'qr_code_show')" color="#437ffd" style="transform:scale(0.8)" />
            </view>
          </view>
        </template>
      </template>
      <!--提交按钮-->
      <view class="group-btn">
        <view class="add-btn" @click="submitInfo()">提交</view>
      </view>
    </view>

    <!-- 员工选择 -->
    <uni-popup ref="selectedConsume" type="center">
      <view class="point-content">
        <view class="search-content">
          <input class="money-input" v-model="consume_search.nickname" type='text' placeholder="请输入会员昵称" />
          <view class="search-btn" @click="getConsumeList">搜索</view>
          <view class="close-btn" @click="consumeClosePopup">取消</view>
        </view>
        <view class="point-list">
          <view class="point-box" v-for="(item,index) in consume_list" :key="index">
            <view class="left">
              <image class="image" :src="item.avatar || '/static/images/f.png'"></image>
              <view class="point-info">
                <view class="point-name">
                  {{ item.nickname || item.real_name }}
                  <view class="point-tag" v-if="item.is_store_service == 1">已成为员工</view>
                </view>
                <view class="point-address">UID：{{ item.uid }}</view>
              </view>
            </view>
            <view class="selected-btn" @click="selectedConsume(item)" v-if="item.is_store_service != 1">选中</view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 图片上传 -->
    <avatar @upload="doUpload" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx"></avatar>
    <!--授权登录-->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
import avatar from "@/components/yq-avatar/yq-avatar.vue";
import { HTTP_REQUEST_URL } from '@/config/app';
import {editStaff,getStaffInfo} from "@/api/service";
import { getCustomList } from "@/api/user.js";
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';

export default {
  name: 'custom',
  components: {
    avatar,
    authorize
  },
  data() {
    return {
      // 基本参数
      service_id: 0,
      mer_id: 0,
      // 表单相关
      info: {
        uid: {},
        avatar: '',
        nickname: '',
        account: '',
        confirm_pwd: '',
        pwd: '',
        is_open: 1,
        status: 0,
        customer: 0,
        is_goods: 0,
        is_verify: 0,
        is_user: 0,
        staff_manage: 0,
        notify: 0,
        phone: '',
        qr_code_show: 1,
      },
      // 关注用户列表
      consume_info: {},
      consume_list: {},
      consume_search: {
        limit: 30,
        nickname: '',
        default_consume_id: 0,
      },
      is_regular: false,
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  onLoad: function(options) {
    // 判断：是否登录；未登录  授权登录
    if (!this.isLogin) {
      this.isAuto = true;
      this.isShowAuth = true
    }
    // 参数处理
    this.service_id = options.service_id || 0;
    this.mer_id = options.mer_id || 0;
    // 二维码参数接收
    if(options.scene){
      // console.log("接收参数 - 未转义",options.scene)
      var scene = this.$util.getUrlParams(decodeURIComponent(options.scene));
      this.mer_id = scene.mer_id || this.mer_id;
      // 判断：存在二维码参数，并且mer_id大于0  则固定用户及权限
      if(Number(scene.mer_id) > 0){
        this.is_regular = true;
        this.consume_search.default_consume_id = this.uid;
        this.showConsumePopup();
      }
    }
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: Number(this.service_id) > 0 ? '编辑员工' : '添加员工'
    })
    // 判断：不存在mer_id  直接报错
    if(this.mer_id <= 0){
      uni.showModal({
        title: '提示',
        content: '非法访问，参数不明确！',
        success: function success(res) {
          uni.switchTab({
            url: '/pages/user/index',
          });
        }
      });
    }
    // 初始化
    if(this.service_id > 0) this.getStaffInfo();
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
      }
    },
    // 授权关闭
    authColse(e) {
      this.isShowAuth = e
    },
    // 图片上传 - 触发上传
    uploadImage() {
      let avatar = this.$refs.avatar;
      avatar.fChooseImg(1,{selWidth: '350upx', selHeight: '350upx', inner: true});
    },
    // 图片上传 - 上传
    doUpload(rsp) {
      console.log(rsp)
      let _this = this
      uni.uploadFile({
        url: HTTP_REQUEST_URL + '/api/upload/image/field',
        filePath: rsp.path || '',
        name: 'field',
        formData: {
          'filename': rsp.path,
          'name': ""
        },
        header: {
          // #ifdef MP
          "Content-Type": "multipart/form-data",
          // #endif
          // [TOKENNAME]: 'Bearer ' + store.state.app.token
        },
        success: (uploadFileRes) => {
          let imgData = JSON.parse(uploadFileRes.data)
          // console.log('图片上传回调',imgData);
          if(imgData.data) _this.info.avatar = imgData.data.path || '';
        }
      });
    },
    // 员工选择 - 显示弹框
    showConsumePopup(){
      if(Object.keys(this.consume_list).length <= 0) this.getConsumeList();
      if(Number(this.consume_search.default_consume_id) <= 0) this.$refs.selectedConsume.open('center');
    },
    // 员工选择 - 隐藏弹框
    consumeClosePopup(){
      this.$refs.selectedConsume.close();
    },
    // 员工选择 - 获取列表
    getConsumeList(){
      let _this = this;
      getCustomList(_this.mer_id, _this.consume_search).then(res => {
        _this.consume_list = res.data.list || {};
        // 判断：如果固定用户、且用户列表信息为空则报错并且返回个人中心
        if(_this.is_regular && Number(this.consume_search.default_consume_id) > 0 && Object.values(_this.consume_list).length <= 0){
          uni.showModal({
            title: '提示',
            content: '非该商户用户，请先关注商户或者在该商户进行消费！',
            success: function success(res) {
              uni.switchTab({
                url: '/pages/user/index',
              });
            }
          });
          return false;
        }
        // 判断：是否只有一个-是则选中
        if(Object.values(_this.consume_list).length == 1){
          _this.selectedConsume(_this.consume_list[0]);
          _this.consume_search.default_consume_id = 0;
        }
      }).catch(err => {
        this.$util.Tips({
          title: err
        });
      });
    },
    // 员工选择 - 选中
    selectedConsume(item){
      this.consume_info = item;
      this.consumeClosePopup();
    },
    // 提交信息
    submitInfo(){
      let _this = this;
      let info = Object.assign({},_this.info);
      info.mer_id = _this.mer_id;
      info.service_id = _this.service_id;
      info.uid = {
        id: _this.consume_info.uid
      }
      // 提交信息
      editStaff(info).then(res => {
        // 判断：如果固定用户则返回个人中心  否则返回员工管理
        console.log('_this.is_regular：',_this.is_regular)
        if(_this.is_regular){
          this.$util.Tips({
            title: res.message
          },{
            tab: 5,
            url: '/pages/admin/business/index?is_sys=0',
          });
        }
        else{
          this.$util.Tips({
            title: res.message
          },{
            tab: 5,
            url: '/pages/admin/business/staff?mer_id=' + _this.mer_id,
          });
        }
      }).catch(err => {
        this.$util.Tips({
          title: err
        });
      });
    },
    // 开关改变
    changeSwitch(event,field){
      this.$set(this.info, field, event.detail.value ? 1 : 0);
    },
    // 获取员工信息
    getStaffInfo(){
      let _this = this;
      getStaffInfo({ service_id: _this.service_id }).then(res => {
        _this.info = res.data || {};
        _this.consume_search.default_consume_id = res.data.uid.id;
        _this.showConsumePopup();
      }).catch(err => {
        this.$util.Tips({
          title: err
        });
      });
    }





  },
  // 触底事件
  onReachBottom() {}
}
</script>

<style scoped lang="scss">
.custom-content{
  width: 100vw;
  min-height: 100vh;
  background: #f6f6f6;
  padding: 0 30rpx 100rpx 30rpx;

  .title{
    height: 100rpx;
    line-height: 100rpx;
    font-size: 32rpx;
    width: 100%;
    text-align: center;
    font-weight: bold;
  }
  .form-content{
    background: #FFFFFF;
    border-radius: 20rpx!important;
    padding: 20rpx!important;
    .line{
      width: 100%;

      .line-content{
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        .title{
          font-size: 28rpx;
          width: 150rpx;
          text-align: right;
        }
        input{
          width: calc(100% - 165rpx) !important;
        }
        .right{
          width: calc(100% - 165rpx) !important;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-end;
          align-items: center;
          .right-btn{
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
            width: 150rpx;
            text-align: center;
            height: 50rpx;
            line-height: 50rpx;
            border-radius: 10rpx;
          }
          .box-value{
            width: calc(100% - var(--box-width-));

            .image-size-set{
              width: 210rpx;
              height: 210rpx;
              border: 2rpx solid #dddddd;
              border-radius: 8rpx;
              display: inline-flex;
              flex-direction: row;
              justify-content: center;
              flex-wrap: nowrap;
              align-items: center;

              image{
                max-width: 100% !important;
                max-height: 100% !important;
              }
            }

            .upload-btn-box{
              font-size: 24rpx;
              color: #999999;
              display: inline-flex;
              flex-direction: column!important;
              justify-content: center;
              flex-wrap: nowrap;
              align-items: center;
              .upload-btn-icon{
                width: 45rpx !important;
              }
            }



          }
        }
      }

      .user-content{
        width: 100%;
        padding: 20rpx 0 0 150rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        .image-img-image{
          width: 80rpx!important;
          height: 80rpx!important;
          border-radius: 50% !important;
          margin-right: 15rpx!important;
        }
        .user-info{
          width: calc(100% - 100rpx);
          .nickname{
            height: 40rpx;
            line-height: 40rpx;
            font-size: 28rpx;
            font-weight: bold;
          }
          .uid{
            height: 40rpx;
            line-height: 40rpx;
            font-size: 26rpx;
          }
        }
      }
    }

    .group-btn{
      margin-top: 80rpx!important;
      width: 100%;
      display: inline-flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      .add-btn{
        height: 80rpx;
        line-height: 80rpx;
        width: 100%;
        text-align: center;
        font-size: 30rpx;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        border-radius: 15rpx;
      }
    }
  }
}
.point-content{
  background: #FFFFFF;
  width: 90vw!important;
  height: 90vh!important;
  padding: 15rpx;
  border-radius: 20rpx;

  .search-content{
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    .money-input{
      width: calc(100% - (100rpx * 2)) !important;
      height: 60rpx;
      line-height: 60rpx;
    }
    .search-btn{
      width: 100rpx;
      text-align: center;
      font-size: 28rpx;
      background-color: #409eff;
      color: #fff;
    }
    .close-btn{
      width: 100rpx;
      text-align: center;
      font-size: 28rpx;
      background-color: #f56c6c;
      color: #fff;
    }
  }
  .point-list{
    overflow: auto;
    height: calc(100% - 60rpx);
    .point-box{
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      width: 100%;
      .left{
        width: calc(100% - 110rpx);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        .image{
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          margin-right: 15rpx;
        }
        .point-info{
          width: calc(100% - 90rpx);
          .point-name{
            height: 50rpx;
            line-height: 50rpx;
            font-size: 30rpx;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap;
            .point-tag{
              color: #fff;
              background-color: #e6a23c;
              border-color: #e6a23c;
              padding: 0 15rpx;
              font-size: 24rpx;
              height: 40rpx;
              line-height: 40rpx;
              border-radius: 50rpx;
              margin-left: 15rpx;
            }
          }
          .point-address{
            height: 40rpx;
            line-height: 40rpx;
            font-size: 26rpx;
            color: #cccccc;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .selected-btn{
        width: 100rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        font-size: 28rpx;
        background-color: #67c23a;
        color: #fff;
        border-radius: 50rpx;
      }
    }
    .point-box:not(:last-child){
      border: 2rpx solid #f6f6f6;
    }
  }
}
</style>
