<template>
  <div class="logsDeatil">
    <div class="tabs">
      <div class="chunk" :class="{acivted:activeName==='1'}" @click="tabsHandleClick('1')">下发日志</div>
      <div class="chunk" :class="{acivted:activeName==='2'}" @click="tabsHandleClick('2')">写入日志</div>
    </div>
    <div class="search-container">
      <el-input
        v-model="inputValue"
        placeholder="源数据"

        @input="handleInput"
        class="search-text"
        type="text"
      ></el-input>
      <el-select
        v-model="selectedValue"
        class="search-text"
        @change="handleSelectChange"
        placeholder="请选择状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button
        icon="el-icon-search"
        type="primary"
        class="searchIcon"
        @click="handleSearch"
      ></el-button>
      <el-button
        icon="el-icon-refresh"
        type="primary"
        class="searchIcon"
        @click="clearInput"
      ></el-button>


    </div>

    <div class="table" v-loading="tableLoading">
      <baseTable :tableData="tableData" :tabLoading="tabLoading"
                 :tableColumn="tableColumn" :border="false" tableHeight="73vh"
      >
        <!--        状态-->
        <template #dataType="{row}">
          {{ row.dataType == 1 ? '成功' : '失败' }}
        </template>
        <!--        操作类型-->
        <template #optionType="{row}">
          {{ row.optionType }}
        </template>
      </baseTable>
    </div>


    <footer>
      <basePage :pageModel="pageModel" @update:pageModel="currentChangeHandle"></basePage>
    </footer>
  </div>
</template>

<!--<template>-->
<!--  <div>-->

<!--    <base-layout-->

<!--    >-->
<!--      <div slot="main" slot-scope="{ tableHeight }">-->
<!--          <div class="logsDeatil">-->
<!--            <div class="tabs">-->
<!--              <div class="chunk" :class="{acivted:activeName==='1'}" @click="tabsHandleClick('1')">下发日志</div>-->
<!--              <div class="chunk" :class="{acivted:activeName==='2'}" @click="tabsHandleClick('2')">写入日志</div>-->
<!--            </div>-->

<!--            <div class="table" v-loading="tableLoading">-->
<!--              <baseTable :tableData="tableData" :tabLoading="tabLoading"-->
<!--                         :tableColumn="tableColumn" :border="false" tableHeight="73vh"-->
<!--              >-->
<!--                &lt;!&ndash;        状态&ndash;&gt;-->
<!--                <template #dataType="{row}">-->
<!--                  {{ row.dataType == 1 ? '成功' : '失败' }}-->
<!--                </template>-->
<!--                &lt;!&ndash;        操作类型&ndash;&gt;-->
<!--                <template #optionType="{row}">-->
<!--                  {{ row.optionType }}-->
<!--                </template>-->
<!--              </baseTable>-->
<!--            </div>-->


<!--            <footer>-->
<!--              <basePage :pageModel="pageModel" @update:pageModel="currentChangeHandle"></basePage>-->
<!--            </footer>-->
<!--          </div>-->
<!--      </div>-->
<!--    </base-layout>-->
<!--  </div>-->
<!--</template>-->





<script>
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
import basePage from '@/views/intergrationTask/compoments/basePage.vue'
import { authApi } from '@/api/apis/auth'
import baseLayout from "@/components/base/baseLayout/index.vue";

export default {
  name: 'index',
  components: {baseLayout,basePage, BaseTable },
  data() {
    return {
      inputValue:'',
      selectedValue:'',
      options:[
        {value:'1',label:'成功'},
        {value:'2',label:'失败'},
        {value:'',label:'不筛选'},
      ],
      activeName: '1',
      tableData: [],
      tableColumn: [
        {
          title: '目标应用',
          id: 'targetApp'
        },
        {
          title: '目标api',
          id: 'targetApi'
        },
        {
          title: '源数据',
          id: 'sourceData',
          tooltip: true
        },
        {
          title: '状态',
          id: 'dataType'
        },
        {
          title: '返回信息',
          id: 'remark',
          tooltip: true
        },
        {
          title: '操作类型',
          id: 'optionType'
        }
      ],
      requirementList: [
        {
          placeholder: "源数据",
          prop: "sourceData",
          tag: "elInput",
        }
      ],
      tabLoading: false,
      tableColumnTypeOne: [
        {
          title: '目标应用',
          id: 'targetApp'
        },
        {
          title: '目标api',
          id: 'targetApi'
        },
        {
          title: '源数据',
          id: 'sourceData',
          tooltip: true
        },
        {
          title: '状态',
          id: 'dataType'
        },
        {
          title: '返回信息',
          id: 'remark',
          tooltip: true
        },
        {
          title: '创建时间',
          id: 'create_time'
        },
        {
          title: '操作类型',
          id: 'optionType'
        }
      ],//下发日志用
      tableColumnTypeTwo: [
        {
          title: '来源名称',
          id: 'sourceName'
        },
        {
          title: '编码',
          id: 'code'
        },
        {
          title: '源数据',
          id: 'sourceData',
          tooltip: true
        },
        {
          title: '状态',
          id: 'dataType'
        },
        {
          title: '返回信息',
          id: 'remark',
          tooltip: true
        },
        {
          title: '创建时间',
          id: 'create_time'
        },
        {
          title: '操作类型',
          id: 'optionType'
        },
        {
          title: '操作人',
          id: 'optionName'
        }

      ],//写入日志用
      pageModel: {
        pageIndex: 1,
        total: 10,
        limit: 10
      },
      optionTypeDist: {
        '1': '新增',
        '2': '修改',
        '3': '删除'
      },
      tableLoading: false
    }
  },
  methods: {
    //选项卡切换事件
    tabsHandleClick(num) {
      if (this.activeName === num) return
      this.activeName = num
      this.pageModel.pageIndex = 1
      this.initMainTableData()
    },
    handleSelectChange(){

      this.initMainTableData()
    },
    clearInput() {
      this.inputValue = ''; // 将inputValue重置为空字符串
    },
    handleSearch() {
      this.initMainTableData()
    },

    // 页码
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel
      this.$nextTick(() => {
        this.initMainTableData(this.searchForm)
      })
    },
    async initMainTableData() {
      if (this.activeName === '2') {
        const res = await authApi('mdmModuleService', '', 'queryMdmOptionLogPage', '', {
          pageNum: this.pageModel.pageIndex,
          pageSize: this.pageModel.limit,
          mdmCode: this.$route.query.mdmCode,
          sourceData: this.inputValue,
          dataType:this.selectedValue,
        })
        this.tableColumn = this.tableColumnTypeTwo
        this.tableData = res.attribute.list
        this.pageModel.total = res.attribute.total
      } else {
        const res = await authApi('mdmModuleService', '', 'queryMdmDistributeLogPage', '', {
          pageNum: this.pageModel.pageIndex,
          pageSize: this.pageModel.limit,
          mdmCode: this.$route.query.mdmCode,
          sourceData: this.inputValue,
          dataType:this.selectedValue,
        })
        this.tableColumn = this.tableColumnTypeOne
        this.tableData = res.attribute.list
        this.pageModel.total = res.attribute.total
      }
    }
  },
  mounted() {
    this.initMainTableData()
    this.$emit('flashActive', 5)
  }
}
</script>


<style scoped lang="scss">
.search-container {
  display: flex;           /* 使用Flexbox布局 */
  align-items: center;     /* 垂直居中对齐 */
  justify-content: flex-start; /* 水平起始对齐 */
  margin-bottom: 15px;
  margin-top: 15px;
}

.searchIcon {
  font-size: 18px;
  /* padding: 0 12px; */
  height: 32px;
  /* line-height: 32px; */
  margin-left: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-text {
  //flex-grow: 1; /* 让输入框占据剩余空间 */
  margin-right: 10px; /* 与按钮保持一定间距 */
  width: 15%;
}

.logsDeatil {
  margin-left: 5px;
  background-color: #fff;
  padding: 10px;

  .tabs {
    display: flex;
    border-bottom: 1px solid #EBEBEB;
    padding-left: 118px;

    .chunk {
      cursor: pointer;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      padding: 20px 12px;
      margin-left: 80px;
    }

    .acivted {
      border-bottom: 2px #1478F6 solid !important;
      color: #1478F6 !important;
      font-weight: 700;

    }
  }

  .table {
    margin-top: 10px;
  }

  footer {
    padding-bottom: 20px;
  }
}
</style>
