<!--
@name: 线路管理
@author: 张泽贤
@time: 2022-10-10
@doc: PROLOG_UPCloudSolutionForTMS__v1.2.1_PC+小程序优化版本_1.3.9_v3.doc
-->
<template>
  <div class="pages">
    <p-spin :spinning="spinning" v-if="!editType" v-show="!mapType">
      <p-card style="margin-bottom: 10px">
        <p-form-model ref="formTarget" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" class="plg-grid-from">
          <a-row>
            <a-col :span="6">
              <p-form-model-item label="线路编码">
                <p-input v-model="form.lineCode" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="线路名称">
                <p-input v-model="form.lineName" />
              </p-form-model-item>
            </a-col>
            <a-col :span="12">
              <p-form-model-item :wrapper-col="{ span: 24 }" style="text-align: right">
                <a-space>
                  <p-button type="primary" @clickSync="onSearch" icon="search">查询</p-button>
                  <p-button @click="onReset">重置</p-button>
                  <!-- <p-button type="primary" @click="onSeniorSearch">高级查询</p-button> -->
                </a-space>
              </p-form-model-item>
            </a-col>
          </a-row>
        </p-form-model>
      </p-card>
      <p-card title="线路信息" style="margin-bottom: 10px">
        <a-space slot="extra">
          <!-- <p-button type="primary" :disabled="!selectedRowKeys.length">计算里程</p-button> -->
          <p-button type="primary" @click="onMap" :disabled="!selectedRowKeys.length" v-action:map>地图</p-button>
          <p-button type="primary" @click="onEdit({}, 'add')">新增</p-button>
          <p-button type="primary" @click="onEnOrDis(0)" :disabled="!selectedRowKeys.length">启用</p-button>
          <p-button type="danger" @click="onEnOrDis(10)" :disabled="!selectedRowKeys.length">停用</p-button>
          <import-Button :importUrl="importUrl" :tmpUrl="downUrl" @onSubmit="onSearch" />
        </a-space>
        <p-table
          ref="masterTable"
          dragle
          bordered
          :extendedObjectCode="'9'"
          row-key="lineId"
          :id="$route.meta.menuId + '_line'"
          :scroll="{ x: true, y: 300 }"
          :columns="mx_columns"
          :data-source.sync="dataSource"
          :remote-url="listRemoteUrl"
          :remoteData="listParams"
          :rowSelectType="2"
          :selectedRowKeys.sync="selectedRowKeys"
          @clickRow="masterClickRow"
        >
          <template slot="operation" slot-scope="text, record">
            <a-space>
              <a @click.stop="onEdit(record, 'view')">查看</a>
              <a @click.stop="onEdit(record, 'edit')">修改</a>
              <p-switch @change="toEnOrDis(record)" :checked="record.status === 10 ? true : false" size="small" />
            </a-space>
          </template>
        </p-table>
      </p-card>

      <tabsList refs="tabs" :editId="editId"></tabsList>
    </p-spin>

    <!-- 编辑 -->
    <edit ref="edit" v-if="editType" :type="editType" :editId="editId" :options="options" :mextendedField_list="mextendedField_list" @back="back"></edit>

    <!-- 线路地图 -->
    <lineMap v-show="mapType" :type="'list'" :waypoint_dataSource="waypoint_dataSource" :selectLineIdList="selectLineIdList" :distinguishType="distinguishType" @mapBack="mapBack"></lineMap>
  </div>
</template>

<script>
import { initDictionary, resultExtendedField } from '@/blocks/utils';
import importButton from './modules/importButton/index.importButton.vue';

import { setMainColumns } from './js/tableConfig.js';
import { listRemoteUrl, importUrl, downUrl, updateStatus, new_selectMap } from './js/api.js';
import edit from './modules/edit.vue';
import tabsList from './modules/tabsList.vue';
import lineMap from './modules/lineMap.vue';

export default {
  components: { edit, tabsList, lineMap, importButton },
  data() {
    return {
      spinning: false,
      editType: '',
      editId: '',
      importUrl,
      downUrl,
      mapType: false,

      form: {
        lineCode: '',
        lineName: '',
      },

      options: {
        TRANSPORT_TYPE: [],
        LINE_TYPE: [],
        PLANTYPE: [],
        LINE_CARRIER_TYPE: [],
        LINE_BASIS: [],
        DISTINGUISH_TYPE: [],
        START_LINE_TYPE: [],
        LINE_DIRECTION: [],
        AGING_TIME_LINE: [],
      },

      // 主表格
      dataSource: [],
      selectedRowKeys: [],
      listRemoteUrl,
      listParams: {},
      tableExtendedField: [],
      mextendedField_list: [],
      mx_columns: setMainColumns(this, this.tableExtendedField),

      waypoint_dataSource: [],
      selectLineIdList: [],

      distinguishType: null, // 划分类型
    };
  },
  mounted() {
    initDictionary(
      [
        { objectcode: 'TRANSPORT_TYPE' },
        { objectcode: 'LINE_TYPE' },
        { objectcode: 'PLANTYPE' },
        { objectcode: 'LINE_CARRIER_TYPE' },
        { objectcode: 'LINE_BASIS' },
        { objectcode: 'DISTINGUISH_TYPE' },
        { objectcode: 'START_LINE_TYPE' },
        { objectcode: 'LINE_DIRECTION' },
        { objectcode: 'AGING_TIME_LINE' },
      ],
      true
    ).then((res) => {
      for (const key in res) {
        this.options[key] = res[key];
      }
    });
    resultExtendedField({ extendedObjectCode: '9' }).then((res) => {
      if (res) {
        this.mextendedField_list = res.list;
        this.tableExtendedField = res.table;
        this.mx_columns = setMainColumns(this, this.tableExtendedField);
      }
    });
  },
  methods: {
    // 查询
    onSearch() {
      this.listParams = { ...this.form };
      this.editId = '';
    },
    // 重置
    onReset() {
      this.form = {
        lineCode: '',
        lineName: '',
      };
    },

    // 新增、修改、复制、查看
    onEdit(record = { lineId: '' }, type) {
      this.editId = record.lineId;
      this.editType = type;
    },

    // 启用、停用
    onEnOrDis(status) {
      let list = this.selectedRowKeys.map((item) => {
        return {
          lineId: item,
          status,
        };
      });
      this.WhetherToEnable(updateStatus, list, status === 10 ? '启用' : '停用');
    },
    toEnOrDis(record) {
      let request = [
        {
          lineId: record.lineId,
          status: record.status,
        },
      ];
      this.WhetherToEnable(updateStatus, request, record.status === 10 ? '停用' : '启用');
    },
    WhetherToEnable(method, idList, text) {
      let self = this;
      this.$confirm({
        title: '是否' + text + '?',
        onOk() {
          return new Promise((resolve, reject) => {
            method(idList)
              .then((res) => {
                if (res.success) {
                  self.$message.success(res.message);
                  self.onSearch();
                } else {
                  self.$exception(res);
                }
                resolve();
              })
              .catch((res) => {
                self.$exception(res);
                resolve();
              });
          });
        },
      });
    },

    masterClickRow(event, activeID, rowRecord) {
      this.editId = rowRecord.lineId;
    },

    onMap() {
      let distinguishTypeList = new Set();
      this.dataSource.forEach((item) => {
        if (this.selectedRowKeys.includes(item.lineId)) {
          distinguishTypeList.add(item.distinguishType);
        }
      });
      if (distinguishTypeList.size > 1) {
        this.$message.error('选中的数据划分类型必须相同');
        return false;
      }
      let list = this.selectedRowKeys.map((item) => {
        return { lineId: item };
      });
      this.distinguishType = this.dataSource.find((item) => item.lineId === this.selectedRowKeys[0]).distinguishType;
      this.spinning = true;
      new_selectMap(list)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message);

            this.selectLineIdList = [...this.selectedRowKeys];

            this.waypoint_dataSource = [...res.data];
            this.mapType = true;
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    },
    mapBack() {
      this.mapType = false;
      this.onSearch();
    },

    back() {
      this.editType = '';
      this.onSearch();
    },
  },
};
</script>
