<style scoped>
  /deep/.title-font {
    color: #4E5966;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  /deep/.name-font {
    font-size: 14px;
    color: #4E5966;
  }
</style>
<template>
  <row style="margin-left: 30px;margin-top: 30px">
    <!--表单-->
    <div style="text-align: left">
      <span class="title-font">用户信息</span>
    </div>
    <div style="text-align: left;margin-top: 20px">
      <Form style="text-align: left" :model="modifyFrom" :rules="modifyValidate" ref="modifyFrom">
        <Form-Item prop="userName">
          <span class="name-font" style="width: 80px;display: inline-block">用户名</span>
          <i-input placeholder="请输入用户名"  style="width: 300px;" v-model="modifyFrom.userName"/>
        </Form-Item>
        <Form-Item prop="account">
          <span class="name-font" style="width: 80px;display: inline-block">账号</span>
          <i-input disabled placeholder="请输入账号"  style="width: 300px;" v-model="modifyFrom.account"/>
        </Form-Item>
        <Form-Item prop="mobil">
          <span class="name-font" style="width: 80px;display: inline-block">手机号</span>
          <i-input placeholder="请输入手机号" style="width: 300px;" v-model="modifyFrom.mobil"/>
        </Form-Item>
        <Form-Item prop="password">
          <span class="name-font" style="width: 80px;display: inline-block" >密码</span>
          <i-input placeholder="请输入密码"  style="width: 300px;" v-model="modifyFrom.password" @on-change="check" type="password"/>
        </Form-Item>
        <Form-Item prop="confirmPassword">
          <span class="name-font" style="width: 80px;display: inline-block">确认密码</span>
          <i-input placeholder="请确认密码"  style="width: 300px;" v-model="modifyFrom.confirmPassword" type="password"/>
        </Form-Item>
      </Form>

    </div>

    <!--角色-->
    <div style="text-align: left;margin-top: 30px">
      <span class="title-font">角色信息</span>
    </div>
    <div style="text-align: left;margin: 30px 0 0 30px">
      <RadioGroup v-for="item in roleList" :key="item.id" v-model="modifyFrom.roleId" style="margin-left: 15px" @on-change="roleChange(item)">
        <Radio :label="item.id">{{item.name}}</Radio>
      </RadioGroup>
    </div>

    <div style="margin-top: 40px" v-if="shopSelectDisplay">
      <span class="name-font" style="width: 80px;display: inline-block">店铺</span>
      <Select class="select-head" style="width: 300px;" clearable v-model="modifyFrom.shopId"  placeholder="请选择店铺" filterable>
        <Option v-for="item in this.shopList" :value="item.id" :key="item.id">{{item.name}}</Option>
      </Select>
    </div>
    <div style="margin-top: 40px" v-if="companySelectDisplay">
      <span class="name-font" style="width: 80px;display: inline-block">零售公司</span>
      <Select  v-model="modifyFrom.companyId" filterable style="width: 300px;">
        <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
    </div>
    <!--确认返回-->
    <div style="margin-top: 40px">
      <Button type="primary" style="height: 39px;width: 101px" @click="modifyAccountConfirm()"  >完成</Button>
      <Button  style="height: 39px;width: 101px;border: 0" @click="modifyAccountcancel()">返回</Button>
    </div>
  </row>
</template>

<script>
    import accountManagementModify from '../../services/account/AccountManagementModify'
    import accountManagement from '../../services/account/AccountManagement'
    import IncreaseData from "../../services/generalize/IncreaseData";

    export default {

      data() {
        return {
          companyList: [],
          companySelectDisplay:false,
          name: "accountManagementModify",
          modifyFrom: {
            accountId: this.$route.query.accountId,
            userId: this.$route.query.userId,
            userName: this.$route.query.userName,
            account: this.$route.query.account,
            password: this.$route.query.password,
            confirmPassword: this.$route.query.password,
            roleId: this.$route.query.roleId,
            shopId: this.$route.query.shopId,
            type:this.$route.query.type,
            companyId: this.$route.query.companyId,
            mobil: this.$route.query.mobil,
          },
          passwordCheck:[
            {required:true,message:'密码不能为空',trigger:'blur'},
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' },
            { pattern: /^[0-9a-zA-Z]*$/g, message: '只可以输入数字和字母',trigger: 'blur'},
          ],
          confirmPasswordCheck:[
            {required:true,message:'确认密码不能为空',trigger:'blur'},
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' },
            { pattern: /^[0-9a-zA-Z]*$/g, message: '只可以输入数字和字母',trigger: 'blur'},
          ],
          modifyValidate: {
            mobil: [
              {pattern: /^[0-9]*$/g, message: '只可以输入数字', trigger: 'blur'},
            ],
            userName:[
              {required:true,message:'用户名不能为空',trigger:'blur'},
              { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' },
              { pattern: /^[\u4e00-\u9fa5_0-9a-zA-Z]+$/, message: '只可以输入数字,字母,中文',trigger: 'blur'}
            ],
            account:[
              {required:true,message:'账号不能为空',trigger:'blur'},
              { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' },
              { pattern: /^[0-9a-zA-Z]*$/g, message: '只可以输入数字和字母',trigger: 'blur'},
            ],
            password:null,
            confirmPassword:null,
          },
          selectRole: this.$route.query.roleId,
          roleList: [],
          //店铺下拉框
          shopList: [],
          //控制店铺筛选框
          shopSelectDisplay: false,
        }
      },
      mounted: function () {
        if(this.$route.query.roleCode === 'DZ-DIANZHANG'){
          this.shopSelectDisplay = true;
          this.modifyFrom.type = 1;
          this.modifyFrom.companyId = null;
          this.listShop();
        } else if(this.$route.query.roleCode  === "DG-DAOGOU"){
          this.shopSelectDisplay = true;
          this.modifyFrom.type = 4;
          this.modifyFrom.companyId = null;
          this.listShop();
        }else if(this.$route.query.roleCode === 'DG-YUNYING'){
          this.companySelectDisplay = true;
          this.shopSelectDisplay = false;
          this.modifyFrom.type = 2;
          this.allCompany();
        }
        this.listRole();
      },
      methods: {
        //查询所有角色
        listRole() {
          let that = this;
          that.roleList = [];
          accountManagement.listRoleInfoApi({}, function (data) {
            data = data.data;
            if(data.code === '0001') {
              that.$Message.error("查询失败");
              return;
            }
            if(data.code === '0000') {
              let row = data.results;
              for(let i = 0 ; i < row.length ; i++) {
                that.roleList.push(row[i]);
              }
            }
          });
        },
        //修改账号确定
        modifyAccountConfirm : function () {
          if(this.modifyFrom.userName){
            this.modifyFrom.userName = this.modifyFrom.userName.trim();
          }
          if(this.modifyFrom.password){
            this.modifyFrom.password = this.modifyFrom.password.trim();
          }
          if(this.modifyFrom.confirmPassword){
            this.modifyFrom.confirmPassword = this.modifyFrom.confirmPassword.trim();
          }
          if(this.modifyFrom.account){
            this.modifyFrom.account = this.modifyFrom.account.trim();
          }
          //验证
          this.$refs["modifyFrom"].validate((valid) => {
            if (!valid) {
              return;
            }
              if(this.shopSelectDisplay && !this.modifyFrom.shopId) {
                this.$Message.info("必须选择店铺");
                return;
              }
              if(!this.modifyFrom.roleId) {
                this.$Message.info("必须选择角色");
                return;
              }
              if(this.modifyFrom.confirmPassword !== this.modifyFrom.password) {
                this.$Message.info("两次输入密码必须一致");
                return;
              }
              let that = this;

              let request = {
                modifyForm: JSON.stringify(that.modifyFrom)
              };
              accountManagementModify.modifyAccountApi(request, function (data) {
                data = data.data;
                if(data.code === '0001') {
                  that.$Message.error("修改账号失败");
                  return;
                }
                if(data.code === '0002') {
                  that.$Message.info("账号已经存在（登录账号不能重复）");
                  return;
                }
                if(data.code === '0000') {
                  if (data.results == "0001"){
                    that.$Message.error('添加失败!');
                  }else if (data.results == 3){
                    that.$Message.error('该手机号已经被使用!');
                  }else if (data.results == 2){
                    that.$Message.error('该手机号已经被使用!');
                  }else if (data.results == 1){
                    that.$Message.error('该账号已经被使用!');
                  }else if(data.results == 0){
                    that.$Message.success("修改账号成功");
                    that.$router.push({path:'/account/manager'});
                  }

                }
              })


          });

        },
        //修改账号取消
        modifyAccountcancel : function () {
          this.$router.push({path:'/account/manager'});
        },
        //角色改变
        roleChange(roleBean) {
          if(roleBean.code === 'DZ-DIANZHANG'){
            this.shopSelectDisplay = true;
            this.modifyFrom.type = 1;
            this.companySelectDisplay = false;
            this.modifyFrom.companyId = null;
            this.listShop();
          } else if(roleBean.code === "DG-DAOGOU"){
            this.shopSelectDisplay = true;
            this.modifyFrom.type = 4;
            this.companySelectDisplay = false;
            this.modifyFrom.companyId = null;
            this.listShop();
          }else if(roleBean.code === 'DG-YUNYING'){
            this.companySelectDisplay = true;
            this.shopSelectDisplay = false;
            this.modifyFrom.type = 2;
            this.allCompany();
          }else if(roleBean.code === 'GL-YUNYING'){
            this.companySelectDisplay = false;
            this.shopSelectDisplay = false;
            this.addFrom.type = 2;
          } else {
            this.shopSelectDisplay = false;
            this.modifyFrom.shopId = null;
            this.modifyFrom.companyId = null;
          }
        },
        //所有店铺
        listShop() {
          let that = this;
          that.shopList = [];
          accountManagementModify.listShopApi({}, function (data) {
            data = data.data;
            if(data.code === '0001') {
              that.$Message.error("查询店铺失败");
              return;
            }
            if(data.code === '0000') {
              let row = data.results;
              for(let i = 0 ; i < row.length ; i++) {
                that.shopList.push(row[i]);
              }
            }
          });
        },
        check(){
          this.modifyValidate.password = this.passwordCheck;
          this.modifyValidate.confirmPassword = this.confirmPasswordCheck;
        },
        allCompany(){
          let that = this;
          let request = {
            userId:JSON.parse(sessionStorage.getItem("loginInfo")).userId
          };
          this.companyList = [];
          IncreaseData.listOfRetailCompany(request,function (data) {
            data = data.data;
            if (data.code === '0001') {
              that.$Message.error("查询零售公司出错!");
              return;
            }
            if (data.code === '0000') {
              data.results.forEach(da => {
                that.companyList.push(da);
              })
            }
          })
        },
      }

    }
</script>

<style scoped>

</style>
