<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model:page="page"
      :permission="permissionList"
      v-model="form"
      ref="crud"
      @search-change="searchChange"
      @search-reset="searchReset"
      @on-load="onLoad"
    >
      <!-- 匹配档案目录类型显示 slot -->
      <template #contentsName="{ row }">
        <span v-if="row.contentsName && row.contentsName.toString().trim() !== ''">
          {{ row.contentsName }}
        </span>
        <span v-else style="color: #909399;">未配置</span>
      </template>

      <!-- 操作列 -->
      <template #menu="{ row }">
        <el-button
          v-if="!row.contentsName || row.contentsName.toString().trim() === ''"
          type="primary"
          @click="openConfig(row)"
        >
          配置档案类型
        </el-button>
        <span v-else style="display:inline-block;width:0;"></span>
      </template>
    </avue-crud>

    <!-- 配置档案类型弹窗 -->
    <el-dialog
      v-model="configDialogVisible"
      title="配置档案类型"
      width="400px"
      height="300px"
    >
      <el-form :model="configForm" label-width="100px">
        <el-form-item label="档案类型">
          <el-select v-model="configForm.contentsId" placeholder="请选择档案类型" style="width: 100%;" @change="handleSelectChange">
            <el-option
              v-for="item in fileCatalogList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="configDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveConfig">保存</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getList, updateContentsNameAPI, getFileCatalogSelectAPI } from '@/api/archivesManagement/proManager';
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      data: [],

      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },

      selectionList: [],

      // 配置弹窗
      configDialogVisible: false,
      configForm: {
        id: null,
        proId:null,
        contentsId: '',     // 档案类型ID
        contentsName: ''    // 档案类型名称
      },
      fileCatalogList: [],

      option: {
        height: 'auto',
        calcHeight: 32,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        menu: true,
        menuWidth: 180,
        dialogClickModal: false,

        column: [

          {
            label: '项目名称',
            prop: 'proName',
            search: false
          },

          /** ---------------- 查询字段  开始---------------- */
          {
            label: '单项工程名称',
            prop: 'singleProName',
            search: true,
            searchLabelWidth: 100 // 设置标签固定宽度
          },
          {
            label: '工程类型',
            prop: 'proStatus',
            type: 'select',
            search: true,
            dicUrl: '/blade-system/system/dict/data/type',
            dicMethod: 'post',
            dicQuery: { dictType: 'pro_type' },
            props: { label: 'dictLabel', value: 'dictValue' }
          },
          {
            label: '电压等级',
            prop: 'voltageLevel',
            type: 'select',
            search: true,
            dicUrl: '/blade-system/system/dict/data/type',
            dicMethod: 'post',
            dicQuery: { dictType: 'voltage_level' },
            props: { label: 'dictLabel', value: 'dictValue' }
          },
          /** ---------------- 查询字段 结束 ---------------- */
          {
            label: '计划开工日期',
            prop: 'planStartDate',
            slot: true,
            search: false
          },
          {
            label: '计划竣工日期',
            prop: 'planEndDate',
            slot: true,
            search: false
          },
          {
            label: '计划投产日期',
            prop: 'planTcDate',
            slot: true,
            search: false
          },
          {
            label: '工程状态',
            prop: 'proStatusName',
            slot: true,
            search: false
          },

          {
            label: '匹配档案目录类型',
            prop: 'contentsName',
            slot: true,
            search: false
          }

        ]
      }
    };
  },

  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        viewBtn: false,
        delBtn: false,
        editBtn: false
      };
    }
  },

  methods: {
    /** --------------------- 读取列表 --------------------- */
    onLoad(page, params = {}) {
      this.loading = true;

      const queryParams = {
        ...params,
        pageNum: page.currentPage,
        pageSize: page.pageSize
      };

      getList(queryParams).then(res => {
        const data = res.data;
        this.data = data.rows;
        this.page.total = data.total;
        this.loading = false;
      });
    },

    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },

    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },

    /** --------------------- 配置档案类型 --------------------- */
    openConfig(row) {
      this.configForm.proId = row.id;
      this.configForm.id = null;
      // 重置表单
      this.configForm.contentsId = '';
      this.configForm.contentsName = '';
      getFileCatalogSelectAPI().then(res => {
        this.fileCatalogList = res.data.data;
        this.configDialogVisible = true;
      });
    },

    /** 处理下拉框选择变化 */
    handleSelectChange(selectedId) {
      const selectedItem = this.fileCatalogList.find(item => item.id === selectedId);
      if (selectedItem) {
        this.configForm.contentsName = selectedItem.name;
      } else {
        this.configForm.contentsName = '';
      }
    },

    saveConfig() {
      if (!this.configForm.contentsId) {
        this.$message.warning('请选择档案类型');
        return;
      }

      if (!this.configForm.contentsName) {
        const selectedItem = this.fileCatalogList.find(item => item.id === this.configForm.contentsId);
        if (selectedItem) {
          this.configForm.contentsName = selectedItem.name;
        }
      }

      updateContentsNameAPI({
        proId: this.configForm.proId,
        id: this.configForm.contentsId,
        contentsId: this.configForm.contentsId,
        contentsName: this.configForm.contentsName,
      }).then(() => {
        this.$message.success('配置成功！');
        this.configDialogVisible = false;
        this.onLoad(this.page, this.query);
      });
    }
  }
};
</script>

<style>

</style>
