<script>
import { defineComponent } from 'vue'

export default defineComponent({
  beforeRouteEnter (to, from, next) {
    if (to.query.title) {
      to.meta.title = to.query.title
    }
    next()
  }
})
</script>
<script setup name="reformProjectList">
import { onMounted, reactive, ref } from 'vue'
import { projectList } from '@/http/apis/performanceEvaluation/projectReform'
import { useRoute } from 'vue-router'
import RectifyDialog from '@/pages/performanceEvaluation/projectReform/reformProjectList/components/rectifyDialog.vue'

const route = useRoute()
const searchForm = reactive({
    projectName: undefined
  }),
  tableListRef = ref(),
  total = ref(5),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName',
      minWidth: '150',
      showOverflowTooltip: true
    },
    {
      label: '申报单位',
      key: 'buildOrgName',
      prop: 'buildOrgName',
      minWidth: '80',
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName',
      width: '100'
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: '80'
    },
    {
      label: '状态',
      key: 'rectifyStatusName',
      prop: 'rectifyStatusName'
    },
    {
      label: '操作',
      slot: 'action',
      width: '110',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await projectList(activeName.value, route.query.planId, {
      ...pageParams,
      ...searchForm
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.projectName = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  activeName = ref('1'),
  changeTab = (val) => {
    activeName.value = val
    getTableData()
  },
  // 整改情况弹窗
  // dialogVisible = ref(false),
  // isEdit = ref(),
  // formData = ref({}),
  // rules = {
  //   rectifyResult: [{ required: true, message: '请输入' }]
  // },
  // formRef = ref(),
  // loading = ref(false),
  rectifyDialogData = reactive({
    visible: false,
    data: undefined,
    isEdit: true
  }),
  showDialog = async (row, val) => {
    rectifyDialogData.isEdit = val
    rectifyDialogData.data = row
    rectifyDialogData.visible = true
  },
  close = (flag) => {
    rectifyDialogData.visible = false
    flag && getTableData()
  }
onMounted(() => {
  getTableData()
})
</script>

<template>
  <el-card class="search mb-16">
    <el-form label-suffix=":" :model="searchForm" size="small">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-input
              v-model="searchForm.projectName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item class="btn">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card class="tab-card">
    <template #header>
      <el-tabs v-model="activeName" @tab-change="changeTab">
        <el-tab-pane label="待整改" name="1" />
        <el-tab-pane label="已整改" name="2" />
      </el-tabs>
    </template>
    <table-list
      ref="tableListRef"
      :column="column"
      :data="data"
      :total="total"
      @get-table-data="getTableData"
    >
      <template #action="{scope}">
        <a v-if="scope.row.rectifyStatus===1||scope.row.rectifyStatus===2" @click="showDialog(scope.row,1)">填写整改情况</a>
        <a v-if="scope.row.rectifyStatus!==1" @click="showDialog(scope.row,0)">详情</a>
      </template>
    </table-list>
  </el-card>
  <rectify-dialog
    :visible="rectifyDialogData.visible"
    :data="rectifyDialogData.data"
    :is-edit="rectifyDialogData.isEdit"
    @close="close"
  />
<!--  <el-dialog :model-value="dialogVisible" :title="isEdit?'填写整改意见':'整改详情'" @close="dialogVisible=false">-->
<!--    <el-form-->
<!--      ref="formRef"-->
<!--      :model="formData"-->
<!--      :rules="rules"-->
<!--      label-suffix=":"-->
<!--      label-width="130"-->
<!--    >-->
<!--      <el-form-item label="整改意见">-->
<!--        {{ formData.rectifyOpinion }}-->
<!--      </el-form-item>-->
<!--      <div class="mb-16">-->
<!--        <el-alert-->
<!--          v-if="formData.rectifyAuditResult===2||formData.rectifyAuditResult===1"-->
<!--          :title="formData.rectifyAuditResult===2?'整改核查不通过':'整改核查通过'"-->
<!--          :type="formData.rectifyAuditResult===2?'error':'success'"-->
<!--          effect="dark"-->
<!--          :closable="false"-->
<!--        >-->
<!--          <div>核查意见：{{ formData.rectifyAuditOpinion }}</div>-->
<!--          &lt;!&ndash;          <div class="flex">&ndash;&gt;-->
<!--          &lt;!&ndash;            <span>附件：</span>&ndash;&gt;-->
<!--          &lt;!&ndash;            <p v-for="(file,fileIndex) in formData.rectifyResultAppendix&&JSON.parse(formData.rectifyResultAppendix)" :key="fileIndex" class="mb-4">&ndash;&gt;-->
<!--          &lt;!&ndash;              <accessory :file-name="file.originalFileName" :file-id="file.id" />&ndash;&gt;-->
<!--          &lt;!&ndash;            </p>&ndash;&gt;-->
<!--          &lt;!&ndash;          </div>&ndash;&gt;-->
<!--        </el-alert>-->
<!--      </div>-->
<!--      <el-form-item label="整改结果说明" prop="rectifyResult">-->
<!--        <el-input-->
<!--          v-if="isEdit"-->
<!--          v-model="formData.rectifyResult"-->
<!--          type="textarea"-->
<!--          show-word-limit-->
<!--          :maxlength="500"-->
<!--        />-->
<!--        <span v-else>{{ formData.rectifyResult }}</span>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="相关材料">-->
<!--        <el-upload-->
<!--          v-if="isEdit"-->
<!--          v-model:file-list="formData.rectifyResultAppendix"-->
<!--          :action="uploadUrl"-->
<!--          multiple-->
<!--          :on-success="res => handleFileSuccess(res, formData.rectifyResultAppendix, true)"-->
<!--          :before-upload="file=>fileFormatVerification(file, {types: fileTypes})"-->
<!--          :accept="fileTypes.map(i=>`.${i}`).join(',')"-->
<!--          :on-preview="handleFilePreview"-->
<!--        >-->
<!--          <el-button plain type="primary">选择文件</el-button>-->
<!--          <template #tip>-->
<!--            <div class="el-upload__tip">-->
<!--              支持{{ fileDesc }}文件-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-upload>-->
<!--        <template v-else>-->
<!--          <p v-for="(file,fileIndex) in formData.rectifyResultAppendix?.length&&formData.rectifyResultAppendix" :key="fileIndex" class="mb-4">-->
<!--            <accessory :file-name="file.name" :file-id="file.response.data.id" />-->
<!--          </p>-->
<!--        </template>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--    <template v-if="isEdit" #footer>-->
<!--      <div class="flex justify-center">-->
<!--        <el-button-->
<!--          class="ml-22"-->
<!--          type="primary"-->
<!--          :loading="loading"-->
<!--          @click="submit(formRef)"-->
<!--        >-->
<!--          提交-->
<!--        </el-button>-->
<!--        <el-button @click="dialogVisible=false">关闭</el-button>-->
<!--      </div>-->
<!--    </template>-->
<!--  </el-dialog>-->
</template>
