<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2025-01-14 14:42:29
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-01-22 10:48:43
 * @FilePath: \znxjxt-ui\src\views\xj\inspection\data-management\index.vue
 * @Description: 巡检管理-数据管理
-->

<template>
  <div class="content">
    <el-form
      :model="dataForm"
      ref="noticeForm"
      size="small"
      :inline="true"
      label-width="5rem"
    >
      <!-- <el-form-item label="病害类型" prop="paramsDefectType">
        <el-cascader
          v-model="paramsDefectType"
          :options="defectTypeList"
          :props="{
            checkStrictly: true,
            emitPath: true,
            children: 'subTypes',
          }"
          clearable
        ></el-cascader>
      </el-form-item> -->
      <!-- <el-form-item label="是否检出" prop="detected">
        <el-select
          v-model="dataForm.detected"
          placeholder="请选择是否检出"
          clearable
        >
          <el-option label="是" value="1" />
          <el-option label="否" value="2" />
        </el-select>
      </el-form-item> -->
    </el-form>
    <!-- 导航栏 -->
    <el-tabs v-model="activeName" @tab-click="resetQuery">
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="`tabs-${index}`"
        :label="item.title"
        :name="item.value"
      >
        <!-- 表格 -->
        <el-table
          class="notice-table"
          ref="noticeTable"
          :data="dataList"
          v-loading="loading"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column
          v-if="item.value == '1'"
            label="病害类别"
            align="center"
            prop="classTypeName"
          />
          <el-table-column label="病害名称" align="center" prop="childTypeName">
          </el-table-column>
          <el-table-column label="修改人" align="center" prop="updateName" />
          <el-table-column label="修改时间" align="center" prop="updatedTime" />
          <el-table-column label="是否检出" align="center" prop="status">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="handleCheckChange(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <!-- <div class="pagination-part">
          <el-pagination
            background
            :current-page.sync="pagination.page"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :page-size.sync="pagination.size"
            @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableTotal"
          >
          </el-pagination>
        </div> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getDefectList,
  getDataList,
  updateStatus,
} from "@/api/xj/dataManagement";
export default {
  name: "DataManagement",
  components: {},
  data() {
    return {
      // 表单绑定
      dataForm: {
        detected: "",
      },
      // 病害类型级联下拉绑定
      paramsDefectType: [],
      // 病害类型级联下拉数据
      defectTypeList: [],
      // 导航栏数据绑定
      editableTabs: [
        { title: "病害", value: "1", status: "2" },
        { title: "路产", value: "2", status: "1" },
      ],
      // tab切换数据栏绑定
      activeName: "1",
      // 列表加载状态
      loading: false,
      // 列表数据
      dataList: [],
      // 列表分页
      pagination: {
        page: 1,
        size: 10,
      },
      // 列表数据总数
      tableTotal: 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /**
     * @description: 获取列表病害类型对应数据
     * @param {*} val
     * @return {*}
     */
    getTableDefect() {
      getDefectList().then(({ code, data }) => {
        if (code === 200) {
          this.defectTypeList = data;
        }
      });
    },

    /**
     * @description: 切换导航栏
     * @param {*} val
     * @return {*}
     */
    resetQuery() {
      this.getList();
    },

    /**
     * @description: 获取列表数据
     * @param {*} val
     * @return {*}
     */
    getList() {
      getDataList({ type: this.activeName }).then(({ code, data }) => {
        if (code === 200) {
          this.dataList = data;
        }
      });
    },

    /**
     * @description: 切换是否检出状态
     * @param {*} row
     * @return {*}
     */
    handleCheckChange(row) {
      updateStatus(row).then(({ code, msg }) => {
        if (code === 200) {
          this.$modal.msgSuccess(msg);
          this.getList();
        }
      });
    },

    /**
     * @description: 切换分页
     * @param {*} arg
     * @return {*}
     */
    handleCurrentChange(arg) {
      this.pagination.page = arg;
      this.getList();
    },

    /**
     * @description: 切换每条/页
     * @param {*} arg
     * @return {*}
     */
    handleSizeChange(arg) {
      this.pagination.size = arg;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 5.4rem);
  padding: 1rem;
  overflow-y: auto;
}

/* 分页样式 */
.pagination-part {
  width: 100%;
  display: flex;
  padding-top: 1rem;
  justify-content: flex-end;
}
</style>
