<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)=>Number(row.inventoryNumber)>0"/>
        </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 {
    :deep( .el-table td ){
      border-bottom: none;
      padding: 2px 0;
    }

    :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>
