<template>
  <div>
    <div style="display: flex;padding: 10px">
      <el-button
        icon="el-icon-back"
        @click="$router.replace({ name: 'h5Home' })"
      ></el-button>

      <el-button
        style="margin-left:auto"
        type="primary"
        icon="el-icon-refresh"
        @click="getDataList()"
      ></el-button>
    </div>

    <div style="margin-top:10px">
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        row-key="orderCode"
        :expand-row-keys="expandRowKeys"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="props" :v-model="me">
            <el-form
              label-position="left"
              inline
              class="demo-table-expand"
              style="padding:10px"
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item label="所属店铺">
                    <span>{{ props.row.stName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="酒店名称">
                    <span>{{ props.row.hotelName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="跟单人">
                    <span>{{ props.row.username }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="预定时间">
                    <span>{{ props.row.date }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="入离时间">
                    <span>{{ dateStr(props.row) }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="订单类型">
                    <span>{{ orderType(props.row) }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="订单金额">
                    <span>{{ props.row.payPrice }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="采购金额">
                    <span>{{ props.row.buyOrderPrice }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="酒店渠道">
                    <span>{{ props.row.plantfrom }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="到店时间">
                    <span>{{ props.row.earliestTime }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="采购渠道">
                    <span>{{ buySource(props.row) }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="订单编号">
                    <span>{{ props.row.orderCode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="联系电话">
                    <span>{{ props.row.phone }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="订单备注">
                    <div
                      :style="{
                        color:
                          props.row.note ==
                            '注意！直连订单，毛利小于0，取消直连，请人工处理。' ||
                          props.row.note ==
                            '注意！直连订单，金额大于1000元，取消直连，请人工处理。' ||
                          props.row.note == '注意！人工订单，毛利小于0。'
                            ? '#FF0000'
                            : '#000'
                      }"
                    >
                      {{ props.row.note }}
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div>
              <el-button
                :disabled="
                  (props.row.dealOrderPeo == null &&
                    props.row.orderStatus == 2 &&
                    props.row.orderType == 0) ||
                  (props.row.dealOrderPeo == null && props.row.buyStatus == -1)
                    ? false
                    : true
                "
                v-if="isAuth('ord:order:lock')"
                size="small"
                type="primary"
                round
                @click="lockOrder(props.row.id)"
                >跟单</el-button
              >
              <el-button
                :disabled="
                  (props.row.buyStatus == 0 ||
                    props.row.buyStatus == -1 ||
                    props.row.buyStatus == 1) &&
                  me == props.row.dealOrderPeo &&
                  props.row.orderStatus == 2
                    ? false
                    : true
                "
                v-if="isAuth('ord:order:deal')"
                type="primary"
                round
                size="small"
                @click="dealWithOrder(props.row)"
                >下单</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="hotelName"
          header-align="center"
          align="center"
          label="酒店名称"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="联系人"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="orderStatus"
          header-align="center"
          align="center"
          label="订单状态"
          :formatter="statusOrder"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="buyStatus"
          header-align="center"
          align="center"
          label="采购状态"
          :formatter="statusBuy"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:10px"
        background
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="prev, pager, next"
      >
      </el-pagination>
    </div>

    <el-drawer title="我是标题" :visible.sync="drawer" direction="btt">
      <div>
        <el-table :data="rpData" style="width: 100%">
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            label="名称"
            prop="name"
          >
          </el-table-column>
          <el-table-column align="center" label="客户支付" prop="payPrice">
          </el-table-column>
          <el-table-column align="center" label="分销支付" prop="buyPrice">
          </el-table-column>
          <el-table-column align="center">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="handleRecive(scope.$index, scope.row)"
                >下单</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="button">
          <el-col :span="4">
            <el-input
              size="small"
              v-model="reciveOtherData.price"
              placeholder="采购总价/分"
              clearable
            ></el-input>
          </el-col>

          <el-select
            v-model="state"
            size="small"
            placeholder="线下人工采购渠道"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button size="small" type="success" @click="handleReciveOther()"
            >发货</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataForm: {
        ordCode: "",
        dateTime: null,
        phone: ""
      },
      me: 0,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      expandRowKeys: [],
      drawer: false,

      options: [
        {
          value: "3",
          label: "线下"
        }
      ],
      state: "",
      rpData: [],
      dealId: 0,
      reciveOtherData: {
        price: null
      },
      rules: {
        price: [{ required: true, message: "价格不能为空", trigger: "blur" }],
        orderCode: [
          { required: true, message: "订单号不能为空", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 日期拼接
    date(data) {
      return data.inDate + "~" + data.outDate;
    },
    // 预定总价
    inAllPrice(data) {
      let allPrice = 0;
      let rate = data.rates;
      for (var value of rate) {
        allPrice += value.sellPrice * value.num;
      }
      return allPrice + "(分)";
    },
    // 采购总价计算
    buyAllPrice(data) {
      let allPrice = 0;
      let rate = data.rates;
      for (var value of rate) {
        allPrice += value.buyPrice * value.num;
      }
      return allPrice;
    },
    // 利润
    getPrice(data) {
      let buyPrice = data.payPrice;
      let sellPrice = 0;
      let rate = data.rates;
      for (var value of rate) {
        sellPrice += value.sellPrice * value.num;
      }
      return buyPrice - sellPrice;
    },
    // 下单
    handleRecive(index, row) {
      this.$confirm(`确定下单操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/ord/order/buy"),
            method: "get",
            params: this.$http.adornParams({
              id: this.dealId,
              rpCode: row.rpCode
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1000
              });
            } else {
              this.$message.error(data.msg);
            }
            this.drawer = false;
          });
        })
        .catch(() => {
          console.log("取消操作");
        });
    },
    // 自采下单
    handleReciveOther(index, row) {
      this.$confirm(`确定下单操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl("/ord/order/buyother"),
          method: "get",
          params: this.$http.adornParams({
            id: this.dealId,
            otherOrderCode: this.reciveOtherData.orderCode,
            price: this.reciveOtherData.price
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1000
            });
          } else {
            this.$message.error(data.msg);
          }
          this.reciveOtherData.price = "";
          this.drawer = false;
        });
      });
    },

    getExpandRowKeys(dataList) {
      let expandRowKeys = [];
      dataList.forEach(e => {
        if (
          e.note == "注意！直连订单，毛利小于0，取消直连，请人工处理。" ||
          e.note == "注意！直连订单，金额大于1000元，取消直连，请人工处理。" ||
          e.note == "注意！人工订单，毛利小于0。"
        ) {
          expandRowKeys.push(e.orderCode);
        }
      });
      this.expandRowKeys = expandRowKeys;
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/ord/order/list"),
        method: "post",
        data: this.$http.adornData({
          page: this.pageIndex,
          limit: this.pageSize,
          ordCode: this.dataForm.ordCode,
          dateTime: this.dataForm.dateTime,
          phone: this.dataForm.phone
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
          this.me = data.me;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
        this.$nextTick(() => {
          this.getExpandRowKeys(this.dataList);
        });
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 跟单
    lockOrder(id) {
      this.$http({
        url: this.$http.adornUrl("/ord/order/lock"),
        method: "get",
        params: this.$http.adornParams({
          id: id
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1000,
            onClose: () => {
              this.getDataList();
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },

    // 处理订单
    dealWithOrder(val) {
      this.$http({
        url: this.$http.adornUrl("/ord/order/deal"),
        method: "get",
        params: this.$http.adornParams({
          dealOrderPeo: val.dealOrderPeo,
          id: val.id,
          buyStatus: val.buyStatus,
          orderStatus: val.orderStatus
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.drawer = true;
          this.dealWithInit(val.id);
        } else {
          this.$message.error(data.msg);
        }
      });
    },

    dealWithInit(id) {
      this.dealId = id || 0;
      this.$nextTick(() => {
        if (this.dealId) {
          this.$http({
            url: this.$http.adornUrl("/ord/order/rateslist"),
            method: "get",
            params: this.$http.adornParams({
              id: this.dealId
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.rpData = data.list;
            }
          });
        }
      });
    },
    buySource(data) {
      let status = data.buySource;
      return status === 1
        ? "携程"
        : status === 2
        ? "美团"
        : status === 3
        ? "人工线下采购"
        : status === 4
        ? "其他"
        : "";
    },
    // 入住时间段
    dateStr(data) {
      return data.checkInDate + "~" + data.checkOutDate;
    },
    // 订单类型
    orderType(data) {
      let status = data.orderType;
      return status === 0 ? "人工订单" : status === 1 ? "直连订单" : "其他";
    },
    // 订单状态判断
    statusOrder(data) {
      let status = data.orderStatus;
      return status === 1
        ? "未支付"
        : status === 2
        ? "已支付"
        : status === 3
        ? "已发货"
        : status === 4
        ? "已入住"
        : status === -1
        ? "申请退款"
        : status === -2
        ? "已退款"
        : status === -3
        ? "关单"
        : status === -4
        ? "已入住"
        : status === -5
        ? "申请取消订单"
        : "其他";
    },
    // 采购状态判断
    // 0未采购，1已受理（已提交）2已采购 -1 采购失败 -2 已退单
    statusBuy(data) {
      let status = data.buyStatus;
      return status === 0
        ? "未采购"
        : status === 1
        ? "已受理"
        : status === 2
        ? "采购中"
        : status === 3
        ? "已采购"
        : status === -1
        ? "采购失败"
        : status === -2
        ? "退款中"
        : status === -3
        ? "已退款"
        : status === -4
        ? "退款失败"
        : status === -5
        ? "订单取消中"
        : status === -6
        ? "已取消"
        : status === -7
        ? "取消失败"
        : status === -8
        ? "已入住"
        : "其他";
    }
  }
};
</script>

<style></style>
