<!-- 运输方案模态框 -->
<template>
  <div>
    <!-- 运输方案 -->
    <div style="z-index: 200000 !important;" >
      <el-dialog title="运输方案" :visible.sync="trafficDialogVisible" width="1000px" center>
        <div style="text-align: right">
          <!--<el-button  type="primary" v-if="lineRow.order_flag_no === '103401'" size="small" @click="selectSolution">选中</el-button>-->
        </div>
        <div style="height: 23px;line-height: 23px;">
          <h2 style="border-left: 3px solid #70baf2;padding-left: 5px;">运输方案</h2>
        </div>
        <div style="position: relative; top: 5px;">
          <el-table ref="planeTbData" style="margin-bottom: 20px;" :data="planeTbData" border highlight-current-row @current-change="querySolutionLine">
            <el-table-column fixed type="index" label="序号" width="70"></el-table-column>
            <el-table-column prop="solutions_no" min-width="140" :show-overflow-tooltip="true" label="方案编号"></el-table-column>
            <el-table-column prop="solutions_name" min-width="140" :show-overflow-tooltip="true" label="方案名称"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="reciver_org_name" label="收货单位" min-width="140"></el-table-column>
            <el-table-column prop="reciver_address" label="收货地址" min-width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="consignee_name" label="收货人" width="140"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="phone" label="电话" width="140"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="solutions_type_name" label="运输方式" width="140"></el-table-column>
          </el-table>

          <div class="yt-table-page">
            <el-pagination
              @size-change="handleSizePlane"
              @current-change="handleCurrentPlane"
              :current-page=pageIndex_plane
              :page-sizes="[5, 10, 20, 30, 40]"
              :page-size=pageSize_plane
              layout="total, sizes, prev, pager, next, jumper"
              :total=total_plane>
            </el-pagination>
          </div>
        </div>

        <div style="height: 23px;line-height: 23px;">
          <h2 style="border-left: 3px solid #70baf2;padding-left: 5px;">运输线路</h2>
        </div>
        <div style="position: relative; top: 5px;">
          <el-table style="margin-bottom: 20px;" :data="lineTbData" border>
            <el-table-column :show-overflow-tooltip="true" fixed prop="trans_type_name" label="运输方式" width="100"></el-table-column>
            <!--<el-table-column :show-overflow-tooltip="true" fixed prop="trans_type" label="运输方式" width="100">-->
              <!--<template slot-scope="scope">-->
                <!--<span v-if="scope.row.trans_type==='0'">汽运</span>-->
                <!--<span v-else-if="scope.row.trans_type==='1'">铁运</span>-->
                <!--<span v-else-if="scope.row.trans_type==='2'">海运</span>-->
                <!--<span v-else-if="scope.row.trans_type==='3'">空运</span>-->
              <!--</template>-->
            <!--</el-table-column>-->
            <!-- <el-table-column :show-overflow-tooltip="true" prop="car_start_station_name" label="汽运始发点" width="100"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="car_end_station_name" label="汽运目的地" width="100"></el-table-column> -->
            <el-table-column :show-overflow-tooltip="true" prop="car_start_station_name" label="汽运始发点" width="100"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="car_end_station_name" label="汽运目的地" width="100"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="rail_start_station_name" label="铁运始发地" width="100"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="rail_end_station_name" label="铁运目的地" width="100"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="dedicated_line_name" label="专线" width="100"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="ship_start_port_name" label="海运始发港" width="100"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="ship_end_port_name" label="海运目的港" width="100"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="start_airport_name" label="始发机场" width="100"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="end_airport_name" label="目的机场" width="100"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="cost_model_name" label="费用方式" width="100"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="ask_trans_type_name" label="请车/船方" width="100"></el-table-column>
          </el-table>

          <div class="yt-table-page">
            <el-pagination
              @size-change="handleSizeLine"
              @current-change="handleCurrentLine"
              :current-page= "pageIndex_line"
              :page-sizes="[5, 10, 20, 30, 40]"
              :page-size= "pageSize_line"
              layout="total, sizes, prev, pager, next, jumper"
              :total= "total_line">
            </el-pagination>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  props: ['showSolutionFlag', 'solutionsDialog'],
  data () {
    return {
      // 运输方案
      trafficDialogVisible: false,

      planeTbData: [],
      pageIndex_plane: 1,
      pageSize_plane: 5,
      total_plane: 0,

      lineTbData: [],
      pageIndex_line: 1,
      pageSize_line: 5,
      total_line: 0
    }
  },
  watch: {
    showSolutionFlag: function () {
      this.trafficDialogVisible = true;
      let obj = {
        customer_no: this.solutionsDialog.customer_no,
        solutions_no: this.solutionsDialog.showOnlyOne ? this.solutionsDialog.solutions_no : ''
      }
      this.showTraffics(obj, this.solutionsDialog);
    }
  },
  methods: {
    /** *******************运输方案******************/
    showTraffics (data, row) {
      let _this = this;
      this.axios.post('/SlmCustomerTransSolutionService/doQueryWeb', [
        {
          object: data,
          pageIndex: this.pageIndex_plane,
          pageSize: this.pageSize_plane
        }
      ]).then(function (response) {
        if (response) {
          _this.total_plane = response.data.data.total;
          _this.planeTbData = response.data.data.rows;
          _this.lineTbData = [];
          _this.total_line = 0;
          if (row) {
            let selectedIndex = _this.planeTbData.findIndex(function (obj) {
              return obj.solutions_no === row.solutions_no;
            })
            setTimeout(function () {
              _this.$refs.planeTbData.setCurrentRow(_this.planeTbData[selectedIndex]);
            }, 200)
          }
        }
      });
    },

    handleSizePlane (val) {
      this.pageIndex_plane = 1;
      this.pageSize_plane = val;
      this.showTraffics({customer_no: this.solutionsDialog.customer_no, solutions_no: this.solutionsDialog.solutions_no}, this.solutionsDialog);
    },

    handleCurrentPlane (val) {
      this.pageIndex_plane = val;
      this.showTraffics({customer_no: this.solutionsDialog.customer_no, solutions_no: this.solutionsDialog.solutions_no}, this.solutionsDialog);
    },

    // 选中运输方案
    selectSolution () {
      let _this = this;
      this.lineRow.solutions_no = this.selectedPlane.solutions_no;
      this.lineRow.solutions_name = this.selectedPlane.solutions_name;
      _this.axios.post('/SlmOrderInfoService/doUpdateWeb', [
        {
          object: _this.lineRow
        }
      ]).then(function (response) {
        if (response) {
          _this.$message.success('运输方案已更改')
          _this.trafficDialogVisible = false
          _this.getOrderTbData()
        }
      })
    },

    /** **************运输路线********************/
    // 查询运输路线
    querySolutionLine (data) {
      let _this = this;
      if (data !== 'page') {
        _this.selectedPlane = data
      }
      if (!_this.selectedPlane) { return };
      this.axios.post('/SlmCustomerTransLineService/doQueryWeb', [
        {
          object: {solutions_no: _this.selectedPlane.solutions_no},
          pageIndex: this.pageIndex_line,
          pageSize: this.pageSize_line
        }
      ]).then(function (response) {
        if (response) {
          _this.total_line = response.data.data.total;
          _this.lineTbData = response.data.data.rows;
        }
      });
    },

    handleSizeLine (val) {
      this.pageIndex_line = 1;
      this.pageSize_line = val;
      this.querySolutionLine('page');
    },

    handleCurrentLine (val) {
      this.pageIndex_line = val;
      this.querySolutionLine('page');
    }
  }
}
</script>
