<template>
  <el-dialog :visible.sync="visible" width="1000px" title="用户配置">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="代理商名称" prop="deptName">
            <el-input v-model="form.deptName" placeholder="请输入代理商名称" />
          </el-form-item>
        </el-col>
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="绑定提现账户" prop="phonenumber" label-width="120">-->
        <!--              <el-select-->
        <!--                style="width: 80%"-->
        <!--                ref="headerSearchSelect"-->
        <!--                v-model="form.appUserId"-->
        <!--                :remote-method="queryPhonenumber"-->
        <!--                filterable-->
        <!--                default-first-option-->
        <!--                remote-->
        <!--                :loading="loading2"-->
        <!--                placeholder="输入手机号搜索"-->
        <!--                class="header-search-select" >-->
        <!--                <el-option-->
        <!--                  v-for="item in options"-->
        <!--                  :key="item.value"-->
        <!--                  :label="item.label+'-&#45;&#45;'+item.appName"-->
        <!--                  :value="item.value">-->
        <!--                </el-option>-->
        <!--              </el-select>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="leader">
            <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value"
                :label="dict.value">{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="绑定运营区" label-width="90">
            <el-select style="width: 91%" v-model="form.areaIds" multiple placeholder="请绑定运营区">
              <el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName"
                :value="item.areaId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="支付渠道" label-width="90" prop="payChannel">
            <el-select style="width: 91%" v-model="form.payChannel" placeholder="请绑定支付渠道">
              <el-option v-for="item in channelOptions" :key="item.channelId" :label="item.name"
                :value="item.channelId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="form.parentId != 0">
        <el-row>
          <!--            <el-col :span="12">-->
          <!--              <el-form-item label="是否开启分账" label-width="120" prop="isProfitSharing">-->
          <!--                <el-switch v-model="form.isProfitSharing" class="drawer-switch" />-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--            <el-col :span="12">-->
          <!--              <el-form-item label="是否有独立支付账户" label-width="120" prop="separateAccount">-->
          <!--                <el-radio-group v-model="form.separateAccount">-->
          <!--                  <el-radio-->
          <!--                    v-for="dict in dict.type.sys_yes_no"-->
          <!--                    :key="dict.value"-->
          <!--                    :label="dict.value"-->
          <!--                  >{{dict.label}}</el-radio>-->
          <!--                </el-radio-group>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="平台服务费(%)" label-width="90" prop="platformServiceFee">
              <el-input style="width: 78%" v-model="form.platformServiceFee" placeholder="请输入平台服务费" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提现手续费类型" label-width="120" prop="handlingChargeType">
              <el-radio-group v-model="form.handlingChargeType">
                <el-radio v-for="dict in dict.type.et_handling_charge_type" :key="dict.value"
                  :label="dict.value">{{ dict.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="充值手续费" prop="handlingCharge">
              <el-input v-model="form.handlingCharge" placeholder="请输入充值手续费" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.handlingChargeType == '1'">
            <el-form-item label="比例(‰)">
              <el-input v-model="form.withdrawHandlingCharge" placeholder="请输入手续费" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-else>
            <el-form-item label="每笔(元)">
              <el-input v-model="form.withdrawHandlingCharge" placeholder="请输入手续费" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款码" prop="collectionCode">
              <image-upload v-model="form.collectionCode" :limit="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否使用创享电动车小程序" label-width="160" prop="isUsePlatformApp">
              <el-switch v-model="form.isUsePlatformApp" class="drawer-switch" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-show="form.isUsePlatformApp != true">
            <el-form-item label="appSecret" prop="appSecret">
              <el-input v-model="form.appSecret" placeholder="请输入appSecret" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-show="form.isUsePlatformApp != true">
            <el-form-item label="appid" prop="appid">
              <el-input style="width: 100%" v-model="form.appid" placeholder="请输入appid" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-show="form.isUsePlatformApp != true">
            <el-form-item label="小程序名称" prop="appName" label-width="90px">
              <el-input style="width: 100%" v-model="form.appName" placeholder="请输入小程序名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-show="form.isUsePlatformApp != true">
            <el-form-item label="域名" prop="domain">
              <el-input style="width: 100%" v-model="form.domain" placeholder="请输入域名" />
            </el-form-item>
          </el-col>
        </el-row>

      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  listDept,
  getDept,
  delDept,
  addDept,
  updateDept,
  listDeptExcludeChild,
  listDept2, getDeptInfo
} from '@/api/system/dept'
import { listArea } from '@/api/system/area'
import { listChannel } from '@/api/system/channel'
// import { getSmUser, updateSmUser } from '@/api/system/smUser'
import LineField from '@/components/LineField/index.vue'
import GroupTitle from '@/components/GroupTitle/index.vue'
import { SmUserType } from '@/utils/constants'

export default {
  name: "UserConfigDialog",
  components: { GroupTitle, LineField },
  dicts: ['sys_normal_disable', 'sys_yes_no', 'et_handling_charge_type', 'et_withdraw_method'],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    userId: {
      type: String,
      default: null,
    },
    deptId: {
      type: Number,
      default: null,
    }

  },
  computed: {
    SmUserType() {
      return SmUserType
    },
    visible: {
      set(val) {
        this.$emit('update:show', val);
      },
      get() {
        return this.show;
      }
    }
  },
  data() {
    return {
      span: 12,
      form: {},
      channelOptions: [],
      areaOptions: [],
      rules: {
        parentId: [
          { required: true, message: "上级代理商不能为空", trigger: "blur" }
        ],
        deptName: [
          { required: true, message: "代理商名称不能为空", trigger: "blur" }
        ],
        handlingChargeType: [
          { required: true, message: "手续费类型不能为空", trigger: "blur" }
        ],
        handlingCharge: [
          { required: true, message: "手续费不能为空", trigger: "blur" }
        ],
        payChannel: [
          { required: true, message: "支付渠道不能为空", trigger: "blur" }
        ],
        // orderNum: [
        //   { required: true, message: "显示排序不能为空", trigger: "blur" }
        // ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },
      loading: false,
      submitLoading: false,
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      
      getDept(this.deptId).then(response => {
        this.form = response.data;
        this.$set(this.form, "areaIds", response.areaIds);
        this.open = true;
        this.title = "修改代理商";
        // this.form.isProfitSharing = this.form.isProfitSharing === 'true';
        this.form.isUsePlatformApp = this.form.isUsePlatformApp === 'true';
        console.log("userName==========="+response.data.userName)
        // this.appUserId = this.form.appUserId;
        // if(response.data.userName){
        //   this.form.appUserId = response.data.userName;
        // }
        listArea({ pageNum: 1, pageSize: 999}).then(response => {
          this.areaOptions = response.rows;
        });
        listChannel(this.queryParams).then(response => {
          this.channelOptions = response.rows;
        });
        listDeptExcludeChild(this.deptId).then(response => {
          this.deptOptions = this.handleTree(response.data, "deptId");
          if (this.deptOptions.length == 0) {
            const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] };
            this.deptOptions.push(noResultsOptions);
          }
        });
      });
    },

    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.deptId != undefined) {
            updateDept(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDept(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.visible = false;
      this.reset();
    },
    // 重置
    reset() {
      this.form = {
        userId: this.userId,
      };
      this.resetForm("form");
    },
    // 修改为设备管理员

  }
}
</script>
