<template>
  <div id="steps-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-steps :active="active" align-center finish-status="success">
          <el-step title="买家已申请退货"> </el-step>
          <el-step title="审核"> </el-step>
          <el-step title="查看买家寄出物流" v-if="active != 5"> </el-step>
          <el-step title="售后完成"> </el-step>
        </el-steps>
        <el-col :span="24">
          <el-col v-if="active == 0"> 买家已申请退货 </el-col>
          <el-col v-if="active == 1" style="text-align: center; margin: 15px 0; font-size: 18px">
            <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
              <el-form-item label="退款金额" prop="money">
                <el-input v-model="form.money" placeholder="请输入退款金额" size="small" type="Number" @input="toMoney"></el-input>
                <p>
                  用于部分退款，退款金额不得超过<span style="color: red">{{ info.money || '退款最大金额' }}元</span>
                </p>
              </el-form-item>
              <el-form-item>
                <el-col>
                  <el-button type="primary" @click="exam('2')">同意售后，处理退货</el-button>
                  <el-button type="primary" @click="exam('!2')">拒绝</el-button>
                </el-col>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col v-if="active == 2 || active == 3">
            <el-col>
              <data-form :fields="infoFields" :rules="rules" v-model="customerForm" labelWidth="150px" @save="customerSubmit" v-if="active == 2">
                <template #customer_transport_type>
                  <el-select
                    v-model="customerForm.customer_transport_type"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请选择快递公司,运单号,同时填入"
                    :remote-method="querySearch"
                    :loading="loading"
                    @change="handleSelect"
                    size="small"
                    style="width: 100%"
                  >
                    <el-option v-for="item in shop_transport_typeList" :key="item.id" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </template>
              </data-form>
              <el-col :span="24" style="text-align: center; margin-top: 15px">
                <el-button type="warning" style="margin: 10px 0" @click="exam_one('-2')" v-if="active == 2">已退货</el-button>
              </el-col>
            </el-col>
            <el-col :span="24" style="text-align: center; margin-top: 15px">
              <el-button type="primary" style="margin: 10px 0" @click="exam('-2')" v-if="active == 3">已退货</el-button>
            </el-col>
            <el-col :span="24" style="text-align: center; margin: 15px 0; font-size: 18px">买家{{ getCheck() || '暂无快递信息' }}</el-col>
            <el-col :span="24">
              <el-timeline :reverse="reverse">
                <el-timeline-item v-for="(activity, index) in customer" :key="index" :timestamp="activity.time" :color="activity.color">
                  {{ activity.context }}
                </el-timeline-item>
              </el-timeline>
            </el-col>
          </el-col>
          <el-col v-if="active == 4">
            <el-col style="text-align: center; margin: 15px 0"><i class="el-icon-success"></i></el-col>
            <el-col style="text-align: center; margin: 15px 0; font-size: 18px">已退货成功</el-col>
            <el-col style="text-align: center; margin: 15px 0; font-size: 18px">库存需手动修改</el-col>
          </el-col>
          <el-col v-if="active == 5">
            <el-col style="text-align: center; margin: 15px 0"><i class="el-icon-error"></i></el-col>
            <el-col style="text-align: center; margin: 15px 0; font-size: 18px">已拒绝</el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'steps-1',
  props: {
    active: { type: Number },
    customer: { type: Array },
    activit: { type: Object },
    form: { type: Object },
    customerForm: { type: Object },
    info: { type: Object },
    shop_transport_typeList: { type: Array },
  },
  components: {},
  data: function () {
    return {
      loading: false,
      reverse: false,
      infoFields: [
        { label: '快递单号', model: 'customer_transport_no' },
        { label: '快递公司', model: 'customer_transport_type', custom: true },
      ],
      rules: {
        customer_transport_no: [{ required: true, message: '请输入快递单号', trigger: 'blur' }],
        customer_transport_type: [{ required: true, message: '请选择快递公司', trigger: 'change' }],
      },
    };
  },
  created() {},
  methods: {
    next(active) {
      this.$emit('next', active);
    },
    onSubmit() {
      this.$emit('onSubmit', this.form);
    },
    customerSubmit() {
      this.$emit('customerSubmit', this.customerForm);
    },
    async querySearch(value) {
      this.loading = true;
      this.$emit('querySearch', value);
      this.loading = false;
    },
    handleSelect(value) {},
    exam(status) {
      this.$emit('exam', status);
    },
    exam_one(status) {
      this.$emit('exam_one', status);
    },
    getCheck() {
      return _.get(this.activit, 'customer.is_check');
    },
    toMoney(val) {
      if (val > this.info.money) {
        this.$message.error('超过退款最大金额');
        this.$set(this.form, `money`, '');
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.el-icon-success {
  font-size: 60px;
  color: green;
}
.el-icon-error {
  font-size: 60px;
  color: red;
}
</style>
