<template>
  <ContainerQuery>
    <div v-if="$accessCheck($Access.lineAddLine)" slot="left">
      <el-button size="small" type="primary" @click="modalFlag = true">
        新增
      </el-button>
    </div>
    <el-form slot="more" size="small" :inline="true">
      <el-form-item>
        <el-date-picker
          v-model="time"
          clearable
          type="daterange"
          value-format="timestamp"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="orderDate"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <vxe-table :data="tableData" border="inner">
      <vxe-table-column field="id" title="线路ID"></vxe-table-column>
      <vxe-table-column field="name" title="线路名称"></vxe-table-column>
      <vxe-table-column
        field="orderCustomerNum"
        title="下单客户数"
      ></vxe-table-column>
      <vxe-table-column field="orderTotal" title="总单数"></vxe-table-column>
      <vxe-table-column field="orderAmount" title="订单金额">
        <template #default="{ row }">
          {{ $_common.formattedNumber(row.orderAmount) }}
        </template>
      </vxe-table-column>
      <vxe-table-column field="goodsNum" title="商品数量"></vxe-table-column>
      <vxe-table-column field="otherNum" title="吨位"></vxe-table-column>
      <vxe-table-column
        field="outOtherTotal"
        title="出库吨位"
      ></vxe-table-column>
      <vxe-table-column field="outAmount" title="出库订单金额">
        <template #default="{ row }">
          {{ $_common.formattedNumber(row.outAmount) }}
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="outGoodsTotal"
        title="出库订单数量"
      ></vxe-table-column>
      <vxe-table-column field="desc" title="线路备注"></vxe-table-column>
      <vxe-table-column field="createTime" title="创建时间" width="130">
        <template #default="{ row }">
          {{ $_common.formatDate(row.createTime) }}
        </template>
      </vxe-table-column>
      <vxe-table-column field="enableStatus" title="状态">
        <template #default="{ row }">
          <el-switch
            v-if="$accessCheck($Access.lineUpdateLine)"
            v-model="row.enableStatus"
            class="switchStyle"
            active-color="#36B365"
            :active-value="5"
            :inactive-value="4"
            active-text="启用"
            inactive-text="禁用"
            @change="enableDeliveryRoute($event, row)"
          ></el-switch>
          <div v-else>
            <span v-if="row.enableStatus === 5" class="success-status">
              启用
            </span>
            <span v-else class="info-status">禁用</span>
          </div>
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" width="225">
        <template #default="{ row }">
          <!--          <el-button type="text" @click="drawerFlag = true">打印</el-button>-->
          <el-button
            v-if="$accessCheck($Access.lineLookLine)"
            type="text"
            @click="examine(row)"
          >
            查看客户
          </el-button>
          <el-button
            v-if="$accessCheck($Access.lineEditLine)"
            type="text"
            @click="amendLine(row.id)"
          >
            修改
          </el-button>
          <el-button
            v-if="$accessCheck($Access.lineDelLine)"
            type="text"
            @click="deleteDeliveryRoute(row.id)"
          >
            删除
          </el-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
    <!--    新增线路弹框-->
    <addLine
      v-if="modalFlag"
      :modal-flag="modalFlag"
      :line-id="lineId"
      :enterprise="enterprise.scope"
      @close="addLineClose"
    ></addLine>
    <!--    打印线路抽屉弹框-->
    <printLine
      :drawer-flag="drawerFlag"
      @close="drawerFlag = false"
    ></printLine>
    <!--    客户设置弹框-->
    <!--    <checkSelectCustomer-->
    <!--      :customer-show="customerShow"-->
    <!--      @close="customerShow = false"-->
    <!--    ></checkSelectCustomer>-->
    <!--    查看客户弹窗-->
    <vxe-modal
      v-if="customerShow"
      v-model="customerShow"
      title="查看客户"
      width="60%"
      resize
      remember
    >
      <template #default>
        <el-form size="small" inline>
          <el-form-item>
            <el-input
              v-model="search"
              placeholder="客户名称/手机号"
              clearable
              @keyup.enter.native="pageChangeUser(1)"
              @clear="pageChangeUser(1)"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="pageChangeUser(1)"
              ></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <vxe-table :data="tableDataUser">
          <vxe-table-column title="排序">
            <template #default="{ row, rowIndex }">
              <div v-if="row.balance_false_visible">
                <el-input-number
                  v-model="sort"
                  style="width: calc(100% - 88px)"
                  :controls="false"
                  size="mini"
                  :min="0"
                  @keyup.enter.native="
                    updateDeliveryRouteCustomer(row, rowIndex)
                  "
                ></el-input-number>
                <div
                  class="virtualSalesNum-btn"
                  @click="updateDeliveryRouteCustomer(row, rowIndex)"
                >
                  <i class="el-icon-check"></i>
                </div>
              </div>
              <div v-else @click="showSetBalance(rowIndex)">
                {{ row.sort }}
                <el-button type="text" icon="el-icon-edit"></el-button>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="customerName"
            title="客户名称"
          ></vxe-table-column>
          <vxe-table-column
            field="customerMobile"
            title="客户电话"
          ></vxe-table-column>
          <vxe-table-column
            field="customerType"
            title="客户类型"
          ></vxe-table-column>
        </vxe-table>
        <FooterPage
          :page-size="pageSizeUser"
          :total-page.sync="totalUser"
          :current-page.sync="pageUser"
          @pageChange="pageChangeUser"
          @sizeChange="sizeChangeUser"
        ></FooterPage>
      </template>
    </vxe-modal>
  </ContainerQuery>
</template>
<script>
  import addLine from "@/views/SystemSettings/components/addLine";
  import printLine from "@/views/SystemSettings/components/printLine";
  import checkSelectCustomer from "@/component/common/checkSelectCustomer";
  import {
    getAllDeliveryRoute,
    enableDeliveryRoute,
    deleteDeliveryRoute,
    getDeliveryRouteCustomer,
    updateDeliveryRouteCustomer,
  } from "@/api/Delivery";
  import { mapGetters } from "vuex";
  export default {
    components: {
      addLine,
      printLine,
      // checkSelectCustomer,
    },
    data() {
      return {
        tableData: [],
        time: [],
        start: "",
        end: "",
        page: 1,
        pageSize: 10,
        total: 0,
        modalFlag: false,
        drawerFlag: false,
        customerShow: false,
        lineId: "",
        search: "",
        tableDataUser: [],
        pageUser: 1,
        pageSizeUser: 10,
        totalUser: 0,
        row_id: "",
        sort: "",
      };
    },
    computed: {
      ...mapGetters({
        enterprise: "MUser/enterprise",
      }),
    },
    created() {
      this.getAllDeliveryRoute();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getAllDeliveryRoute();
    },
    methods: {
      //  订单时间
      orderDate(val) {
        if (val && val.length) {
          this.start = val[0] / 1000;
          this.end = val[1] / 1000 + 86399;
        } else {
          this.start = "";
          this.end = "";
        }
        this.pageChange(1);
      },
      pageChange(val) {
        this.page = val;
        this.getAllDeliveryRoute();
      },
      sizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },
      async getAllDeliveryRoute() {
        const { data, pageTotal } = await getAllDeliveryRoute({
          start: this.start,
          end: this.end,
          page: this.page,
          pageSize: this.pageSize,
        });
        this.tableData = data;
        this.total = pageTotal;
      },
      addLineClose() {
        this.lineId = "";
        this.modalFlag = false;
        this.getAllDeliveryRoute();
      },
      amendLine(id) {
        this.lineId = id;
        this.modalFlag = true;
      },
      async enableDeliveryRoute(val, row) {
        try {
          const data = await enableDeliveryRoute(row.id, {
            enableStatus: val,
          });
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        } catch (e) {
          this.pageChange(1);
        }
      },
      deleteDeliveryRoute(id) {
        this.$confirm("确定删除此线路?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const { data } = await deleteDeliveryRoute(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.pageChange(1);
        });
      },
      async examine(row) {
        this.customerShow = true;
        this.row_id = row.id;
        const { data, pageTotal } = await getDeliveryRouteCustomer({
          id: this.row_id,
          page: this.pageUser,
          pageSize: this.pageSizeUser,
          search: this.search,
        });
        this.tableDataUser = data.map((item) => {
          return {
            ...item,
            balance_false_visible: false,
          };
        });
        this.totalUser = pageTotal;
      },
      sizeChangeUser(val) {
        this.pageSizeUser = val;
        this.pageChangeUser(1);
      },
      async pageChangeUser(val) {
        this.pageUser = val;
        const { data, pageTotal } = await getDeliveryRouteCustomer({
          id: this.row_id,
          page: this.pageUser,
          pageSize: this.pageSizeUser,
          search: this.search,
        });
        this.tableDataUser = data.map((item) => {
          return {
            ...item,
            balance_false_visible: false,
          };
        });
        this.totalUser = pageTotal;
      },
      async updateDeliveryRouteCustomer(row, index) {
        const { data } = await updateDeliveryRouteCustomer(row.id, {
          sort: this.sort,
        });
        this.$message.success("修改成功");
        this.tableDataUser[index].balance_false_visible = false;
        await this.pageChangeUser(1);
      },
      showSetBalance(index) {
        this.tableDataUser.forEach(
          (item) => (item.balance_false_visible = false)
        );
        this.sort = this.tableDataUser[index].sort;
        this.tableDataUser[index].balance_false_visible = true;
      },
    },
  };
</script>
<style>
  .virtualSalesNum-btn {
    width: 26px;
    text-align: center;
    line-height: 28px;
    height: 28px;
    vertical-align: middle;
    font-size: 12px;
    background: #f5f5f5;
    border: 1px solid #cad0d7;
    display: inline-block;
    cursor: pointer;
    border-left: 0;
  }
</style>
