<template>
  <div class="suitableSpareParts">
    <div class="common-box">
      <div class="common-box-button">
        <el-button type="success" @click="openDialog">新增</el-button>
        <el-button type="warning" @click="handleDelete(tableCheckItems)" :disabled="tableCheckItems.length == 0">删除</el-button>
      </div>
      <div class="common-box-search">
        <el-input placeholder="请输入环境因子名称" v-model="searchValue" class="input-with-select" @keyup.enter.native="fetchTableData">
          <el-button slot="append" icon="el-icon-search" @click="fetchTableData"></el-button>
        </el-input>
      </div>
    </div>
    <LTable ref="table" @selection-change="selection" :defaultFetch="true" :columns="columns" :dataSource="tableData" :options="options" :fetch="fetchTableData" :pagination="pagination" />

    <RegularitiesChoose ref="RegularitiesChoose" :regularitiesActiveRow="activeRow" @handleRegularities="handleRegularities" />
  </div>
</template>

<script>
import RegularitiesChoose from './src/regularitiesChoose.vue'
import { columns, options, modalConfig } from './suitableSpareParts'
import { queryTEnvFactorDetails, addTEnvFactorDetails, deleteTEnvFactorDetails, updateTEnvFactorDetails } from '@/api/basicData/dataEnvironment'

export default {
  name: 'SuitableSpareParts',
  components: { RegularitiesChoose },
  data() {
    // 这里存放数据
    return {
      searchValue: '',
      removeArr: [],
      columns: columns(this),
      modalConfig: modalConfig(this),
      options,
      // 分页
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      tableData: [],
      tableCheckItems: [],
      activeRow: {}
    }
  },
  methods: {
    async fetchTableData() {
      const { id } = this.$route.params
      const { pageIndex: pageNum, pageSize } = this.pagination
      const {
        data: { list, total }
      } = await queryTEnvFactorDetails({ envFactorId: id, pageNum, pageSize })
      this.tableData = list
      this.pagination.total = total
    },

    handRemove(row) {
      this.$confirm('是否确认删除该数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableData = this.tableData.filter((item) => item.id != row.id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },

    handleDelete(row) {
      this.$confirm('是否确认删除选中数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$refs.table.clearSelection()
          try {
            const { success } = await deleteTEnvFactorDetails(row.map((e) => e.envFactorDetailId))
            if (success) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            }
          } catch (error) {}
          this.fetchTableData()
        })
        .catch(() => {})
    },

    // 单选
    selection(data) {
      this.tableCheckItems = data
    },

    openDialog() {
      this.$refs.RegularitiesChoose.openModal({
        type: 'add',
        title: '新增'
      })
    },

    handUpdate(row) {
      this.$refs.RegularitiesChoose.openModal({
        type: 'edit',
        title: '编辑'
      })
      this.$refs.RegularitiesChoose.setRowData(row)
    },

    async addTEnvFactorDetailsAPI(params) {
      delete params.type
      const { success } = await addTEnvFactorDetails(params)
      if (success) {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.fetchTableData()
      }
    },
    async updateTEnvFactorDetails(params) {
      const { success } = await updateTEnvFactorDetails(params)
      if (success) {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.fetchTableData()
      }
    },

    async handleRegularities(row) {
      switch (row.type) {
        case 'add':
          this.addTEnvFactorDetailsAPI({ ...row })
          break

        case 'edit':
          this.updateTEnvFactorDetails({ ...row })

          break
      }
      this.$refs.RegularitiesChoose.closeModal()
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
