<script setup>
import {reactive, ref, toRefs} from "vue";
import modal from '@/plugins/modal'
import {
  technologyProjectDelete,
  technologyProjectDetail,
  technologyProjectList
} from "@/api/dataList/technology-project";
import Pagination from "@/components/Pagination/index.vue";

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  form: {}
})
const {queryParams, form} = toRefs(data)
const dataList = ref([])
const total = ref(0)
const title = ref("科研项目详情")
const showEditDialog = ref(false)
const getList = () => {
  technologyProjectList(queryParams.value).then(resp => {
    dataList.value = resp.rows
    total.value = resp.total
  })
}
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

const handleDetail = (id) => {
  technologyProjectDetail(id).then(resp => {
    form.value = resp.data
    showEditDialog.value = true
  })
}

const handleDelete = (id) => {
  modal.confirm("是否确认删除").then(() => {
    technologyProjectDelete([id]).then(() => {
      modal.msgSuccess("删除成功")
      getList()
    })
  })
}
getList()
</script>

<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams">
      <el-form-item label="名称" prop="title">
        <el-input
            v-model="queryParams.title"
            clearable
            placeholder="请输入科研项目名称"
            size="default"
            style="width: 240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button
            icon="search"
            size="default"
            type="primary"
            @click="handleQuery"
        >搜索
        </el-button>
        <el-button icon="refresh" size="default" @click="resetQuery"
        >重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList">
      <el-table-column label="ID" prop="id" width="80"/>
      <el-table-column label="科研项目名称" prop="title"/>
      <el-table-column label="类型" prop="kind"/>
      <el-table-column label="角色">
        <template #default="{row}">
          {{ row.role === '1' ? '承担单位' : row.role === '2' ? '参与单位' : null }}
        </template>
      </el-table-column>
      <el-table-column label="课题负责人" prop="director"/>
      <el-table-column label="发布时间" prop="createTime"/>
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <el-button size="small" icon="view" type="text" @click="handleDetail(row.id)">详情</el-button>
          <el-button size="small" icon="delete" type="text" @click="handleDelete(row.id)">删除</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-dialog
        :title="title"
        v-model="showEditDialog"
        width="820px"
        append-to-body
    >
      <el-form
          disabled
          ref="researchRef"
          :model="form"
          label-width="120px"
      >
        <el-form-item
            label="科研项目名称"
            prop="title"
        >
          <el-input
              v-model="form.title"
              placeholder="请输入科研项目名称"
          />
        </el-form-item>
        <el-form-item label="课题角色" prop="role">
          <el-radio v-model="form.role" label="1"
          ><!--承担单位-->
            承担单位
          </el-radio>
          <el-radio v-model="form.role" label="2"
          ><!--参与单位-->
            参与单位
          </el-radio>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="资助经费" prop="amount">
              <el-input
                  v-model="form.amount"
                  oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                  placeholder="请输入资助经费"
              >
                <template #append
                >万元
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资助来源" prop="source">
              <el-input
                  v-model="form.source"
                  placeholder="请输入资助来源"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始日期" prop="beginTime">
              <el-date-picker
                  v-model="form.beginTime"
                  type="date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请输入开始日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期" prop="finishTime">
              <el-date-picker
                  v-model="form.finishTime"
                  type="date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请输入结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目类型" prop="kind">
              <el-input
                  v-model="form.kind"
                  placeholder="请输入项目类型"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课题负责人" prop="director">
              <el-input
                  v-model="form.director"
                  placeholder="请输入课题负责人"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- //TODO:添加项目简介字段 -->
        <el-row>
          <el-col :span="24">
            <el-form-item
                label="项目简介"
                prop="introduce"
            >
              <!--              <WangEditor-->
              <!--                v-model="form.introduce"-->
              <!--                width="100%"-->
              <!--                min-height="150px"-->
              <!--                @blur="researchRef.validateField(`introduce`)"-->
              <!--              ></WangEditor>-->
              <el-input
                  type="textarea"
                  v-model="form.introduce"
                  placeholder="请输入项目简介"
                  :autosize="{ minRows: 8, maxRows: 16 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="showEditDialog=false">关闭</el-button>
          <!--          <el-button type="primary" @click="submitForm"-->
          <!--          >{{ t("admin.common.confirm") }}-->
          <!--          </el-button>-->
          <!--          <el-button @click="cancel">{{ t("admin.common.cancel") }}</el-button>-->
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>