<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.agentName" 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.agentIdNo" 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.managerAuthFlag == 'Y'" class="list_right" style="width:61%;">
                  已授权
                </div>
                <div v-if="item.managerAuthFlag == '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.agentName" 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.agentIdNo" 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.managerAuthFlag == 'Y'" class="list_right" style="width:61%;">
                  已授权
                </div>
                <div v-if="item.managerAuthFlag == 'N'" class="list_right" style="width:61%;">
                  未授权
                </div>
              </div>
            </div>
          </div>
          <div v-if="unAuthorizedList.length && showButton" class="info_all" style="border: none;">
            <div class="list_left"
                 style="width:100%;color: #898989;font-family: '微软雅黑';border: none;line-height: 150%;">
              <img src="../../../assets/userRegister/choosed.png"
                   alt
                   style="width:15px;height:15px;margin-right:5px;"
              />
              “授权”须知：您即将授权“未授权”的经办人员作为贵司的签约授权代表，一旦您点击了“授权”按钮，相应的授权经办人员即完全取得代表贵司签约的权利，其所有签约操作行为都完全代表贵司。请您作为贵司签约授权管理人，在完全理解和明白前述点击“授权”按钮的法律后果并确保贵司愿意接受该种法律后果的情况下点击“授权”按钮。如您因误操作点击了“授权”按钮，请您立即进行取消授权的操作，否则贵司也将承担因误操作所引发的一切法律后果。
            </div>
          </div>
          <div v-if="unAuthorizedList.length && showButton" class="button_all">
            <!--<div-->
            <!--class="next_step"-->
            <!--@click="autohrized('Y')"-->
            <!--&gt;{{content}}-->
            <!--</div>-->
            <h-button id="unAuthorized" class="next_step2" :disabled="ableFlag" @click.native="autohrized('Y')">{{content}}</h-button>

          </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,
        totalTime: 5,
        canClick: false, //添加canClick
        content: '同意授权',
        ableFlag: true
      };
    },
    components: {
      // Grid,
      // GridItem
    },
    activated: function () {
    },
    updated: function () {
    },
    created() {
      let vm = this
    },

    beforeRouteEnter: function (to, form, next) {
      next(vm => {
        vm.id = window.localStorage.AuthSocialCode;
        vm.init()
      })
    },
    methods: {
      // tab切换
      getRadioVal() {
        if (this.staffType == '未授权') {
          let vm = this
          vm.canClick = false;
          vm.ableFlag = true;
          vm.content = '同意授权' + vm.totalTime + 's'
          let clock = window.setInterval(() => {
            vm.totalTime--
            vm.content = '同意授权' + vm.totalTime + 's'
            if (vm.totalTime < 0) {
              window.clearInterval(clock)
              vm.content = '同意授权'
              vm.totalTime = 5
              vm.canClick = true  //这里重新开启
              vm.ableFlag = false;
            }
          }, 1000);
        }
      },
      changeChoose(item) {
        let vm = this
        vm.$set(item, 'choose', !item.choose)
      },
      //管理转移
      managerTransfer() {
        let vm = this
        vm.choosedList = []
        vm.authorizedList.forEach(function (value) {
          vm.obj = {};
          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
          }

          hlsPopup.showConfirm({
            title: '“授权管理转移”须知：',
            content: '您即将转移您的管理员权限，一旦您点击了“管理转移”按钮，相应的授权经办人员应该在获得贵司线下授权函的前提下，即获得贵司管理员的身份。请您作为贵司的管理员，在完全理解和明白前述点击“管理转移”按钮的法律后果并确保贵司愿意接受该种法律后果的情况下点击“管理转移”按钮。如您因误操作点击了“管理转移”按钮，请您立即进行取消转移的操作，否则贵司也将承担因误操作所引发的一切法律后果。',
            onConfirm: function (index) {
              if (index === 1) {
                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) {
        if (flag == 'Y' && !this.canClick) return  //改动的是这两行代码
        let vm = this
        vm.choosedList = [];
        if (flag == 'N') { //已经授权的  取消授权
          vm.authorizedList.forEach(function (value) {
            vm.obj = {};
            if (value.choose) {
              vm.obj.openId = value.openId
              vm.obj.managerAuthFlag = 'N'
              vm.choosedList.push(vm.obj);
            }
          })
        } else if (flag == 'Y') { //未授权的  授权
          vm.unAuthorizedList.forEach(function (value) {
            vm.obj = {};
            if (value.choose) {
              vm.obj.openId = value.openId
              vm.obj.managerAuthFlag = 'Y'
              vm.choosedList.push(vm.obj);
            }
          })
        }
        if (vm.choosedList.length > 0) {
          let url = process.env.rootPath + '/auth/api/individual/authorize'
          let param = vm.choosedList
          if (flag == 'Y') {
            // hlsPopup.showConfirm({
            //   title: '“授权”须知',
            //   content: '您即将授权“未授权”的经办人员作为贵司的签约授权代表，一旦您点击了“授权”按钮，相应的授权经办人员即完全取得代表贵司签约的权利，其所有签约操作行为都完全代表贵司。请您作为贵司签约授权管理人，在完全理解和明白前述点击“授权”按钮的法律后果并确保贵司愿意接受该种法律后果的情况下点击“授权”按钮。如您因误操作点击了“授权”按钮，请您立即进行取消授权的操作，否则贵司也将承担因误操作所引发的一切法律后果。',
            //   onConfirm: function (index) {
            //     if (index === 1) {
            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 if (flag == 'N') {
            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'
        let param = {
          idNo: vm.id
        }
        vm.hlsPopup.showLoading('请稍等')
        vm.$post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()

          if (res.success) {
            vm.authorizedList = [];
            vm.unAuthorizedList = [];
            res.rows.forEach(function (value) {
              // 是否被选中标志
              vm.$set(value, 'choose', false)
              if (value.managerAuthFlag == 'Y') {
                vm.authorizedList.push(value)
              } else if (value.managerAuthFlag == '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;
      }
      .next_step2 {
        width: 120px;
        /*height: 30px;*/
        border-radius: 15px;
        background-color: #09bb07;
        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>
