<template>
  <div class="role">
    <el-row>
      <el-col :span="24">
        <div class="content">
          <p class="title">单位管理</p>
          <p class="search">
            <span class="searchVal">
                <span>单位名称：</span>
                <el-input v-model="searchName" size="medium" placeholder="请输入"></el-input>
            </span>
            <span class="searchVal">
              <span>单位类别：</span>
              <el-select v-model="classVal" placeholder="请选择">
                <el-option
                  v-for="item in companyClass"
                  :label="typeCompany(item)"
                  :value="typeCompany(item)">
                </el-option>
              </el-select>
            </span>
            <span class="button" @click="search">搜索</span>
            <span class="button add" @click="addCompany">新建单位</span>
            <span class="button import">导入单位
            <el-upload
              style="margin-top: -35px;"
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="uploadFile">
              <el-button size="small" type="primary" style="width: 100px;height: 34px;background-color: rgba(0,0,0,0);border: none"></el-button>
            </el-upload>
            </span>
          </p>
          <div class="common-table">
            <el-table
              highlight-current-row
              max-height="840"
              :data="allData"
              stripe
              style="width: 100%;margin-bottom: 10px;">
              <el-table-column
                prop="name"
                label="单位名称"
                align="center">
              </el-table-column>
              <el-table-column
                :formatter="typeCompany"
                prop="type"
                label="单位类别"
                align="center">
              </el-table-column>
              <el-table-column
                :formatter="statusCompany"
                prop="status"
                label="准入状态"
                align="center">
              </el-table-column>
              <el-table-column
                prop="number"
                label="联系方式"
                align="center">
              </el-table-column>
              <el-table-column
                prop="type"
                label="查看详情"
                align="center">
                <template slot-scope='scope'>
                  <span class="change" @click="details(scope.row)"><img src="./img/look.png">查看</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size=8
              background
              layout="prev, pager, next"
              :total="totalLength">
            </el-pagination>
          </div>
          <!-- 分页 -->
        </div>
      </el-col>
    </el-row>
    <!-- 新增 / 编辑 公用弹窗 -->
    <el-dialog :visible.sync="openModel" class="model">
      <img src="../../../assets/img/close.png" class="closeModel" @click="reset()">
      <component :is="components" :name="companyName" :list="companyList" @on-cancel="reset" @on-name="getName"></component>
    </el-dialog>
  </div>
</template>

<script>
import newCompany from './newCompany';
import './company.css'
export default {
    data () {
        return {
            searchName: '',
            openModel: false, // 弹框开关
            components: '', // 当前弹框内容
            companyName: '',
            companyList: '',
            classVal: '',
            companyClass: [
                {type: '1'},
                {type: '2'},
                {type: '3'},
                {type: '4'},
                {type: '5'},
                {type: '6'},
                {type: '7'},
                {type: '8'}
            ],
            totalLength: 0,
            currentPage: 1, // 分页第一页
            pageSize: 8,  // 每页个数
            allData: [],
            typeVal: { // 单位类别
                '1': 'AK中心',
                '2': '实施系统管理员',
                '3': '监理方',
                '4': '集成商',
                '5': '建设方',
                '6': '专家',
                '7': '测试机构',
                '8': '开发商'
            }
        }
    },
    components: {
        newCompany
    },
    mounted() {
        let val = this.$store.getters.getSidebar;
        if (val[val.length - 1].path !== 'company') {
            val.push(
                {
                    name: '单位管理',
                    path: 'company'
                }
            )
            this.$store.commit('changeSidebar', val);
        }
        this.unit();
    },
    methods: {
        // 获取单位类别
        unit() {
            this.$server.getUnitFindAll().then(res => {
                this.allData = res.data.data;
                this.totalLength = res.data.data.length;
            })
        },
        // 单位搜索
        search(val) {
            let message = {
                address: '',
                name: '',
                number: '',
                principal: '',
                score: 0,
                status: 0,
                type: 0
            };
            if (val !== 'page') { // 点击搜索按钮，不是点击分页跳转
                if (!this.searchName || !this.classVal) {
                    this.$message.error('单位名称和单位类别不可为空！');
                    return;
                }
                this.companyClass.map(item => {
                    let type = this.typeVal[item.type];
                    if (this.classVal === type) {
                        message = item;
                    }
                })
            }
            let data = {
                page:  this.currentPage,
                pageSize: this.pageSize,
                t: message
            }
            this.$server.postUnitSearch(data).then(res => {
                this.allData = res.data.data.rows;
                this.totalLength =  this.allData.length;
            })
        },
        // 点击分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        // 当前页数
        handleCurrentChange(val) {
            this.currentPage = val;
            this.search('page')
        },
        // 关闭弹框
        reset(val) {
            this.openModel = false;
            this.components = '';
            this.companyName = '';
            if (val) {
                this.unit()
            }
        },
        // 获取单位名称
        getName(val) {
            if (val !== '') {
                this.companyName = val;
                this.components = 'authority';
            }
        },
        // 单位准入状态转换
        statusCompany (row) {
            return row.status === 1 ? '已准入': '未被准入'
        },
        // 单位类别转换
        typeCompany (row) {
            return this.typeVal[String(row.type)]
        },
        // 新建单位
        addCompany() {
            this.openModel = true;
            this.components = 'newCompany';
        },
        // 单位导入
        uploadFile (file){
            let formdata = new FormData();
            formdata.append('file', file.raw);
            this.$server.postUnitLoad(formdata).then(res => {
                if (res.data.msg === 'OK') {
                    this.$message.success('导入单位成功！');
                } else {
                    this.$message.error('导入单位失败！');
                }
            }).catch(err => {
                this.$message.error('导入单位失败！');
            })
        },
        // 单位查看详情
        details(val) {
            this.$router.push({name: 'companyDetails',params:{'value': val, 'type': this.typeVal}});
        }
    }
}
</script>
<style scoped>

</style>
