<template>
  <el-dialog title="修改订单商品" :visible.sync="show" width="80%" :show-close="false" :close-on-click-modal="false" :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>
    <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 { updateOrder, orderGoods } from '@/api/studio/order'

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      temp: null,
      detail: null,
      goodList: [],
      selelctedGoodId: '',
      selelctedGoodNum: '',
      isShow: false,
      activitys: []
    }
  },
  created() {
    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.getOrderGoods()
  },
  methods: {
    // 获取商品
    getOrderGoods() {
      const loading = this.$loading()
      orderGoods({
        mobile: this.detail.get_user.mobile
      }).then(res => {
        loading.close()
        if (res.code === 200) {
          this.goodList = res.data.good.map(e => {
            e.name += ` - ${e.size}`
            e.price = e.money
            e.num = 0
            e.money = 0
            return e
          })
        } else {
          this.$message.error(res.message || '获取工作室商品失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('获取工作室商品失败')
      })
    },
    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 = ''
      const data = {
        order_id: this.detail.id,
        size_id: this.detail.goods_detail.map(e => e.id),
        num: this.detail.goods_detail.map(e => e.num),
        total: this.detail.goods_detail.reduce((t, e) => t + Number(e.num), 0),
        money: this.detail.goods_detail.reduce((t, e) => t + Number(e.num) * Number(e.price), 0),
        type: this.detail.goods_detail.length,
        del_id: this.temp.goods_detail.map(e => e.id).filter(e => !this.detail.goods_detail.map(d => d.id).includes(e)),
        activity_id: ''
      }
      updateOrder(data).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.$emit('close')
          this.$message.success('修改成功')
          this.$emit('refresh')
        } else {
          this.$message.error(res.message || '修改失败')
        }
      }).catch(res => {
        this.loadingFull = false
        this.$message.error(res.message || '修改失败')
      })
      // updateOrder({ order_id, size_id, num, total, money, type, del_id, activity_id }).then(res=>{
      //   if(res.code == 200) {
      //     // console.log(res)
      //     this.$emit('close')
      //     this.$message.success('修改成功')
      //     this.$emit('refresh')
      //   } else {
      //     this.$message.error(res.message)
      //   }
      // })
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-select {
    width: 320px;
  }
</style>
