<template>
  <div style="padding: 10px">
    <div class="formbody">
      <el-form
        :inline="true"
        v-model="queryparameters"
        class="demo-form-inline"
      >
        <el-form-item label="设施名称">
          <el-select
            v-model="queryparameters.facilitiesId"
            class="m-1"
            placeholder="请选择"
          >
            <el-option
              v-for="item in alldevices"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划状态" v-if="currentstatus == 1">
          <el-select
            v-model="queryparameters.status"
            class="m-1"
            placeholder="请选择"
          >
            <el-option
              v-for="item in maintain_status"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划类型">
          <el-select
            v-model="queryparameters.maintainType"
            class="m-2"
            placeholder="请选择"
          >
            <el-option
              v-for="item in maintain_type"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div style="float: right">
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="addmaintain">新增</el-button>
          </el-form-item>
        </div>
      </el-form>

      <div>
        <el-table
          :data="tableData"
          class="eltable"
          style="width: 100%"
          @row-click="tblrowclick"
        >
          <el-table-column prop="taskCode" label="设施道路">
            <template #default="scope">
              {{
                alldevices.filter((i) => i.id === scope.row.facilitiesId)[0]
                  ?.roadName ?? "-"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="maintainYear" label="年计划" width="180" />
          <el-table-column prop="maintainMonth" label="月计划" width="180" />
          <el-table-column label="运维设施长度" width="180">
            <template #default="scope">
              {{
                alldevices.filter((i) => i.id === scope.row.facilitiesId)[0]
                  ?.fLength ?? ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="计划状态" width="180">
            <template #default="scope">
              {{
                maintain_status.filter(
                  (i) => i.value === scope.row.status + ""
                )[0]?.label ?? "-"
              }}
            </template>
          </el-table-column>
          <el-table-column label="养护类型">
            <template #default="scope">
              {{
                maintain_type.filter(
                  (i) => (i.value+"") === (scope.row.maintainType + "")
                )[0]?.label ?? "-"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="maintainUnit" label="养护单位" />
          <el-table-column prop="address" label="操作">
            <template #default="scope">
              <el-button text size="small" @click.stop="edittask(scope.row)"
                >修改
              </el-button>
              <el-popconfirm title="确定删除?" @confirm="deltask(scope.row)">
                <template #reference>
                  <el-button text size="small" @click.stop="">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="ext1" label="责任人" width="180">
            <template #default="scope">
              {{ (scope.row.ext1 == null || scope.row.ext1 === "")? "暂无" : scope.row.ext1 }}
            </template>
          </el-table-column> -->
        </el-table>
        <div style="position: relative; padding-right: 20px; margin-top: -20px">
          <Pagination
            :total="pagedata.total ?? 0"
            v-show="pagedata.total > 0"
            v-model:page="queryparameters.pageNum"
            v-model:limit="queryparameters.pageSize"
            @pagination="getList"
          ></Pagination>
        </div>
      </div>
    </div>

    <el-dialog
      v-model="showadd"
      v-loading="loading"
      title="新增养护计划"
      width="70%"
      draggable
    >
      <div>
        <el-form :model="maintaininfo">
          <el-row>
            <el-col :span="12"
              ><el-form-item label="关联设施" label-width="150px">
                <el-select
                  v-model="maintaininfo.facilitiesId"
                  filterable
                  placeholder="请选择设备"
                >
                  <el-option
                    v-for="item in alldevices"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="养护类型" label-width="150px">
                  <el-select
                  v-model="maintaininfo.maintainType"
                  filterable
                  placeholder="请选择类型"
                >
                  <el-option
                    v-for="item in maintain_type"
                    :label="item.label"
                    :value="parseInt(item.value)"
                  ></el-option>
                </el-select>
                </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><el-form-item label="养护单位" label-width="150px">
               <el-input
                        v-model="maintaininfo.maintainUnit"
                        placeholder="请输入"
                      ></el-input></el-form-item></el-col>
             <el-col :span="12"><el-form-item label="养护数量" label-width="150px">
               <el-input
                        v-model="maintaininfo.maintainCount"
                        placeholder="请输入"
                      ></el-input></el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"> <el-form-item label="计划年" label-width="150px">
                <el-select
                  v-model="maintaininfo.maintainYear"
                  filterable
                  placeholder="请选择类型"
                >
                  <el-option
                    v-for="item in getyears()"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select></el-form-item></el-col>
             <el-col :span="8"> <el-form-item label="计划月" label-width="150px">
               <el-select
                  v-model="maintaininfo.maintainMonth"
                  filterable
                  placeholder="请选择类型"
                >
                  <el-option
                    v-for="item in getmonth()"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select></el-form-item></el-col>
                 <el-col :span="8"> <el-form-item label="报送南排" label-width="150px">
               <el-select
                  v-model="maintaininfo.maintainReportNp"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    label="是"
                    :value="1"
                  ></el-option>
                  <el-option
                    label="否"
                    :value="0"
                  ></el-option>
                </el-select></el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"> <el-form-item label="计划备注" label-width="150px">
               <el-input
                        v-model="maintaininfo.maintainDes"
                        type="textarea"
                        placeholder="请输入"
                      ></el-input></el-form-item></el-col>
             <el-col :span="12"> <el-form-item label="备注" label-width="150px">
              <el-input
                        v-model="maintaininfo.maintainRemark"
                        type="textarea"
                        placeholder="请输入"
                      ></el-input></el-form-item></el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showadd = false">取消</el-button>
          <el-button type="primary" @click="onadd">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineComponent, ref, reactive, onMounted, computed } from "vue";
import { useDict } from "@/utils/dict";
import router from "../../../router";
// 分页组件
import Pagination from "@/components/Pagination";

import { listFacilities } from "@/api/system/facilities";

import { listMaintain ,addMaintain} from "@/api/system/maintain";

import { cloneDeep } from "lodash";
import { ElMessage } from "element-plus";

import { useRoute } from "vue-router";
import { delMaintain, updateMaintain } from "../../../api/system/maintain";

const { maintain_status, maintain_type } = useDict(
  "maintain_status",
  "maintain_type"
);

const queryparameters = ref({
  status: "",
  maintainType:"",
  facilitiesId: "",
  pageNum: 1,
  pageSize: 10,
});

const { proxy } = getCurrentInstance();
const showadd = ref(false);
const loading = ref(false);
const tableData = ref([]);
const pagedata = ref({});
const route = useRoute();
const currentstatus = computed(() => route.params.status);

const alldevices = ref([]);

listFacilities().then((res) => {
  alldevices.value = res.rows;
});

const maintaininfo = ref();
const initadd = () => {
  maintaininfo.value = {
    facilitiesId: 1,
    maintainCount: 0,
    maintainDes: "",
    maintainMonth: "",
    maintainRemark: "",
    maintainType: "",
    maintainUnit: "",
    maintainYear: "",
    maintainReportNp: 1,
    id:null,
    status: 1,
  };
}
initadd();

const addmaintain = () => {
  initadd();
  showadd.value = true;
};
const getyears = () => {
  var years = [];
  for (var i = 0; i <= 100; i++) {
    years.push((2019 + i).toString());
  }
  return years;
}
const getmonth = () => {
  var months = [];
  for (var i = 0; i < 12; i++) {
    if (i < 9) {
       months.push("0"+(1 + i).toString());

    } else {
       months.push((1 + i).toString());
    }
  }
  return months;
}

const tblrowclick = (row) => {
  // console.log(row)
  router.push(`/maintain/detail/${row.id}`);
};

const onadd = () => {
  // Element.loading();
  loading.value = true;
  if (maintaininfo.value.id == null) {
    addMaintain(maintaininfo.value).then(res => {
      loading.value = false;
      showadd.value = false;
      getList();
    })
  } else {
    updateMaintain(maintaininfo.value).then(res => {
      loading.value = false;
      showadd.value = false;
      getList();
    })
  }

};

const getList = () => {
  if (currentstatus.value != 1) {
    if (currentstatus.value == 2) {
      queryparameters.value.status = 1;
    } else {
      queryparameters.value.status = currentstatus.value;
    }
  } else {
    queryparameters.value.status = "";
  }
  listMaintain(queryparameters.value).then((response) => {
    tableData.value = response.rows;
    pagedata.value = response;
  });
};
getList();


const edittask = (row) => {
  maintaininfo.value = cloneDeep(row);
  showadd.value = true;
};
const deltask = (row) => {
  delMaintain(row.id).then((res) => {
    ElMessage.success("删除成功");
    getList();
  });
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.formbody {
  background: #fff;
  width: 100%;
  border-radius: 5px;
  min-height: 80vh;
  padding: 15px 10px;
  .eltable {
    border: 1px solid #e5e9f2;
    border-radius: 5px;
  }
}

.el-select {
  width: 100%;
}
</style>

<style>
.el-table__row:hover {
  cursor: pointer;
}
</style>
