<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;">
        </search-form>
      </div>

      <table-form 
        v-loading.body="isLoadingTableData"
        :colData="colData" 
        :data="tableData" 
        :colWidth="120"
        :max-height="height"
        :row-key="rowKey"
        :submiting="submiting"
        :isShowOper="isShowOper"
        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'">
              <el-tooltip class="item" effect="dark" content="审批" placement="bottom">
                <i class="el-icon-edit" @click="handleStatusEdit($event, scope.row)" v-show="scope.row.auditstatus === '0'"></i>
              </el-tooltip>
              <span></span>
              <span v-show="scope.row.auditstatus !== '0'"  :class="scope.row.auditstatus !== '1' ? 'redStyle': ''">{{ (scope.row.auditstatus === '1')? '审批通过':'审批未通过'}}</span>
            </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="140" 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>
          </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"
      :regist-title="registTitle"
      :row-edit-onoff="rowOnoff"
      :is-readonly="isReadonly"
      :is-approval="isApproval"
      :detail-show="detailShow"
      @dialog-sure="sureRegister"
      @dialog-cancel="cancelRegister"
      >
    </my-dialog>
  </div>
</template>

<script>
  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,
        isShowOper: false,
        dialogOnoff: false,
        rowOnoff: false,
        isReadonly: false,
        isApproval: false,
        detailShow: true,
        regData: {},
        // 搜索
        searchForm: {
          typeOptions: [],
          inputLabel: '',
          inputPlaceholder: '',
          selectLabel: '',
          selectPlaceholder: ''
        },
        typeValue: '0',

        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: '0', // 审批状态
        // startDate: '',//开始日期
        // endDate: '',//结束日期,
        submiting: false,
        statusOnoff: false,
        operateOnoff: true,
        rowKey: 'domainId',
        sortable: true,
        height: '330',
        registTitle: '审批服务',
        isCloseDialog: false
      }
    },
    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 () {
        let _this = this
        _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: '请求数据失败'
            })
          })
      },
      // 审批
      handleStatusEdit (e, rowData) {
        this.registTitle = '审批服务'
        this.dialogOnoff = true
        this.rowOnoff = true
        this.isReadonly = false
        this.isApproval = true
        this.detailShow = true
        this.regData = rowData
        this.isCloseDialog = true
        // console.log(rowData.serviceid);
      },
      // 确定审批
      sureRegister (datas) {
        this.dialogLoading = true
        var formData = new FormData()
        formData.append('nameCn', this.regData.nameCn)
        formData.append('nameEn', this.regData.nameEn)
        formData.append('urls', this.regData.urls)
        formData.append('directoryid', this.regData.directoryid)
        formData.append('publicyn', this.regData.publicyn)
        formData.append('descriptions', this.regData.descriptions)
        formData.append('auditstatus', datas[0].auditstatus)
        formData.append('serviceid', this.regData.serviceid)

        this.rowOnoff = false
        Api.editManageRegisterService(formData)
        .then(data => {
          this.dialogLoading = false
          this.dialogOnoff = false
          this.getManageRegisterService()
          if (data.status === 0) { 
            this.$message({
              type: 'success',
              message: '审批成功'
            })
          } else { 
            this.$message({
              type: 'error',
              message: '请求数据错误'
            })
          }
        })
        .catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
      },
      // 查看
      handleDetail(e, rowData) {
        this.registTitle = '查看服务'
        this.dialogOnoff = true
        this.rowOnoff = true
        this.isReadonly = false
        this.isApproval = false
        this.detailShow = false
        this.regData = rowData
        this.isCloseDialog = true
      },
      // 取消或关闭注册弹窗
      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 { 
        width: 400px;
      }
      .btn { 
        text-align: center;
      }
    }

    .el-icon-edit {
      cursor: pointer; 
    }

    .tableIn {
      flex: auto;
    }
    
    .tableBottom {
      padding: 15px 10px 0;
      height: 51px;
    }
    .redStyle {
      color: red;
    }

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