<template>  
  <div class="container serviceRegistration" 
      v-loading.body="dialogLoading"
      element-loading-text="拼命加载中">
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>

    <div class="containerIn" ref="tableDataRef">
      <div class="searchTop" style="padding: 10px;">
        <search-form 
          :search-form="searchForm"
          :type-value="typeValue"
          @submit="search" 
          style="padding:0;float:left;">
        </search-form>
        <el-button type="primary" @click="handleRegister('register')" style="height:40px;margin:0;float:right;">注册</el-button>
      </div>
      
      <table-form
        v-loading.body="isLoadingTableData"
        :colData="colData" 
        :data="tableData" 
        :max-height="height"
        :row-key="rowKey"
        :submiting="submiting"
        border 
        :stripe="true"
        :sortable="sortable"
        >
        <el-table-column
          v-for="item in colData"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          :sortable="item.sortable || sortable">
    
          <template slot-scope="scope">
            <div v-if="item.prop === 'urls'">
              <p v-for="(value, index) in scope.row.urls" :key="index">{{value}}</p>
            </div>
            <div v-else-if="item.prop ==='auditstatus'" :class="scope.row.auditstatus !== '0' && scope.row.auditstatus !== '1' ? 'redStyle': ''">
              {{ (scope.row.auditstatus === '0') ? '未审批': (scope.row.auditstatus === '1') ? '审批通过': '审批未通过'}}
            </div>
            <div v-else-if="item.prop ==='isvalid'" :class="scope.row.isvalid !== '01' && scope.row.isvalid !== '02' ? 'redStyle': ''">
              {{ (scope.row.isvalid === '01') ? '可用': '不可用'}}
            </div>
            <div v-else>
              {{ scope.row[item.prop] }}
            </div>
          </template>
        </el-table-column>

        <el-table-column slot="fixedColumn" label="操作" fixed="right" width="250" align="center">
          <template slot-scope="scope">
            <el-button style="display:inline-block;margin-left:4px;"
              size="mini"
              plain
              @click="handleDetail($event, scope.row)">
              查看
            </el-button>
            <el-button style="display:inline-block;margin-left:4px;"
              size="mini"
              plain
              :disabled="scope.row.auditstatus !== '0'"
              @click="handleEdit($event, scope.row)">
              修改
            </el-button>
            <el-popover style="display:inline-block;margin-left:2px;"
              ref="popover"
              trigger="click"
              placement="top"
              width="160"
              v-model="scope.row.visible">
              <p style="font-size:14px;padding: 6px 0;">确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" @click="scope.row.visible = false">取消</el-button>
                <el-button type="primary" size="mini" :loading="submiting" @click="handleDelete(scope.row, scope.$index)">确定</el-button>
              </div>
        
              <div slot="reference">
                <el-button
                  size="mini"
                  plain
                  type="danger"
                  @click.stop.prevent="scope.row.visible = true">
                  删除
                </el-button>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </table-form>

      <el-row type="flex" justify="end" class="tableBottom">
        <el-pagination
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          >
        </el-pagination>
      </el-row>
    </div>

    <my-dialog
      v-if="dialogOnoff"
      :form-data="regData"
      :close="isCloseDialog"
      :row-edit-onoff="rowOnoff"
      :is-readonly="isReadonly"
      :approve="approve"
      :detail-show="detailShow"
      :regist-title="registTitle"
      @dialog-sure="sureRegister"
      @dialog-cancel="cancelRegister"
      :closeOnClickModal="true"
      >
    </my-dialog>
  </div>
</template>

<script>
  import Util from '../../utils/util.js'
  import BreadCrumb from '@/components/BreadCrumb.vue'
  import SearchForm from '@/components/SearchForm.vue'
  import TableForm from '@/components/Table.vue'
  import MyDialog from './otherComponent/EditDialog.vue'

  import Api from '@/api/index.js'

  export default { 
    name: 'ServiceMonitor',
    components: { 
      BreadCrumb,
      SearchForm,
      TableForm,
      MyDialog
    },
    data () { 
      return {
        dialogLoading: false,
        isLoadingTableData: false,
        dialogOnoff: false,
        rowOnoff: false, 
        isReadonly: true,
        approve: true,
        detailShow: true,
        regData: {},
        // 搜索
        searchForm: {
          typeOptions: [],
          inputLabel: '',
          inputPlaceholder: '',
          selectLabel: '',
          selectPlaceholder: ''
        },
        typeValue: '',
        isCloseDialog: false,
        isQuery: false,
        // regionSelection: null,
        colData: [],
        responseData: null,
        tableData: [],
        currentPage: 1,
        pageSize: 15,
        pageSizes: [15, 30, 50, 100],
        total: null,
        selectTypeId: '1',
        isShowRegister: false,
        breadCrumbList: [],
        userguid: '', // 登录id
        serviceName: '', // 关键字
        status: '', // 审批状态
        // startDate: '',// 开始日期
        // endDate: '',// 结束日期,
        submiting: false,
        statusOnoff: false,
        operateOnoff: true,
        rowKey: 'id',
        height: '330',
        sortable: true,
        registTitle: '注册服务'
      }
    },
    computed: { 
      gisopUserInfo () {
        return this.$store.state.gisopUserInfo
      }
    },
    watch: { 
      gisopUserInfo (val) {
        if (val.userguid === undefined) { 
          return false
        } else { 
          this.userguid = val.userguid.trim()
          this.getManageRegisterService()
        }
      }
    },
    destroyed () {
      window.removeEventListener('resize', this.handleFn)
    },
    mounted () { 
      this.init()
    },
    methods: { 
      // 数据初始化
      init () {
        this.colData = [
          {prop: 'nameCn', label: '名称', width: 180, sortable: true, align: 'center'},
          {prop: 'createpeople', label: '注册人', width: 120, sortable: true, align: 'center'},
          {prop: 'createtime', label: '注册时间', width: 114, sortable: true, align: 'center'},
          {prop: 'urls', label: '注册地址', sortable: true, align: 'center'},
          {prop: 'auditstatus', label: '审批状态', width: 114, sortable: true, align: 'center'},
          {prop: 'isvalid', label: '是否可用', width: 114, sortable: true, align: 'center'}
        ]         
        
        this.breadCrumbList = [
          { title: '服务管理' },
          { title: '服务注册申请' }
        ]
        this.searchForm = { 
          typeOptions: [{ // 类型选择列表
              value: '',
              label: '所有记录'
            }, {
              value: '0',
              label: '未审批'
            }, {
              value: '1',
              label: '审批通过'
            }, {
              value: '-1',
              label: '审批未通过'
            }
          ],
          inputLabel: '关键字',
          inputPlaceholder: '请输入服务名称关键字',
          selectLabel: '审批状态',
          selectPlaceholder: '选择审批状态'
        }

        this.userguid = this.gisopUserInfo.userguid
        if (this.userguid === undefined) { 
          return false
        } else {
          this.userguid = this.userguid.trim()
          this.getManageRegisterService()
        }

        // 钩子
        this.$nextTick(() => {
          this.handleFn()
        })

        window.addEventListener('resize', this.handleFn)
      },
      // resize的函数
      handleFn () {
        this.height = this.$refs.tableDataRef.clientHeight - 120
      },
      // 获取列表数据
      getManageRegisterService () { 
        this.isLoadingTableData = true
        Api.getManageRegisterService(this.currentPage, this.pageSize, this.serviceName, '', this.status, this.startDate, this.endDate)
          .then(data => {
            this.isLoadingTableData = false
            let datas = data.data
            if (data.status === 0) {
              if (datas.total > 0) { 
                this.total = datas.total
                datas.result.forEach(item => {
                  if (item.urls !== null) {
                    item.urls = item.urls.split(',')
                  }
                })
                this.tableData = datas.result
              } else { 
                this.tableData = []
                this.total = null
                this.$message({
                  type: 'warning',
                  message: '获取数据为空！'
                })
              }
            } else {
              this.$message({
                type: 'error',
                message: '获取数据失败！'
              })
            }
          })
          .catch(res => {
            this.isLoadingTableData = false

            this.$message({
              type: 'error',
              message: '请求数据失败'
            })
          })
      },
      // 列表查询
      search (data) {
        this.serviceName = data[0]
        this.status = data[1]
        
        if (data[2].length !== 0) { 
          this.startDate = data[2][0]
          this.endDate = data[2][1]
        } else { 
          this.startDate = ''
          this.endDate = ''
        }
        this.currentPage = 1
        this.getManageRegisterService()
      },
      // 表单删除行的操作
      handleDelete (row, idx) { 
        let ids = row.serviceid
        this.submiting = true

        Api.deleteManageRegisterService(ids)
        .then(data => {
          if (data.status === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!',
              duration: 2000
            })
            this.submiting = false
            this.tableData.splice(idx, 1)
          } else {
            this.submiting = false
            this.$message({
              type: 'error',
              message: '删除失败，请重试!',
              duration: 2000
            })
          }
        }).catch(res => {
            this.$message({
              type: 'error',
              message: '请求数据失败'
            })
          })
      },

      // 注册
      handleRegister (isDo) {
        this.registTitle = '注册服务'
        this.dialogOnoff = true
        this.detailShow = true
        this.approve = false
      },
      // 查看
      handleDetail(e, rowData) { 
        this.registTitle = '查看服务'
        this.dialogOnoff = true
        this.rowOnoff = true
        this.isReadonly = false     
        this.detailShow = false
        this.regData = rowData
        this.detail = false
        this.isCloseDialog = true
        this.approve = true
        this.isApproval = true
      },
      // 修改
      handleEdit (e, rowData) {
        this.registTitle = '修改服务'
        this.dialogOnoff = true
        this.detailShow = true
        this.rowOnoff = true
        this.isReadonly = true
        this.regData = rowData
        this.isCloseDialog = false
        this.approve = false
      },
      // 确定注册或修改 userguid
      sureRegister (datas) {
        this.dialogLoading = true
        var formData = new FormData()
        formData.append('nameCn', datas[0].nameCn)
        formData.append('nameEn', datas[0].nameEn)
        formData.append('urls', datas[0].urls)        
        formData.append('type', datas[0].type)
        formData.append('directoryid', datas[0].directoryid)
        formData.append('publicyn', datas[0].publicyn)
        formData.append('descriptions', datas[0].descriptions)
        formData.append('auditstatus', '0')

        if (datas[1]) { // 修改
          formData.append('serviceid', this.regData.serviceid)
          this.rowOnoff = false
          Api.editManageRegisterService(formData)
          .then(data => {
            this.dialogLoading = false
            this.getManageRegisterService()
            if (data.status === 0) { 
              this.dialogOnoff = false
              this.$message({
                type: 'success',
                message: '修改成功'
              })
            } else { 
              this.$message({
                type: 'error',
                message: '请求数据错误'
              })
            }
          })
          .catch(res => {
            this.$message({
              type: 'error',
              message: '请求数据失败'
            })
          })
        } else {         
          formData.append('createpeople', this.userguid)
          Api.registerManageRegisterService(formData)
          .then(data => {
            this.dialogLoading = false
            if (data.status === 0) {
              this.dialogOnoff = false
              this.getManageRegisterService()
              this.$message({
                type: 'success',
                message: '注册成功'
              })
            } else {
              this.$message({
                type: 'warning',
                message: '注册失败'
              })
            }
          })
          .catch(res => {
            this.$message({
              type: 'error',
              message: '请求数据失败'
            })
          })
        }
      },
      // 取消或关闭注册弹窗
      cancelRegister () { 
        this.dialogOnoff = false
        this.rowOnoff = false
      },
      // 分页操作
      handleSizeChange (val) {
        this.pageSize = val
        if (this.tableData !== null) { 
          this.getManageRegisterService()
        }
      },
      handleCurrentChange (currentPage) {
        this.currentPage = currentPage
        if (this.tableData !== null) {
          this.getManageRegisterService()
        }
      }
    }
  }
</script>

<style lang="scss">
  .serviceRegistration {
    .dialog { 
      .el-form-item__label { 
        width: 100px;
      }
      .dialog-content { 
        height: 450px;
      }
      .el-form-item {
        width: 100%;
      } 
      .el-form-item__content { 
        min-width: 400px;
      }
      .btn { 
        text-align: center;
      }

      
    }

    .tableIn {
      flex: 1;
    }
    .tableBottom {
      padding-top: 10px;
      height: 51px;
    }

    .redStyle {
      color: red;
    }

    /* .el-pagination { 
      padding: 0 16px;
      text-align: right;
    } */
  }
</style>
