<template>
  <div class="institutions">
    <modify-organ>
      <template v-slot:header>机构权限管理</template>
    </modify-organ>
    <list-head-two :operator="operator" @UserInfo="UserInfofn"></list-head-two>
    <!-- <list-the-content :data="tableData" @PagingOption="PagingOptionNumber" @Pagination="PaginationNumber" :total="total"> -->
    <list-the-content @UpLoat="ToLoad" :ShowHidden="ShowHidden">
      <template #table="{ data }">
        <el-table
          :row-class-name="tableRowClassName"
          :header-cell-style="headClass"
          :data="list"
          class="tableBox"
          max-height="680px"
        >
          <el-table-column type="index" label="序号" :index="indexMethod" width="180"></el-table-column>
          <el-table-column label="业务类型">
            <template slot-scope="scope">
             <div>
              {{ getRIGHT_CODE_LookUp(scope.row.RIGHT_CODE) }}
             </div>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span style="color:rgba(98, 230, 111, 1)">
                {{ scope.row.CUSTOMER_LIST.CUST_STATUS }}
                已开通
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作员">
            <template slot-scope="scope">
              <div>
                {{ scope.row.CUSTOMER_LIST[0].CUST_NAME}}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column  prop="address" label="操作">
            <template v-if="false">
              <el-button type="text">编辑</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </template>
    </list-the-content>
  </div>
</template>
<script>
import ListTheContent from "@/components/ListTheContent/ListTheContent.vue"; // 列表内容
// import ListHead from "@/components/Listhead/ListHead.vue"; // 列表头
import ModifyOrgan from "@/common/components/ContentHeader.vue"; //公共头部
import ListHeadTwo from "../components/Listhead/ListHeadTwo"  // 列表头
export default {
  name: "OrganAuthManage",
  components: {
    ModifyOrgan,
    // ListHead,
    ListTheContent,
    ListHeadTwo,
  },
  created() {
    this.Acquisition()
  },
  data() {
    return {
      The_dictionary : this.$store.state.rightDict,
      operator: "申请新业务类型",
      // flag: false,
      pageNum: "", // 序号
      pageSize: "", // 序号
      list:[], // 数据
      input_value_one:"", //输入框
      input_value_two:"", //输入框
      tableData:[], // 假数据
      more:1, // 页码
      ShowHidden:0, // 显示隐藏
    };
  },
  methods: {
    Acquisition() {
        fql.getUserInfo().then(res => {
          const GetUserInfo = this.$store.state.userInfo  // 操作员
          let objdata = {
            RIGHT_TYPE:"", //权限类型
            RIGHT_CODE:this.input_value_one, //业务类型
            CUST_NAME:this.input_value_two, // 客户姓名
            SYSTEM_ID:"79", // 子系统编号
            BUSIN_TYPE:"CWJRY", // 业务类型
            OPERATOR:GetUserInfo.USER_CUSTID, // 机构USERCODE
            PAGE_NO: 1, //页码
            PAGE_SIZE: 12, // 每页显示条数
            USER_CODE:GetUserInfo.USERCODE,
            INST_USER_CODE:GetUserInfo.USERCODE,
          }
          if(objdata.RIGHT_CODE === "") {
              objdata.RIGHT_TYPE = ""
          }else {
             objdata.RIGHT_TYPE = "1"
          }
          let that = this
          fql.WFW_USER_MANAGE_SERVICE['机构权限列表查询'](objdata).then(function (obj) {
            console.log(obj)
            that.list = obj.list
            that.ShowHidden = obj.RNUM
          })
        })
      },
      // 加载  更多
      ToLoad () {
        this.more ++ // 点击加一页
        fql.getUserInfo().then(res => {
          const GetUserInfo = this.$store.state.userInfo  // 操作员
          let objdata = {
            RIGHT_TYPE:"", //权限类型
            RIGHT_CODE:this.input_value_one, //业务类型
            CUST_NAME:this.input_value_two, // 客户姓名
            SYSTEM_ID:"79", // 子系统编号
            BUSIN_TYPE:"CWJRY", // 业务类型
            OPERATOR:GetUserInfo.USER_CUSTID, // 机构USERCODE
            PAGE_NO: this.more, //页码
            PAGE_SIZE: 12, // 每页显示条数
            USER_CODE:GetUserInfo.USERCODE,
            INST_USER_CODE:GetUserInfo.USERCODE,
          }
          if(objdata.RIGHT_CODE === "") {
              objdata.RIGHT_TYPE = ""
          }else {
             objdata.RIGHT_TYPE = "1"
          }
          let that = this
          fql.WFW_USER_MANAGE_SERVICE['机构权限列表查询'](objdata).then(function (obj) {
            console.log(obj)
            // that.list = obj.list
            that.list.push(...obj.list)
            if(obj.list.length === 0) {
              // that.$message('没有更多了');
              // return
              that.$message({
              showClose: true,
              message: '没有更多了',
              type: 'warning'
             });
            }
          })
        })
      },
      //  斑马纹
    headClass() {
      return "background:#375AC7;";
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(row);
      if ((rowIndex + 1) % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    // 序号
    indexMethod(index) {
        let currentPage = this.pageNum // 当前页码
        let pageSize = this.pageSize // 每页条数
        return index + 1 + (currentPage - 1) * pageSize;  // 返回表格数据
      },
    UserInfofn(data) {
        this.input_value_one = data.input_value_one
        this.input_value_two = data.input_value_two
        //  重新渲染页面
        this.Acquisition()
      },
  },
  computed: {
    //  判断 字典名称的对应关系
    getRIGHT_CODE_LookUp(){ 
      return (The_dictionary)=>{
        for(let i = 0; i< this.The_dictionary.length; i++){
          if(this.The_dictionary[i].code == The_dictionary.slice(6,8)){
            return this.The_dictionary[i].label +The_dictionary
          }
        }
      }
    }
  }
};
</script>
<style scoped>
.institutions {
  background-color: #242b61;
  height: 96%;
  border-radius: 6px;
}
.header span {
  float: left;
  color: #ffffff;
  font-size: 14px;
  margin-top: 16px;
}
.el-table .el-table__cell.gutter {
  background: rgb(55, 90, 199);
}
</style>