<template>
  <section class="order_management">
    <ai-list isTabs>
      <template slot="content">
        <ai-search-bar>
          <template slot="left">
            <el-select
                size="small"
                v-model="searchObj.shopId"
                placeholder="请选择店铺"
                clearable
                @change="(page.current = 1), getList()">
              <el-option
                  v-for="(item, i) in shopList"
                  :key="i"
                  :label="item.shopName"
                  :value="item.id">
              </el-option>
            </el-select>
            <el-select
                size="small"
                v-model="searchObj.orderStatus"
                placeholder="请选择状态"
                clearable
                @change="(page.current = 1), getList()">
              <el-option
                  v-for="(item, i) in dict.getDict('integralOrderStatus')"
                  :key="i"
                  :label="item.dictName"
                  :value="item.dictValue">
              </el-option>
            </el-select>
            <ai-search label="创建时间">
              <el-date-picker
                  v-model="searchObj.createTimeStart"
                  type="date"
                  size="small"
                  @change="(page.current = 1), getList()"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="开始日期">
              </el-date-picker>
              <el-date-picker
                  v-model="searchObj.createTimeEnd"
                  type="date"
                  size="small"
                  @change="(page.current = 1), getList()"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="结束日期">
              </el-date-picker>
            </ai-search>
          </template>

          <template slot="right">
            <el-input
                v-model="searchObj.name"
                size="small"
                placeholder="订单号/商品名/兑换家庭"
                v-throttle="() => {page.current = 1, getList()}"
                @clear="page.current = 1, searchObj.name = '', getList()"
                clearable
                suffix-icon="iconfont iconSearch"
            />
          </template>
        </ai-search-bar>
        <ai-search-bar>
          <template slot="left">
            <!-- <el-button type="primary" icon="iconfont iconAdd" @click="add()">添加</el-button> -->
            <ai-download
                :instance="instance"
                url="/app/appvillagerintegralshoporder/listExport"
                :params="{ ...searchObj, areaId: areaId, ids: ids.join(',') }"
                fileName="订单管理"
                v-if="$permissions('app_appvillagerintegralshoporder_export')">
            </ai-download>
            <el-dropdown @command="handleCommand">
              <el-button type="primary">
                变更状态<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">批量兑换</el-dropdown-item>
                <el-dropdown-item command="2">批量取消</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template slot="right"></template>
        </ai-search-bar>
        <ai-table
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="page.total"
            :current.sync="page.current"
            @select="onRowClick"
            @select-all="onRowClick"
            row-key="id"
            :default-expand-all="false"
            :tree-props="{ children: 'merchandiseList' }"
            :size.sync="page.size"
            @getList="getList">
          <el-table-column
              align="center"
              type="selection"
              :selectable="(row,index)=>row.orderStatus==0"
              width="55"
              slot="selection">
          </el-table-column>
          <el-table-column
              label="订单号/创建时间"
              slot="orderCode"
              align="center"
              width="150">
            <template v-slot="{ row }">
              <el-row>
                <el-col>{{ row.orderCode }}</el-col>
                <el-col style="color: #999999">{{ row.createTime }}</el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
              label="商品图"
              slot="merchandisePhoto"
              align="center"
              width="130">
            <template v-slot="{ row }">
              <ai-uploader
                  :disabled="true"
                  :instance="instance"
                  v-model="row.merchandisePhoto"
                  :limit="9">
              </ai-uploader>
            </template>
          </el-table-column>
          <el-table-column label="兑换家庭" slot="familyName" align="left">
            <template v-slot="{ row }">
              <el-row>
                <el-col style="width: 100%">{{ row.familyName }}</el-col>
                <el-col style="color: #999999">{{ row.familyPhone }}</el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="操作人" slot="createUserName" align="left">
            <template v-slot="{ row }">
              <el-row>
                <el-col style="width: 100%">{{ row.createUserName }}</el-col>
                <el-col style="color: #999999">{{
                    row.createUserPhone
                  }}
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
              label="订单状态"
              slot="orderStatus"
              align="center"
              width="130"
              fixed="right">
            <template v-slot="{ row }">
              <el-row v-if="row.isParent">
                <el-col
                    style="width: 100%"
                    :style="{
                    color: dict.getColor(
                      'integralOrderStatus',
                      row.orderStatus
                    ),
                  }"
                >{{
                    dict.getLabel("integralOrderStatus", row.orderStatus)
                  }}
                </el-col
                >
                <el-col style="width: 100%" v-if="row.orderStatus == 0"
                >{{ row.reserveDate }} {{ row.reserveTime }}
                </el-col
                >
                <el-col style="color: #2266ff; width: 100%" v-if="row.remark">
                  <el-tooltip
                      :disabled="!row.remark"
                      class="item"
                      effect="light"
                      :content="row.remark"
                      placement="left-end"
                  >
                    <el-link type="primary">备注</el-link>
                  </el-tooltip>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              slot="options"
              align="center"
              width="120"
              fixed="right">
            <template v-slot="{ row }">
              <div class="table-options">
                <el-button v-if="row.orderCode" type="text" @click="goDetail(row)" title="详情"
                           :disabled="!$permissions('app_appvillagerintegralshoporder_detail')">详情
                </el-button>
                <template v-if="row.orderStatus==0 || row.orderStatus==3">
                  <el-button type="text" v-if="row.orderStatus==0" @click="handlePendingOrder(row.id,1)">确认兑换</el-button>
                  <el-button type="text" v-if="row.orderStatus==0 || row.orderStatus==3" @click="handlePendingOrder(row.id,2)">取消订单</el-button>
                </template>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
  </section>
</template>

<script>
export default {
  name: "orderManagement",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    areaId: String,
  },
  data() {
    return {
      searchObj: {
        name: "",
        orderStatus: "",
        createTimeStart: null,
        createTimeEnd: null,
        shopId: "",
      },
      page: {
        size: 10,
        current: 1,
        total: 0,
      },
      tableData: [],
      shopList: [],
      ids: [],
    };
  },
  computed: {
    colConfigs() {
      let _ = this;
      return [
        {slot: "selection"},
        {
          prop: "orderCode",
          align: "center",
          slot: "orderCode",
          label: "订单号/创建时间",
        },
        {
          prop: "merchandisePhoto",
          slot: "merchandisePhoto",
          align: "center",
          label: "商品图",
        },
        {
          prop: "merchandiseName",
          align: "left",
          label: "商品名",
          width: 180,
          "show-overflow-tooltip": false,
        },
        {
          prop: "costIntegral",
          align: "center",
          label: "单价",
          width: 100,
        },
        {
          prop: "merchandiseNumber",
          align: "center",
          label: "数量",
        },
        {
          prop: "allCostIntegral",
          align: "center",
          label: "消耗积分",
        },
        {
          prop: "familyName",
          align: "center",
          label: "兑换家庭",
          slot: "familyName",
        },
        {
          prop: "createUserName",
          align: "center",
          label: "操作人",
          slot: "createUserName",
        },
        {
          prop: "orderStatus",
          align: "center",
          label: "订单状态",
          fixed: "right",
          slot: "orderStatus",
          // render(h, {row}) {
          //     return h('span', {style: {color: _.dict.getColor('integralOrderStatus', row.orderStatus)}}, _.dict.getLabel('integralOrderStatus', row.orderStatus))
          // }
        },
      ];
    },
  },
  created() {
    this.getList();
    this.dict.load("integralOrderStatus");
    this.getShopList();
  },
  methods: {
    onRowClick(row) {
      this.ids = row.map(e => e.id)
    },
    handleCommand(val) {
      if (this.ids.length == 0) {
        return this.$message.error("请选择商品")
      }
      this.instance.post(`/app/appvillagerintegralshoporder/changeOrderStatus`, null, {
        params: {
          ids: this.ids.join(","),
          status: val
        }
      }).then(res => {
        if (res.code == 0) {
          this.$message.success(`批量${val == 1 ? '兑换' : '取消'}成功`)
          this.getList()
        }
      })
    },
    handlePendingOrder(ids, status) {
      let text = status == 1 ? "确认兑换" : "取消订单"
      this.$confirm(`是否${text}?`).then(() => {
        this.instance.post(`/app/appvillagerintegralshoporder/changeOrderStatus`, null, {
          params: {ids, status}
        }).then(res => {
          if (res.code == 0) {
            this.$message.success(`${text}成功`)
            this.getList()
          }
        })
      }).catch(() => 0)
    },
    getList() {
      this.instance.post(`/app/appvillagerintegralshoporder/list`, null, {
        params: {
          ...this.searchObj,
          ...this.page,
          areaId: this.areaId,
        },
      })
      .then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records;
          this.tableData.map((e) => {
            e.merchandiseName = e.merchandiseList[0].merchandiseName;
            e.merchandiseNumber = e.merchandiseList[0].merchandiseNumber;
            e.merchandisePhoto = [
              {...JSON.parse(e.merchandiseList[0].merchandisePhoto)[0]},
            ];
            e.idForWeb = e.merchandiseList[0].idForWeb;
            e.costIntegral = e.merchandiseList[0].costIntegral;
            e.allCostIntegral =
                Number(e.merchandiseList[0].costIntegral) *
                Number(e.merchandiseNumber);
            e.merchandiseList.splice(0, 1);
            e.isParent = true;
            if (e.merchandiseList.length > 0) {
              e.merchandiseList.map((e2) => {
                e2.createTime = "";
                let arr = JSON.parse(e2.merchandisePhoto);
                e2.merchandisePhoto = [{...arr[0]}];
                e2.allCostIntegral =
                    Number(e2.costIntegral) * Number(e2.merchandiseNumber);
                e2.isParent = false;
                // e2.id = e2.orderId
              });
            }
          });
          this.page.total = res.data.total;
        }
      });
    },
    getShopList() {
      return new Promise((reslove) => {
        this.instance
        .post(`/app/appvillagerintegralshop/list`, null, {
          params: {
            size: 100000,
            areaId: this.areaId,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.shopList = res.data.records;
            reslove();
          }
        });
      });
    },
    reset() {
      Object.keys(this.searchObj).forEach((e) => {
        this.searchObj[e] = "";
      });
      this.searchObj.createTimeStart = null;
      this.searchObj.createTimeEnd = null;
      this.getList();
    },
    add() {
      this.$emit("showDetail", {isAdd: true});
    },
    goDetail(row) {
      console.log(row);
      this.$emit("showDetail", {isAdd: false, ...row});
    },
    finishOrder(row) {
      this.$confirm(`是否完成此订单？`, {
        type: "error",
      })
      .then(() => {
        this.instance
        .post(`/app/appvillagerintegralshoporder/FinishOrder`, null, {
          params: {
            orderId: row.id,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("已完成！");
            this.getList();
          }
        });
      })
      .catch(() => {
      });
    },
    overOrder(row) {
      this.$confirm(`是否结束此订单？`, {
        type: "error",
      })
      .then(() => {
        this.instance
        .post(`/app/appvillagerintegralshoporder/overOrder`, null, {
          params: {
            orderId: row.id,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("已结束！");
            this.getList();
          }
        });
      })
      .catch(() => {
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order_management {
  height: 100%;
  overflow: auto;
  background: #f3f6f9;

  .times_div {
    display: flex;
    align-items: center;

    .times {
      display: block;
      width: 72px;
      height: 30px;
      line-height: 30px;
      margin: 0;
      text-align: center;
      background: #f5f5f5;
      border-radius: 2px 0px 0px 2px;
      border: 1px solid #d0d4dc;
      font-size: 14px;
      color: #666666;
    }
  }

  .iconfont {
    cursor: pointer;
  }

  .iconCorrect {
    color: #53b43b;
  }

  .iconReject {
    color: #e75555;
    padding: 0 8px;
  }
}
</style>
