<template>
  <MyLayout>
    <el-card v-show="state.showQuery" class="my-query-box mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
      <el-form :inline="true" label-width="auto" @submit.stop.prevent>
        <el-form-item label="关键词">
          <el-input v-model="state.filter.keyWord" placeholder="培养基编号、培养基名称" @keyup.enter="onQuery" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="state.filter.stDate"
            type="datetime"
            placeholder="选择开始时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="state.filter.edDate"
            type="datetime"
            placeholder="选择结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
          <el-button v-auth="'api:admin:item-def-feeding-medium:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="my-fill mt8" shadow="never">
      <div class="my-tools-box mb8 my-flex my-flex-between">
        <div>
        </div>
      </div>
      <el-table
        v-if="state.showFeedMediumList"
        :data="state.feedMediumListData"
        style="width: 100%"
        v-loading="state.loading"
        border
      >
        <el-table-column prop="mediumCode" label="培养基编号" min-width="120" show-overflow-tooltip />
        <el-table-column prop="mediumName" label="培养基名称" min-width="120" show-overflow-tooltip />
        <el-table-column prop="glucoseConc" label="补料培养基含糖浓度(g/L)" min-width="120" show-overflow-tooltip />
        <el-table-column label="是否含葡萄糖" width="120" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag type="success" v-if="row.isGlucose">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag type="success" v-if="row.status">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" min-width="200" show-overflow-tooltip />
        <el-table-column prop="modifiedTime" label="修改时间" min-width="200" show-overflow-tooltip />
        <el-table-column label="操作" width="200" fixed="right" header-align="center" align="center">
          <template #default="{ row }">
            <el-button
              v-if="auth('api:admin:item-def-feeding-medium:update')"
              icon="ele-EditPen"
              size="small"
              text
              type="primary"
              @click="onEdit(row)"
              >编辑</el-button
            >
            <el-button
              v-if="auth('api:admin:item-def-feeding-medium:soft-delete')"
              icon="ele-Delete"
              size="small"
              text
              type="danger"
              @click="onDelete(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="my-flex my-flex-end" style="margin-top: 10px">
        <el-pagination
          v-model:currentPage="state.pageInput.currentPage"
          v-model:page-size="state.pageInput.pageSize"
          :total="state.total"
          :page-sizes="[10, 20, 50, 100]"
          size="small"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </el-card>

    <feeding-medium-form ref="feedingMediumFormRef" :title="state.feedingMediumFormTitle"></feeding-medium-form>
  </MyLayout>
</template>

<script lang="ts" setup name="admin/feedliquid">
import { ref, reactive, onMounted, getCurrentInstance, onBeforeMount, defineAsyncComponent } from 'vue'
import { FeedMediumDto, PageInputFeedMediumDtoGetPageInput, FeedMediumDtoGetPageOutput } from '/@/api/admin/data-contracts'
import { ItemDefFeedingMediumApi } from '/@/api/admin/item-def-feeding-medium'
import eventBus from '/@/utils/mitt'
import { auth } from '/@/utils/authFunction'

// 引入组件
const FeedingMediumForm = defineAsyncComponent(() => import('./components/FeedingMediumForm.vue'))

const { proxy } = getCurrentInstance() as any

const feedingMediumFormRef = ref()

const state = reactive({
  loading: false,
  feedingMediumFormTitle: '',
  filter: {
    keyWord: '',
    stDate: '',
    edDate: ''
  },
  total: 0,
  pageInput: {
    currentPage: 1,
    pageSize: 20,
  } as PageInputFeedMediumDtoGetPageInput,
  feedMediumListData: [] as Array<FeedMediumDto>,
  showQuery: true,
  showFeedMediumList: true,
})

onMounted(() => {
  Query()
  eventBus.off('refreshFeedMedium')
  eventBus.on('refreshFeedMedium', () => {
    Query()
  })
})

onBeforeMount(() => {
  eventBus.off('refreshFeedMedium')
})

const onChangeFeedMediumList = () => {
  state.showFeedMediumList = !state.showFeedMediumList
  if (state.showFeedMediumList) {
    Query()
  }
}

const onQuery = () => {
  Query()
}

const Query = async () => {
  state.loading = true
  state.pageInput.filter = state.filter
  const res = await new ItemDefFeedingMediumApi().getPage(state.pageInput).catch(() => {
    state.loading = false
  })

  state.feedMediumListData = res?.data?.list ?? []
  state.total = res?.data?.total ?? 0
  state.loading = false
}

const onAdd = () => {
  state.feedingMediumFormTitle = '新增补料培养基'
  feedingMediumFormRef.value.open({
    id: 0,
    mediumCode: '',
    mediumName: '',
    glucoseConc: 0,
    isGlucose: true,
    status: true,
    createdTime: '',
    modifiedTime: '',
    isDeleted: false
  })
}

const onEdit = (row: FeedMediumDto) => {
  state.feedingMediumFormTitle = '编辑补料培养基'
  feedingMediumFormRef.value.open(row)
}

const onDelete = (row: FeedMediumDto) => {
  proxy.$modal
    .confirmDelete(`确定要删除补料培养基【${row.mediumName}】?`)
    .then(async () => {
      await new ItemDefFeedingMediumApi().softDelete({ id: row.id }, { loading: true })
      Query()
    })
    .catch(() => {})
}

const onSizeChange = (val: number) => {
  state.pageInput.currentPage = 1
  state.pageInput.pageSize = val
  onQuery()
}

const onCurrentChange = (val: number) => {
  state.pageInput.currentPage = val
  onQuery()
}
</script>

<style lang="scss" scoped>
.my-query-box {
  :deep(.el-form-item) {
    margin-bottom: 16px;
  }
}

.my-fill {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.my-tools-box {
  margin-bottom: 16px;
}

.my-flex {
  display: flex;
}

.my-flex-between {
  justify-content: space-between;
}

.my-flex-end {
  justify-content: flex-end;
}

.mt8 {
  margin-top: 8px;
}

.mb8 {
  margin-bottom: 8px;
}
</style>
