<template>
  <Row :gutter="16">
    <Col :span="8">
      <div class="modal-step2-title"><span class="modal-step2-star">* </span>选择来源应用</div>
      <div class="modal-step2-body">
          <Select v-model="businessParams.businessTypeId" placeholder="业务类型" @on-change="selectBusinessType">
            <Option v-for="item in businessModalData" :value="item.id" :key="item.id">{{ item.businessTypeName }}</Option>
          </Select>
        <Table :class="{'modal-no-table': appModalData.length == 0}" ref="tableSource1" :columns="columnsAppModal" :data="appModalData" class="common-table modal-table modal-table1 modal-table-first" no-data-text="暂无数据" :row-class-name="rowClassName" :show-header="false" highlight-row @on-row-click="rowClick1">
        </Table>
      </div>
    </Col>
    <Col :span="1" class-name="triangle-right-wrap">
    <div class="triangle-right"></div>
    </Col>
    <Col :span="7">
    <div class="modal-step2-title"><span class="modal-step2-star">* </span>字段类型</div>
      <div class="modal-step2-body" :class="{'modal-step2-body-else': codeModalData.length<=0}">
        <!-- <div v-show="appModalData.length>0 && codeModalData.length<=0" class="modal-step2-body-nodata" @click="selectCode" :class="{'modal-no-data-status': showClickTable2}">展示全部字段</div> -->
        <Table ref="tableSource2" v-show="codeModalData.length>0" :columns="columnsCodeModal" :data="codeModalData" class="common-table modal-table modal-table2" no-data-text="" :row-class-name="rowClassName" :show-header="false" highlight-row @on-row-click="rowClick2"></Table>
      </div>
    </Col>
    <Col :span="1" class-name="triangle-right-wrap">
    <div class="triangle-right"></div>
    </Col>
    <Col :span="7">
    <div class="modal-step2-title"><span class="modal-step2-star">* </span>选择字段</div>
      <div class="modal-step2-body" :class="{'modal-step2-body-else': fieldModalData.length<=0}">
        <Table ref="tableSource3" :columns="columnsFieldModal" :data="fieldModalData" class="common-table modal-table modal-table3" no-data-text="" :row-class-name="rowClassName" :show-header="false" highlight-row @on-row-click="rowClick3"></Table>
      </div>
    </Col>
  </Row>
</template>
<script>
export default {
  name: "RuleStepTwo",
  components:{
  },
  props: {
    businessModalData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    modalTitle: { 
      type:[String],
    },
    currentObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      businessParams: {
        businessTypeId: '',
        equipmentCheck: '',
        instrumentCheck: '',
        keywords: '',
        pageNum: 1,
        pageSize: 9999
      },
      applicationId: '',
      equipmentTypeCode: '',
      fieldCode: '',
      // highlightIndex:1,
      appModalData: [],
      columnsAppModal: [
        {
            title: '业务类型',
            key: 'businessTypeName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '应用ID',
            key: 'appCode',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '应用名称',
            key: 'appName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
      ],
      codeModalData: [],
      columnsCodeModal:[
        {
          title: '字段类型',
          key: 'equipmentTypeCode',
          align: 'left',
          ellipsis: true,
          tooltip: true
        },
      ],
      columnsFieldModal:[
        {
          title: '字段类型',
          key: 'fieldCode',
          align: 'left',
          ellipsis: true,
          tooltip: true
        },
      ],
      fieldModalData: [],
      showClickTable2: false
    };
  },
  watch: {
    currentObj: {
    　handler(newValue) {
       this.businessParams.businessTypeId = newValue.businessTypeId
       this.getAppList()
      },
      // deep: true
    }
   },
  mounted() {
    this.businessParams.businessTypeId = this.currentObj.businessTypeId
    this.getAppList()
  },
  methods: {
    rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    // 根据业务类型获取应用
   getAppList (status) {
    let params = JSON.parse(JSON.stringify(this.businessParams))
    params.businessTypeId= params.businessTypeId == '-1' ?'': params.businessTypeId
     this.$get('metroapi/application/info/list', params).then(res=>{
        if (res.httpCode == 1 ){
          this.appModalData = res.data.data
          if (status == 'changeState') { //当status等于changeState时(选择业务类型清空表格数据及选中效果)
            this.$refs.tableSource1.clearCurrentRow()
            this.$refs.tableSource2.clearCurrentRow()
            this.showClickTable2 = false
          } else {
            this.appModalData.forEach((item,index)=> {
              this.appModalData[index]._highlight = false
              if(item.id == this.currentObj.applicationId) {
                this.appModalData[index]._highlight = true
                this.applicationId = item.id
                this.getAddCodeType('edit')
              }
            })
          }
        } else {
          this.appModalData = []
        }
      })
   },
   // 根据应用获取字段类型 
    getAddCodeType (status) {
      this.$get('metroapi/datarule/queryEquTypeByAppId', {applicationId:this.applicationId}).then(res=>{
        if (res.httpCode == 1 ){
          this.codeModalData = res.data
           if (status == 'changeState') { //当status等于changeState时(选择来源应用清空表格数据及选中效果)
            this.$refs.tableSource2.clearCurrentRow()
          } else {
            if (this.codeModalData && this.codeModalData.length>0) {
              this.codeModalData.forEach((item,index)=> {
                if(item.equipmentTypeCode == this.currentObj.equipmentTypeCode) {
                  this.codeModalData[index]._highlight = true
                  this.equipmentTypeCode = item.equipmentTypeCode
                  this.getAddField()
                }
              })
            }
          }
        } else {
          this.codeModalData = []
          this.$refs.tableSource2.clearCurrentRow()
          if (status == 'edit') {
            this.codeModalData = [{equipmentTypeCode: '展示全部字段'}]
            this.codeModalData[0]._highlight = true
            this.equipmentTypeCode = '展示全部字段'
            this.getAddField()
          }
          if(status == 'clickTable1') {
            this.codeModalData = [{equipmentTypeCode: '展示全部字段'}]
            this.codeModalData[0]._highlight = false
          }
        }
      })
    },
    // 根据字段类型选择字段 
     getAddField (status) {
      let equipmentTypeCode = this.equipmentTypeCode== '展示全部字段' ? '': this.equipmentTypeCode
      this.$get('metroapi/datarule/queryFieldByEquTypeCode', {applicationId:this.applicationId,equipmentTypeCode:equipmentTypeCode}).then(res=>{
        if (res.httpCode == 1 ){
          this.fieldModalData = res.data
           if (status == 'changeState') { //当status等于changeState时(选择字段类型清空选择字段表格数据及选中效果)
            this.$refs.tableSource3.clearCurrentRow()
          } else {
            this.$refs.tableSource3.clearCurrentRow()
            if (this.fieldModalData && this.fieldModalData.length>0) {
              this.fieldModalData.forEach((item,index)=> {
                if(item.fieldCode == this.currentObj.field) {
                  this.fieldModalData[index]._highlight = true
                  this.fieldCode = item.fieldCode
                }
              })
            }
          }
        } else {
          this.fieldModalData = []
        }
      })
    },
   selectBusinessType (value) {
     this.businessParams.businessTypeId = value
     this.getAppList('changeState')
     this.codeModalData = []
     this.fieldModalData = []
    },
    rowClick1 (currentRow,index) {
      this.codeModalData = []
      this.$refs.tableSource2.clearCurrentRow()
      this.fieldModalData = []
      this.$refs.tableSource3.clearCurrentRow()
      this.applicationId = currentRow.id
      this.equipmentTypeCode = ''
      this.fieldCode = ''
      this.getAddCodeType('clickTable1')
      let obj = {
        id: currentRow.id,
        applicationName: currentRow.appName,
        text: 'applicationId'
      }
      this.$emit('selectTableChange',obj)
    },
    rowClick2 (currentRow,index) {
      this.fieldModalData = []
      this.$refs.tableSource3.clearCurrentRow()
      this.equipmentTypeCode = currentRow.equipmentTypeCode
      this.fieldCode = ''
      this.getAddField('changeState')
      let obj = {
        id: currentRow.equipmentTypeCode,
        text: 'equipmentTypeCode'
      }
      this.$emit('selectTableChange',obj)
    },
    rowClick3 (currentRow,index) {
      this.fieldCode = currentRow.fieldCode
      let obj = {
        id: currentRow.fieldCode,
        text: 'fieldCode'
      }
      this.$emit('selectTableChange',obj)
    },
    selectCode () {
      this.getAddField()
      this.fieldModalData = []
      this.$refs.tableSource3.clearCurrentRow()
      let obj = {
        id: 0,
        text: 'equipmentTypeCode'
      }
     this.showClickTable2 = true
     this.$emit('selectTableChange',obj)
    },
    // 当前步骤校验方法
    saveValid () {
      if (!this.applicationId) {
        this.$Message.info('请选择来源应用')
        return false
      } else if (!this.equipmentTypeCode){
        this.$Message.info('请选择字段类型')
        return false
      } else if (this.fieldCode == ''){
        this.$Message.info('请选择字段')
        return false
      } else {
        return true
      }
    }
  }
};
</script>
<style scoped lang="stylus">
.modal-step2-title {
  height: 42px;
  background: #0B2959;
  border: 1px solid #0D2853;
  line-height: 42px;  
  color: #fff; 
  font-size: 16px;
}
.modal-step2-star {
  color: #ed4014;
  padding-left: 6px;
}
.modal-step2-body {
 padding: 15px;
 border: 1px solid #204A8F;
 border-top: none;
 height: 432PX;
 overflow: hidden;
}
.modal-step2-body-else {
  height: 432PX;
}
.modal-table-first {
  margin-top: 10px;
}
>>> .modal-no-table {
  height: 360PX;
} 
>>> .modal-table .ivu-table-body {
    height: 346PX;
    overflow: hidden;
    overflow-y: auto;
    table {
      width: 100% !important;
    }
}
>>> .modal-table2 .ivu-table-body, >>> .modal-table3 .ivu-table-body {
    height: 402PX;
    overflow: hidden;
    overflow-y: auto;
    table {
      width: 100% !important;
    }
}
>>> .ivu-table-row-highlight td, >>> .ivu-table-stripe .ivu-table-body tr.ivu-table-row-highlight:nth-child(2n) td, >>> .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-highlight:nth-child(2n) td, >>> tr.ivu-table-row-highlight.ivu-table-row-hover td {
 background-color:#0185EA;
}
// >>> .modal-table .ivu-table-tip {
//    height: 360PX;
//  }
// .modal-step2-body-nodata {
//   background-color: #081C43;
//   height: 36px;
//   line-height: 36px;
//   padding-left: 10px;
//   color: #FFFFFF;
//   font-size: 14PX;
// }
// .modal-no-data-status {
//   background-color: #0185EA;
// }
.triangle-right-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.triangle-right {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 20px solid #0185EA;
  border-bottom: 15px solid transparent;
}
</style>