<template>
  <el-dialog
    class="dialog-height-65"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="60%"
    @close="close"
  >
    <div :loading="loading">
      <div style="margin-bottom: 10px">
        <el-input v-model="chain_code" :placeholder="__('请输入提货码/服务码')">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getOrderByPickUpCode"
          />
        </el-input>
      </div>
      <div v-show="itemData && itemData.length > 0">
        <div>
          <div style="color: red; font-weight: 400; font-size: 18px">
            {{ detail.order_state_name }}
          </div>
          <div
            class="span_margin_right_10"
            style="position: relative; overflow: auto; line-height: 30px"
          >
            <span>{{ __('订单号：') }}</span>
            <span v-if="detail">{{ detail.order_id }}</span>
            <span>{{ __('客户名称：') }}</span>
            <span v-if="detail">{{ detail.buyer_user_name }}</span>
            <span>{{ __('留言：') }}</span>
            <span v-if="detail">{{ detail.order_message }}</span>
            <span>{{ __('送货时间：') }}</span>
            <span v-if="detail">{{ detail.delivery_time_name }}</span>
            <span v-show="detail.chain_code_status === 0" style="float: right">
              <el-button :disabled="loading" @click="doPickUp">
                {{ __('确认提货') }}
              </el-button>
            </span>
          </div>
        </div>

        <el-table
          ref="itemTable"
          border
          :data="itemData"
          height="300"
          show-summary
          style="width: 100%; margin-top: 20px"
          :summary-method="getSummaries"
        >
          <el-table-column
            height="250"
            :label="__('商品图片')"
            prop="order_item_image"
          >
            <template slot-scope="scope">
              <el-image
                fit="fit"
                :src="scope.row.order_item_image"
                style="width: 35px; height: 35px"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="__('商品名称')"
            prop="item_name"
            show-overflow-tooltip
            width="160"
          />
          <el-table-column
            align="center"
            :label="__('单位')"
            prop="order_detail_unit_name"
          />
          <el-table-column
            align="center"
            :label="__('积分')"
            prop="item_unit_points"
          />
          <el-table-column
            align="center"
            :label="__('单价')"
            prop="order_item_unit_price"
          />
          <el-table-column
            align="center"
            :label="__('数量')"
            prop="order_item_quantity"
          />
          <el-table-column
            align="center"
            :label="__('金额小计')"
            prop="order_item_amount"
          />
          <el-table-column
            align="center"
            :formatter="formatActivityType"
            :label="__('活动类型')"
            prop="activity_type_id"
          />
          <el-table-column
            align="center"
            :formatter="formatSync"
            :label="__('是否转单')"
            prop="order_item_supplier_sync"
          />
        </el-table>
        <div style="margin-top: 10px">
          <el-row>
            <el-col :offset="18" :span="3">
              <span>{{ __('活动优惠：￥') }}</span>
            </el-col>
            <el-col :span="3">
              {{ detail.order_discount_amount }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :offset="18" :span="3">
              <span>{{ __('优惠券抵扣：￥') }}</span>
            </el-col>
            <el-col :span="3">
              {{ detail.voucher_price }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :offset="18" :span="3">
              <span>
                <el-button
                  v-if="order_state_id === 2010"
                  circle
                  icon="el-icon-edit"
                  type="text"
                />
                <span>{{ __('运费：￥') }}</span>
              </span>
            </el-col>
            <el-col :span="3">
              {{ detail.order_shipping_fee }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :offset="18" :span="3">
              <span>{{ __('应付金额：￥') }}</span>
            </el-col>
            <el-col :span="3" style="color: red">
              {{ detail.order_payment_amount }}
            </el-col>
          </el-row>
        </div>
        <div>
          <div style="font-weight: 400; font-size: 18px; padding-top: 50px">
            {{ __('收货信息') }}
          </div>
          <el-divider />
          <div>
            <span>{{ __('收货人 ：') }}</span>
            <span v-if="detail.delivery">{{ detail.delivery.da_name }}</span>
            &nbsp;&nbsp;
            <span>{{ __('联系方式 ：') }}</span>
            <span v-if="detail.delivery">
              +{{ detail.currency_id }}{{ detail.delivery.da_mobile }}
            </span>
            &nbsp;&nbsp;
            <span>{{ __('收货地址') }}:</span>
            <span>{{ shippingAddress }}</span>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { pickUpCode, doPickUp } from '@/api/order/chain/code'

  export default {
    name: 'PickUpWriteOff',
    data() {
      return {
        data: {},
        order_state_id: undefined,
        chain_code: undefined,
        loading: false,
        itemData: [],
        detail: {},
        title: '',
        dialogFormVisible: false,
        activityTypes: [
          { value: 1101, label: this.__('加价购') },
          { value: 1102, label: this.__('店铺满赠') },
          { value: 1103, label: this.__('限时折扣') },
          { value: 1104, label: this.__('优惠套装') },
          { value: 1105, label: this.__('店铺优惠券') },
          { value: 1106, label: this.__('砸金蛋') },
          { value: 1107, label: this.__('满减') },
          { value: 1109, label: this.__('积分换购') },
          { value: 1130, label: this.__('礼包活动') },
          { value: 1131, label: this.__('市场活动') },
          { value: 1121, label: this.__('幸运大抽奖') },
          { value: 1122, label: this.__('秒杀') },
          { value: 1123, label: this.__('拼团') },
          { value: 1124, label: this.__('砍价') },
          { value: 1125, label: this.__('一元购') },
          { value: 1126, label: this.__('团购') },
          { value: 1127, label: this.__('批发团购') },
          { value: 1132, label: this.__('组合套餐') },
          { value: 1108, label: this.__('满返') },
          { value: 1135, label: this.__('单件折') },
          { value: 1130, label: this.__('礼包活动') },
          { value: 1133, label: this.__('多件折') },
          { value: 1136, label: this.__('多倍积分') },
          { value: 1140, label: this.__('折上折') },
          { value: 5001, label: this.__('今日爆款') },
          { value: 5002, label: this.__('每日好店') },
          { value: 5003, label: this.__('限时秒杀') },
          { value: 5004, label: this.__('天天秒淘') },
          { value: 5005, label: this.__('零元购') },
          { value: 5006, label: this.__('高额返区') },
        ],
        paymentMets: [
          {
            value: 1,
            label: this.__('余额支付'),
          },
          {
            value: 2,
            label: this.__('充值卡支付'),
          },
          {
            value: 3,
            label: this.__('积分支付'),
          },
          {
            value: 4,
            label: this.__('信用支付'),
          },
          {
            value: 5,
            label: this.__('红包支付'),
          },
          {
            value: 6,
            label: this.__('线下支付'),
          },
          {
            value: 7,
            label: this.__('众宝支付'),
          },
        ],
      }
    },
    computed: {
      shippingAddress() {
        const delivery = this.detail.delivery
        if (!delivery) return ''

        let daProvince = delivery.da_province
        let daCity = delivery.da_city
        let daCounty = delivery.da_county
        let daAddress = delivery.da_address
        return daProvince + '/' + daCity + '/' + daCounty + ' ' + daAddress
      },
    },
    methods: {
      __,
      formatActivityType(row) {
        let activity_type_id = row.activity_type_id
        const obj = this.activityTypes.find(
          (item) => item.value === activity_type_id
        )
        return obj ? obj.label : '无'
      },
      formatPaymentMet(row) {
        let payment_met_id = row.payment_met_id
        const obj = this.paymentMets.find(
          (item) => item.value === payment_met_id
        )
        return obj ? obj.label : ''
      },
      formatSync(row) {
        return row.order_item_supplier_sync === 0
          ? this.__('否')
          : this.__('是')
      },
      showEdit() {
        this.title = this.__('提货核销')
        this.dialogFormVisible = true
      },
      // 统计
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        if (!data.length || !data) return sums
        columns.forEach((column, index) => {
          if (index === 1) {
            sums[index] = '合计'
            return
          }
          if (index === 6 || index === 5) {
            if(!data) return;
            const values = data.map((item) => Number(item[column.property]))
            if (!values.every((value) => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return prev + curr
                } else {
                  return prev
                }
              }, 0)
            }
          }
        })
        return sums
      },
      close() {
        this.detail = {}
        this.itemData = []
        this.order_state_id = undefined
        this.chain_code = undefined
        this.dialogFormVisible = false
      },
      async getOrderByPickUpCode() {
        let chain_code = this.chain_code
        this.loading = true
        if (chain_code) {
          const { data, msg } = await pickUpCode({
            chain_code: chain_code,
          })
          if (data) {
            this.detail = data
            this.itemData = data.items
          } else {
            this.detail = {}
            //this.itemData = {} 标记
            this.$baseMessage(msg, 'error')
          }
        } else {
          this.detail = {}
          //this.itemData = {}  标记
          this.$baseMessage('请输入自提码/服务码', 'error')
        }
        this.loading = false
      },
      async doPickUp() {
        let order_id = this.detail.order_id
        let chain_code = this.detail.chain_code
        this.loading = true
        if (order_id) {
          const { msg, status } = await doPickUp({
            chain_code: chain_code,
            order_id: order_id,
          })
          if (200 == status) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
          await this.getOrderByPickUpCode()
          this.$emit('fetch-data')
        }
        this.loading = false
      },
    },
  }
</script>
<style>
  .dialog-height-65 .el-dialog__body {
    height: 68vh;
    overflow: auto;
  }

  .span_margin_right_10 span {
    margin-right: 10px;
  }
</style>
