<!-- **模块 **页面 -->
<template>
  <div class="box-body">
    <div class="search-box">
      <el-button type="primary" @click="addJump">添加部门</el-button>
    </div>
    <el-table
      stripe
      v-loading="loadingList"
      :data="deptList"
      @cell-mouse-enter="enterMouse"
      height="58.5vh"
    >
      <el-table-column prop="no" label="序号" width="80" align="center">
        <template slot-scope="scope">
          {{(page.currentPage - 1)*page.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="deptName" label="部门名称" />
      <el-table-column prop="deptShortName" label="部门简称" />
      <el-table-column prop="deptNameEn" label="部门英文名称">
        <template slot-scope="scope">{{ scope.row.deptNameEn }}</template>
      </el-table-column>
      <el-table-column prop="leadingCadre" label="负责人">
        <template slot-scope="scope">{{ scope.row.leadingCadre | empty }}</template>
      </el-table-column>
      <el-table-column prop="deptIntroduce" label="部门介绍">
        <template slot-scope="scope">{{ scope.row.deptIntroduce | empty }}</template>
      </el-table-column>
      <el-table-column prop label="操作" width="100" align="center">
        <yh-operaction :lable="lable" @skip="skipPage" />
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="page.currentPage"
      :limit.sync="page.pageSize"
      @pagination="getShipDeptList"
    />

    <!--添加编辑部门-->
    <el-dialog
      v-loading="loadingSave"
      :title="deptTitle"
      :visible.sync="addCompanyFlag"
      width="800px"
      center
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="two-form">
        <el-form
          ref="addDeptInfo"
          :rules="addDeptInfoRules"
          :model="addDeptInfo"
        >
          <el-form-item label="部门名称" prop="deptName">
            <el-input maxlength="50" v-model="addDeptInfo.deptName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="部门简称" prop="deptShortName">
            <el-input maxlength="50" v-model="addDeptInfo.deptShortName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="部门英文名称" prop="deptNameEn">
            <el-input maxlength="50" v-model="addDeptInfo.deptNameEn" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input maxlength="50" v-model="addDeptInfo.leadingCadre" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="部门介绍">
            <el-input type="textarea" :rows="2" maxlength="200" v-model="addDeptInfo.deptIntroduce" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveAdd">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import shoreApi from '../../api/organization/shore';
  import Pagination from '../../components/Pagination';
  import yhOperaction from '../../layout/components/operaction.vue';

  export default {
    name: "shipDept",
    components: {
      Pagination,
      yhOperaction
    },
    data() {
      return {
        addDeptInfo:{
          vesselBankFlag:'V',
          deptId:''
        },
        addDeptInfoRules:{
          deptName: [{ required: true, trigger: 'blur' }],
          deptNameEn: [{ required: true, trigger: 'blur' }],
          deptShortName: [{ required: true, trigger: 'change' }],
        },
        page:{
          compId: localStorage.getItem('enterprise-front-companyId'),
          pageSize:10,
          currentPage:1,
          vesselBankFlag:'V',
        },
        deptList:[],
        deptTitle:'',
        addCompanyFlag:false,
        loadingSave:false,
        total:0,
        msgRow:'',
      }
    },
    computed:{
      lable() {
        return [
          {
            lab: '编辑部门',
            click: 'editBtn',
          },
          {
            lab: '删除',
            click: 'deleteBtn',
          }
        ]
      }
    },
    created() {
      this.getShipDeptList()
    },
    methods: {
      // 鼠标移入获取当前行信息
      enterMouse(row, column, cell, event){
        this.msgRow = row;
      },
      // 操作下拉
      skipPage(msg) {
        if(msg === 'editBtn'){
          this.getEdit(this.msgRow)
        }else{
          this.getDelete(this.msgRow)
        }
      },
      // 删除
      getDelete(row){
        this.$confirm('确认要删除改部门吗？','提示',{
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          shoreApi.remove({deptId: row.deptId}).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功',
              showClose: true
            });
            this.getShipDeptList();
          }).catch((err) => {
            if(err === 'MANAGEMENT_008'){
              this.$message({
                message: '当前部门不允许被删除!',
                type: 'warning',
                showClose: true
              })
            }
          });
        }).catch(() => {});
      },
      // 编辑
      getEdit(row){
        this.addDeptInfo = JSON.parse(JSON.stringify(row));
        this.deptTitle = '编辑部门';
        this.addCompanyFlag = true;
      },
      cancel() {
        this.addCompanyFlag = false;
        this.loadingSave = false;
        this.$refs.addDeptInfo.resetFields();
        this.addDeptInfo = {};
      },
      saveAdd(){
        this.$refs.addDeptInfo.validate(valid => {
          if (valid) {
            this.loadingSave = true;
            this.addDeptInfo.vesselBankFlag = "V";
            if(this.addDeptInfo.deptId){
              shoreApi.changeInfo(this.addDeptInfo).then(response=>{
                this.cancel();
                this.$message({
                  message: '修改成功',
                  type: 'success',
                  showClose: true
                })
                this.getShipDeptList();
              }).catch((err)=>{})
            }else{
              shoreApi.create(this.addDeptInfo).then(response=>{
                this.cancel();
                this.$message({
                  message: '保存成功',
                  type: 'success',
                  showClose: true
                })
                this.getShipDeptList();
              }).catch((err)=>{})
            }
          } else {
            this.$message({
              message: '带*号的为必填项！',
              type: 'error',
              showClose: true
            })
            return false
          }
        })
      },
      addJump(){
        this.deptTitle = '添加部门';
        this.addDeptInfo.deptId = null;
        this.addCompanyFlag = true;
      },
      getClear() {
        this.page.underCompId = null;
        this.getShipDeptList();
      },
      getShipDeptList(){
        this.loadingList = true;
        shoreApi.getDeptPageByCompId(this.page).then(response=>{
          this.deptList = response.records;
          this.total = response.total;
          this.loadingList = false;
        })
      }
    }
  }
</script>

<style scoped>

</style>
