<template>
  <section class="add_order">
    <ai-detail>
      <template slot="title">
        <ai-title :title="title" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="$emit('goBack')"></ai-title>
      </template>
      <template slot="content" v-if="info.isAdd">
        <ai-card title="订单信息">
          <template #content>
            <div class="form_div">
              <el-form
                ref="rules"
                :model="forms"
                :rules="formRules"
                size="small"
                label-suffix="："
                label-width="100px">
                <el-form-item label="店铺名称" prop="shopId">
                  <el-select
                    v-model="forms.shopId"
                    placeholder="请选择..."
                    @change="(forms.merchandiseList = []), (goodIntegral = {})"
                    clearable>
                    <el-option
                      v-for="(item, i) in shopList"
                      :key="i"
                      :label="item.shopName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="兑换家庭" prop="name">
                  <el-row type="flex" :gutter="8">
                    <el-col
                      ><el-input v-model="forms.name" disabled clearable
                    /></el-col>
                    <el-col>
                      <ai-person-select
                        :instance="instance"
                        url="/app/appvillagerintegralfamilymember/list"
                        headerTitle="家庭列表"
                        dialogTitle="选择家庭"
                        @selectPerson="getSelect"
                      >
                        <template name="option" v-slot:option="{ item }">
                          <span class="iconfont iconProlife">{{ item.name }}</span>
                          <ai-id
                            mode="show"
                            :show-eyes="false"
                            :value="item.idNumber"
                          />
                          <span>{{ item.phone }}</span>
                        </template>
                      </ai-person-select>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="积分余额">
                  <p>
                    <span style="color: #2266ff">{{ integral || "0" }}</span
                    >分
                  </p>
                </el-form-item>
                <el-form-item label="兑换商品" prop="merchandiseList">
                  <el-button @click="showGoodsList()" :disabled="!forms.shopId || !forms.name">选择商品</el-button>
                </el-form-item>
                <ai-table
                  :tableData="forms.merchandiseList"
                  :col-configs="colConfigs"
                  :isShowPagination="false">
                  <el-table-column
                    label="商品图"
                    slot="photo"
                    align="center"
                    width="150">
                    <template v-slot="{ row }">
                      <ai-uploader
                        :disabled="true"
                        :instance="instance"
                        v-model="row.photo"
                        :limit="9">
                      </ai-uploader>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="兑换数量"
                    width="180"
                    slot="merchandiseNumber"
                    align="center">
                    <template v-slot="{ row }">
                      <el-input-number
                        :min="1"
                        :max="row.inventoryNumber"
                        size="mini"
                        v-model="merchandiseNumbers[row.id]"
                        @change="
                          (currentValue, oldValue) =>
                            changeNumber(currentValue, oldValue, row)
                        "
                        :step="1"
                        step-strictly
                      ></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column label="消耗积分" slot="integral" align="center">
                    <template v-slot="{ row }">
                      <span>{{ goodIntegral[row.id] }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    slot="options"
                    label="操作"
                    align="center"
                    width="60"
                  >
                    <template slot-scope="row">
                      <el-button
                        type="text"
                        class="icon-color89B"
                        icon="iconfont iconDelete"
                        title="删除"
                        @click="deleteGood(row)"
                      />
                    </template>
                  </el-table-column>
                </ai-table>
                <div class="total">
                  <p class="num">
                    <span>合计积分：</span>
                    <span>{{ allIntegral }}</span>
                    <span>分</span>
                  </p>
                  <p class="tip" v-if="allIntegral > Number(integral)">
                    （积分不足，请删减商品）
                  </p>
                </div>
              </el-form>
            </div>
          </template>
        </ai-card>
      </template>
      <template slot="content" v-if="!info.isAdd">
        <ai-card title="订单信息">
          <template #content>
            <div class="info">
              <ai-wrapper label-width="70px" :columnsNumber="1">
                <ai-info-item label="订单号"><span>{{ detailInfo.orderCode }}</span></ai-info-item>
                <ai-info-item label="创建时间"><span>{{ detailInfo.createTime }}</span></ai-info-item>
                <ai-info-item label="店铺名"><span>{{ detailInfo.shopName }}</span></ai-info-item>
                <ai-info-item label="状态">
                  <span :style="{ color: dict.getColor('integralOrderStatus', detailInfo.orderStatus)}">
                    {{ dict.getLabel("integralOrderStatus", detailInfo.orderStatus)}}
                  </span>
                </ai-info-item>
              </ai-wrapper>
              <ai-table
                :tableData="detailInfo.merchandiseList"
                :col-configs="colConfigs"
                :isShowPagination="false">
                <el-table-column
                  label="商品图"
                  slot="photo"
                  align="center"
                  width="150">
                  <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="兑换数量"
                  width="200"
                  slot="merchandiseNumber"
                  align="center">
                  <template v-slot="{ row }">
                    {{ row.merchandiseNumber }}
                  </template>
                </el-table-column>
                <el-table-column label="消耗积分" slot="integral" align="center">
                  <template v-slot="{ row }">
                    <span>{{ Number(row.merchandiseNumber) * Number(row.costIntegral) }}</span>
                  </template>
                </el-table-column>
              </ai-table>
              <div class="total">
                <p class="num">
                  <span>合计积分：</span>
                  <span>{{ detailInfo.orderIntegral }}</span>
                  <span>分</span>
                </p>
              </div>
            </div>
          </template>
        </ai-card>
        <ai-card title="兑换家庭信息">
          <template #content>
            <div class="info">
              <ai-wrapper label-width="70px" :columnsNumber="2">
                <ai-info-item label="户主"><span>{{ detailInfo.familyName }}</span></ai-info-item>
                <ai-info-item label="联系方式"><span>{{ detailInfo.familyPhone || "-" }}</span></ai-info-item>
              </ai-wrapper>
              <ai-wrapper label-width="70px" :columnsNumber="1">
                <ai-info-item label="备注"><span>{{ detailInfo.remark || "-" }}</span></ai-info-item>
              </ai-wrapper>
            </div>
          </template>
        </ai-card>
        <ai-card title="操作人信息">
          <template #content>
            <div class="info">
              <ai-wrapper label-width="70px">
                <ai-info-item label="操作人"><span>{{ detailInfo.createUserName || "-" }}</span></ai-info-item>
                <ai-info-item label="联系方式"><span>{{ detailInfo.createUserPhone || "-" }}</span></ai-info-item>
                <ai-info-item label="完成时间"><span>{{ detailInfo.finishTime || "-" }}</span></ai-info-item>
              </ai-wrapper>
            </div>
          </template>
        </ai-card>
      </template>
      <template slot="footer" v-if="info.isAdd">
        <el-button @click="$emit('goBack')" style="width: 120px">取消</el-button>
        <el-button type="primary" @click="save('rules')" style="width: 120px" :disabled="allIntegral > Number(integral)">确认兑换</el-button>
      </template>
    </ai-detail>
    <ai-dialog
      title="选择商品"
      :visible.sync="showGoods"
      :customFooter="true"
      :destroyOnClose="true"
      class="goods"
      @close="init"
      border
      width="780px">
      <div class="border_div">
        <header>
          <span>商品列表</span>
          <el-input
            v-model="keyWord"
            size="mini"
            placeholder="商品关键字"
            @keyup.enter.native="showGoodsList()"
            clearable
            style="width: 220px"
            suffix-icon="iconfont iconSearch"
          />
        </header>
        <ai-table
          :tableData="goodList"
          :col-configs="goodsConfig"
          :isShowPagination="false"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            slot="selection"
            type="selection"
            width="55"
            :selectable="
              (row, index) => {
                if (Number(row.inventoryNumber) > 0) {
                  return true;
                } else {
                  return false;
                }
              }
            "
          ></el-table-column>
        </ai-table>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="showGoods = false" size="medium">取消</el-button>
        <el-button @click="onConfirm()" type="primary" size="medium">确认</el-button>
      </div>
    </ai-dialog>
  </section>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "addOrder",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    info: Object,
    areaId: String,
  },
  data() {
    return {
      forms: {
        shopId: "",
        familyId: "",
        familyName: "",
        name: "",
        memberId: "",
        merchandiseList: [],
        phone: "",
      },
      integral: "",
      shopList: [],
      goodList: [],
      goodIntegral: {},
      merchandiseNumbers: {},
      showGoods: false,
      selectGoodList: [],
      keyWord: "",
      title: "",
      detailInfo: {},
    };
  },
  computed: {
    ...mapState(["user"]),
    formRules() {
      return {
        shopId: [{ required: true, message: "请选择店铺", trigger: "change" }],
        name: [
          { required: true, message: "请选择兑换家庭", trigger: "change" },
        ],
        merchandiseList: [
          { required: true, message: "请选择商品", trigger: "change" },
        ],
      };
    },
    colConfigs() {
      return [
        { slot: "photo", prop: "photo", label: "商品图", align: "center" },
        {
          prop: "merchandiseName",
          label: "商品名",
          align: "left",
          width: 160,
          "show-overflow-tooltip": false,
        },
        {
          prop: "costIntegral",
          label: "单价",
          align: "center",
          width: 60,
        },
        {
          slot: "merchandiseNumber",
          prop: "merchandiseNumber",
          label: "兑换数量",
          align: "center",
        },
        {
          prop: "inventoryNumber",
          label: "库存",
          align: "center",
          width: 60,
          hide: this.title == "兑换订单详情",
        },
        {
          slot: "integral",
          prop: "integral",
          label: "消耗积分",
          align: "center",
        },
        { slot: "options", label: "操作", align: "center" },
      ];
    },
    goodsConfig() {
      return [
        { slot: "selection", label: "", align: "center" },
        { prop: "merchandiseName", label: "商品名", align: "left", width: 350 },
        { prop: "costIntegral", label: "单价", align: "left" },
        { prop: "inventoryNumber", align: "center", label: "库存" },
      ];
    },
    allIntegral() {
      let arr = Object.keys(this.goodIntegral);
      let all = 0;
      arr.forEach((e) => {
        all += this.goodIntegral[e];
      });
      return all;
    },
  },
  created() {
    if (this.info.isAdd) {
      this.title = "添加兑换订单";
    } else {
      this.title = "兑换订单详情";
      this.searchDetail(this.info.id);
    }
    this.getShopList();
  },
  methods: {
    getSelect(val) {
      if (val) {
        this.forms.familyName = val.familyName;
        this.forms.familyId = val.familyId;
        this.forms.name = val.name;
        this.forms.memberId = val.id;
        this.forms.phone = val.phone;
        this.integral = val.integral;
      } else {
        this.forms.familyName = "";
        this.forms.familyId = "";
        this.forms.name = "";
        this.forms.memberId = "";
        this.forms.phone = "";
        this.integral = 0;
      }
    },
    handleSelectionChange(val) {
      this.selectGoodList = [...val];
    },
    onConfirm() {
      this.selectGoodsInit(this.selectGoodList).then(() => {
        this.showGoods = false;
      });
    },
    init() {
      this.selectGoodList = [];
      this.goodList = [];
    },
    deleteGood(row) {
      console.log(row);
      this.$confirm("是否删除该商品？", {
        type: "error",
      })
        .then(() => {
          this.forms.merchandiseList.splice(row.$index, 1);
          this.$delete(this.goodIntegral, row.row.id);
          this.$delete(this.merchandiseNumbers, row.row.id);
          return this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    selectGoodsInit(val) {
      return new Promise((reslove) => {
        val.map((e, index) => {
          e.merchandiseNumber = 1;
          e.merchandiseId = e.id;
          this.$set(this.merchandiseNumbers, e.id, 1);
          this.$set(this.goodIntegral, e.id, Number(e.costIntegral));
          if (e.photo) {
            e.merchandisePhoto = e.photo;
            e.photo = [{ ...JSON.parse(e.photo)[0] }];
          } else {
            e.photo = [];
          }
        });
        this.forms.merchandiseList = this.forms.merchandiseList.concat([
          ...val,
        ]);
        reslove();
      });
    },
    showGoodsList() {
      this.instance
        .post(`/app/appvillagerintegralmerchandise/list`, null, {
          params: {
            size: 100000,
            shopId: this.forms.shopId,
            merchandiseName: this.keyWord,
            status: "1",
          },
        })
        .then((res) => {
          if (res.code == 0) {
            if (this.forms.merchandiseList.length > 0) {
              this.forms.merchandiseList.forEach((e1, index1) => {
                res.data.records.forEach((e2, index2) => {
                  if (e1.id == e2.id) {
                    res.data.records.splice(index2, 1);
                  }
                });
              });
            }
            this.goodList = res.data.records;
            this.showGoods = true;
          }
        });
    },
    changeNumber(currentValue, oldValue, row) {
      console.log(currentValue, oldValue, row);
      this.$set(
        this.goodIntegral,
        row.id,
        Number(currentValue) * Number(row.costIntegral)
      );
    },
    getShopList() {
      this.instance
        .post(`/app/appvillagerintegralshop/listForOperator`, null, {
          params: {
            size: 100000,
            areaId: this.areaId,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.shopList = res.data.records;
          }
        });
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.forms.merchandiseList.forEach((e1, index1) => {
            Object.keys(this.merchandiseNumbers).forEach((e2, index2) => {
              if (e1.id == e2) {
                this.forms.merchandiseList[
                  index1
                ].merchandiseNumber = this.merchandiseNumbers[e2];
              }
            });
          });
          this.instance
            .post(
              `/app/appvillagerintegralshoporder/addOrder`,
              {
                ...this.forms,
                areaId: this.user.info.areaId,
                orderIntegral: this.allIntegral,
              },
              null
            )
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("提交成功");
                this.$emit("goBack");
              } else {
                return this.$message.error(res.msg);
              }
            });
        } else {
          return false;
        }
      });
    },
    searchDetail(id) {
      this.instance
        .post(`/app/appvillagerintegralshoporder/queryDetailById`, null, {
          params: {
            id,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.detailInfo = { ...res.data };
            this.detailInfo.merchandiseList.map((e) => {
              let arr = JSON.parse(e.merchandisePhoto);
              e.merchandisePhoto = [{ ...arr[0] }];
            });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.add_order {
  height: 100%;
  .form_div {
    padding: 16px 0;
  }
  .goods {
    ::v-deep .el-table td {
      border-bottom: none;
      padding: 2px 0;
    }
    ::v-deep .el-table th {
      padding: 2px 0;
    }
  }
  .total {
    width: 100%;
    padding: 32px 0;
    p {
      text-align: right;
      font-size: 14px;
    }
    .num {
      font-size: 14px;
      color: #333333;
      span:nth-child(1) {
        color: #999999;
      }
      span:nth-child(2) {
        color: #999999;
        color: #2266ff;
        font-size: 20px;
        font-weight: bold;
      }
    }
    .tip {
      color: #ff4466;
    }
  }
  .border_div {
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid #d0d4dc;
    header {
      height: 40px;
      background: #f5f5f5;
      padding: 0 8px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #d0d4dc;
      span {
        color: #333333;
        font-size: 12px;
      }
    }
  }
  .info {
    padding: 16px 0;
  }
}
</style>