<template>
  <ContainerQuery>
    <div slot="right">
      <el-form
        v-if="$accessCheck($Access.CancelOrderSearch)"
        size="small"
        :inline="true"
        :model="search_form"
      >
        <div class="padb-10">
          <el-form-item label="关键词">
            <el-input
              v-model="searchDate.keyword"
              clearable
              style="width: 250px"
              placeholder="订单编号/收货人/商品名称"
              @keyup.enter.native="pageChange(1)"
              @clear="pageChange(1)"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="pageChange(1)"
              ></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button size="small" type="primary" @click="getData(1)">
              导出
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div slot="more">
      <el-form
        v-if="$accessCheck($Access.CancelOrderSearch)"
        size="small"
        :inline="true"
        :model="search_form"
      >
        <el-form-item label="">
          <SelectCustomer
            v-model="customer_name"
            @clear="customerClear"
            @change="customerSel"
          />
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            v-model="search_form.time"
            clearable
            type="daterange"
            value-format="timestamp"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="orderDate"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-select
            v-model="searchDate.payType"
            clearable
            style="width: 150px"
            placeholder="支付方式"
            @visible-change="paytypevisibleChange"
            @change="pageChange(1)"
          >
            <el-option
              v-for="(item, index) in pay_type_list"
              :key="index"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <RegionSelect
            v-model="search_form.region"
            style="width: 150px"
            clearable
            @change="region"
          />
        </el-form-item>

        <el-form-item label="">
          <el-select
            v-model="searchDate.customerType"
            clearable
            style="width: 150px"
            placeholder="客户类型"
            @change="customerTypes"
          >
            <el-option
              v-for="(item, index) in customerType"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select
            v-model="searchDate.source"
            clearable
            placeholder="订单来源"
            style="width: 150px"
            @change="pageChange(1)"
          >
            <el-option
              v-for="(item, index) in order_from"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="search_form.staff"
            clearable
            style="width: 150px"
            placeholder="请选择业务员"
            @clear="staffClear"
            @blur="search_form.staff = ''"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="staff_show = true"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <SelectShop
            v-model="searchDate.shopId"
            width="150"
            placeholder="请选择店铺"
            @clear="clearShop"
            @change="selShop"
          />
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="order_list" @row-dblclick="goDetail">
      <el-table-column prop="no" label="订单号" min-width="180">
        <template slot-scope="scope">
          <span
            v-if="$accessCheck($Access.CancelOrderGetOrderInfoById)"
            class="click-div"
            @click="goDetail(scope.row)"
          >
            {{ scope.row.no }}
          </span>
          <span v-else>{{ scope.row.no }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="customerName" label="客户" min-width="140">
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.deliveryType !== 2 && scope.row.receiveData.area"
            placement="right"
            width="400"
            trigger="hover"
          >
            <div>
              <p class="order-info-p">
                <span class="order-info-label">收货人：</span>
                {{ scope.row.receiveData.realName || "--" }}
              </p>
              <p class="order-info-p">
                <span class="order-info-label">联系电话：</span>
                {{ scope.row.receiveData.mobile || "--" }}
              </p>
              <p v-if="scope.row.receiveData.area" class="order-info-p">
                <span class="order-info-label">联系地址：</span>
                {{ scope.row.receiveData.area.provinceName
                }}{{ scope.row.receiveData.area.cityName
                }}{{ scope.row.receiveData.area.districtName
                }}{{ scope.row.receiveData.address }}
              </p>
            </div>
            <span
              slot="reference"
              class="click-div"
              @click="
                $router.push(
                  `/Customer/CustomerAdmin/CustomerDetail/${scope.row.customerId}`
                )
              "
            >
              {{ scope.row.customerName }}
            </span>
          </el-popover>
          <span
            v-else
            class="click-div"
            @click="
              $router.push(
                `/Customer/CustomerAdmin/CustomerDetail/${scope.row.customerId}`
              )
            "
          >
            {{ scope.row.customerName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="payAmount" label="订单金额" min-width="100">
        <template slot-scope="scope">
          {{ $_common.formattedNumber(scope.row.payAmount) }}
        </template>
      </el-table-column>
      <el-table-column prop="payAmount" label="商品" min-width="100">
        <template slot-scope="scope">
          <span class="click-div" @click="showGoods(scope.row)">商品明细</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="indentFlag"
        prop="orderMsg"
        label="订单状态"
        min-width="100"
      >
        <template slot-scope="scope">
          <span class="info-status">
            {{ scope.row.orderMsg }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="paymentFlag"
        prop="orderMsg"
        label="付款状态"
        min-width="100"
      >
        <template slot-scope="scope">
          <span
            :class="[
              parseInt(scope.row.payStatus) === 4
                ? 'danger-status'
                : parseInt(scope.row.payStatus) === 5
                ? 'success-status'
                : 'warning-status',
            ]"
          >
            {{
              parseInt(scope.row.payStatus) === 4
                ? "未支付"
                : parseInt(scope.row.payStatus) === 5
                ? "已支付"
                : "部分支付"
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="auditFlag"
        prop="auditStatus"
        label="审核状态"
        min-width="100"
      >
        <template slot-scope="scope">
          <span
            :class="[
              parseInt(scope.row.auditStatus) === 1
                ? 'warning-status'
                : parseInt(scope.row.auditStatus) === 2
                ? 'success-status'
                : parseInt(scope.row.auditStatus) === 3
                ? 'danger-status'
                : parseInt(scope.row.auditStatus) === 4
                ? 'warning-status'
                : 'warning-status',
            ]"
          >
            {{
              parseInt(scope.row.auditStatus) === 1
                ? "待审核"
                : parseInt(scope.row.auditStatus) === 2
                ? "已审核"
                : parseInt(scope.row.auditStatus) === 3
                ? "已驳回"
                : parseInt(scope.row.auditStatus) === 4
                ? "审核中"
                : "其他"
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="staffFlag"
        prop="salesman"
        label="所属员工"
        min-width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.salesman || "未分配" }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="distributionFlag"
        prop="deliveryType"
        label="配送方式"
        min-width="100"
      >
        <template slot-scope="scope">
          {{
            parseInt(scope.row.deliveryType) === 1
              ? "商品配送"
              : parseInt(scope.row.deliveryType) === 3
              ? "物流"
              : parseInt(scope.row.deliveryType) === 2
              ? "上门自提"
              : "其他"
          }}
          <p style="font-weight: bold; color: #67c23a">
            {{ scope.row.verifyCode }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        v-if="payFlag"
        prop="payType"
        label="支付方式"
        min-width="100"
      >
        <template slot-scope="scope">
          {{
            parseInt(scope.row.payType) === 3
              ? "货到付款"
              : parseInt(scope.row.payType) === 2
              ? "支付宝"
              : parseInt(scope.row.payType) === 1
              ? "微信支付"
              : parseInt(scope.row.payType) === 5
              ? "现金"
              : parseInt(scope.row.payType) === 6
              ? "其他"
              : parseInt(scope.row.payType) === 4
              ? "上门自提"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="timeFlag"
        prop="createTime"
        label="创建时间"
        min-width="160"
      >
        <template slot-scope="scope">
          {{ $_common.formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="source" label="订单来源" min-width="130">
        <template slot="header" slot-scope="scope">
          <span v-if="false">{{ scope.$index }}</span>
          <span class="operation">订单来源</span>
          <el-popover popper-class="custom-table-checkbox" trigger="click">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="(item, index) in columns"
                :key="index"
                :label="item.label"
                @change="change"
              ></el-checkbox>
            </el-checkbox-group>
            <el-button
              slot="reference"
              icon="el-icon-setting"
              type="text"
            ></el-button>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <span>
            {{
              parseInt(scope.row.source) === 1
                ? "ios"
                : parseInt(scope.row.source) === 2
                ? "安卓"
                : parseInt(scope.row.source) === 3
                ? "微信小程序"
                : parseInt(scope.row.source) === 4
                ? "后台创建"
                : parseInt(scope.row.source) === 5
                ? "H5页面"
                : parseInt(scope.row.source) === 8
                ? "字节跳动小程序"
                : parseInt(scope.row.source) === 6
                ? "pc页面"
                : "其他"
            }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
    <staffListModal
      v-if="staff_show"
      :is-show="staff_show"
      :is-check="false"
      @cancel="staff_show = false"
      @confirm="staffSel"
    />
    <el-dialog title="商品明细" :visible.sync="is_show_goods">
      <el-table :data="goodsDataD">
        <el-table-column
          property="goodsName"
          label="商品名称"
          show-overflow-tooltip
          min-width="140"
        ></el-table-column>
        <el-table-column
          property="goodsCode"
          label="商品编码"
          min-width="140"
        ></el-table-column>
        <el-table-column property="unitName" label="规格" min-width="140">
          <template slot-scope="prop">
            {{ prop.row.unitName }}；
            <span v-for="(item, index) in prop.row.specGroup" :key="index">
              {{ item.specValueName }}；
            </span>
          </template>
        </el-table-column>

        <el-table-column property="price" label="单价" min-width="100">
          <template slot-scope="scope">
            {{ $_common.formattedNumber(scope.row.price) }}
          </template>
        </el-table-column>
        <el-table-column
          property="buyNum"
          label="购买数量"
          min-width="100"
        ></el-table-column>
        <el-table-column property="totalMoney" label="商品总价" min-width="120">
          <template slot-scope="scope">
            {{ $_common.formattedNumber(scope.row.totalMoney) }}
          </template>
        </el-table-column>
        <el-table-column property="deliverNum" label="发货数量" min-width="100">
          <template slot-scope="scope">
            {{ $_common.formatNub(scope.row.deliverNum) }}
          </template>
        </el-table-column>
        <el-table-column
          property="barCode"
          label="商品条码"
          min-width="120"
        ></el-table-column>
        <el-table-column
          property="storage"
          label="货架编码"
          min-width="120"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </ContainerQuery>
</template>

<script>
  import RegionSelect from "@/component/common/RegionSelectJSON";
  import SelectCustomer from "@/component/common/SelectCustomer.vue";
  import staffListModal from "@/component/common/staffListModal";

  import {
    getOrderInfoById,
    getAllOrder,
    exportGetAllOrder,
    searchOrder,
    exportSearchOrder,
  } from "@/api/Order";
  import { getAllCustomerSource, getAllPayment } from "@/api/System";
  import SelectShop from "@/component/goods/SelectShop.vue";

  export default {
    name: "CancelOrder",
    components: {
      RegionSelect,
      staffListModal,
      SelectShop,
      SelectCustomer,
    },
    data() {
      return {
        customerType: [],
        mobile: "",
        customer_name: "",
        searchDate: {
          keyword: "",
          payType: "",
          provinceCode: "",
          cityCode: "",
          districtCode: "",
          start: "",
          end: "",
          customerId: "",
          customerType: "",
          salesManId: "",
          shopId: "",
          source: "",
        },
        staff_show: false,
        order_list: [],
        order_from: [
          {
            label: "ios",
            value: 1,
          },

          {
            label: "安卓",
            value: 2,
          },
          {
            label: "微信小程序",
            value: 3,
          },
          {
            label: "后台创建",
            value: 4,
          },
          {
            label: "H5页面",
            value: 5,
          },
          {
            label: "pc页面",
            value: 6,
          },
          {
            label: "字节跳动小程序",
            value: 8,
          },
        ],
        pay_type_list: [],
        region_options: [],
        total: 0,
        page: 1,
        pageSize: 10,
        orderStatus: 6,
        search_form: {
          time: [],
          region: [],
          user: "",
          order_type: "",
          money_type: "",
          customType: "",
          customer: "",
          staff: "",
        },
        receiveData: [],
        deliveryType: "",
        goodsDataD: [],
        is_show_goods: false,
        checkList: [
          "订单状态",
          "付款状态",
          "审核状态",
          "所属员工",
          "配送方式",
          "支付方式",
          "创建时间",
          "订单来源",
        ],
        columns: [
          {
            label: "订单状态",
          },
          {
            label: "付款状态",
          },
          {
            label: "审核状态",
          },
          {
            label: "所属员工",
          },
          {
            label: "配送方式",
          },
          {
            label: "支付方式",
          },
          {
            label: "创建时间",
          },
          {
            label: "订单来源",
          },
        ],
        indentFlag: true,
        paymentFlag: true,
        auditFlag: true,
        staffFlag: true,
        distributionFlag: true,
        payFlag: true,
        timeFlag: true,
        sourceFlag: true,
      };
    },
    async mounted() {
      await this.getAllOrder();
      // 企业过期
      this.enterExpireTime();
      await this.getAllPayment();
      await this.getAllCustomerSource();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getData();
    },
    methods: {
      async showGoods(row) {
        const { data } = await getOrderInfoById(row.userCenterId, {
          orderId: row.id,
        });

        this.is_show_goods = true;
        this.goodsDataD = data.goodsData;
      },
      // 客户类型
      async getAllCustomerSource() {
        const data = await getAllCustomerSource({
          page: 1,
          pageSize: 99,
        });

        this.customerType = data.data;
      },
      customerTypes(val) {
        this.searchDate.customerType = val;
        this.pageChange(1);
      },
      // 获取列表
      async getAllOrder(exports) {
        let params = {
          page: this.page,
          pageSize: this.pageSize,
          search: { orderStatus: this.orderStatus },
          state: "close",
        };
        if (exports) {
          params.export = 1;
          const target = await exportGetAllOrder({
            ...params,
          });
        } else {
          const data = await getAllOrder({
            ...params,
          });

          this.order_list = data.data;
          this.total = data.pageTotal;
        }
      },
      // 支付方式展开
      paytypevisibleChange(val) {
        if (val && !this.pay_type_list.length) {
          this.getAllPayment();
        }
      },
      // 获取支付方式
      async getAllPayment() {
        const data = await getAllPayment({
          page: 1,
          pageSize: 99,
        });

        this.pay_type_list = data.data;
      },
      // 订单搜索searchOrder
      async searchOrder(exports) {
        const params = {
          deliveryType: this.deliveryType,
          keyword: this.searchDate.keyword,
          orderStatus: this.orderStatus,
          payType: this.searchDate.payType,
          provinceCode: this.searchDate.provinceCode,
          cityCode: this.searchDate.cityCode,
          districtCode: this.searchDate.districtCode,
          start: this.searchDate.start,
          end: this.searchDate.end,
          customerId: this.searchDate.customerId,
          customerType: this.searchDate.customerType,
          salesManId: this.searchDate.salesManId,
          source: this.searchDate.source,
          page: this.page,
          pageSize: this.pageSize,
          state: "close",
        };
        if (exports) {
          params.export = 1;
          const target = await exportSearchOrder({
            ...params,
          });
        } else {
          const data = await searchOrder({
            ...params,
          });

          this.order_list = data.data;
          this.total = data.pageTotal;
        }
      },
      //  判断
      getData(exports) {
        const obj = {
          keyword: this.searchDate.keyword,
          payType: this.searchDate.payType,
          provinceCode: this.searchDate.provinceCode,
          cityCode: this.searchDate.cityCode,
          districtCode: this.searchDate.districtCode,
          start: this.searchDate.start,
          end: this.searchDate.end,
          customerId: this.searchDate.customerId,
          customerType: this.searchDate.customerType,
          salesManId: this.searchDate.salesManId,
          shopId: this.searchDate.shopId,
          source: this.searchDate.source,
        };
        const isKey = this.$_common.isSerch(obj);
        if (isKey) {
          this.searchOrder(exports);
        } else {
          this.getAllOrder(exports);
        }
      },
      // 选择员工
      staffSel(val) {
        const row = val[0];
        this.searchDate.salesManId = row.id;
        this.search_form.staff = row.staffName;
        this.pageChange(1);
      },
      // 清除员工输入框
      staffClear() {
        this.searchDate.salesManId = "";
        this.search_form.staff = "";
        this.pageChange(1);
      },
      // 选择客户
      customerSel(val, list) {
        this.searchDate.customerId = list[0].id;
        this.pageChange(1);
      },
      customerClear() {
        this.searchDate.customerId = "";
        this.customer_name = "";
        this.pageChange(1);
      },
      //  选择区域region
      region(val) {
        if (val && val.length) {
          this.searchDate.provinceCode = val[0];
          this.searchDate.cityCode = val[1];
          this.searchDate.districtCode = val[2];
        } else {
          this.searchDate.provinceCode = "";
          this.searchDate.cityCode = "";
          this.searchDate.districtCode = "";
        }
        this.pageChange(1);
      },
      //  订单时间
      orderDate(val) {
        if (val && val.length) {
          this.searchDate.start = val[0] / 1000;
          this.searchDate.end = val[1] / 1000 + 86399;
        } else {
          this.searchDate.start = "";
          this.searchDate.end = "";
        }
        this.pageChange(1);
      },
      clearShop() {
        this.searchDate.shopId = "";
        this.pageChange(1);
      },
      selShop(val) {
        this.pageChange(1);
      },
      // 切页
      pageChange(val) {
        this.page = val;
        this.getData();
      },
      // 每页数据大小改变
      sizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },
      goDetail(row) {
        if (!this.$accessCheck(this.$Access.CancelOrderGetOrderInfoById)) {
          return;
        }
        this.$router.push({
          path: `/order/manageO/OrderDetails/${row.userCenterId}/${row.id}`,
        });
      },
      change() {
        this.indentFlag = this.checkList.some((item) => item === "订单状态");
        this.paymentFlag = this.checkList.some((item) => item === "付款状态");
        this.auditFlag = this.checkList.some((item) => item === "审核状态");
        this.staffFlag = this.checkList.some((item) => item === "所属员工");
        this.distributionFlag = this.checkList.some(
          (item) => item === "配送方式"
        );
        this.payFlag = this.checkList.some((item) => item === "支付方式");
        this.timeFlag = this.checkList.some((item) => item === "创建时间");
        this.sourceFlag = this.checkList.some((item) => item === "订单来源");
      },
    },
  };
</script>
<style scoped lang="scss">
  .order-table-out {
    padding: 14px;
    height: calc(100vh - 380px);
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom: 1px solid #ebeef5;
  }
  .order-table-head th {
    text-align: center;
    font-size: 13px;
    height: 40px;
    background-color: #f7f7f7;
  }
  .order-empty {
    height: 14px;
  }
  .order-time-no {
    font-size: 13px;
    border: 1px solid #ebeef5;
  }
  .tbody-view .order-time-no td {
    padding: 10px 14px;
  }
  .order-time-text {
    padding-right: 24px;
  }
  .tbody-view tr td {
    padding: 8px 0;
  }
  .tbody-view .order-detail-tr td {
    text-align: center;
    font-size: 13px;
    border: 1px solid #ebeef5;
  }
  .tbody-view .order-detail-tr .goods-td {
    text-align: left;
    padding: 10px 14px;
  }
  .goods-img {
    width: 72px;
    height: 72px;
    margin-right: 10px;
    object-fit: cover;
  }
  .goods-info .goods-tit {
    line-height: 30px;
  }
  .goods-info .goods-spec {
    color: #666;
  }
  .order-payAmount {
    font-weight: 600;
    font-size: 16px;
    color: #ff4040;
  }
  .order-info-p {
    padding-bottom: 4px;
  }
  .order-info-label {
    color: #888;
  }
  .tbody-view .table-handel-div {
    /*transform: translateX(400px);*/
    transition: 0.2s;
    opacity: 0;
  }
  .tbody-view:hover .table-handel-div {
    /*transform: translateX(0);*/
    opacity: 1;
  }
  .padb-10 {
    padding-bottom: 0;
  }
  .custom-table-checkbox {
    .el-checkbox {
      display: block !important;
      margin: 0 0 $base-padding/4 0;
    }
  }
</style>
