<template>
  <div>
    <p class="edit_page_title">{{adminSale_type==='add'?'添加商务专员':'编辑商务专员'}}</p>
    <div v-show="!is_bankInfo">
      <Button type="primary" class="mar_L_30">基本信息</Button>
      <Button class="return_btn mar_L_30" @click="change_toggle(true)">银行信息</Button>
      <Form ref="editAdminSale" :model="editAdminSale" :rules="adminSale_rule" :label-width="120" class="add-adminsale-form">
        <FormItem label="商务专员账号" prop="name">
          <Input v-model="editAdminSale.name" :disabled='adminSale_type==="edit"' type="text" placeholder="6-30位字母、数字或汉字" class="wid_347 fl zd1"></Input>
          <p class="form_tap_text">账号由超级管理员创建，发放给商务专员</p>
          <div class="clear"></div>
        </FormItem>
        <FormItem label="登录密码" prop="password">
          <Input v-model="editAdminSale.password" type="password" placeholder="6-30位字母或数字" class="wid_347 fl zd1" @on-focus="clearpass"></Input>
          <p v-if="adminSale_type==='edit'" class="form_tap_text">6-30位的密码（仅限数字和字母）</p>
          <div class="clear"></div>
        </FormItem>
        <FormItem label="姓名" prop="realname">
          <Input v-model="editAdminSale.realname" type="text" placeholder="输入姓名" class="wid_347"></Input>
        </FormItem>
        <FormItem label="联系电话" prop="mobile">
          <Input v-model="editAdminSale.mobile" type="text" :maxlength="11" placeholder="输入联系电话" class="wid_347"></Input>
        </FormItem>
        <FormItem label="QQ号">
          <Input v-model="editAdminSale.qq" type="text" placeholder="输入QQ号" class="wid_347"></Input>
        </FormItem>
        <FormItem label="账号状态" prop="status">
          <RadioGroup v-model="editAdminSale.status" class="wid_347 fl zd1">
            <Radio label="1">正常</Radio>
            <Radio label="0">禁用</Radio>
          </RadioGroup>
          <p class="form_tap_text">选择禁用，账号无法登录</p>
          <div class="clear"></div>
        </FormItem>
        <FormItem label="旗下公会数量" prop v-if="adminSale_type==='edit'">
          <p class="wid_347 fl zd1 a_text" @click="isGuildWater=true">{{studio_num}}</p>
          <p class="form_tap_text">无法修改，根据公会所属商务专员自动显示</p>
          <div class="clear"></div>
        </FormItem>
        <FormItem label="创建时间" prop v-if="adminSale_type==='edit'">
          <p class="wid_347">{{creattime}}</p>
        </FormItem>
        <FormItem class="form_btn" prop>
          <Button type="primary" :disabled="!is_canclick" :class="is_canclick?'':'disable_btn'" @click="editAdminSaleInfo()">{{adminSale_type==='add'?'添加':'保存'}}</Button>
          <Button class="return_btn mar_L_15" @click="return_last">返回</Button>
        </FormItem>
      </Form>
    </div>
    <div v-show="is_bankInfo">
      <Button class="mar_L_30 return_btn" @click="change_toggle(false)">基本信息</Button>
      <Button type="primary" class="mar_L_30">银行信息</Button>
      <Form ref="editBank" :model="editBank" :label-width="120" class="add-adminsale-form" >
        <FormItem label="手机号" prop="bank_mobile">
          <Input v-model="editBank.bank_mobile" type="text" placeholder="银行预留手机号" class="wid_347 zd1"></Input>
        </FormItem>
        <FormItem label="银行卡号" prop="card_num" filterable>
          <Input v-model="editBank.card_num" type="text" :maxlength="19" placeholder="输入卡号" class="wid_347 zd1"></Input>
        </FormItem>
        <FormItem label="收款银行" prop="bank_name">
          <Select v-model="editBank.bank_name" filterable placeholder="选择银行" class="wid_347 zd1">
            <Option v-for="(item,index) in BankList" :value="item.name" :key="index">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="持卡人" prop="card_name">
          <Input v-model="editBank.card_name" type="text" placeholder="持卡人姓名，2-25个字符" class="wid_347 zd1"></Input>
        </FormItem>
        <FormItem label="开户城市" class="marbom">
          <Select style="width:113px" v-model="pro" placeholder="省" filterable>
            <Option v-for="(item,index) in city" :key="index" :value="item.name">{{item.name}}</Option>
          </Select>
          <Select style="width:113px" v-model="cit" placeholder="市" filterable>
            <Option v-for="(item,index) in citylist" :key="index" :value="item.name">{{item.name}}</Option>
          </Select>
          <Select style="width:113px" v-model="cou" placeholder="区/县" filterable>
            <Option v-for="(item,index) in coulist" :key="index" :value="item.name">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="开户网点" prop="branch">
          <Input type="text" placeholder="至少2个字符" v-model="editBank.branch" class="wid_347 zd1"></Input>
        </FormItem>
        <FormItem class="form_btn" prop>
          <Button type="primary" :disabled="!is_canclick" :class="is_canclick?'':'disable_btn'" @click="editAdminSaleInfo()">{{adminSale_type==='add'?'添加':'保存'}}</Button>
          <Button class="return_btn mar_L_15" @click="return_last">返回</Button>
        </FormItem>
      </Form>
    </div>
    <guildWater :isGuildWater.sync="isGuildWater" :saleId='saleId'></guildWater>
  </div>
</template>
<script>
import guildWater from "@@/user/guild_water";
import city from "@/common/js/newcity.js";
import { BankList } from "@/assets/js/common";
export default {
  name: "edit_adminSale",
  props: {
    adminSale_type: String,
    pindex: Number,
    saleId: Number
  },
  components:{guildWater},
  data() {
    const confirmName = (rule, value, cb) => {
      let reg = /^[\u2E80-\u9FFF]+$/;
      if (!reg.test(value)) {
        cb(new Error("姓名格式错误"));
      } else if (value.length > 25 || value.length < 2) {
        cb(new Error("姓名长度需要在2-25个字符之间"));
      } else {
        cb();
      }
    };
    const confirmopenBank = (rule, value, cb) => {
      let reg = /^[\u2E80-\u9FFF]+$/;
      if (!reg.test(value)) {
        cb(new Error("开户网点格式错误"));
      } else if (value.length > 25 || value.length < 2) {
        cb(new Error("开户网点长度需要在2-25个字符之间"));
      } else {
        cb();
      }
    };
    const confirmOpenBank = (rule, value, cb) => {
      let reg = /^[\u2E80-\u9FFF]+$/;
      if (!reg.test(value)) {
        cb(new Error("开户网点错误"));
      } else if (value.length < 2) {
        cb(new Error("开户网点错误"));
      } else {
        cb();
      }
    };
    const confirmBankName = (rule, value, cb) => {
      let reg = /^([1-9]{1})(\d{15}|\d{18})$/;
      if (!reg.test(value)) {
        cb(new Error("卡号格式错误"));
      } else {
        cb();
      }
    };
    return {
      BankList,
      creattime:"",
      studio_num:null,
      is_bankInfo: false,
      isGuildWater:false,
      editAdminSale: {
        name:'',
        realname:'',
        mobile:'',
        status:'1',
        password:'',
      },
      editBank: {
        bank_mobile:'',
        card_num:'',
        bank_name:'',
        card_name:'',
        branch:'',
      },
      pro: "",
      cit: "",
      cou: "",
      midcit:'',
      midcou:'',
      city: city,
      citylist: [],
      coulist: [],
      adminSale_rule: {
        name: [
          {
            required: true,
            message: "账号为6-30位字母或数字",
            trigger: "blur"
          },
          // {
          //   pattern: /^[0-9a-zA-Z_]{6,30}$/,
          //   message: "账号为6-30位字母或数字",
          //   trigger: "blur"
          // }
        ],
        password: [
          {
            required: true,
            message: "密码为6-30位字母或数字",
            trigger: "blur"
          },
          {
            pattern: /^[0-9a-zA-Z_]{6,30}$/,
            message: "密码为6-30位字母或数字",
            trigger: "blur"
          }
        ],
        realname: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur"
          },
          { required: true, validator: confirmName, trigger: "blur" }
        ],
        mobile: [
          {
            required: true,
            message: "请输入11位手机号码",
            trigger: "blur"
          },
          {
            pattern: /^1(3|4|5|7|8)\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        bank_mobile: [
          {
            required: true,
            message: "请输入11位手机号码",
            trigger: "blur"
          },
          {
            pattern: /^1(3|4|5|7|8)\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        qq: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          }
        ],
        status: [
          {
            required: true,
            message: "请选择状态",
            trigger: "change"
          }
        ],
        card_num: [
          {
            required: true,
            message: "银行卡号不能为空",
            trigger: "blur"
          },
          { required: true, validator: confirmBankName, trigger: "blur" }
        ],
        bank_name: [
          {
            required: true,
            message: "收款银行不能为空",
            trigger: "change"
          }
        ],
        card_name: [
          {
            required: true,
            message: "持卡人不能为空",
            trigger: "blur"
          },
          { required: true, validator: confirmName, trigger: "blur" }
        ],
        branch: [
          {
            required: true,
            message: "开户网点不能为空",
            trigger: "blur"
          },
          { required: true, validator: confirmopenBank, trigger: "blur" }
        ]
      }
    };
  },
  watch:{
    is_bankInfo(n) {
      if (n) {
        this.$nextTick(() => {
          this.$refs['editAdminSale'].validate(valid =>{ })
        })
      } else {
        // this.$nextTick(() => {
        //   this.$refs['editBank'].validate(valid =>{ })
        // });
      }
    },
    pro(n) {
      this.citylist = [];
      this.coulist = [];
      this.cit = "";
      this.cou = "";
      for (let i of city) {
        if (n === i.name) {
          this.citylist = i.sub;
        }
      }
    },
    cit(n) {
      this.coulist = [];
      this.cou = "";
      for (let i of this.citylist) {
        if (n === i.name) {
          this.coulist = i.sub;
        }
      }
    },
    citylist(n){
      if(n){
        this.cit=this.midcit
        this.midcit=''
      }
    },
    coulist(n){
      if(n){
        this.cou=this.midcou
        this.midcou=''
      }
    }
  },
  computed:{
    is_canclick() {
      let arr = !!this.editAdminSale.name && !!this.editAdminSale.password && !!this.editAdminSale.realname &&
        !!this.editAdminSale.mobile && !!this.editAdminSale.status
      return arr === true;
    },
  },
  methods: {
    editAdminSaleInfo(formname) {
      let adminsala=false
      this.$refs['editAdminSale'].validate(valid => {
        if (valid) { adminsala=true }
      });
      let params={
        name:this.editAdminSale.name,
        password:this.editAdminSale.password,
        realname:this.editAdminSale.realname,
        mobile:this.editAdminSale.mobile,
        qq:this.editAdminSale.qq,
        status:this.editAdminSale.status,
        bank_mobile:this.editBank.bank_mobile,
        card_num:this.editBank.card_num,
        bank_name:this.editBank.bank_name,
        card_name:this.editBank.card_name,
        province:this.pro,
        city:this.cit,
        district:this.cou,
        branch:this.editBank.branch,
      }
      if(this.saleId&&this.adminSale_type==='edit'){
        params.id=this.saleId
      }
      if(params.province===''){
        delete params.province
      }
      if(params.city===''){
        delete params.city
      }
      if(params.district===''){
        delete params.district
      }
      if(params.qq===''){
        delete params.qq
      }
      let api=this.adminSale_type==='edit'?'editSaleList':'addSaleList'
      if(adminsala){
        this.$api[api]({...params}).then(data=>{
          if(data.code===200){
            this.$Message.info(data.msg)
            this.$emit('return_last',this.pindex)
          }else{
            this.$Message.info(data.msg)
          }
        })
      }
    },
    clearpass(){
      if(this.editAdminSale.password==='m1o5r7e8n'){
        this.editAdminSale.password=''
      }
    },
    getSaleDetail(id){
      this.$api.getSaleListDetail({id}).then(data =>{
        if(data){
          this.editAdminSale.name=data.name
          this.editAdminSale.realname=data.realname
          this.editAdminSale.mobile=data.mobile
          this.editAdminSale.qq=data.qq
          this.editAdminSale.status=data.status.toString()
          this.editAdminSale.password='m1o5r7e8n'
          this.editBank.bank_mobile=data.bank_mobile
          this.editBank.card_num=data.card_num
          this.editBank.bank_name=data.bank_name
          this.editBank.card_name=data.card_name
          this.editBank.branch=data.branch
          this.pro=data.province
          this.midcit=data.city
          this.midcou=data.district
          this.creattime=data.create_time
          this.studio_num=data.studio_num
        }
      })
    },
    // 切换
    change_toggle(bool) {
      this.is_bankInfo = bool;
    },
    // 返回
    return_last(){
      this.$emit('return_last',this.pindex)
    }
  },
  created(){
    if(this.adminSale_type==='edit'&&this.saleId){
      this.getSaleDetail(this.saleId)
    }
  }
};
</script>

