<template>
  <h-view class="public-style authorizedAgent" title="授权经办人">
    <h-content>
      <list-item class="reg-content">
        <div class="repre-type">
          <span>授权类型：</span>
          <input
            type="radio"
            name="peopleType"
            v-model="staffType"
            @change="getRadioVal"
            value="已授权"
           
          />已授权
          <input
            type="radio"
            name="peopleType"
            v-model="staffType"
            @change="getRadioVal"
            value="未授权"
           
          />未授权
        </div>
        <!-- 法定代表人 -->
        <div v-if="staffType == '已授权'">

          <div class="list" v-for="(item,index) in authorizedList" :key="index">
            <div class="info_title">
              <div class="list_left" style="width:30%;">
                <img v-if="!item.choose" @click.stop="changeChoose(item)"
                  src="../../../assets/userRegister/unchoose.png"
                  alt
                  style="width:15px;height:15px;margin-right:5px;"
                />
                <img v-if="item.choose" @click.stop="changeChoose(item)"
                  src="../../../assets/userRegister/choosed.png"
                  alt
                  style="width:15px;height:15px;margin-right:5px;"
                />
              <div class="left">经办人<span>{{index+1}}</span> ：</div>   
              </div>
              <div class="list_right" style="width:61%;">
                <input type="text" class="edit"  readonly />
              </div>
            </div>
            <div class="info_all">
              <div class="info_list">
                <div class="list_left" style="width:39%;">
                  <img
                    src="../../../assets/userRegister/people.png"
                    alt
                    style="width:16px;height:16px;margin-right:5px;"
                  />
                  经办人姓名：
                </div>
                <div class="list_right" style="width:61%;">
                  <input type="text" class="edit" v-model="item.name" readonly />
                </div>
              </div>
              <div class="info_list">
                <div class="list_left" style="width:48%;">
                  <img
                    src="../../../assets/userRegister/idCard.png"
                    alt
                    style="width:16px;height:16px;margin-right:5px;"
                  />
                  经办人身份证号：
                </div>
                <div class="list_right" style="width:52%;">
                  <input type="text" class="edit" v-model="item.idNo" readonly />
                </div>
              </div>
              <div class="info_list">
                <div class="list_left" style="width:39%;">
                  <img
                    src="../../../assets/userRegister/phone.png"
                    alt
                    style="width:16px;height:16px;margin-right:5px;"
                  />
                  手机号码：
                </div>
                <div class="list_right" style="width:61%;">
                  <input type="text" class="edit" v-model="item.mobile" readonly />
                </div>
              </div>
              <div class="info_list">
                <div class="list_left" style="width:39%;">
                  <img
                    src="../../../assets/userRegister/package.png"
                    alt
                    style="width:16px;height:16px;margin-right:5px;"
                  />
                  是否授权：
                </div>
                <div v-if="item.authFlag == 'Y'" class="list_right" style="width:61%;">
                  已授权
                </div>
                <div v-if="item.authFlag == 'N'" class="list_right" style="width:61%;">
                  未授权
                </div>
              </div>
            </div>
          </div>
          <div v-if="authorizedList.length && showButton" class="button_all">
            <div
                class="next_step"
                @click="managerTransfer"
              >管理转移</div>
              <div
                class="next_step"
                @click="autohrized('N')"
              >取消授权</div>
              
          </div>
        </div>

        <!-- 未授权 -->
        <div v-if="staffType ==='未授权'">
          <div class="list" v-for="(item,index) in unAuthorizedList" :key="index">
            <div class="info_title">
              <div class="list_left" style="width:30%;">
                <img v-if="!item.choose" @click.stop="changeChoose(item)"
                  src="../../../assets/userRegister/unchoose.png"
                  alt
                  style="width:15px;height:15px;margin-right:5px;"
                />
                <img v-if="item.choose" @click.stop="changeChoose(item)"
                  src="../../../assets/userRegister/choosed.png"
                  alt
                  style="width:15px;height:15px;margin-right:5px;"
                />
              <div class="left">经办人<span>{{index+1}}</span> ：</div>   
              </div>
              <div class="list_right" style="width:61%;">
                <input type="text" class="edit"  readonly />
              </div>
            </div>
            <div class="info_all">
              <div class="info_list">
                <div class="list_left" style="width:39%;">
                  <img
                    src="../../../assets/userRegister/people.png"
                    alt
                    style="width:16px;height:16px;margin-right:5px;"
                  />
                  经办人姓名：
                </div>
                <div class="list_right" style="width:61%;">
                  <input type="text" class="edit" v-model="item.name" readonly />
                </div>
              </div>
              <div class="info_list">
                <div class="list_left" style="width:48%;">
                  <img
                    src="../../../assets/userRegister/idCard.png"
                    alt
                    style="width:16px;height:16px;margin-right:5px;"
                  />
                  经办人身份证号：
                </div>
                <div class="list_right" style="width:52%;">
                  <input type="text" class="edit" v-model="item.idNo" readonly />
                </div>
              </div>
              <div class="info_list">
                <div class="list_left" style="width:39%;">
                  <img
                    src="../../../assets/userRegister/phone.png"
                    alt
                    style="width:16px;height:16px;margin-right:5px;"
                  />
                  手机号码：
                </div>
                <div class="list_right" style="width:61%;">
                  <input type="text" class="edit" v-model="item.mobile" readonly />
                </div>
              </div>
              <div class="info_list">
                <div class="list_left" style="width:39%;">
                  <img
                    src="../../../assets/userRegister/package.png"
                    alt
                    style="width:16px;height:16px;margin-right:5px;"
                  />
                  是否授权：
                </div>
                <div v-if="item.authFlag == 'Y'" class="list_right" style="width:61%;">
                  已授权
                </div>
                <div v-if="item.authFlag == 'N'" class="list_right" style="width:61%;">
                  未授权
                </div>
              </div>
            </div>
          </div>
          <div v-if="unAuthorizedList.length && showButton" class="button_all">
              <div
                class="next_step"
                @click="autohrized('Y')"
              >授权</div>
              
          </div>
        </div>
      </list-item>
    </h-content>
  </h-view>
</template>

<script>
// import { Grid, GridItem } from "vux";

import { getUrlParam } from "@/scripts/utils";
export default {
  data() {
    return {
      staffType: "已授权",
      authorizedList:[], //已授权数组
      unAuthorizedList:[],//未授权数组,
      id:null,
      choosedList:[],//已选择数组
      obj:{},
      showButton:true,
      
    };
  },
  components: {
    // Grid,
    // GridItem
  },
  activated: function() {},
  updated: function() {},
  created() {
    let vm = this
    
   
  },
  beforeRouteEnter: function (to, form, next) {
    next(vm => {
       vm.id = vm.$route.params.id
       vm.init()
    })
  },
  methods: {
    // tab切换
      getRadioVal() {
      //  console.log(this.staffType);
      },
      changeChoose(item){
           let vm = this
            vm.$set(item,'choose',!item.choose)
            console.log(item);
      },
      //管理转移
      managerTransfer(){
   
        let vm=this
            vm.choosedList =[]
            vm.authorizedList.forEach(function (value) {
              if(value.choose){
                vm.obj.openId =value.openId
                vm.choosedList.push(vm.obj)
              }
            })
         
            if(vm.choosedList.length==1){
                      let url = process.env.rootPath + '/auth/api/individual/assignment' 
                      let param = {
                        "oldOpenId":window.localStorage.openId,
                        "openId":vm.choosedList[0].openId
                      }
                      vm.hlsPopup.showLoading('请稍等')
                  vm.$post(url, param).then(function (res) {
                    vm.hlsPopup.hideLoading()
                    if(res.code=='000000'){
                      hlsPopup.showLongCenter('管理员转让成功!')
                      vm.obj={}
                      vm.choosedList = []
                      vm.showButton =false

                      this.$router.push({
                        name: 'CompanyRegister'
                        })

                    
                    }else {
                      hlsPopup.showLongCenter(res.message)
                    }            
                  })

            }else{
              hlsPopup.showLongCenter('请选择经办人且只能转移给一人!')
            }
      },
      //授权
      autohrized(flag){
        
          let vm = this
          vm.choosedList = [];
          
          if(flag=='N'){ //已经授权的  取消授权
            vm.authorizedList.forEach(function (value) {
              if(value.choose){
                vm.obj.openId =value.openId
                vm.obj.authFlag = 'N'
                vm.choosedList.push(vm.obj)
              }
            })
          }else if(flag=='Y'){ //未授权的  授权
              vm.unAuthorizedList.forEach(function (value) {
              if(value.choose){
                vm.obj.openId =value.openId
                vm.obj.authFlag = 'Y'
                vm.choosedList.push(vm.obj)
              }
            })
          }
         
          if(vm.choosedList.length>0){
              let url = process.env.rootPath + '/auth/api/individual/authorize' 
              let param = vm.choosedList
              vm.hlsPopup.showLoading('请稍等')
          vm.$post(url, param).then(function (res) {
            vm.hlsPopup.hideLoading()
           
            if(res.code=='000000'){
              hlsPopup.showLongCenter('操作成功!')
              vm.obj={}
              vm.choosedList = []
              vm.init()
            }else {
              hlsPopup.showLongCenter(res.message)
            }            
          })

          }else{
            hlsPopup.showLongCenter('请选择经办人!')
          }
          
      },
      //数据初始化查询
      init(){
          let vm = this
          let url = process.env.rootPath + '/auth/api/individual/info/query'
          //91430722MA4L61HD37
          let param = {
            idNo:vm.id,
            managerAuthFlag:window.localStorage.managerAuthFlag
          }
          vm.hlsPopup.showLoading('请稍等')
          vm.$post(url,param).then(function (res) {
            vm.hlsPopup.hideLoading()
      
            if(res.success){
              res.rows.forEach(function (value) {
              // 是否被选中标志
           
              vm.$set(value,'choose',false) 
              if(value.authFlag =='Y'){
                vm.authorizedList.push(value)
              }else if(value.authFlag =='N'){
                vm.unAuthorizedList.push(value)
              }
            })

            }
            
            
          })
      }
  },
  
};
</script>
<style lang="less" type="text/less" scoped>
@import "../../../styles/vue-1px.less";

.authorizedAgent {
  .reg-content {
    padding: 20px;
    font-size: 14px;
    .repre-type {
      padding: 10px;
      border-bottom: 1px solid #d0d0d0;
      color: #11111187;
      font-size: 16px;
      font-weight: 700;
    }
    .info_all{
       width: 100%;
      border:  1px solid #d0d0d0;;
      
    }
    .info_title {
      width: 94%;
      margin-left: 3%;
      font-size: 14px;
      display: flex;
      display: -webkit-flex;
      .list_left {
        width: 35%;
        // margin-left: 3%;
        height: 50px;
        font-family: "微软雅黑";
        font-size: 14px;
        color: #636363;
        line-height: 50px;
        // float: left;
        display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: space-around;
      -webkit-align-items: center;
      -webkit-justify-content: space-around;
      }
      .list_right {
        // width: auto;
        // margin-right: 3%;
        height: 50px;
        color: #636363;
        line-height: 50px;
        // float: right;
      }
      .edit {
        width: 100%;
        // height: 50px;
        color: #898989;
        font-family: "微软雅黑";
        font-size: 14px;
        border: none;
      }
      .list_left2 {
        width: 97%;
        margin-left: 3%;
        height: 50px;
        font-family: "微软雅黑";
        font-size: 14px;
        color: #636363;
        line-height: 50px;
        // float: left;
      }
    }
    .info_list {
      width: 94%;
      margin-left: 3%;
      // height: 50px;
      // border-bottom: 1px solid #f2f2f2;
      font-size: 14px;
      border-bottom: 1px solid #d0d0d0;
      display: flex;
      display: -webkit-flex;
      .list_left {
        width: 35%;
        // margin-left: 3%;
        height: 50px;
        font-family: "微软雅黑";
        font-size: 14px;
        color: #636363;
        line-height: 50px;
        // float: left;
      }
      .list_right {
        // width: auto;
        // margin-right: 3%;
        height: 50px;
        color: #636363;
        line-height: 50px;
        // float: right;
      }
      .edit {
        width: 100%;
        // height: 50px;
        color: #898989;
        font-family: "微软雅黑";
        font-size: 14px;
        border: none;
      }
      .list_left2 {
        width: 97%;
        margin-left: 3%;
        height: 50px;
        font-family: "微软雅黑";
        font-size: 14px;
        color: #636363;
        line-height: 50px;
        // float: left;
      }
    }
    .info_list:last-child{
      border:none
    }
    .button_all{
      width: 100%;
      font-size: 14px;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: space-around;
      -webkit-align-items: center;
      -webkit-justify-content: space-around;
      .next_step{
       // width:30%;
        height:30px;
        line-height: 30px;
        text-align: center;
        border-radius:15px;
        background-color:#09bb07;
        color:#FFFFFF;
      }
    }
    .uppic {
      height: 100%;
      width: 100%;
      margin: 0 auto;
      opacity: 0;
      z-index: 1000;
      position: absolute;
    }
    .pic {
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .bus-license {
      width: 140px;
      height: 100px;
      margin: 10px auto;
      border: 1px solid #b2b2b2;
      border-radius: 8px;
      position: relative;
    }
    .next_step {
      width: 120px;
      height: 30px;
      border-radius: 15px;
      background-color: #999999;
      color: #ffffff;
      margin-top: 50px;
    }
  }
}

// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #home {
    }
  }
}

// iPhoneX Max适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    .platform-ios {
      #home {
      }
    }
  }
}
</style>
