<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-container style="height: 100%;">
        <el-header style="height: max-content">
          <el-row :gutter="10" class="mb8" justify="space-between">
            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
              <el-form-item :label="$t('upgradation.cateName')" prop="fileType">
                <el-select
                  v-model="queryParams.fileType"
                  placeholder="Select"
                  clearable
                  style="width: 240px;margin-left: 16px;"
                >
                  <el-option
                    v-for="item in upgrade_status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('upgradation.procedureName')" prop="platformType">
                <el-select
                  v-model="queryParams.platformType"
                  placeholder="Select"
                  clearable
                  style="width: 240px;margin-left: 16px;"
                >
                  <el-option
                    v-for="item in platform_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" icon="Search" @click="btn_search">查询</el-button>
              </el-form-item>
            </el-form>
          <!-- 列表操作 -->
            <el-col :span="1.5">
              <el-button 
                type="primary"
                plain
                icon="Plus"
                @click="btn_add()"
              >{{ $t('upgradation.controlsAddName') }}</el-button>
            </el-col>
          </el-row>
        </el-header>
        <el-main id="max-height">
          <!-- 列表内容 -->
          <el-table 
            v-loading="status.loading"
            :data="list"
            :max-height="windowSize.height - 70"
            :header-cell-style="{textAlign:'center'}"
            :cell-style="{textAlign:'center'}"
            border
          >
            <el-table-column :label="$t('upgradation.indexName')" type="index" width="80" />
            <el-table-column :label="$t('upgradation.cateName')" prop="fileType">
              <template #default="{ row }">
                <dict-tag
                  :options="upgrade_status"
                  :value="row.fileType"
                ></dict-tag>
              </template>
            </el-table-column>
            <el-table-column :label="$t('upgradation.procedureName')" prop="platformType">
              <template #default="{ row }">
                <dict-tag
                  :options="platform_type"
                  :value="row.platformType"
                ></dict-tag>
              </template>
            </el-table-column>
            <el-table-column :label="$t('upgradation.versionName')" prop="version" />
            <el-table-column :label="$t('upgradation.releaseTimeName')" prop="releaseTime" />
            <el-table-column :label="$t('upgradation.releaseStatusName')" prop="status">
              <template #default="{ row }">
                <dict-tag
                  :options="advert_state"
                  :value="row.status"
                ></dict-tag>
              </template>
            </el-table-column>
            <el-table-column :label="$t('upgradation.addContrTipsName')" prop="remark" />

            <el-table-column :label="$t('upgradation.tableControlsName')" class-name="small-padding fixed-width">
              <template #default="{ row }">
                <el-button 
                  v-if="row.status != 1"
                  link
                  type="text"
                  @click="handleEdit(row)"
                >{{ $t('upgradation.controlsEditName') }}</el-button>
                <el-button 
                  link
                  type="text"
                  @click="handleDel(row)"
                >{{ $t('upgradation.controlsDelName') }}</el-button>
                <el-button 
                  v-if="row.status != 1"
                  link
                  type="text"
                  @click="handleUp(row)"
                >{{ $t('upgradation.controlsSubName') }}</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total > 0"
                      :total="total"
                      v-model:page="queryParams.pageNum"
                      v-model:limit="queryParams.pageSize"
                      @pagination="getList" />

        </el-main>
      </el-container>
      <el-dialog :title="showForm.title" v-model="showForm.open" width="500px" append-to-body @close="closeDialog">
        <el-form ref="tableRefs" :model="showForm.form" :rules="rules" label-width="100">
          <el-form-item :label="$t('upgradation.dialogFile')" >
            <fileUpload v-model="showForm.form.fileOssId" :fileSize="20" :limit="1" :fileType='["apk", "bin", "ppd", "exe"]'/>
          </el-form-item>
          <el-form-item :label="$t('upgradation.dialogType')">
            <el-select
              v-model="showForm.form.fileType"
              placeholder="Select"
              closeabled
              style="width: 240px;"
            >
              <el-option
                v-for="item in upgrade_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('upgradation.dialogStatus')">
            <el-select
              v-model="showForm.form.platformType"
              placeholder="Select"
              closeabled
              style="width: 240px;"
            >
              <el-option
                v-for="item in platform_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('upgradation.dialogVersion')">
            <el-input v-model="showForm.form.version" placeholder="请输入参数键名" />
          </el-form-item>
          <el-form-item :label="$t('upgradation.dialogDest')">
            <el-input v-model="showForm.form.remark" type="textarea" autosize placeholder="请输入参数键名" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="info" @click="submitForm">{{ $t('upgradation.dialogConfim') }}</el-button>
            <el-button type="info" @click="showForm.open = false">{{ $t('upgradation.dialogExit') }}</el-button>
          </div>
        </template>
      </el-dialog>
    </el-card>
  </div>

</template>
<script setup name="ruleManager">
import { useTableHeight } from '@/hooks/useTableHeight'
// 导入api接口
import { getUpgradeList, releaseUpgrade, addUpgrade, editUpgrade, delUpgrade } from '@/api/legao/upgradation'
import { reactive, toRefs } from 'vue';
const { windowSize } = useTableHeight('max-height')

// 导入字典
const { proxy } = getCurrentInstance();
const { advert_state, upgrade_status, platform_type } = proxy.useDict("advert_state", "upgrade_status", "platform_type");

const data = reactive({
  status: {
    loading: false,
    unselected: true,
    showForm: false,
    showCodePart: false
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  total: 0,
  list: [],
  showForm: {
    title: '',
    open: false,
    form: {

    }
  },
  rules: [
    {}
  ]
})

const { status, queryParams, total, list, showForm, rules } = toRefs(data)


//#region 初始化
btn_search()
//#endregion


// 获取列表数据
function getList () {
  status.loading = true

  getUpgradeList(queryParams.value)
    .then((res) => {
      list.value = res.rows
      total.value = res.total
    })
    .finally(() => {
      status.loading = false
    })
}

// 搜索
function btn_search () {
  queryParams.value.pageNum = 1
  getList()
}

// 单条编辑
function handleEdit (row) {
  showForm.value.title = proxy.$t('advertisement.dialogTitleEdit')
  showForm.value = {
    ...showForm.value,
    open: true,
    form: {...row}
  }
}

function btn_add () {
  showForm.value.title = proxy.$t('advertisement.dialogTitleAdd')
  showForm.value = {
    ...showForm.value,
    open: true
  }
}

function handleDel(row) {
  proxy.$modal.confirm(`是否删除`).then(() => {
    return delUpgrade(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess(res.msg);
  }).finally(() => {
    
  });
}

function submitForm(type) {
  const data = {
    ...showForm.value.form,
  }
  const fun = showForm.value.form?.id ? editUpgrade : addUpgrade
  fun(data).then(res => {
    // console.log(res);
    proxy.$modal.msgSuccess(res.msg);
    getList()
    showForm.value.open = false
  })
}

function handleUp(row) {
  releaseUpgrade(row.id).then(res => {
    proxy.$modal.msgSuccess(res.msg);
    getList()
  })
}

function closeDialog() {
  showForm.value = {
    ...showForm.value,
    form: {}
  }
}
</script>