<template>
  <div class="page-view border-radius-5">
    <!--    <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5 h-20" @query="onQuery" @reset="onReset">-->
    <!--    <social-tool />-->
    <div class="page-view flex-1">
      <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" @query="onQuery"
                  @reset="onReset"
      >
        <app-filter-item el-type="select" label="隧道名称" prop="companyType">
          <el-input v-model="filters.companyName" clearable placeholder="请输入"
                    @keyup.enter.native="$refs['app-filter'].query"
          />
        </app-filter-item>
      </app-filter>
      <div class="mt-10">
        <demoo />
      </div>
      <div class="flex-1 bg-white flex-col border-radius-5 pa-11 mt-8 h-60">
        <div class="mb-11">
          <el-button icon="el-icon-plus" size="mini" type="primary" @click="addCompany"> 新增</el-button>
          <el-button :disabled="!selectedRows.length > 0" icon="el-icon-delete" size="mini" type="danger"
                     @click="delCompany"
          >删除
          </el-button>
          <el-popover v-model="uploadVisible" placement="bottom" trigger="hover">
            <p>请先下载模板，填写完成后上传</p>
            <div class="text-c flex-row-c">
              <el-button class="mr-10" plain size="mini" type="primary" @click="download">下载模板</el-button>
              <el-upload
                ref="upload"
                :action="actionUrl"
                :before-upload="beforeUpload"
                :headers="headers"
                :multiple="false"
                :on-error="handleError"
                :on-success="handleSuccess"
                :show-file-list="false"
              >
                <el-button plain size="mini" type="warning">导入字典项</el-button>
              </el-upload>
            </div>
            <el-button slot="reference" :loading="uploadLoading" class="ml-10" icon="el-icon-upload2" size="mini"
                       type="primary"
            > 导入
            </el-button>
          </el-popover>
          <el-button :loading="btnLoading" class="ml-10" icon="el-icon-download 下载" type="info" @click="exportData">
            导出
          </el-button>
        </div>
        <app-table
          :column="columns"
          :pagination="pagination"
          :table-data="tableData"
          :table-loading="tableLoading"
          :total="total"
          checkbox
          @pagination-change="onPaginationChange"
          @selection-change="handleSelectionChange"
          @row-dblclick="editData"
        >
          <!--        <template #isApi="scope">-->
          <!--          <el-tag :type="scope.row['isApi'] === '1' ? '' : 'danger'">{{ scope.row['isApi'] === '1' ? '是' : '否' }} </el-tag>-->
          <!--        </template>-->
          <template #direction="scope">
            <el-tag :type="scope.row['direction'] === 1 ? '' : ''">
              {{ scope.row['direction'] === 1 ? '上行' : '下行' }}
            </el-tag>
          </template>
          <template #type="scope">
            <el-tag :type="scope.row['type'] === 1 ? '' : ''">
              {{ scope.row['type'] === 1 ? '特长隧道' : '短隧道' }}
            </el-tag>
          </template>
          <template #classify="scope">
            <el-tag :type="scope.row['classify'] === 1 ? '' : ''">
              {{ scope.row['classify'] === 1 ? 'I级' : 'II级' }}
            </el-tag>
          </template>
        </app-table>
      </div>

      <detail-dialog v-model="dialogVisible" :data="currentRow" :title="dialogTitle" @confirm="onConfirm" />
    </div>
  </div>
</template>

<script>
import DICT from '@/utils/dict';
import tableMixin from '@/mixins/table.js';
import DetailDialog from './DetailDialog.vue';
import demoo from '@/views/featuresArithmetic/structureMdm/structureMdmTunnel/components/demoo.vue';

export default {
  components: { demoo, DetailDialog },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      tableData: [
        {
          name: '四川',
          // central: '第一管理中心',
          highSpeed: '乐自高速',
          bridgeCode: 'S452153',
          bridgeName: '长江大桥',
          road: '蓉自高速',
          station: '375.438',
          direction: '1',
          type: '1',
          classify: '1',
          length: '3580',
          wide: '10.5',
          high: '5',
        },
      ],
      columns: [
        { label: '所在指挥部', prop: 'name', width: '100px', align: 'center' },
        // { label: '管理中心', prop: 'central', minWidth: '100px', align: 'center' },
        { label: '隧道名称', prop: 'highSpeed', minWidth: '100px', align: 'center' },
        // { label: '桥梁编号', prop: 'bridgeCode', width: '100px', align: 'center' },
        // { label: '桥梁名称', prop: 'bridgeName', width: '100px', align: 'center' },
        { label: '所在路段', prop: 'road', width: '100px', align: 'center' },
        { label: '中心桩号', prop: 'station', width: '100px', align: 'center' },
        { label: '方向', prop: 'direction', width: '100px', align: 'center', dataType: 'slot', slot: 'direction' },
        { label: '隧道类型', prop: 'type', width: '100px', align: 'center', dataType: 'slot', slot: 'type' },
        { label: '隧道等级', prop: 'classify', width: '100px', align: 'center', dataType: 'slot', slot: 'classify' },
        { label: '隧道长度', prop: 'length', width: '100px', align: 'center' },
        { label: '隧道宽度', prop: 'wide', width: '100px', align: 'center' },
        { label: '隧道高度', prop: 'high', width: '100px', align: 'center' },
      ],
    };

    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '新增',
    };

    const DRAWER_CONFIG = {
      drawerVisible: false,
    };
    return {
      DICT,
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
      ...DRAWER_CONFIG, // 抽屉相关
      selectedRows: [], // 存储选中的行
      uploadVisible: false,
      uploadLoading: false,
    };
  },
  computed: {
    // dataMethod() {
    //   return API.getList;
    // },
  },
  created() {
    // 本地存储实例
    // const storedData = localStorage.getItem('tableData');
    // if (storedData) {
    //   this.tableData = JSON.parse(storedData);
    // }
  },
  methods: {
    addCompany() {
      this.dialogTitle = '新增隧道';
      this.currentRow = null;
      this.dialogVisible = true;
    },
    editData(row) {
      this.dialogTitle = `编辑 - ${row.companyName}`;
      this.currentRow = row;
      this.dialogVisible = true;
    },
    handleSelectionChange(val) {
      this.selectedRows = val; // 更新变量，当选则或取消行时触发
      console.log(val);
    },
    delCompany(row) {
      // 删除实例 ，对selectedRows进行删除
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要删除的行');
        return;
      }
      this.$confirm('此操作将永久删除选中的行，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          // 从 tableData 中移除选中的行
          this.tableData = this.tableData.filter((item) => !this.selectedRows.includes(item));
          // 清空 selectedRows
          this.selectedRows = [];
          // 存储更新后的 tableData 到本地存储
          localStorage.setItem('tableData', JSON.stringify(this.tableData));
          this.$message.success('删除成功');
          this.refresh();
        })
        .catch(() => {
        });
    },
    onConfirm(data) {
      this.tableData.push(data);
      localStorage.setItem('tableData', JSON.stringify(this.tableData));
      this.dialogVisible = false;
    },
  },
};
</script>

<style></style>
