<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>
            <div class="times_div">
              <p class="times">创建时间</p>
              <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>
            </div>
          </template>

          <template slot="right">
            <el-input
              v-model="searchObj.name"
              size="small"
              placeholder="订单号/商品名/兑换家庭"
              @keyup.enter.native="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 }"
              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"
          ref="aitableex"
          :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>
              </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()
          }
        })
      },
      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>
