<template>
  <div class="usermanage">
    <!-- 组织机构信息 -->
    <div class="right" :style="{ width: rgBoxWid }">
      <div class="head">
        <div class="title">车辆月检列表</div>
        <div class="search">
          <el-date-picker v-model="listQuery.month" value-format="MM" type="month" :default-time="''"
            placeholder="请选择年份" />
          <el-button @click="onSearch" icon="search">查询</el-button>
          <el-button @click="black">返回</el-button>
        </div>
      </div>
      <div class="bottom">
        <div style="height: calc(100vh - 290px)">

          <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange" actionsW="250">
            <template #actions="{ row }">
              <span class="operesee" @click="getcheck(row.logid)" v-if="row.count && row.state != '未检'">
                <el-icon>
                  <Compass />
                </el-icon>查看检查项</span>
              <span class="operesee" @click="getquestion(row.logid)" v-if="row.count >= 1">
                <el-icon>
                  <Compass />
                </el-icon>问题处理</span>
              <span v-if="row.state == '未检'">--</span>
            </template>
          </MOSTY.Table>

          <div class="fenye">
            <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize" />
          </div>
        </div>
      </div>
    </div>
    <!-- 检查内容信息 -->
    <el-dialog v-model="checkmain" :before-close="closecheck" title="检查内容详情" width="1300px">
      <div>
        <el-table ref="multipleTableRef" v-loading="checkloading" stripe :data="checklist" style="width: 100%"
          @selection-change="handleSelectionChange" border>
          <el-table-column label="检查内容" show-overflow-tooltip property="name"></el-table-column>
          <el-table-column label="检查状态" show-overflow-tooltip property="status">
            <template #default="{ row }">
              <span v-if="row.status == '已检' || row.status == '已整改'" style="color: black">{{
                row.status
              }}</span>
              <span v-if="row.status == '异常'" style="color: red">{{
                row.status
              }}</span>
              <span v-if="row.status == '未检'" style="color: darkgoldenrod">{{
                row.status }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" show-overflow-tooltip property="yhNote">
            <template #default="{ row }">
              <span>{{ row.yhNote || '--' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closecheck()">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 车辆月检问题列表 -->
    <el-dialog v-model="questionshow" :before-close="closequestion" title="车辆月检问题列表" width="1300px">
      <div>
        <el-table ref="multipleTableRef" v-loading="questionloading" stripe :data="questionlist" style="width: 100%"
          @selection-change="handleSelectionChange" border>
          <el-table-column label="检查内容" show-overflow-tooltip property="itemname"></el-table-column>
          <el-table-column label="整改内容" show-overflow-tooltip property="rectificationcontent">
            <template #default="{ row }">
              <span>{{ row.rectificationcontent || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="检查状态" show-overflow-tooltip property="state">
            <template #default="{ row }">
              <span v-if="row.state == 'N'">未整改</span>
              <span v-if="row.state == 'Y'">已整改</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <span v-if="row.state == 'N'" class="operedit" @click="addInfo(row)">处理</span>
              <span v-if="row.state == 'Y'" class="operedit" @click="editInfo(row)"><el-icon>
                  <EditPen />
                </el-icon>修改</span>
              <span v-if="row.state == 'Y'" class="operesee" @click="seeInfo(row)"><el-icon>
                  <Compass />
                </el-icon>查看</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closequestion()"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 问题整改 -->
    <el-dialog v-model="dialogVisible" title="问题处理" width="1300px" :before-close="cancle">
      <div>
        <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="150px" :disabled="!showsave" :model="fromObj"
          :inline="true" :rules="rules">
          <el-collapse v-model="activeNames" style="width: 100%">
            <el-collapse-item title="问题处理" name="1">
              <el-form-item label="检查内容:" style="margin-top: 10px">
                <el-input v-model="fromObj.itemname" clearable disabled style="width: 1055px" />
              </el-form-item>
              <el-form-item label="整改内容:">
                <el-input v-model="fromObj.rectificationcontent" clearable type="textarea" rows="4"
                  style="width: 1055px" />
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="上传整改问题" name="2">
              <el-form-item label="上传整改问题:" style="margin-top: 10px">
                <MOSTY.Upload v-model="fromObj.picFile" :limit="3" :delrow="delrow" :ShowfileList="true" :isImg="true"
                  :disabled="!showsave" :nopicer="false" />
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button v-if="showsave" @click="saveinfo()" :loading="loadingsav">保存</el-button>
          <el-button @click="cancle">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const emit = defineEmits("changePage");
// 树的展开与折叠
const loadingsav = ref(false);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "车牌号",
      prop: "carnumber",
    },
    {
      title: "驾驶员",
      prop: "drivername",
    },
    {
      title: "检查状态",
      prop: "state",
    },
    {
      title: "检查人",
      prop: "username",
    },
    {
      title: "检查时间",
      prop: "time",
    },
    {
      title: "问题数量",
      prop: "count",
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false
  },
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }
});
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});
const activeNames = ref(1);
const questionshow = ref(false);
const questionloading = ref(false);
const questionlist = ref([]);
const rgBoxWid = ref("calc(100%)");
//选中的数据
const delrow = ref({}); //删除文件列表
const showsave = ref(true);
const currentDate = new Date();
const currentMonth = currentDate.getMonth() + 1;
const listQuery = reactive({
  year: props.editObj.year ? props.editObj.year : "",
  orgcode: props.editObj.orgcode ? props.editObj.orgcode : "",
  month: currentMonth < 10 ? "0" + currentMonth : currentMonth,
  pageCurrent: 1,
  pageSize: 20
});
const checkmain = ref(false);
const checkloading = ref(false);
const checklist = ref([]);
const tableloading = ref(false);
const dialogVisible = ref(false);
const fromObj = ref({});
const treeHeight = ref(""); // 树高度
// 树高度计算
const treeHeightFn = () => {
  treeHeight.value = window.innerHeight - 187 + "px";
};
onMounted(() => {
  if (props.editObj.orgcode) {
    getTableData();
  }
  treeHeightFn();
  window.onresize = function () {
    treeHeightFn();
  };
});
// 查询数据
const onSearch = () => {
  getTableData();
};

//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
function getTableData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/yueJian/getCarPage`).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  });
}
const black = () => {
  emit("changePage", "Main");
};

const closecheck = () => {
  checkmain.value = false;
  getTableData();
};

const closequestion = () => {
  questionshow.value = false;
  getTableData();
};

const cancle = () => {
  if (showsave.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        dialogVisible.value = false;
      })
      .catch(() => {
        // catch error
      })
  } else {
    dialogVisible.value = false;
  }

};
const saveinfo = () => {
  if (fromObj.value) {
    loadingsav.value = true
    fromObj.value.picFile = fromObj.value.picFile
      ? fromObj.value.picFile.toString()
      : null;
    getApi(fromObj.value, "/mosty-jcgl/yueJian/saveReform")
      .then((res) => {
        ElMessage.success("处理成功");
        dialogVisible.value = false;
        getTableData();
      })
      .finally(() => {
        loadingsav.value = false
      });
  }
};

//获取检查项
const getcheck = (logid) => {
  if (logid) {
    checkloading.value = true;
    getApi({ logid: logid }, "/mosty-jcgl/yueJian/getCheckItemList").then(
      (res) => {
        if (res) {
          checklist.value = res;
          checkmain.value = true;
          checkloading.value = false;
        } else {
          checklist.value = [];
          checkloading.value = false;
        }
      }
    );
  }
};
//获取问题列表
const getquestion = (logid) => {
  if (logid) {
    questionloading.value = true;
    getApi({ logid: logid }, "/mosty-jcgl/yueJian/getProblemList").then(
      (res) => {
        if (res) {
          questionlist.value = res;
          questionshow.value = true;
          questionloading.value = false;
        } else {
          questionlist.value = [];
          questionloading.value = false;
        }
      }
    );
  }
};

//新增
const addInfo = (row) => {
  showsave.value = true;
  dialogVisible.value = true;
  activeNames.value = ["1", "2"];
  fromObj.value = row;
};
//修改
const editInfo = (row) => {
  showsave.value = true;
  dialogVisible.value = true;
  activeNames.value = ["1", "2"];
  fromObj.value = row;

};
//查看
const seeInfo = (row) => {
  console.log(row,'row+++');
  
  showsave.value = false;
  dialogVisible.value = true;
  activeNames.value = ["1", "2"];
  fromObj.value = row;

};

</script>

<style lang="scss" scoped>
.usermanage {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left {
    width: 300px;
    // height: 1030px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .head {
      display: flex;
      justify-content: space-between;
    }

    .fenye {
      top: 95%;
    }
  }
}
</style>