<template>
  <div>
    <el-dialog :close-on-click-modal="false" @close="closeDialog" title="选择" class="scrollbar-dialog" :visible.sync="dialog" width="900px" top="5vh" append-to-body>
        <div style="padding:20px">
            <h3 style="margin-bottom:20px">代理服务</h3>
            <el-table
            :data="tableList.businessData"
            style="width: 80%;margin-bottom: 20px;"
            border>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="domain" align="center" label="domain">
                    <template slot-scope="scope" >
                        <el-input disabled v-model="scope.row.domainNamef">
                            <el-button slot="append" icon="el-icon-search" @click="addDomain(scope.row, scope.$index, 'business')"></el-button>
                        </el-input>
                    </template>
                </el-table-column>
            </el-table>
            <h3 style="margin-bottom:20px">适配器</h3>
            <el-table
            :data="tableList.connerctorData"
            style="width: 80%;margin-bottom: 20px;"
            border>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="types" align="center" label="适配器">
                    <template slot-scope="scope" >
                        <el-input disabled v-model="scope.row.domainNames">
                            <el-button slot="append" icon="el-icon-search" @click="addDomain(scope.row, scope.$index, 'connector')"></el-button>
                        </el-input>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="confirm('ruleForm')">确定</el-button>
        </span>
    </el-dialog>
    <SelectArea v-model="areaDialog" :connectorId="domainInfoDTO.id" @confirm="getArea" />
    <SelectConnetor v-model="connetorDialog" :connectorId="domainInfoDTO.protocol" @confirm="getArea" />
  </div>
</template>

<script>
import SelectArea from '@/views/esb_service/global_variable/SelectArea'
import SelectConnetor from './connetor'
export default {
  components: {
    SelectArea,
    SelectConnetor
  },
  data() {
    return {
      dialog: false,
      areaDialog: false,
      connetorDialog: false,
      tableList: {
        businessData: [],
        connerctorData: []
      },
      domainInfoDTO: {},
      pIndex: '',
      ptype: ''
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    value(val) {
      if (val) {
        this.dialog = val
      }
    },
    row: {
      handler(val) {
        console.log('val1111', val)
        if (val) {
          this.tableList = val
          console.log(this.tableList)
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    addDomain(row, index, type) {
      this.ptype = type
      this.pIndex = index
      if (this.ptype === 'business') {
        this.areaDialog = true
      } else {
        this.connetorDialog = true
      }
      this.domainInfoDTO = row
    },
    getArea(data) {
      let title = ''
      if (this.ptype === 'business') {
        this.areaDialog = false
        title = '是否批量为此域?'
      } else {
        this.connetorDialog = false
        title = '是否批量设置同类型的为此适配器?'
      }
      console.log(data)
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.ptype === 'business') {
          this.tableList.businessData.forEach((item, index) => {
            item.domainID = data.id
            item.domainNamef = data.name
            this.$set(this.tableList.businessData, index, item)
          })
        } else {
          this.tableList.connerctorData.forEach((item, index) => {
            if (item.protocol === data.connectorType) {
              item.connector = data
              item.domainNames = data.name
              this.$set(this.tableList.connerctorData, index, item)
            }
          })
        }
      }).catch(() => {
        if (this.ptype === 'business') {
          this.tableList.businessData[this.pIndex].domainID = data.id
          this.tableList.businessData[this.pIndex].domainNamef = data.name
          this.$set(this.tableList.businessData[this.pIndex], this.pIndex, this.tableList.businessData[this.pIndex])
        } else {
          this.tableList.connerctorData[this.pIndex].connector = data
          this.tableList.connerctorData[this.pIndex].domainNames = data.name
          this.$set(this.tableList.connerctorData[this.pIndex], this.pIndex, this.tableList.connerctorData[this.pIndex])
        }
      })
    },
    closeDialog() {
      this.dialog = false
      this.$emit('confirm', false)
    },
    confirm(name) {
      let domain = {
        domainInfos: [],
        connectorInfos: []
      }
      this.tableList.businessData.forEach((item, index) => {
        domain.domainInfos.push({
          proxy_id: item.id,
          domainID: item.domainID,
          domainName: item.domainNamef
        })
      })
      this.tableList.connerctorData.forEach((item, index) => {
        domain.connectorInfos.push({
          service_id: item.id,
          serviceType: item.typex !== '业务服务' ? 'proxyService' : 'businessService',
          connectorId: item.connector.id,
          connector: item.connector
        })
      })
      this.dialog = false
      this.$emit('confirm', true, domain)
    }
  }
}
</script>

<style lang="scss" scoped>
.autoH{
  height: 200px;
  overflow: auto;
}
</style>
