<template>
  <div>
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="事项名称" prop="title">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入事项名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="运行状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择运行状态"
            clearable
          >
            <el-option
              v-for="dict in aleave_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="添加时间">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :size="size"
            @change="dateVal(value1)"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="RefreshRight" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['aleave:aleaves:add']"
          >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['aleave:aleaves:edit']"
          >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['aleave:aleaves:remove']"
          >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['aleave:aleaves:export']"
          >导出
        </el-button>
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row> -->

      <el-table
        v-loading="loading"
        :data="aleavesList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <!-- <el-table-column label="ID" align="center" prop="id" /> -->
        <el-table-column
          show-overflow-tooltip
          label="事项名称"
          align="center"
          prop="title"
        >
          <template #default="scope">
            <div
              style="cursor: pointer"
              size="mini"
              type="text"
              @click="edit(scope.row)"
            >
              <div
                style="
                  display: inline-block;
                  cursor: pointer;
                  margin-left: 10px;
                  color: #409eff;
                "
              >
                {{ scope.row.title }}
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="分类" align="center" prop="catagoryName" />
        <el-table-column label="添加部门" align="center" prop="deptname" />
        <el-table-column label="添加人员" align="center" prop="createBy" />
        <el-table-column
          label="添加时间"
          align="center"
          prop="createTime"
          width="180"
        >
        </el-table-column>
        <el-table-column
          width="100"
          label="运行状态"
          align="center"
          prop="status"
        >
          <template #default="scope">
            <dict-tag :options="aleave_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <!-- <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['aleave:aleaves:edit']"
            >修改
          </el-button> -->
            <el-button
              link
              type="danger"
              icon="Delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['aleave:aleaves:remove']"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-right: 50px">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

      <!-- 添加或修改运行列表对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
        <el-form
          ref="aleavesRef"
          :model="form"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="事项名称" prop="title">
            <el-input v-model="form.title" placeholder="请输入事项名称" />
          </el-form-item>
          <el-form-item label="添加部门" prop="deptname">
            <el-input v-model="form.deptname" placeholder="请输入添加部门" />
          </el-form-item>
          <el-form-item label="校验时间" prop="checkTime">
            <el-date-picker
              clearable
              v-model="form.checkTime"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择校验时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="校验单位" prop="checkDept">
            <el-input v-model="form.checkDept" placeholder="请输入校验单位" />
          </el-form-item>
          <el-form-item label="处室人员" prop="deptPerson">
            <el-input v-model="form.deptPerson" placeholder="请输入处室人员" />
          </el-form-item>
          <el-form-item label="运行状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择运行状态">
              <el-option
                v-for="dict in aleave_status"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup name="Aleaves">
import {
  listAleaves,
  getAleaves,
  delAleaves,
  addAleaves,
  updateAleaves,
} from "@/api/aleave/aleaves";

const { proxy } = getCurrentInstance();
const { aleave_status } = proxy.useDict("aleave_status");
const aleavesList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const value1 = ref("");
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    title: null,
    status: null,
    start: "",
    end: "",
  },
  rules: {},
});

const { queryParams, form, rules } = toRefs(data);

function edit(row) {
  if (row.catagory == 6) {
    proxy.$router.push({
      path: "/aleave/aGodGod",
      query: {
        id: row.id,
      },
    });
  } else if (row.catagory == 7) {
    proxy.$router.push({
      path: "/aleave/LargePurchase",
      query: {
        id: row.id,
      },
    });
  } else if (row.catagory == 8) {
    proxy.$router.push({
      path: "/aleave/CadreSelection",
      query: {
        id: row.id,
      },
    });
  } else if (row.catagory == 9) {
    proxy.$router.push({
      path: "/aleave/InfrastructureProject",
      query: {
        id: row.id,
      },
    });
  } else if (row.catagory == 10) {
    proxy.$router.push({
      path: "/aleave/AuditAndVerification",
      query: {
        id: row.id,
      },
    });
  }
}
function dateVal(val) {
  let time = val[0];
  var date = new Date(time);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  this.queryParams.start = y + "-" + m + "-" + d;
  let time2 = val[1];
  var date2 = new Date(time2);
  var y2 = date2.getFullYear();
  var m2 = date2.getMonth() + 1;
  m2 = m2 < 10 ? "0" + m2 : m2;
  var d2 = date2.getDate();
  d2 = d2 < 10 ? "0" + d2 : d2;
  this.queryParams.end = y2 + "-" + m2 + "-" + d2;
}

/** 查询运行列表列表 */
function getList() {
  loading.value = true;
  listAleaves(queryParams.value).then((response) => {
    aleavesList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    title: null,
    createBy: null,
    createTime: null,
    updateTime: null,
    updateBy: null,
    deptname: null,
    checkTime: null,
    checkDept: null,
    deptPerson: null,
    status: null,
  };
  proxy.resetForm("aleavesRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加运行列表";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value;
  getAleaves(_id).then((response) => {
    form.value = response.data;
    open.value = true;
    title.value = "修改运行列表";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["aleavesRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateAleaves(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addAleaves(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal
    .confirm("是否删除事项" + row.title + "？")
    .then(function () {
      return delAleaves(_ids);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "aleave/aleaves/export",
    {
      ...queryParams.value,
    },
    `aleaves_${new Date().getTime()}.xlsx`
  );
}

getList();
</script>
<script>
// .hover {
//  color: lightblue;
// }
</script>
