<template>
  <div class="obpm-sofetware-list">
    <div class="obpm-title">
      <div class="d-inline-block">
        <i class="el-icon-office-building title-icon"></i>
        <div class="title-name d-inline-block ml-2">{{$t('home.software_list')}}</div>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button type="primary" size="small" @click="newSoftware">{{$t("btns.new")}}</el-button>
        <el-button type="primary" size="small" @click="deleteList" v-if="showListVisiable">{{$t("btns.delete")}}</el-button>
        <!-- <el-button plain size="small">编辑</el-button> -->
      </div>
    </div>
    <div v-if="!showListVisiable">
      <div class="mt-3">
        <el-form :inline="true" class="demo-form-inline" @submit.native.prevent size="mini" >
          <el-form-item>
            <el-input v-model="params.searchword" 
              :placeholder="$t('placeholder.name')"
              @keyup.enter.native="searchApplictions"
              ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="searchApplictions" type="primary" plain >{{$t("btns.query")}}</el-button>
            <el-button @click="resetApplictions">{{$t("btns.reset")}}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div  v-loading="loading">
        <el-row :gutter="12">
          <el-col :span="6" v-for="item in data.datas" :key="item.id" class="marginB10">
            <el-card shadow="hover" class="obpm-card" :body-style="{ padding: '0px' }">
              <div class="card-header is-justify-end el-row--flex h24">
                <div class="delete" @click="showDeleteMessageBox(item.id)">
                  <i class="el-icon-close"></i>
                </div>
              </div>
              <div @click="toLink(item)">
                <div class="obpm-img">
                  <img src="../../assets/images/onventional.png" v-if="item.type == 0">
                  <img src="../../assets/images/platform.png" v-if="item.type == 1">
                </div>
                <div class="card-content">
                  <div class="obpm-software-name">
                    <span>{{item.name}}</span>
                    <div class="float-right status">
                      <span v-if="item.activated" class="active">{{$t("home.active")}}</span>
                      <span v-if="!item.activated" class="disable">{{$t("home.disable")}}</span>
                    </div>
                  </div>
                  <div class="obpm-description">
                    <span>{{item.description}}</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <div class="adminListMore" @click="showList" v-if="data.rowCount > 10">
              <img src="../../assets/images/Arrow.png" alt="" class="adminListMoreImg">
            </div>
          </el-col>
        </el-row>
      </div>
      
    </div>
    <publicTable ref="publictable" 
      v-if="showListVisiable"
      :showBackBtn = "true"
      @onRowClick='onRowClick' 
      @handleSelectionChange='handleSelectionChange'
      @handleSizeChange='pageSizeChange'
      @handleCurrentChange='currPageChange'
      @updataParams='updataParams'
      @getData='searchApplictions'
      @back="backApplications"
    ></publicTable>

    <el-dialog
      :title="$t('home.new_software')"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <div class="obpm-mode d-flex">
        <div class="obpm-conventional d-flex border mr-2">
          <img class="obpm-img" src="../../assets/images/onventional.png" alt="">
          <img class="obpm-imghover" src="../../assets/images/onventional_hover.png" alt="">
          <h2>{{$t('home.regular_mode')}}</h2>
          <p>{{$t('home.include_process')}}</p>
          <div class="createbtn" id="0" @click="createSoftware('0')">
            {{$t('home.create')}}
          </div>
        </div>
        <div class="obpm-platform d-flex border">
          <img class="obpm-img" src="../../assets/images/platform.png" alt="">
          <img class="obpm-imghover" src="../../assets/images/platform_hover.png" alt="">
          <h2>{{$t('home.bpm_mode')}}</h2>
          <p>{{$t('home.independent_process')}}</p>
          <div class="createbtn" id="1" @click="createSoftware('1')">
            {{$t('home.create')}}
          </div>
        </div>
        <!-- <div>常规模式</div>
        <div>平台模式</div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import publicTable from "@/components/Common/publicTable.vue";
import { getApplicationsList, deleteApplications } from "@/service/CommonApi.js";
import {delMsg} from '@/utils/elementui'
export default {
  name: 'softwarelist',
  data(){
    return{
      params:{
        searchword: "",
        pageNo: 1,
        linesPerPage: 10
      },
      dialogVisible: false,
      data: [],
      tableData:{params:[{name:'name',label:'名称',value:""}]},
      showListVisiable:false,
      multipleSelection: [], // 表格选中的数据
      loading: false,

    }
  },
  components:{
    publicTable,
  },

  mounted(){
    this.$emit("clearBreadcrumb");
    this.searchApplictions();
  },

  methods:{
    //填充方法
    onRowClick(row){
      let item=row.__ob__.value
       this.$emit("toLink", item);
      // 将值存在sessionStorage中
      sessionStorage.setItem('software', JSON.stringify(item))
    },
    //更新参数
    updataParams(obj){
      if(obj.name){
        this.params.searchword = obj.name
      }else{
        Object.assign(this.params,obj)
      }
    },
    //列表当前页变化
    currPageChange(val){
      this.params.pageNo=val;
      this.searchApplictions();
    },
    //列表页码变化
    pageSizeChange(val){
      this.params.linesPerPage=val;
      this.searchApplictions();
    },
    /**
     * 获取选中的表格数据
     */
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    /**
     * 删除数据
     */
    async deleteList(){
      if(this.multipleSelection.length > 0){
        let selectData = this.multipleSelection;
        let data = [];
        for(let i=0;i<selectData.length;i++){
          data.push(selectData[i].id);
        }
        const response = await deleteApplications(data);
        if (response.data.errcode == 0) {
          this.searchApplictions();
          this.$message.success(this.$t('msg.del_ss'));
        }
      }else{
        this.$message.error(this.$t('msg.select_more'))
        return false
      }
    },
    /**
     * 动态计算页面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  - 50 - 71 - 20 - 40) + 'px';
        this.$nextTick(() => {
          if(this.$refs.publictable)
            this.$refs.publictable.init(this.tableData);
        })
      }, 100)
    },
    showList(){
      this.showListVisiable=true;
      
      this.getScollerHeight();
    },
    /**
     * 获取软件列表
     */
    searchApplictions(){
      let params = this.params;
      this.loading=true
      getApplicationsList(params, {
        onSucess: response => {
          if (response.data.errcode == 0) {
            this.loading=false
            this.data = response.data.data;
            this.tableData.columns=[{prop:'name',label:'名称'}];
            this.tableData.data=response.data.data;
            this.$nextTick(() => {
              if(this.$refs.publictable)
                this.$refs.publictable.init(this.tableData);
            })
          }
        }
      })
    },
    //退出软件列表
   backApplications(){ 
      this.params.pageNo=1
      this.searchApplictions()
      this.showListVisiable = false
    },

    /**
     * 重置查询
     */
    resetApplictions(){
      let params = {
        ...this.params,
        searchword: "",
      }
      this.params = params;
      this.searchApplictions();
    },

    /**
     * 打开软件详情
     */
    toLink(item){
      this.$emit("toLink", item);
      // 将值存在sessionStorage中
      sessionStorage.setItem('software', JSON.stringify(item))
    },

    /**
     * 打开新建软件对话框
     */
    newSoftware(){
      this.dialogVisible = true;
    },

    /**
     *关闭新建软件对话框 
     */
    handleClose(){
      this.dialogVisible = false;
    },

    /**
     * 创建软件
     * {id} 0: 常规模式， 1平台模式
     */
    createSoftware(id){
      this.$emit("createSoftware", id);
      this.dialogVisible = false;
    },

    /**
     * 删除软件
     */
    async showDeleteMessageBox(id){
      try{
        await delMsg(this.$t('msg.del_childModule'), this.$t('msg.tip'))
        const response = await deleteApplications([id])
        if (response.data.errcode == 0) {
          this.searchApplictions();
          this.$message.success(this.$t('msg.del_ss'));
        }
      }catch(e){
        console.log(e)
      }
    }
  }
  
}
</script>