<template>
  <div>
    <el-form ref="merDataField" size="small" :rules="ruleValidate" :model="merData" label-width="130px" @submit.native.prevent>
      <el-tabs v-loading="loading" type="border-card" v-model="activeName">
        <el-tab-pane label="基本信息" name="detail">
          <div class="section">
            <div class="title">基础信息</div>
            <el-row :gutter="24" class="mt20">
              <el-col :span="12">
                <el-form-item :label="mar_type_name + '名称：'" prop="mer_name">
                  <el-input
                    v-model="merData.mer_name"
                    :placeholder="'请填写' + mar_type_name + '名称'"
                    class="selWidth"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="mar_type_name + '地址：'" prop="mer_address">
                  <el-input
                    v-model="merData.mer_address"
                    placeholder="请填写详细地址"
                    class="selWidth"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="defaultMerchantType == 0">
              <el-col :span="12">
                <el-form-item :label="mar_type_name + '分类：'" prop="category_id">
                  <el-select
                    v-model="merData.category_id"
                    placeholder="请选择"
                    class="selWidth"
                  >
                    <el-option
                      v-for="item in merCateList"
                      :key="item.merchant_category_id"
                      :label="item.category_name"
                      :value="item.merchant_category_id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="mar_type_name + '类型：'" prop="is_trader">
                  <el-radio-group
                    v-model="merData.is_trader"
                  >
                    <el-radio :label="1" class="radio">自营</el-radio>
                    <el-radio :label="0">非自营</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" v-if="defaultMerchantType == 0">
                <el-form-item label="店铺类型：" prop="type_id">
                  <el-select
                    v-model="merData.type_id"
                    placeholder="请选择"
                    class="selWidth"
                  >
                    <el-option
                      v-for="item in storeType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="'推荐' + mar_type_name + '：'" prop="is_best">
                  <el-switch
                    v-model="merData.is_best"
                    :active-value="1"
                    :inactive-value="0"
                    :width="50"
                    active-text="是"
                    inactive-text="否"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="品牌类型：">
                  <el-select v-model="merData.brand_id" filterable remote class="selWidth" placeholder="请输入品牌名称进行搜索" :remote-method="selectBrandList">
                    <el-option v-for="item in brand_list" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="排序：" prop="sort">
                  <el-input-number
                    v-model="merData.sort"
                    controls-position="right"
                    placeholder="请输入排序"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="mar_type_name + '状态：'" prop="status">
                  <el-switch
                    v-model="merData.status"
                    :active-value="1"
                    :inactive-value="0"
                    :width="55"
                    active-text="开启"
                    inactive-text="关闭"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注：" prop="mark">
                  <el-input
                    type="textarea"
                    v-model="merData.mark"
                    placeholder="请填写备注"
                    class="selWidth"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" v-if="defaultMerchantType == 0">
                <el-form-item label="人均消费额：" prop="avg_consumption">
                  <el-input type="number" v-model="merData.avg_consumption" placeholder="请填写人均消费额" class="selWidth" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="mar_type_name + '标签：'" prop="mer_label">
                  <el-input type="textarea" v-model="merData.mer_label" placeholder="请填写标签，多个以逗号隔开!" class="selWidth" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="经营信息" name="operate">
          <div class="section">
            <div class="title">费用信息</div>
            <el-row :gutter="24" class="mt20">
              <el-col v-if="!isAdd" :span="24">
                <el-form-item label="店铺保证金：" prop="ot_margin">
                  <span>{{ merData.is_margin == 0 ? '无' : merData.ot_margin + '元' }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="!isAdd && merData.is_margin != 0" :span="24">
                <el-form-item label="保证金支付状态：">
                  <span>{{ merData.is_margin == 1 ? '待缴' : merData.is_margin == 0 ? '无' : '已缴' }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="!isAdd && merData.is_margin != 0" :span="24">
                <el-form-item label="保证金余额：">
                  <span>{{ merData.margin }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="mar_type_name + '手续费单独设置：'" label-width="200px" prop="commission_rate">
                  <el-switch
                    v-model="merData.commission_switch"
                    :active-value="1"
                    :inactive-value="0"
                    :width="55"
                    active-text="开启"
                    inactive-text="关闭"
                  />
                  <span class="info info-red">(注：此处如未设置手续费，系统会自动读取{{ mar_type_name }}分类下对应手续费；此处已设置，则优先以此处设置为准)</span>
                </el-form-item>
              </el-col>
              <el-col v-if="merData.commission_switch" :span="24">
                <el-form-item label="" prop="commission_rate">
                  <el-input-number
                    :min="0"
                    v-model="merData.commission_rate"
                    controls-position="right"
                    placeholder="请输入排序"
                  />
                  %
                </el-form-item>
              </el-col>

            </el-row>
          </div>
          <div class="section">
            <div class="title">审核信息</div>
            <el-row :gutter="24" class="mt20">
              <el-col :span="8">
                <el-form-item label="商品审核：" prop="is_audit">
                  <el-switch
                    v-model="merData.is_audit"
                    :active-value="1"
                    :inactive-value="0"
                    :width="50"
                    active-text="是"
                    inactive-text="否"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="直播间审核：" prop="is_bro_room">
                  <el-switch
                    v-model="merData.is_bro_room"
                    :active-value="1"
                    :inactive-value="0"
                    :width="50"
                    active-text="是"
                    inactive-text="否"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="直播间商品审核：" prop="is_bro_goods">
                  <el-switch
                    v-model="merData.is_bro_goods"
                    :active-value="1"
                    :inactive-value="0"
                    :width="50"
                    active-text="是"
                    inactive-text="否"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="section">
            <div class="title">其他信息</div>
            <div class="mt20">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item :label="mar_type_name + '关键字：'" prop="mer_keyword">
                    <el-input v-model="merData.mer_keyword" placeholder="请填写关键字" class="selWidth" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="!isAdd" :gutter="24">
                <el-col :span="12" style="position: relative;">
                  <el-form-item label="商品采集数：">
                    <el-input v-model="merData.copy_product_num" disabled></el-input>
                    <el-button type="text" @click="modifyCopy" style="margin-left: 10px;position:absolute;right: -30px;">
                      修改
                    </el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="账号信息" name="account">
          <div class="section">
            <div class="title">登录账号</div>
            <el-row :gutter="24" class="mt20">
              <el-col :span="12">
                <el-form-item :label="mar_type_name + '账号：'" prop="mer_account">
                  <el-input
                    type="text"
                    v-model="merData.mer_account"
                    :disabled="!isAdd"
                    class="selWidth"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="登陆密码：" prop="mer_password">
                  <el-input
                    type="password"
                    v-model="merData.mer_password"
                    :disabled="!isAdd"
                    class="selWidth"
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="!isAdd" :span="12">
                <el-form-item label="联系人：" prop="real_name">
                  <el-input
                    type="text"
                    placeholder="请填写联系人"
                    v-model="merData.real_name"
                    class="selWidth"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话：" prop="mer_phone">
                  <el-input
                    placeholder="请填写联系电话"
                    v-model="merData.mer_phone"
                    class="selWidth"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="section">
            <div class="title">财务帐号</div>
            <el-row :gutter="24" class="mt20">
              <el-col :span="12">
                <el-form-item :label="'分账' + mar_type_name + '号：'" prop="sub_mchid">
                  <el-input
                    :placeholder="'请填写分账' + mar_type_name + '号'"
                    v-model="merData.sub_mchid"
                    class="selWidth"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div class="info-red" style="margin-left: 120px;">
                  当开启自动分账时，每个子{{ mar_type_name }} 在微信后台的分账{{ mar_type_name }}号， 即特约子{{ mar_type_name }}号
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="其他设置" name="integral">
          <div class="section">
            <div class="title">基础信息</div>
            <el-row :gutter="24" class="mt20">
              <el-col :span="24">
                <el-form-item label="购买商品消费赠送酒卡额度倍率：" prop="mer_exchange_quota_multiple" label-width="200">
                  <el-input-number v-model="merData.mer_exchange_quota_multiple" controls-position="right" placeholder="请输入倍率" />
                  <div class="input-tips">为空或者0时，使用总平台统一设置的倍率</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="mt20">
              <el-col :span="12">
                <el-form-item :label="mar_type_name +'类别：'" prop="merchant_type">
                  <el-select v-model="merData.merchant_type" disabled placeholder="请选择" class="selWidth">
                    <el-option label="普通商户" :value="0" />
                    <el-option label="酒道馆" :value="1" />
                    <el-option label="供应商" :value="2" />
                    <el-option label="烟酒店" :value="3" />
                    <el-option label="超市" :value="4" />
                    <el-option label="省公司门店" :value="5" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="defaultMerchantType == 1">
                <el-form-item label="关联商户：">
                  <el-select v-model="merData.shop_mer_id" filterable remote class="selWidth" placeholder="请输入关键字搜索商户" :remote-method="selectMerList">
                    <el-option
                      v-for="item in mer_list"
                      :key="item.mer_id"
                      :label="item.mer_name"
                      :value="item.mer_id"
                      :disabled="item.shopMer && item.shopMer.mer_id != merData.mer_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!--商户子类型-->
            <el-row :gutter="24" class="mt20">
              <!--商户类别：0=普通商户，1=酒道馆，2=供应商，3=烟酒店，4=超市，5=省公司门店，6=城市会客厅，7=惠民健康体检馆-->
              <!--商户子类型：0=默认，1=酒道馆/大型餐厅，2=小酒馆/中小型餐厅-->
              <el-col :span="12" v-if="defaultMerchantType == 1">
                <el-form-item :label="mar_type_name +'类型：'">
                  <el-select v-model="merData.merchant_sub_type" placeholder="请选择类型" class="selWidth">
                    <el-option label="酒道馆" :value="1" />
                    <el-option label="小酒馆" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="defaultMerchantType == 0">
                <el-form-item :label="mar_type_name +'类型：'">
                  <el-select v-model="merData.merchant_sub_type" placeholder="请选择类型" class="selWidth">
                    <el-option label="大型餐厅" :value="1" />
                    <el-option label="中小型餐厅" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <!--资源股东-->
            <el-row :gutter="24" class="mt20" v-if="defaultMerchantType != 2">
              <el-col :span="24">
                <el-form-item label="资源股东：" label-width="200">
                  <div class="top-user">
                    <div class="user-content" v-if="merData.shareholders">
                      <div class="user-avatar">
                        <img :src="merData.shareholders.avatar || moren" />
                      </div>
                      <div class="user-info">
                        <div class="nickname">{{ merData.shareholders.nickname }}</div>
                        <div class="user-id">{{ merData.shareholders.uid }}</div>
                      </div>
                    </div>
                    <el-button size="small" type="warning" round @click="addChildren(1, true)">切换用户</el-button>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="资源股东收益比例(%)：" prop="resource_shareholders_rate" label-width="200">
                  <el-input-number v-model="merData.resource_shareholders_rate" controls-position="right" placeholder="请输入比例" step="0.01" max="100" />%
                </el-form-item>
              </el-col>
            </el-row>


            <!--<el-row :gutter="24" class="mt20">
              <el-col :span="24">
                <el-form-item label="商户积分兑换平台积分比例：" prop="mer_integral_platform_rate" label-width="200">
                  <el-input-number v-model="merData.mer_integral_platform_rate" controls-position="right" placeholder="请输入比例" />
                  <div class="input-tips">例：设置为1.5，则1个本商户积分=1.5个平台积分</div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="平台积分转换商户积分比例：" prop="mer_integral_merchant_rate" label-width="200">
                  <el-input-number v-model="merData.mer_integral_merchant_rate" controls-position="right" placeholder="请输入比例" />
                  <div class="input-tips">例：设置为0.8，则1个平台积分=0.8个本商户积分</div>
                </el-form-item>
              </el-col>
            </el-row>-->
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <!-- 用户选择 -->
    <el-dialog title="用户选择" :visible.sync="userSelectVisible" width="80%" :before-close="closeStaff" :append-to-body="true">
      <el-card class="box-card">
        <!--顶部搜索栏-->
        <div slot="header" class="clearfix">
          <div class="container">
            <el-form inline size="small" label-width="80px">
              <el-form-item label="">
                <el-input v-model="userTableFrom.nickname" placeholder="请输入用户昵称" class="selWidth" clearable />
                <el-input v-model="userTableFrom.phone" placeholder="请输入用户手机号" class="selWidth" clearable />
                <el-input v-model="userTableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable>
                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getUserList(1)" />
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!--表格信息-->
        <el-table v-loading="userListLoading" :data="userTableData.data" style="width: 100%" size="mini">
          <el-table-column label="用户信息" prop="nickname" min-width="300" align="center">
            <template slot-scope="scope">
              <div class="user-content">
                <div class="user-avatar">
                  <img :src="scope.row.avatar || moren" />
                </div>
                <div class="user-info">
                  <div class="nickname">{{ scope.row.nickname }}</div>
                  <div class="user-id">ID：{{ scope.row.uid }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="联系电话" prop="phone" min-width="150" align="center"/>
          <!--操作按钮-->
          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="scope">
              <el-button type="success" effect="dark" @click="addStaffConfirm(scope.row)">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block">
          <el-pagination
            :page-sizes="[20, 40, 60, 80]"
            :page-size="userTableFrom.limit"
            :current-page="userTableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userTableData.total"
            @size-change="handleUserSizeChange"
            @current-change="pageUserChange"
          />
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userSelectVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { merCategoryListApi } from '@/api/product'
import {getstoreTypeApi, merchantUpdate, merchantCreate, merchantListApi, brandListApi} from "@/api/merchant";
import { userLstApi } from '@/api/user'
import {merchantTypeText} from "@/filters";
export default {
  props: {
    merData: {
      type: Object,
      default: {},
    },
    isAdd: {
      type: Boolean,
      default: false,
    },
    defaultMerchantType: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写联系方式'))
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('格式不正确!'))
      } else {
        callback()
      }
    }
    return {
      moren: require("@/assets/images/f.png"),
      brand_list: {},
      mer_list: {},
      mar_type_name: '商户',
      loading: false,
      merId: '',
      direction: 'rtl',
      activeName: 'detail',
      merCateList: [],
      storeType: [],
      ruleValidate: {
        mer_name: [
          { required: true, message: `请输入名称`, trigger: 'blur' }
        ],
        mer_account: [
          { required: true, message: `请输入账号`, trigger: 'blur' }
        ],
        // category_id: [
        //   { required: true, message: `请选择分类`, trigger: 'change' }
        // ],
        // type_id: [
        //   { required: true, message: '请选择店铺类型', trigger: 'change' }
        // ],
        mer_phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
      },
      // 用户选择弹框
      userSelectVisible: false,
      userListLoading: true,
      userTableFrom: {
        page: 1,
        limit: 20,
        nickname: '',
        phone: '',
        uid: ''
      },
      userTableData: {
        data: [],
        total: 0,
      }
    };
  },
  filters: {},
  watch: {
    merData: {
      handler() {
        this.merData.merchant_type = this.defaultMerchantType || 0;
        this.mar_type_name = merchantTypeText(this.merData.merchant_type);

        this.selectMerList();
        this.selectBrandList('');
      },
      deep: true
    }
  },
  mounted() {
    this.getCategorySelect();
    this.getStoreType()
  },
  methods: {
    // 商户分类；
    getCategorySelect() {
      merCategoryListApi().then(res => {
        this.merCateList = res.data.list
      }).catch(res => {
        this.$message.error(res.message)
      })
    },
    /**获取店铺类型 */
    getStoreType(){
      getstoreTypeApi().then(res => {
        this.storeType = res.data
      }).catch(res => {
        this.$message.error(res.message)
      })
    },
    /**修改采集次数 */
    modifyCopy() {
      this.$emit('modifyCopy')
    },
    /**重置表单数据 */
    resetData(){
      this.$refs.merDataField.resetFields();
    },
    /*提交信息*/
    onSubmit(id){
      this.$refs['merDataField'].validate(valid => {
        if (valid) {
          this.loading = true;
          merchantUpdate(id,this.merData)
          .then(async res => {
            this.$message.success(res.message);
            this.loading = false;
            this.$emit('success');
          })
          .catch(res => {
            this.loading = false;
            this.$message.error(res.message);
          });
        }
      });
    },
    /**创建商户 */
    handleCreate(){
      this.$refs['merDataField'].validate((valid) => {
        if (valid) {
          merchantCreate(this.merData)
            .then(async (res) => {
              this.$message.success(res.message);
              this.$emit('success');
            })
            .catch((res) => {
              this.$message.error(res.message);
            });
        } else {
          if(this.defaultMerchantType == 0){
            if(!this.merData.mer_name)return this.$message.error(`请填写基本信息-${this.mar_type_name}名称`);
            if(!this.merData.category_id)return this.$message.error(`请选择基本信息-${this.mar_type_name}分类`);
            if(!this.merData.type_id)return this.$message.error('请选择基本信息-店铺类型');
            if(!this.merData.mer_account)return this.$message.error(`请填写账号信息-${this.mar_type_name}账号`);
            if(!this.merData.mer_phone)return this.$message.error('请填写账号信息-联系电话');
          }else{
            if(!this.merData.mer_name)return this.$message.error(`请填写基本信息-${this.mar_type_name}名称`);
            if(!this.merData.mer_account)return this.$message.error(`请填写账号信息-${this.mar_type_name}账号`);
            if(!this.merData.mer_phone)return this.$message.error('请填写账号信息-联系电话');
          }
        }
      });
    },
    // 搜索商户列表
    selectMerList(query) {
      let _this = this;
      let params = {
        page: 1,
        limit: 100,
        status: "1",
        keyword: query,
        is_shop_get: 1//是否为获取酒道馆关联商家
      };
      merchantListApi(params).then(res => {
        _this.mer_list = res.data.list || {};
      }).catch(res => {
        this.$message.error(res.message);
      });
    },
    // 搜索品牌列表
    selectBrandList(query){
      let _this = this;
      let params = {
        page: 1,
        limit: 100,
        title: query,
      };
      brandListApi(params).then(res => {
        _this.brand_list = res.data.list || {};
      }).catch(res => {
        this.$message.error(res.message);
      });
    },
    // 用户选择器 - 弹框显示
    addChildren(){
      this.getUserList(1);
      this.userSelectVisible = true;
    },
    // 用户选择器 - 弹框关闭
    closeStaff() {
      this.userSelectVisible = false;
    },
    // 用户选择器 - 获取用户列表及分页相关
    getUserList(num) {
      let _this = this;
      this.userListLoading = true;
      this.userTableFrom.page = num ? num : this.userTableFrom.page;
      userLstApi(this.userTableFrom)
        .then((res) => {
          this.userTableData.data = res.data.list;
          this.userTableData.total = res.data.count;
          this.userListLoading = false;
        })
        .catch((res) => {
          this.userListLoading = false;
          this.$message.error(res.message);
        });
    },
    pageUserChange(page) {
      this.userTableFrom.page = page;
      this.getUserList('');
    },
    handleUserSizeChange(val) {
      this.userTableFrom.limit = val;
      this.getUserList('');
    },
    // 用户选择器 - 选中用户
    addStaffConfirm(item){
      this.merData.resource_shareholders_uid = item.uid;
      this.merData.shareholders = item;
      this.closeStaff();
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.selWidth{
  width: 100%;
}
.container{
  .selWidth{
    width: 300px!important;
    margin-bottom: 10px;
  }
}
.el-tabs--border-card {
  box-shadow: none;
  border-bottom: none;
}
.section {
  padding: 20px 0 5px;
  border-bottom: 1px dashed #eeeeee;
  .title {
    padding-left: 10px;
    border-left: 3px solid #437FFD;
    font-size: 15px;
    line-height: 15px;
    color: #303133;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
  }
  .item {
    flex: 0 0 calc(100% / 2);
    display: flex;
    margin-top: 16px;
    font-size: 13px;
    color: #606266;

    &:nth-child(2n + 1) {
      padding-right: 20px;
      padding-left: 20px;
    }
    &:nth-child(2n) {
     padding-right: 20px;
    }
  }
  .value {
    flex: 1;
    image {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin: 0 12px 12px 0;
      vertical-align: middle;
    }
  }
}
.info-red{
  color: red;
  font-size: 12px;
  display: block;
}
/deep/.el-input-number.is-controls-right .el-input__inner{
 padding: 0 40px 0 10px;
}
/deep/.el-form-item__label{
  font-weight: normal;
  color: #282828;
}
.tab {
  display: flex;
  align-items: center;
  .el-image {
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }
}
/deep/.el-drawer__body {
  overflow: auto;
}
.gary {
  color: #aaa;
}
.input-tips{
  font-size: 12px;
  margin-left: 180px;
  line-height: 20px;
  color: #9d9d9d;
}
.top-user{
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .user-content{
    --user-content-height-: 80px;

    height: var(--user-content-height-);
    width: 100%;
    margin-right: 30px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;

    .user-avatar{
      height: var(--user-content-height-);
      width: var(--user-content-height-);
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      img{
        height: 80%!important;
        width: 80%!important;
        border-radius: 50% !important;
      }
    }

    .user-info{
      width: calc(100% - var(--user-content-height-));
      height: var(--user-content-height-);
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: flex-start;
      .nickname{}
      .user-id{
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        height: 18px;
        line-height: 20px;
        font-size: 13px;
        padding: 0 5px;
        border-radius: 5px;
        width: max-content!important;
      }
      .user-id{
        width: 100%;
        text-align: left;
        font-size: 13px;
        line-height: calc(var(--user-content-height- * 35%));
      }
    }
  }
}
.user-content{
  --user-content-height-: 80px;

  height: var(--user-content-height-);
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  .user-avatar{
    height: var(--user-content-height-);
    width: var(--user-content-height-);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    img{
      height: 80%!important;
      width: 80%!important;
      border-radius: 50% !important;
    }
  }
  .user-info{
    width: calc(100% - var(--user-content-height-));
    height: var(--user-content-height-);
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    .nickname{
      width: 100%;
      height: 25px;
      line-height: 25px;
      text-align: left;
      font-size: 15px;
      font-weight: bold;
      line-height: calc(var(--user-content-height- * 65%));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .user-id{
      width: 100%;
      text-align: left;
      font-size: 13px;
      line-height: calc(var(--user-content-height- * 35%));
    }
  }
}
</style>
