<template>
  <div class="page-view border-radius-5">
    <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-select v-model="filters.name" filterable placeholder="请选择"
                     @keyup.enter.native="$refs['app-filter'].query"
          >
            <el-option v-for="item in pathOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </app-filter-item>
      </app-filter>
      <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" plain
                       size="mini" type="primary"
            > 导入
            </el-button>
          </el-popover>
          <el-button :loading="btnLoading" class="ml-10" icon="el-icon-download" plain type="primary"
                     @click="exportData"
          >
            导出
          </el-button>
        </div>
        <app-table
          :column="columns"
          :index="false"
          :pagination="pagination"
          :table-data="tableData"
          :table-loading="tableLoading"
          checkbox
          total="3"
          @pagination-change="onPaginationChange"
          @selection-change="handleSelectionChange"
          @row-dblclick="editData"
        />
      </div>

    </div>

    <!--  新增路线  -->
    <add-edit v-model="dialogVisible" :title="dialogTitle" />
    <!--  新增路段  -->
    <add-road-edit v-model="dialogRoad" title="添加路段" />
  </div>
</template>

<script>
import DICT from '@/utils/dict';
import tableMixin from '@/mixins/table.js';
import addEdit from './addEdit';
import addRoadEdit from './addRoadEdit';

export default {
  components: { addEdit, addRoadEdit },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      selectedRows: [],
      tableData: [{
        'lastTime': 1629941846792,
        'isDele': '0',
        'id': '1430021363900485632',
        'code': 'G93',
        'name': 'G93成渝环线高速',
        'start': '遂宁',
        'startPeg': '',
        'end': '合江',
        'endPeg': '',
        'companyId': '1419863231459102720',
        'companyIds': '["1419863231459102720"]',
        'companyName': '中铁建昆仑投资集团',
        'technicalGradeName': null,
        'technicalGradeCode': null,
        'numberLanes': null,
        'mileage': 1200,
        'remarks': '',
      }, {
        'lastTime': 1629960351863,
        'isDele': '0',
        'id': '1430046711774056448',
        'code': 'G5515',
        'name': 'G5515张南高速',
        'start': '张家界',
        'startPeg': '',
        'end': '南充',
        'endPeg': '',
        'companyId': '1419863231459102720',
        'companyIds': '["1419863231459102720"]',
        'companyName': '中铁建昆仑投资集团',
        'technicalGradeName': null,
        'technicalGradeCode': null,
        'numberLanes': null,
        'mileage': 590,
        'remarks': null,
      }, {
        'lastTime': 1645065901338,
        'isDele': '0',
        'id': '1494140800504827904',
        'code': 'G7521',
        'name': '渝筑高速',
        'start': '重庆市巴南区忠兴社区',
        'startPeg': 'K0+000',
        'end': '贵州市',
        'endPeg': null,
        'companyId': '1419863231459102720',
        'companyIds': '["1419863231459102720"]',
        'companyName': '中铁建昆仑投资集团',
        'technicalGradeName': null,
        'technicalGradeCode': null,
        'numberLanes': null,
        'mileage': 233,
        'remarks': '渝黔复线重庆段K0+000-K99+948',
      }],
      columns: [
        { label: '路线编号', prop: 'code', align: 'center' },
        { label: '路线名称', prop: 'name', align: 'center', sortable: true },
        { label: '所属公司', prop: 'companyName', align: 'center', sortable: true },
        { label: '起点地址', prop: 'start', align: 'center', sortable: true },
        { label: '终点地址', prop: 'end', align: 'center', sortable: true },
        { label: '地点桩号', prop: 'startPeg', align: 'center', sortable: true },
        { label: '终点桩号', prop: 'endPeg', align: 'center', sortable: true },
        { label: '里程(千米)', prop: 'mileage', align: 'center', sortable: true },
        { label: '备注', prop: 'remarks', align: 'center' },
        {
          dataType: 'option',
          label: '操作',
          width: '120px',
          align: 'center',
          operation: [
            {
              name: '添加路段',
              type: 'text',
              size: 'mini',
              icon: 'el-icon-plus',
              plain: true,
              clickFun: (row) => {
                this.sectionChange(row);
              },
            },
          ],
        },
      ],
    };

    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '新增',
      dialogRoad: false,
      uploadVisible: false,
      uploadLoading: false,
      btnLoading: false,
    };

    return {
      DICT,
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG,
      pathOptions: [{
        label: 'G93成渝环线高速',
        value: 'G93成渝环线高速',
      }, {
        label: 'G5515张南高速',
        value: 'G5515张南高速',
      }, {
        label: '渝筑高速',
        value: '渝筑高速',
      }],
    };
  },
  computed: {
    // dataMethod() {
    //   return API.getList;
    // },
  },
  methods: {
    addCompany() {
      this.dialogTitle = '新增路线';
      this.currentRow = null;
      this.dialogVisible = true;
    },
    editData(row) {
      this.dialogTitle = '编辑路线';
      this.currentRow = row;
      this.dialogVisible = true;
    },
    sectionChange() {
      this.dialogRoad = true;
    },
    // 表格选择
    handleSelectionChange(val) {
      this.selectedRows = val; // 更新变量，当选则或取消行时触发
    },
    // 下载
    download() {
    },
    // 导出
    exportData() {
    },
    // 删除
    delCompany(row) {
    },
    onConfirm(data) {
    },
  },
};
</script>

<style></style>
