<template>
  <el-dialog title="修改订单商品" :visible.sync="show" width="80%" :show-close="false" :close-on-click-modal="false" append-to-body :destroy-on-close="true">
    <el-form label-width="80px" class="form">
      <el-form-item label="选择商品:">
        <el-select v-model="selelctedGoodId" placeholder="选择商品">
          <el-option v-for="item in goodList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-input v-model="selelctedGoodNum" type="number" placeholder="输入数量" min="1" style="width:200px" />
        <el-button type="primary" @click="handleAddCar">添加到购物车</el-button>
      </el-form-item>
    </el-form>
    <el-table border stripe :header-cell-style="{ background: '#eef1f9' }" class="table" :data="detail ? detail.goods_detail : []">
      <el-table-column type="index" width="60" align="center" />
      <el-table-column prop label="主图" align="center">
        <template slot-scope="{ row }">
          <el-image style="width: 24px; height: 24px" :src="row.main_img" fit="fill" align="center" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" align="center" />
      <el-table-column prop="size" label="商品规格" align="center" />
      <el-table-column prop="num" label="数量" align="center">
        <template slot-scope="{ row }">
          <el-input-number v-model="row.num" :min="1" size="small" />
        </template>
      </el-table-column>
      <el-table-column prop="unit" label="单位" align="center" />
      <el-table-column prop label="单价">
        <template slot-scope="{ row }">
          {{ row.price }}
        </template>
      </el-table-column>
      <el-table-column prop="money" label="金额小计" align="center">
        <template slot-scope="{ row }">
          {{ (row.price * row.num) | toThousandFilter }}
        </template>
      </el-table-column>
      <el-table-column prop="money" label="删除" align="center">
        <template slot-scope="{ $index }">
          <i style="font-size: 24px" class="el-icon-delete" @click="detail.goods_detail.splice($index, 1)" />
        </template>
      </el-table-column>
    </el-table>
    <el-form label-width="100px" style="margin: 20px 0">
      <el-form-item label="是否添加赠品:">
        <el-switch
          v-model="isGift"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
      <el-form-item v-if="isGift" label="选择活动赠品:">
        <el-select v-model="activity_id" style="width: 400px">
          <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <span v-if="detail" style="margin-right: 24px">
        应付金额： <span style="color: red">{{ detail.goods_detail.reduce((t, e) => e.price * e.num + t, 0) | toThousandFilter }}</span>
      </span>
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getGoodsList } from '@/api/order/list'
import { changeOrderGoodList } from '@/api/order/change'
import { activityList } from '@/api/giftB'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      temp: null,
      detail: null,
      goodList: [],
      selelctedGoodId: '',
      selelctedGoodNum: '',
      isShow: false,
      isGift: false,
      activity_id: '',
      activitys: []
    }
  },
  created() {
    this.activity_id = ''
    this.temp = JSON.parse(JSON.stringify(this.data))
    this.detail = JSON.parse(JSON.stringify(this.data))
    this.detail.goods_detail.forEach(e => {
      if (!e.price) {
        e.price = e.money / e.num
      }
      e.money = e.price * e.num
    })
    this.$request(getGoodsList({ mobile: this.detail.get_user.mobile }), ({ good }) => {
      good.forEach(e => {
        e.name += ` - ${e.size}`
        e.price = e.money
        e.num = 0
        e.money = 0
      })
      this.goodList = good
    })
    this.activityList()
  },
  methods: {
    async activityList() {
      await activityList().then(res => {
        if (res.code === 200) {
          this.activitys = res.data
          res.data.map(item => {
            if (item.is_ing === 1) {
              this.activity_id = item.id
            } else {
              this.activity_id = res.data[0].id
            }
          })
        }
      })
    },
    handleAddCar() {
      if (!this.selelctedGoodId || !this.selelctedGoodNum || this.selelctedGoodNum === '0') {
        this.$message.warning('请选择并正确填写商品数量')
        return false
      }
      const index = this.detail.goods_detail.findIndex(e => e.id === this.selelctedGoodId)
      if (index === -1) {
        this.detail.goods_detail.push({ ...this.goodList.find(e => e.id === this.selelctedGoodId), num: this.selelctedGoodNum })
      } else {
        this.detail.goods_detail[index].num = Number(this.detail.goods_detail[index].num) + Number(this.selelctedGoodNum)
      }
      this.selelctedGoodId = ''
      this.selelctedGoodNum = ''
    },
    submit() {
      const order_id = this.detail.id
      const size_id = this.detail.goods_detail.map(e => e.id)
      const num = this.detail.goods_detail.map(e => e.num)
      const total = this.detail.goods_detail.reduce((t, e) => t + Number(e.num), 0)
      const money = this.detail.goods_detail.reduce((t, e) => t + Number(e.num) * Number(e.price), 0)
      const type = this.detail.goods_detail.length
      const del_id = this.temp.goods_detail.map(e => e.id).filter(e => !this.detail.goods_detail.map(d => d.id).includes(e))
      const activity_id = this.isGift ? this.activity_id : ''
      this.$request(changeOrderGoodList({ order_id, size_id, num, total, money, type, del_id, activity_id }), data => {
        this.$emit('close')
        this.$message.success('修改成功')
        this.$emit('refresh')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-select {
    width: 320px;
  }
</style>
