<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 != 7"> </el-step>
          <el-step title="收到退回商品，填写物流信息" v-if="active != 7"> </el-step>
          <el-step title="查看物流,确认买家收货" v-if="active != 7"> </el-step>
          <el-step title="售后结束"> </el-step>
        </el-steps>
        <el-col :span="24" style="margin-top: 15px">
          <el-col v-if="active == 0"> 买家已申请换货 </el-col>
          <el-col v-if="active == 1" style="text-align: center; margin: 15px 0">
            <el-button type="primary" @click="exam('3')">同意售后，处理换货</el-button>
            <el-button type="primary" @click="exam('!3')">拒绝</el-button>
          </el-col>
          <el-col v-if="active == 2">
            <data-form :fields="customerFields" :rules="customerrules" v-model="customerForm" labelWidth="150px" @save="customerSubmit">
              <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">
              <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 == 3">
            <el-col :span="24" style="text-align: center; margin: 15px 0; font-size: 18px">店铺{{ getCheck() || '暂无快递信息' }}</el-col>
          </el-col>
          <el-col v-if="active == 3 || active == 4">
            <data-form :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="onSubmit">
              <template #shop_transport_type>
                <el-select
                  v-model="form.shop_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>
          <el-col v-if="active == 4 || active == 5">
            <el-col :span="24" style="text-align: center; margin-top: 15px">
              <el-button type="primary" @click="exam('-3')" style="margin: 10px 0" v-if="active == 5">已换货</el-button>
            </el-col>
            <el-col :span="24" style="text-align: center; margin: 15px 0; font-size: 18px" v-if="transport.customer_receive == true"
              >买家{{ getCheckOne() || '暂无快递信息' }}</el-col
            >
            <el-col :span="24">
              <el-timeline :reverse="reverse">
                <el-timeline-item v-for="(activity, index) in shopList" :key="index" :timestamp="activity.time" :color="activity.color">
                  {{ activity.context }}
                </el-timeline-item>
              </el-timeline>
            </el-col>
          </el-col>
          <el-col v-if="active == 6">
            <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 == 7">
            <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>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'steps-1',
  props: {
    active: { type: Number },
    form: { type: Object },
    shop_transport_typeList: { type: Array },
    customer: { type: Array },
    shopList: { type: Array },
    activit: { type: Object },
    transport: { type: Object },
    customerForm: { type: Object },
  },
  components: {},
  data: function () {
    return {
      loading: false,
      reverse: false,
      infoFields: [
        { label: '快递单号', model: 'shop_transport_no' },
        { label: '快递公司', model: 'shop_transport_type', custom: true },
      ],
      rules: {
        shop_transport_no: [{ required: true, message: '请输入快递单号', trigger: 'blur' }],
        shop_transport_type: [{ required: true, message: '请选择快递公司', trigger: 'change' }],
      },
      customerFields: [
        { label: '快递单号', model: 'customer_transport_no' },
        { label: '快递公司', model: 'customer_transport_type', custom: true },
      ],
      customerrules: {
        customer_transport_no: [{ required: true, message: '请输入快递单号', trigger: 'blur' }],
        customer_transport_type: [{ required: true, message: '请选择快递公司', trigger: 'change' }],
      },
    };
  },
  created() {},
  methods: {
    exam(status) {
      this.$emit('exam', status);
    },
    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) {},
    getCheck() {
      return _.get(this.activit, 'customer.is_check');
    },
    getCheckOne() {
      return _.get(this.activit, 'shop.is_check');
    },
  },
  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>
