<template>
  <el-dialog
    :title="`训练消耗器材数据 - 使用明细`"
    :visible.sync="dialogVisible"
    custom-class="new-edition-dialog"
    width="50%"
    @closed="closed"
    @open="open"
  >
    <div class="detailed-container">
      <el-form
        v-model="queryParam.querys"
        :inline="true"
        class="search-form"
        size="small"
      >
        <el-form-item label="借还类型：">
          <el-select
            v-model="queryParam.querys[1].value"
            clearable
            placeholder="请选择借还类型"
          >
            <el-option
              v-for="item in getDictionaryByCode('xlqcjcghzt')"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleSearch"
            >搜索
          </el-button>
          <el-button icon="el-icon-refresh" @click="resetSearch">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleSelection"
        v-loading="loading"
        :cell-style="{'text-align': 'center'}"
        :data="tableData"
        :header-cell-style="{'text-align': 'center'}"
        :max-height="500"
        :style="{width: '100%'}"
        size="mini"
        @selection-change="handleSelectionChange"
        @sort-change="sortChange"
      >
        <el-table-column
          :index="
            index =>
              index +
              1 +
              (queryParam.pageBean.page - 1) * queryParam.pageBean.pageSize
          "
          fixed
          label="序号"
          type="index"
          width="55"
        />
        <el-table-column
          :formatter="({name}) => name || '-'"
          label="器材名称"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          :formatter="
            ({status}) => dictionaryEscape('xlqcjcghzt', status) || '-'
          "
          label="借还类型"
          show-overflow-tooltip
        />
        <el-table-column
          :formatter="({num}) => num || '-'"
          label="借还数量"
          show-overflow-tooltip
        />
        <el-table-column
          :formatter="({unit}) => dictionaryEscape('jldw', unit) || '-'"
          label="计量单位"
          show-overflow-tooltip
        />
        <el-table-column
          :formatter="({createTime}) => createTime || '-'"
          label="借还时间"
          min-width="150"
          prop="createTime"
          show-overflow-tooltip
          sortable="custom"
        />
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-pagination
        :current-page="queryParam.pageBean.page"
        :page-size="queryParam.pageBean.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        :total="queryParam.pageBean.total"
        align="right"
        background
        layout="prev, pager, next,total, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </span>
  </el-dialog>
</template>

<script>
import * as api from '@/api/examDataMenu/examSafeguardData/trainEquipmentData'
import {
  getSorterDirection,
  refineRequestBody,
  setQueryValue
} from '@/utils/requestWrappers'
import {TableMixin} from '@/mixins/tableMixin'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'

export default {
  name: 'DetailedDialog',
  mixins: [TableMixin],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    rowDetails: {
      type: Object,

      default: () => ({})
    }
  },
  data() {
    return {
      queryParam: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [{property: 'equipmentId'}, {property: 'status_'}],
        sorter: [{direction: 'DESC', property: 'createTime'}]
      },
      tableData: [],
      noLoadData: true,
      isCalcTableHeight: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    id() {
      return this.rowDetails?.id || ''
    }
  },
  created() {},
  methods: {
    dictionaryEscape,
    getSorterDirection,
    getDictionaryByCode,

    // 打开弹层
    open() {
      if (this.id) {
        this.saveLoading = true
        setQueryValue(this.queryParam, 'equipmentId', this.id)
        const {prop, order} = getSorterDirection(this.queryParam, true)
        this.$nextTick(() => this.$refs.multipleSelection?.sort(prop, order))
      }
    },

    // 关闭弹层后
    closed() {
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this))
    },

    // 获取表格数据
    async loadData() {
      try {
        this.loading = true
        const {total = 0, rows = []} = await api.detailed(
          refineRequestBody(this.queryParam)
        )
        this.queryParam.pageBean.total = total
        const {name, unit} = this.rowDetails
        this.tableData = rows.map(i => ({...i, name, unit}))
      } finally {
        this.loading = false
      }
    },

    // 重置搜索
    resetSearch() {
      this.queryParam = this.$options.data().queryParam
      setQueryValue(this.queryParam, 'equipmentId', this.id)
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped></style>
