<!--
@name: 运营报表
@author: 张泽贤
@time: 2023-03-08
@doc:
-->
<template>
  <div class="pages">
    <p-spin :spinning="spinning">
      <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="查询范围">
                <a-radio-group v-model="form.cargoOwnerName" button-style="solid">
                  <a-radio-button value="">全部</a-radio-button>
                  <a-radio-button value="鲜奶">鲜奶</a-radio-button>
                  <a-radio-button value="酸奶">酸奶</a-radio-button>
                  <a-radio-button value="其他">其他</a-radio-button>
                </a-radio-group>
              </p-form-model-item>
            </a-col>
            <a-col :span="12">
              <p-form-model-item label="预计提货时间" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                <p-range-picker v-model="DisDate" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" style="width: 100%" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="派车单号">
                <p-input v-model="form.loadingBillNo" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="运输单号">
                <p-input v-model="form.shipbillNo" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="司机名称">
                <p-input v-model="form.driverName" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="车牌号">
                <p-input v-model="form.vehiclePlateNumber" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="电话">
                <p-input v-model="form.driverPhoneNumber" />
              </p-form-model-item>
            </a-col>

            <a-col :span="24">
              <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> -->
                  <export-button
                    :ids="{ loadingBillNos: selectedRowKeys }"
                    :pages="mainPages"
                    :getSearchValue="() => listParams"
                    downloadFileName="运营报表"
                    :allUrl="UPCLOUD_RDC_TMS_BUSINESS_SERVICE + '/yogurt_operation/export_all'"
                    :currentUrl="UPCLOUD_RDC_TMS_BUSINESS_SERVICE + '/yogurt_operation/export_page'"
                    :selectUrl="UPCLOUD_RDC_TMS_BUSINESS_SERVICE + '/yogurt_operation/export_choose'"
                    >导出</export-button
                  >
                </a-space>
              </p-form-model-item>
            </a-col>
          </a-row>
        </p-form-model>
      </p-card>
      <p-card title="运单信息" style="margin-bottom: 10px">
        <p-table
          ref="masterTable"
          dragle
          rowSelectFixed
          bordered
          customScrollbar
          row-key="loadingBillNo"
          :columns="mx_columns"
          :data-source.sync="dataSource"
          :remote-url="listRemoteUrl"
          :remoteData="listParams"
          :rowSelectType="2"
          :selectedRowKeys.sync="selectedRowKeys"
          :doneBefore="doneBefore"
          :autoLoad="false"
        >
          <template slot="lineSites" slot-scope="text">
            <!-- <a-popover>
              <template slot="content">
                {{ text }}
              </template>
              <div style="width: 120px; overflow: hidden">{{ text }}</div>
            </a-popover> -->
            <a-tooltip>
              <template slot="title">{{ text }}</template>
              <div style="width: 120px; overflow: hidden; text-overflow: ellipsis">{{ text }}</div>
            </a-tooltip>
          </template>
        </p-table>
      </p-card>
    </p-spin>
  </div>
</template>

<script>
import exportButton from '@/blocks/components/export-modal/modal.index.vue';
import { UPCLOUD_RDC_TMS_BUSINESS_SERVICE } from '@/config/serviceSettings.js';
import { formatDate, getSpecDate } from '@/blocks/utils';

import { listRemoteUrl } from './js/api.js';
import { setMainColumns } from './js/tableConfig.js';
export default {
  components: { exportButton },
  computed: {
    DisDate: {
      get() {
        return [this.form.startDisDate, this.form.endDisDate];
      },
      set(value) {
        this.$set(this.form, 'startDisDate', value.length ? value[0] + ' 00:00:00' : '');
        this.$set(this.form, 'endDisDate', value.length ? value[1] + ' 23:59:59' : '');
      },
    },
  },
  data() {
    return {
      spinning: false,
      UPCLOUD_RDC_TMS_BUSINESS_SERVICE,

      form: {
        cargoOwnerName: '',
        startDisDate: formatDate(getSpecDate(-7, new Date())),
        endDisDate: formatDate(new Date()),
        loadingBillNo: '',
        shipbillNo: '',
        driverName: '',
        vehiclePlateNumber: '',
        driverPhoneNumber: '',
      },
      // 主表格
      dataSource: [
        // {
        //   id: '1000002445',
        //   ids: '1000002444,1000002445',
        //   disDate: '2023-03-14 17:00:22',
        //   lineSites:
        //     '武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市武汉市-武汉市',
        //   totalWeight: 400,
        //   totalAmt: null,
        //   temperature: null,
        //   vehicleTypeName: '大型车',
        //   vehiclePlateNumber: '鄂A10005',
        //   driverName: '赵露思',
        //   driverPhoneNumber: '13667200006',
        //   vehicleDeviceName: '潘宏博测试设备',
        //   totalVolume: 600,
        //   totalMileage: null,
        //   loadingBillNo: 'ZCD0000002046',
        //   status: 20,
        //   statusName: '已审核',
        //   cargoOwnerName: '李梦的专用货主',
        //   createtime: '2023-03-14 17:00:22',
        //   createperson: '潘宏博',
        //   memo: null,
        // },
      ],
      selectedRowKeys: [],
      listRemoteUrl,
      listParams: {},
      mx_columns: setMainColumns(this, this.tableExtendedField),
      mextendedField_list: [],
      tableExtendedField: [],
      mainPages: { pageNum: 1, pageSize: 15 },
    };
  },
  mounted() {
    this.listParams = { ...this.form };
  },
  methods: {
    // 查询
    onSearch() {
      this.dataSource = [];
      this.selectedRowKeys = [];
      this.listParams = { ...this.form };
    },
    // 重置
    onReset() {
      this.form = {
        cargoOwnerName: '',
        startDisDate: formatDate(getSpecDate(-7, new Date())),
        endDisDate: formatDate(new Date()),
        loadingBillNo: '',
        shipbillNo: '',
        driverName: '',
        vehiclePlateNumber: '',
        driverPhoneNumber: '',
      };
    },
    doneBefore(res) {
      const { pageNum, pageSize } = res.data;
      this.mainPages = { pageNum, pageSize };
    },
  },
};
</script>