<template>
  <div>
    <el-row>
      <!--查询-->
      <el-col :span="24">
        <Form v-show="searchOpen" inline onsubmit="return false" :label-width="70">
          <label class="label-sign" />
          <Form-item class="search-item" label="企业名称:">
            <el-input v-model="formObj.name" placeholder="请输入企业名称" clearable @keyup.enter.native="_formSearch" />
          </Form-item>
          <Form-item class="search-item" label="类型:">
            <el-select v-model="formObj.type" placeholder="请选择状态" style="width: 100%" clearable>
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </Form-item>
          <Form-item class="search-item" label="状态:">
            <el-select v-model="formObj.status" placeholder="请选择状态" style="width: 100%" clearable>
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </Form-item>
          <Form-item class="search-btn">
            <el-button type="primary" @click="_formSearch">
              搜索
            </el-button>
          </Form-item>
        </Form>
      </el-col>
      <!--操作-->
      <el-col :span="24">
        <btn-list
          :msg="btn"
          :open="searchOpen"
          :show-search-btn="true"
          class="contHide"
          @on-result-change="_btnClick"
        />
      </el-col>
      <!-- 表格 -->
      <el-col :span="24">
        <element-table
          ref="pageTable"
          :table-height="tableHeight"
          :get-page="getPage"
          :icon-msg="iconMsg"
          :opt-col-width="160"
          @on-result-change="_tableResultChange"
        >
          <el-table-column
            v-for="item in pageColumns"
            :key="item.id"
            sortable
            show-overflow-tooltip
            :prop="item.key"
            :label="item.title"
            :width="item.width"
            :min-width="200"
            :fixed="item.fixed?item.fixed:undefined"
          >
            <template slot-scope="scope">
              <a v-if="item.detail" @click.stop="_detailModal(scope.row.id)">{{ scope.row[item.key] }}</a>
              <div v-else-if="item.key==='type'">
                <div v-if="scope.row[item.key]===1">
                  第一方企业
                </div>
                <div v-else-if="scope.row[item.key]===2">
                  第三方企业
                </div>
                <div v-else>
                  其他
                </div>
              </div>
              <div v-else-if="item.key==='notifyWechat'">
                <div v-if="scope.row[item.key]===0" class="red-color">
                  否
                </div>
                <div v-else class="blue-color">
                  是
                </div>
              </div>
              <div v-else-if="item.key==='status'">
                <div v-if="scope.row[item.key]===0" class="red-color">
                  禁用
                </div>
                <div v-else class="blue-color">
                  正常
                </div>
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
        </element-table>
      </el-col>
    </el-row>
    <!-- 添加、编辑 -->
    <companyEdit ref="editModal" @on-result-change="_page" />
    <!-- 查看详情 -->
    <companyDetail ref="detailModal" />
    <!-- 添加管理员 -->
    <companyManagerEdit ref="managerModal" @on-result-change="_page" />
    <!--分配模块-->
    <allotModule ref="allotModuleModal" />
    <!--流程配置-->
    <processConfig ref="processConfig" />
    <!-- 分配表格列权限 -->
    <roleColProZtree ref="colProModal" />
  </div>
</template>
<script>
import { sysCompany } from '../../../api'
import companyEdit from './companyEdit'
import companyDetail from './companyDetail'
import companyManagerEdit from './companyManagerEdit'
import allotModule from './allotModule'
import processConfig from './processConfig/processConfig'
import roleColProZtree from './table-col/roleColProZtree'

export default {
  components: {
    companyEdit,
    companyDetail,
    companyManagerEdit,
    allotModule,
    processConfig,
    roleColProZtree
  },
  data() {
    return {
      searchOpen: false,
      btn: [{ type: 'success', id: 'sys-company-add', name: '添加' }],
      iconMsg: [
        { type: 'pt-edit', id: 'sys-company-edit', name: '编辑' },
        { type: 'pt-admin', id: 'sys-company-admin', name: '管理员' },
        { type: 'pt-back', id: '', name: '分配模块' },
        { type: 'pt-config', id: '', name: '流程配置' },
        {
          type: 'pt-table',
          id: 'sys-role-col-permission',
          name: '分配表格权限'
        }
      ],
      formObj: {
        name: '',
        type: '',
        status: ''
      },
      typeList: [
        {
          value: '1',
          label: '第一方企业'
        },
        {
          value: '2',
          label: '第三方检测'
        },
        {
          value: '3',
          label: '其他'
        }
      ],
      statusList: [
        {
          value: '0',
          label: '禁用'
        },
        {
          value: '1',
          label: '正常'
        }
      ],
      pageColumns: [
        {
          title: '企业名称',
          key: 'name',
          width: 260,
          detail: true,
          fixed: true
        },
        { title: '管理员', key: 'manager', width: 150 },
        { title: '二级域名', key: 'domain', width: 150 },
        { title: '类型', key: 'type', width: 120 },
        { title: '营业执照编号', key: 'busno', width: 200 },
        { title: '通知微信', key: 'notifyWechat', width: 100 },
        { title: '状态', key: 'status', width: 100 },
        { title: '联系人', key: 'contact', width: 200 },
        { title: '联系方式', key: 'contactWay', width: 200 },
        { title: '排序', key: 'sort', width: 100 },
        { title: '备注', key: 'remark' }
      ],
      getPage: {}
    }
  },
  computed: {
    tableHeight: function() {
      if (this.searchOpen) {
        return this.$tableHeight('search')
      } else {
        return this.$tableHeight('noSearch')
      }
    }
  },
  mounted() {
    this._formSearch()
  },
  methods: {
    _iconClick(res, data) {
      switch (res) {
        case '编辑':
          this._editModal(data.id)
          break
        case '管理员':
          this.$refs.managerModal._open(data)
          break
        case '分配模块':
          this.$refs.allotModuleModal._open(data)
          break
        case '流程配置':
          this.$refs.processConfig._open(data.id)
          break
        case '分配表格权限':
          this.$refs.colProModal._open(data.id)
          break
      }
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await sysCompany.page(this.$serializeForm(this.formObj))
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _detailModal(id) {
      this.$refs.detailModal._open(id)
    },
    _editModal: async function(id) {
      const result = await sysCompany.getById(id)
      this.$refs.editModal._open(result)
    },
    _btnClick(msg) {
      switch (msg) {
        case '添加':
          this.$refs.editModal._open()
          break
        case 'search':
          this.searchOpen = !this.searchOpen
          break
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
      }
    }
  }
}
</script>
