<template>
  <el-dialog
   :close-on-click-modal="false"
    class="scrollbar-dialog"
    title="选择服务资源"
    :visible.sync="dialogVisible"
    width="900px"
    top="5vh"
    append-to-body>
    <el-scrollbar class="layer-content">
      <el-row>
        <el-col :span="6" style="margin-top: 20px">
          <project-nav @itemClick="projectClick"></project-nav>
        </el-col>
        <el-col :span="18">
          <el-form :model="formData" label-width="50px" @submit.native.prevent>
            <el-tabs v-model="activeName">
              <el-tab-pane label="代理服务" name="proxy" v-if="targetIncludes.includes('proxy')">
                <div class="search-header">
                  <div class="tool-common-wrap">
                    <div class="search-wrap">
                      <quick-query ref="quick" :placeholder="placeholder" :is-date="false" @quickSearch="proxySearch" />
                    </div>
                    <div class="btn-wrap">
                      <el-button type="primary" @click="proxySearch()"> 刷新</el-button>
                    </div>
                  </div>
                </div>
                <div class="table-wrap">
                  <el-table
                    ref="proxyList"
                    :data="proxyList"
                    v-loading="tableLoadingProxy"
                    highlight-current-row
                    style="width: 100%; margin-bottom: 10px"
                    size="mini"
                    @current-change="handleCurrentChange($event, 'proxyList')">
                    <el-table-column
                      type="index"
                      label="序号"
                      width="80"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="名称"
                      align="left"
                      show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                      prop="type"
                      label="资源类型"
                      align="center"
                      show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="选择" width="60" align="center">
                      <template slot-scope="scope">
                        <el-radio v-model="proxyListSelectIndex" :label="scope.$index" class="radioEmpty">{{ '' }}
                        </el-radio>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination :page="pageProxy" @requestData="queryProxyService" />
                </div>
              </el-tab-pane>
              <el-tab-pane label="业务服务" name="business" v-if="targetIncludes.includes('business')">
                <div class="search-header">
                  <div class="tool-common-wrap">
                    <div class="search-wrap">
                      <quick-query
                        ref="quick2"
                        :placeholder="placeholder"
                        :is-date="false"
                        @quickSearch="businessSearch" />
                    </div>
                    <div class="btn-wrap">
                      <el-button type="primary" @click="businessSearch()"> 刷新</el-button>
                    </div>
                  </div>
                </div>
                <div class="table-wrap">
                  <el-table
                    ref="businessList"
                    :data="businessList"
                    v-loading="tableLoadingBusiness"
                    highlight-current-row
                    style="width: 100%; margin-bottom: 10px"
                    size="mini"
                    @current-change="handleCurrentChange($event, 'businessList')">
                    <el-table-column
                      type="index"
                      label="序号"
                      width="80"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="名称"
                      align="left"
                      show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                      prop="type"
                      label="资源类型"
                      align="center"
                      show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="选择" width="60" align="center">
                      <template slot-scope="scope">
                        <el-radio v-model="businessListSelectIndex" :label="scope.$index" class="radioEmpty">{{ '' }}
                        </el-radio>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination :page="pageBusiness" @requestData="queryBusinessService" />
                </div>
              </el-tab-pane>
              <el-tab-pane label="消息流" name="flow" v-if="targetIncludes.includes('flow')">
                <div class="search-header">
                  <div class="tool-common-wrap">
                    <div class="search-wrap">
                      <quick-query ref="quick3" :placeholder="placeholder" :is-date="false" @quickSearch="flowSearch" />
                    </div>
                    <div class="btn-wrap">
                      <el-button type="primary" @click="flowSearch()"> 刷新</el-button>
                    </div>
                  </div>
                </div>
                <div class="tableWrap">
                  <el-table
                    ref="flowList"
                    :data="flowList"
                    v-loading="tableLoadingFlow"
                    highlight-current-row
                    style="width: 100%; margin-bottom: 10px"
                    size="mini"
                    @current-change="handleCurrentChange($event, 'flowList')">
                    <el-table-column
                      type="index"
                      label="序号"
                      width="80"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="名称"
                      align="left"
                      show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                      prop="type"
                      label="资源类型"
                      align="center"
                      show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="选择" width="60" align="center">
                      <template slot-scope="scope">
                        <el-radio v-model="flowListSelectIndex" :label="scope.$index" class="radioEmpty">{{ '' }}
                        </el-radio>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination :page="pageFlow" @requestData="queryFlow" />
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-form>
        </el-col>
      </el-row>
    </el-scrollbar>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { queryProxyService, queryBusinessService, queryFlow } from '@/api/esb_service'
import QuickQuery from '@/components/quickquery/QuickQuery'
import ProjectNav from '@/components/projectNav'

export default {
  name: 'ChooseTargetDialog',
  components: {
    ProjectNav,
    QuickQuery
  },
  data() {
    return {
      dialogVisible: false,
      activeName: 'proxy',
      tableLoadingProxy: false,
      tableLoadingBusiness: false,
      tableLoadingFlow: false,
      formData: {},
      proxyList: [],
      businessList: [],
      flowList: [],
      pageProxy: {
        pageSize: 5,
        pageNum: 1,
        total: 0
      },
      pageBusiness: {
        pageSize: 5,
        pageNum: 1,
        total: 0
      },
      pageFlow: {
        pageSize: 5,
        pageNum: 1,
        total: 0
      },
      proxyListSelectIndex: -1,
      businessListSelectIndex: -1,
      flowListSelectIndex: -1,
      selectList: null,
      currentId: '',
      quickQueryKeys: ['name'],
      sort: {
        orderby: 'createon',
        sort: 'desc'
      },
      placeholder: '请输入名称',
      projectId: localStorage.getItem('projectID')
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    targetId: {
      type: String,
      default: ''
    },
    targetType: {
      type: String,
      default: ''
    },
    flowId: {
      type: String,
      default() {
        return ''
      }
    },
    targetIncludes: {
      type: Array,
      default() {
        return ['proxy', 'business', 'flow']
      }
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
      if (val) {
        this.currentId = this.targetId
        console.log(8888888, this.currentId)
        if (this.targetType) {
          this.activeName = this.targetType === 'psManager' ? 'proxy' : this.targetType === 'bsManager' ? 'business' : this.targetType === 'flowManager' ? 'flow' : 'proxy'
          this.selectList = this.activeName + 'List'
        } else {
          this.activeName = this.targetIncludes[0]
        }
        this.queryProxyService()
        this.queryBusinessService()
        this.queryFlow()
      } else {
        this.activeName = 'proxy'
        this.formData = {}
      }
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    // 项目列表点击时
    projectClick(item) {
      this.projectId = item.id
      this.queryProxyService()
      this.queryBusinessService()
      this.queryFlow()
    },
    // 搜索
    powerSearch(val) {
      this.currentId = ''
      if (val === 'proxy') {
        this.pageProxy.pageNum = 1
        this.queryProxyService()
      } else if (val === 'business') {
        this.pageBusiness.pageNum = 1
        this.queryBusinessService()
      } else if (val === 'flow') {
        this.pageFlow.pageNum = 1
        this.queryFlow()
      }
    },
    proxySearch(data) {
      this.currentId = ''
      this.pageProxy.pageNum = 1
      if (data) {
        this.formData.proxyName = data.searchData
      } else {
        this.formData.proxyName = ''
      }
      this.queryProxyService()
    },
    businessSearch(data) {
      this.currentId = ''
      this.pageBusiness.pageNum = 1
      if (data) {
        this.formData.businessName = data.searchData
      } else {
        this.formData.businessName = ''
      }
      this.queryBusinessService()
    },
    flowSearch(data) {
      this.currentId = ''
      this.pageFlow.pageNum = 1
      if (data) {
        this.formData.flowName = data.searchData
      } else {
        this.formData.flowName = ''
      }
      this.queryFlow()
    },
    // 搜索过滤
    filterData(obj) {
      this.filters = []
      Object.keys(obj).forEach(key => {
        const filter = {
          key,
          opt: 'LIKE',
          type: 'S',
          value: obj[key]
        }
        if (filter.value) {
          this.filters.push(filter)
        }
      })
    },
    queryProxyService() {
      this.tableLoadingProxy = true
      this.proxyListSelectIndex = -1
      queryProxyService({
        filters: [
          {
            key: 'name',
            opt: 'LIKE',
            type: 'S',
            value: this.formData.proxyName
          },
          {
            key: 'project_id',
            opt: 'LIKE',
            type: 'S',
            value: this.projectId
          }
        ],
        attr: {
          flowId: this.flowId // 消息流的ID
        },
        orderby: 'createon',
        sort: 'desc',
        pageNum: this.pageProxy.pageNum,
        pageSize: this.pageProxy.pageSize
      }).then((rt) => {
        this.tableLoadingProxy = false
        if (rt.status === '200') {
          this.proxyList = rt.data.list || []
          if (this.targetType === 'psManager') {
            this.proxyList.forEach((item, index) => {
              if (this.currentId && this.currentId === item.id) {
                this.proxyListSelectIndex = index
              }
            })
          }
          this.pageProxy.total = rt.data.total
        }
      }).catch(e => {
        this.tableLoadingProxy = false
      })
    },
    queryBusinessService() {
      this.tableLoadingBusiness = true
      this.businessListSelectIndex = -1
      queryBusinessService({
        filters: [
          {
            key: 'name',
            opt: 'LIKE',
            type: 'S',
            value: this.formData.businessName
          },
          {
            key: 'project_id',
            opt: 'LIKE',
            type: 'S',
            value: this.projectId
          }
        ],
        orderby: 'createon',
        sort: 'desc',
        pageNum: this.pageBusiness.pageNum,
        pageSize: this.pageBusiness.pageSize
      }).then((rt) => {
        this.tableLoadingBusiness = false
        if (rt.status === '200') {
          this.businessList = rt.data.list || []
          if (this.targetType === 'bsManager') {
            this.businessList.forEach((item, index) => {
              if (this.currentId && this.currentId === item.id) {
                this.businessListSelectIndex = index
              }
            })
          }
          this.pageBusiness.total = rt.data.total
        }
      }).catch(e => {
        this.tableLoadingBusiness = false
      })
    },
    queryFlow() {
      this.tableLoadingFlow = true
      this.flowListSelectIndex = -1
      queryFlow({
        filters: [
          {
            key: 'name',
            opt: 'LIKE',
            type: 'S',
            value: this.formData.flowName
          },
          {
            key: 'project_id',
            opt: 'LIKE',
            type: 'S',
            value: this.projectId
          },
          {
            key: 'id',
            opt: 'NE',
            type: 'S',
            value: this.flowId // 消息流的ID
          }
        ],
        orderby: 'createon',
        sort: 'desc',
        pageNum: this.pageFlow.pageNum,
        pageSize: this.pageFlow.pageSize
      }).then((rt) => {
        this.tableLoadingFlow = false
        if (rt.status === '200') {
          this.flowList = rt.data.list || []
          if (this.targetType === 'flowManager') {
            this.flowList.forEach((item, index) => {
              if (this.currentId && this.currentId === item.id) {
                this.flowListSelectIndex = index
              }
            })
          }
          this.pageFlow.total = rt.data.total
        }
      }).catch(e => {
        this.tableLoadingFlow = false
      })
    },
    // 单选
    handleCurrentChange(val, list) {
      if (val) {
        console.log(val, list)
        this.currentId = ''
        this.selectList = list
        this.proxyListSelectIndex = -1
        this.businessListSelectIndex = -1
        this.flowListSelectIndex = -1
        if (list === 'proxyList') {
          this.clearBusinessSelected()
          this.clearFlowSelected()
        } else if (list === 'businessList') {
          this.clearProxySelected()
          this.clearFlowSelected()
        } else if (list === 'flowList') {
          this.clearProxySelected()
          this.clearBusinessSelected()
        }
        this[`${this.selectList}SelectIndex`] = this[this.selectList].findIndex(item => item.id === val.id)
      }
    },
    clearBusinessSelected() {
      if (this.$refs.businessList) {
        this.$refs.businessList.setCurrentRow()
      }
    },
    clearProxySelected() {
      if (this.$refs.proxyList) {
        this.$refs.proxyList.setCurrentRow()
      }
    },
    clearFlowSelected() {
      if (this.$refs.flowList) {
        this.$refs.flowList.setCurrentRow()
      }
    },
    submit() {
      let data
      if (this.proxyListSelectIndex >= 0) {
        data = JSON.parse(JSON.stringify(this[this.selectList][this.proxyListSelectIndex]))
      } else if (this.businessListSelectIndex >= 0) {
        data = JSON.parse(JSON.stringify(this[this.selectList][this.businessListSelectIndex]))
      } else if (this.flowListSelectIndex >= 0) {
        data = JSON.parse(JSON.stringify(this[this.selectList][this.flowListSelectIndex]))
      } else {
        this.$message({
          message: '请选择',
          type: 'error'
        })
        return
      }
      this.$emit('confirm', data, this.activeName)
      console.log(1111)
      this.dialogVisible = false
    },
    cancel() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
