<template>
  <div id="form-1">
    <el-row>
      <!-- 申请售后 -->
      <el-col
        :span="24"
        class="main animate__animated animate__backInRight"
        v-loading="loadings"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-col class="top-btn">
          <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col :span="10" class="one">
          <add-1 :address="address"></add-1>
          <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ shop.name }}</el-col>
          <el-col :span="24" v-for="item in list" :key="item._id || item.set_id">
            <el-col :span="24" class="goods bode" v-if="!item.is_set">
              <el-col :span="6" v-if="item.file && item.file.length != 0">
                <el-image class="image" :src="item.file[0].url" style="width: 120px; height: 100px"></el-image>
              </el-col>
              <el-col :span="6" v-else-if="item.goods && item.goods.file && item.goods.file.length != 0">
                <el-image class="image" :src="item.goods.file[0].url" style="width: 120px; height: 100px"></el-image>
              </el-col>
              <el-col :span="6" v-else><el-image class="image" :src="item.url" style="width: 120px; height: 100px"></el-image></el-col>
              <el-col :span="18">
                <el-col :span="12">
                  <el-col
                    ><p>{{ item.goods.name }}</p>
                  </el-col>
                  <el-col
                    ><p>规格：{{ item.name }}</p></el-col
                  >
                </el-col>
                <el-col :span="12" class="money">
                  <el-col>
                    <p v-if="info.type == '0'">￥{{ item.sell_money }}</p>
                    <p v-else-if="info.type == '1'">￥{{ item.group_config.money }}</p>
                  </el-col>
                  <el-col>
                    <p>X{{ item.buy_num }}</p>
                  </el-col>
                  <el-col>
                    <span class="spanfour" style="color: blue; cursor: pointer" @click="toUrl(item.goods.url)"> 查看商品来源:{{ item.goods.source }}</span>
                  </el-col>
                </el-col>
                <el-col :span="24" v-if="item.is_afterSale == false" style="text-align: right">
                  <el-button type="danger" @click="toSales('1')" v-if="status == '1'" size="mini"> 取消订单 </el-button>
                  <el-button type="danger" @click="toSales('2')" v-else-if="status == '2' || status == '2-'" size="mini"> 拒收 </el-button>
                  <el-button type="danger" @click="toApply('order', item)" v-else-if="status == '3'" size="mini"> 申请售后 </el-button>
                </el-col>
              </el-col>
              <el-col :span="24" style="text-align: right">
                <p>{{ item.is_afterSale == true ? '已申请售后' : '未申请售后' }}</p>
                <p>{{ item.is_rate == true ? '已评价' : '未评价' }}</p>
              </el-col>
              <el-col :span="24" class="bode">
                <el-col :span="6">订单备注</el-col>
                <el-col :span="18" class="other">{{ item.remarks || '' }}</el-col>
              </el-col>
              <el-col :span="24">
                <el-col :span="6">运费</el-col>
                <el-col :span="18" class="other" v-if="!item.goods.freight == '0'">{{ item.goods.freight }}</el-col>
                <el-col :span="18" class="other" v-else>包邮</el-col>
              </el-col>
            </el-col>
            <act-1 v-if="item.act" :list="list"></act-1>
            <el-col :span="24" class="goods bode" v-if="item.is_set == '0'">
              <el-col :span="24" style="text-align: center; font-size: 18px">{{ item.name || '套装名称' }}</el-col>
              <el-col :span="24" v-for="i in item.goods" :key="i.spec._id">
                <el-col :span="6" class="image" v-if="i.spec.file && i.spec.file.length != 0">
                  <el-image :src="i.spec.file[0].url" style="width: 120px; height: 100px"></el-image>
                </el-col>
                <el-col :span="6" class="image" v-else-if="i.goods.file && i.goods.file.length != 0">
                  <el-image :src="i.goods.file[0].url" style="width: 120px; height: 100px"></el-image>
                </el-col>
                <el-col :span="18">
                  <el-col :span="12">
                    <el-col :span="24"> {{ i.goods_name }} </el-col>
                    <el-col :span="24"> 规格：{{ i.spec_name }} </el-col>
                  </el-col>
                  <el-col :span="12" class="money">
                    <el-col :span="24"> X{{ i.set_num }} </el-col>
                    <el-col :span="24">
                      <span class="spanfour" style="color: blue; cursor: pointer" @click="toUrl(i.goods.url)"> 查看商品来源:{{ i.goods.source }}</span>
                    </el-col>
                  </el-col>
                  <el-col :span="24" v-if="i.is_afterSale == false" style="text-align: right">
                    <el-button type="danger" @click="toSales('1')" v-if="status == '1'" size="mini"> 取消订单 </el-button>
                    <el-button type="danger" @click="toSales('2')" v-else-if="status == '2' || status == '2-'" size="mini"> 拒收 </el-button>
                    <el-button type="danger" @click="toApply('set', i, item)" v-else-if="status == '3'" size="mini"> 申请售后 </el-button>
                  </el-col>
                  <el-col :span="24" style="text-align: right">
                    <el-col :span="24"> {{ i.is_afterSale == true ? '已申请售后' : '未申请售后' }} </el-col>
                    <el-col :span="24">{{ i.is_rate == true ? '已评价' : '未评价' }}</el-col>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="bode">
                <el-col :span="6">订单备注</el-col>
                <el-col :span="18" class="other">{{ item.remarks || '' }}</el-col>
              </el-col>
              <el-col :span="24">
                <el-col :span="6">运费</el-col>
                <el-col :span="18" class="other" v-if="!item.freight == '0'">{{ item.freight }}</el-col>
                <el-col :span="18" class="other" v-else>包邮</el-col>
              </el-col>

              <el-col :span="24" class="money">
                <el-col :span="24" style="color: red; font-size: 20px">
                  <p>￥{{ item.sell_money }}</p>
                </el-col>
                <el-col :span="24"> X{{ item.buy_num }} </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24">
            <pay-1 :form="info" :total_detail="total_detail" :pay="pay"></pay-1>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <e-dialog :dialog="dialog" @toClose="toClose">
      <template v-slot:info>
        <el-form :model="form" :rules="rules" ref="form" label-width="180px">
          <el-col :span="24">
            <el-form-item label="售后类型" prop="type">
              <el-select v-model="form.type" clearable filterable placeholder="请选择售后类型" size="small" style="width: 100%" @change="typeChange">
                <el-option v-for="i in typeList" :key="i.value" :label="i.label" :value="i.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.type == '1' || form.type == '2'">
            <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">{{ payMoney.payTotal || '' }}</span
                >元
                <span @click="allMoney" style="color: blue; margin: 0 0 0 10px">全部退款</span>
              </p>
              <p v-if="form.set_id">套装显示全部金额，具体退款金额，请手动填写</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="申请理由" prop="reason">
              <el-select v-model="form.reason" clearable filterable placeholder="请选择申请理由" size="small" style="width: 100%">
                <el-option v-for="i in reasonList" :key="i.value" :label="i.label" :value="i.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="售后描述" prop="desc">
              <el-input v-model="form.desc" placeholder="请输入售后描述" size="small" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件" prop="file">
              <c-upload :url="url" v-model="form.file" :limit="6"></c-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="btn">
            <el-button type="primary" size="mini" @click="onSubmit('form')">提交</el-button>
            <el-button type="danger" size="mini" @click="toBack()">取消</el-button>
          </el-col>
        </el-form>
      </template>
    </e-dialog>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions: orderDetail } = createNamespacedHelpers('orderDetail');
const { mapActions } = createNamespacedHelpers('afterSale');
const { mapActions: dictData } = createNamespacedHelpers('dictData');
const { mapActions: sot } = createNamespacedHelpers('sot');

export default {
  name: 'form-1',
  props: { id: { type: String }, status: { type: String } },
  components: {
    add1: () => import('@/components/orderParts/parts/add-1.vue'),
    pay1: () => import('@/components/orderParts/parts/orderDetail/pay-1.vue'),
    cUpload: () => import('@/components/usual/c-upload.vue'),
    act1: () => import('@/components/orderParts/parts/act-1.vue'),
  },
  data: function () {
    return {
      info: {},
      // 地址
      address: {},
      // 实付金额
      total_detail: [],
      // 商铺
      shop: {},
      // 运单号
      transport: {},
      pay: {},
      // 商品列表
      list: [],
      // 物流
      reverse: false,
      activities: [],
      activit: {},
      // 订单状态
      order_processList: [],
      // 快递公司
      shop_transport_typeList: [],
      loading: false,
      // 弹框
      dialog: { title: '信息管理', show: false, type: '1' },
      rules: {
        goods: [{ required: true, message: '请选择商品', trigger: 'change' }],
        type: [{ required: true, message: '请选择售后类型', trigger: 'change' }],
        money: [{ required: true, message: '请输入金额', trigger: 'blur' }],
      },
      // 售后表单
      form: {},
      // 售后类型
      typeList: [],
      // 售后申请理由
      reasonList: [],
      // 退款金额
      payMoney: {},
      url: '/files/point/afterSale/upload',
      loadings: true,
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...dictData({ dictQuery: 'query' }),
    ...orderDetail({ orderFetch: 'fetch' }),
    ...sot({ sotFetch: 'fetch' }),
    ...mapActions(['query', 'cgfr', 'fetch', 'create', 'update']),
    // 查询
    async search() {
      let res;
      res = await this.orderFetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `info`, res.data);
        // 地址
        this.$set(this, `address`, res.data.address);
        this.$set(this, `shop`, res.data.shop);
        // 商品
        this.$set(this, `list`, res.data.goods);
        // 应付金额
        this.$set(this, `total_detail`, res.data.total_detail);
        this.$set(this, `pay`, res.data.order.pay);
      }
      this.loadings = false;
    },
    getList(data) {
      let arr1 = [];
      let arr2 = [];
      for (const p1 of data) {
        if (p1.is_set && p1.is_set == '0') {
          for (const p2 of p1.goods) {
            p2.set_name = p1.name;
            p2.set_id = p1.set_id;
            p2.spec_id = p2.spec._id;
            arr1.push(p2);
          }
        } else {
          p1.spec_id = p1._id;
          p1.goods_name = p1.goods.name;
          p1.spec_name = p1.name;
          arr2.push(p1);
        }
      }
      let list = [...arr1, ...arr2];
    },
    // 跳转供应商网址
    toUrl(url) {
      if (url) window.open(url, '_blank');
      else this.$message.error('该商品还未添加来源网址，无法跳转');
    },
    getName(i) {
      let name = '';
      if (i.name && i.goods.name) name = i.name + ',' + i.goods.name;
      else if (i.name) name = i.name;
      return name;
    },
    handleSelect(value) {},
    // 申请售后
    async toApply(value, i, item) {
      if (value == 'order') this.$set(this, `form`, { goods: i._id, cgfr: i._id });
      else if (value == 'set') this.$set(this, `form`, { goods: i.spec._id, set_id: item.set_id, cgfr: item.set_id });
      this.dialog = { title: '信息管理', show: true, type: '1' };
    },
    async toSales(status) {
      if (status == '1') var info = { order_detail: this.id, type: '4' };
      else if (status == '2') var info = { order_detail: this.id, type: '5' };
      this.$confirm('是否确认申请售后', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        let res = await this.create(info);
        if (this.$checkRes(res)) {
          this.$message({ type: `success`, message: `申请售后成功` });
          this.toClose();
          this.search();
        }
      });
    },
    // 关闭
    toClose() {
      this.form = {};
      this.dialog = { title: '信息管理', show: false, type: '1' };
    },
    // 选择商品
    goodsChange(value) {
      this.$set(this.form, `goods`, value);
      this.typeChange(this.form.type || '');
    },
    // 选择类型
    async typeChange(value) {
      this.$set(this.form, `type`, value);
      if (value != '3') {
        let info = { order_detail: this.id, goods_id: this.form.cgfr };
        let res = await this.cgfr(info);
        if (this.$checkRes(res)) this.$set(this, `payMoney`, res.data);
      }
    },
    // 全部退款
    allMoney() {
      this.$set(this.form, `money`, this.payMoney.payTotal);
    },
    // 输入金额
    toMoney(val) {
      if (val > this.payMoney.payTotal) {
        this.$message.error('超过退款最大金额');
        this.$set(this.form, `money`, '');
      }
    },
    // 提交
    async onSubmit(formName, val) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.$confirm('是否确认保存', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(async () => {
            let form = this.form;
            form.order_detail = this.id;
            delete form.cgfr;
            let res = await this.create(form);
            if (this.$checkRes(res)) {
              this.$message({ type: `success`, message: `申请售后成功` });
              this.toClose();
              this.search();
            }
          });
        } else {
          return false;
        }
      });
    },
    // 返回
    toBack() {
      this.$emit('toBack');
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 减免方式
      res = await this.dictQuery({ code: 'order_process' });
      if (this.$checkRes(res)) this.$set(this, `order_processList`, res.data);
      // 售后类型
      res = await this.dictQuery({ code: 'afterSale_type' });
      if (this.$checkRes(res)) {
        let type = res.data.filter((i) => i.value != '4' && i.value != '5');
        this.$set(this, `typeList`, type);
      }
      // 售后申请理由
      res = await this.dictQuery({ code: 'afterSale_reason' });
      if (this.$checkRes(res)) {
        let type = res.data.filter((i) => i.value != '4' && i.value != '5');
        this.$set(this, `reasonList`, res.data);
      }
    },
  },
  computed: {},
  metaform() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    margin: 10px 0 0 15%;
    padding: 5px;
    .add {
      border-bottom: 2px dashed #ccc;
      margin: 0 0 5px 0;
      padding: 5px 0;
    }
    .shop {
      padding: 4px 0;
      font-size: 18px;
      border-bottom: 1px solid #ccc;
    }
    .goods {
      padding: 10px 0;
      .image {
        padding: 0 10px 0 0;
      }
      .money {
        text-align: right;
      }
    }
    .other {
      text-align: right;
      word-break: break-all;
      p {
        color: red;
      }
      .spanfour {
        color: blue;
      }
    }
    .el-col {
      margin: 3px 0;
    }
    .bode {
      border-bottom: 1px solid rgb(238, 237, 237);
    }
    .form {
      margin: 20px 0 0 0;
    }
  }
}
.btn {
  text-align: center;
}

/deep/.el-timeline {
  margin: 20px 0 0 0;
  font-size: 16px;
}
/deep/.el-timeline-item__node:nth-child(1) {
  background-color: green;
}
</style>
