<template>
  <div class="obpm-developer">
    <div class="obpm-title">
      <div class="d-inline-block">
        <i class="el-icon-folder title-icon"></i>
        <div class="title-name d-inline-block ml-2">{{$t("developer.title")}}</div>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button type="primary" size="small" @click="addDeveloper">{{$t("btns.add")}}</el-button>
        <el-button type="danger" plain size="small" @click="remove">{{$t("btns.remove")}}</el-button>
      </div>
    </div>
    <publicTable ref="publictable" 
      @onRowClick='onRowClick' 
      @handleSelectionChange='handleSelectionChange'
      @handleSizeChange='pageSizeChange'
      @handleCurrentChange='currPageChange'
      @updataParams='updataParams'
      @getData='getDevelopertions'
    ></publicTable>
    <!-- 添加开发者用户 -->
    <el-dialog :title="$t('developer.add_developer')" :visible.sync="dialogFormVisible" v-if="dialogFormVisible" width='60%' @closed="resetDevelop">
      <div class="obpm-main">
        <div class="main-title">
          <el-form ref="form" :inline="true" :model="dialog" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="params.name"
                @change="getDialogDeveloperList"
                size="small" clearable
                :placeholder="$t('placeholder.name')"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="params.loginno"
                @change="getDialogDeveloperList"
                size="small" clearable
                :placeholder="$t('placeholder.account')"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div id="contentTable">
          <el-table
            ref="multipleTable"
            :data="dialogTableData.datas"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleDialogSelectionChange"
            >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="name"
              :label="$t('developer.name')"
              min-width="30%">
            </el-table-column>
            <el-table-column
              prop="loginno"
              :label="$t('developer.account')"
              min-width="30%">
            </el-table-column>
            <el-table-column
              prop="email"
              :label="$t('developer.email')"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <el-pagination
              class="text-right"
              @size-change="dialogHandleSizeChange"
              @current-change="dialogHandleCurrentChange"
              :current-page="dialogTableData.pageNo"
              :page-sizes="[10, 25, 50, 100]"
              :page-size="10"
              background
              layout="total, prev, pager, next, sizes"
              :total="dialogTableData.rowCount">
            </el-pagination>
        </div>
      </div>
      <div slot="footer"  class="bar d-inline-block float-right">
        <el-button size="small" @click="closeDialog">{{$t('btns.exit')}}</el-button>
        <el-button type="primary" size="small" @click="addDeveloperDialog">{{$t('btns.add')}}</el-button>
      </div>

    </el-dialog>
  </div>
</template>
<script>
import { getDeveloperList,deleteDeveloperList,getDialogDeveloperList,addDialogDeveloperData } from "@/service/AdvancedToolAPI.js";
import publicTable from "@/components/Common/publicTable.vue";
import {delMsg} from '@/utils/elementui'

export default {
  name: "developer",
  data () {
    return {
      formInline: {
        inputName: "",        //名称
        inputLoginno: "",     //账号
      },
      params: {
        id: "",
        name:"",
        loginno: "",
        pageNo: 1,
        linesPerPage: 10
      },
      tableHeight: "100",
      multipleSelection: [],   //将获取选中的数组放进去
      dialogFormVisible: false,     //对话框
      dialog: {
        inputName: "",        //名称
        inputLoginno: "",     //账号
      },
      dialogTableData: {},
      multipleDialogSelection: [],   //将获取选中的数组放进去
      tableData:{params:[{name:'name',label:this.$t('label.name'),value:""},{name:'loginno',label:this.$t('label.account'),value:""}]},

    }
  },
  
  components:{
    publicTable,
  },
  mounted(){
    this.getScollerHeight();
    this.getDevelopertions();
  },
  methods:{
    //填充方法
    onRowClick(){
      return false;
    },
    //更新参数
    updataParams(obj){
      Object.assign(this.params,obj)
    },
    //列表当前页变化
    currPageChange(val){
      this.params.pageNo=val;
      this.getDevelopertions();
    },
    //列表页码变化
    pageSizeChange(val){
      this.params.linesPerPage=val;
      this.getDevelopertions();
    },
    /**
     * 动态计算页面table高度
     */
    getScollerHeight() {
      setTimeout(() => {
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //60 头部， 32 面包屑， 41 第一层页签， 40 第二层页签， 50 列表标题， 71 查询， 20 父组件外边距, 32分页
        this.tableData.tableHeight = (clientHeight - 60 - 32 - 41 - 40 - 50 - 71 - 20 - 40) + 'px';
        this.$nextTick(() => {
          if(this.$refs.publictable)
            this.$refs.publictable.init(this.tableData);
        })
      }, 100)
    },
    /**
     *  获取开发者列表的数据
     */
    async getDevelopertions(){
      let appId = sessionStorage.getItem("appId");
      let response = await getDeveloperList(this.params, appId)
      if (response.data.errcode == 0) {
        let data=response.data.data;
        this.tableData.columns=[
          {prop:'name',label:this.$t('developer.name')},
          {prop:'loginno',label:this.$t('developer.account')},
          {prop:'email',label:this.$t('developer.email')}
        ];
        this.tableData.data=data;
        this.$nextTick(() => {
          if(this.$refs.publictable)
            this.$refs.publictable.init(this.tableData);
        })
      }
    },
    
    /**
     * 重置查询名称值
     */
    resetName(){
      this.params.loginno='';
      this.params.name='';
      this.getDevelopertions();
    },
    /**
     * 获取选中的表格数据
     */
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    /**
     * 移除
     */
    async remove(){
      let selectData = this.multipleSelection;
      let data = [];
      for(let i=0;i<selectData.length;i++){
        data.push(selectData[i].id);
      }
      if(data.length == 0){
        return this.$message.error(this.$t('msg.select_more'))
      }
      let appId = sessionStorage.getItem("appId");
      try{
        await delMsg(this.$t('msg.delConfirm'), this.$t('msg.tip'))
        const response = await deleteDeveloperList(appId, data)
        if (response.data.errcode == 0) {
          this.$message.success(this.$t('msg.remove_ss'));
          this.getDevelopertions();
        }
      }catch(e){
        console.log(e)
      }
    },
    /**
     * 添加开发者用户
     */
    addDeveloper(){
      this.$store.dispatch("rightHelpPageParams", { title: this.$t('label.add_desirer'), url: "application/application_info_advancedTools_developer_list_addDeveloper_help.html" });
      this.params={
        id: "",
        name:"",
        loginno: "",
        pageNo: 1,
        linesPerPage: 10
      },
      this.dialogFormVisible = true;
      this.getDialogDeveloperList();
    },
    /**
     * 重置添加的数据
     */
    resetDevelop(){
      this.multipleDialogSelection = []
    },
    //获取弹出框列表信息
    async getDialogDeveloperList(){
      let appId = sessionStorage.getItem("appId");
      let response = await getDialogDeveloperList(this.params, appId)
      if (response.data.errcode == 0) {
        this.dialogTableData = response.data.data;
      }
    },
    /**
     * 对话框获取选中数据
     */
    handleDialogSelectionChange(val){
      this.multipleDialogSelection = val;
    },
    /**
     * 添加用户 -->弹出框
     */
    async addDeveloperDialog(){
      let data = [];
      for(let i=0;i<this.multipleDialogSelection.length;i++){
        data.push(this.multipleDialogSelection[i].id);
      }
      if(data.length == 0){
        this.$message.error(this.$t('msg.select_more'))
        return false
      }
      let appId = sessionStorage.getItem("appId");
      let response = await addDialogDeveloperData(appId,data)
      if (response.data.errcode == 0) {
        this.$message.success(this.$t('msg.add_ss'));
        this.dialogFormVisible = false;
        this.getDevelopertions();
        // 重置信息
        this.multipleDialogSelection = []
      }
    },
    /**
     * 退出
     */
    closeDialog(){
      this.$store.dispatch("rightHelpPageParams", { title: this.$t('label.desirer_list'), url: "application/application_info_advancedTools_developer_list_help.html" });
      this.params={
        id: "",
        name:"",
        loginno: "",
        pageNo: 1,
        linesPerPage: 10
      },
      this.dialogFormVisible = false;

    },
    /**
     * 当前页
     */
    dialogHandleCurrentChange(val) {
      this.params.pageNo=val
      this.getDevelopertions();
    },
    /**
     * 切换分页，每页显示多少条
     */
    dialogHandleSizeChange(val){
      this.params.linesPerPage=val;
        this.getDevelopertions();
    },
  },
  watch: {
    "$store.state.rightHelpPageParams": {
      handler() {
        if (this.$store.state.rightHelpFrame) {
          this.$store.state.rightHelpFrame.contentWindow.showHelpContentHtml(this.$store.state.rightHelpPageParams.title, this.$store.state.rightHelpPageParams.url);
        }
      },
      deep: true,
    },
  },
}
</script>