<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="9" class="one">
          <el-col :span="24" class="add">
            <el-col :span="2">
              <i class="el-icon-location"></i>
            </el-col>
            <el-col :span="22">
              <el-col>
                <p>{{ address.name }},{{ address.phone }}</p>
              </el-col>
              <el-col>
                <p>{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ shop.name }}</el-col>
          <el-col :span="24">
            <el-col :span="24" class="goods bode">
              <el-col :span="6"><el-image :src="url"></el-image></el-col>
              <el-col :span="18">
                <el-col :span="12">
                  <el-col>
                    <p>{{ goods.name }}</p>
                  </el-col>
                </el-col>
                <el-col :span="12" class="money">
                  <el-col>
                    <p>尊荣：{{ goods.cost }}</p>
                  </el-col>
                  <el-col>
                    <p>X{{ form.buy_num }}</p>
                  </el-col>
                </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" v-if="form.remarks">{{ form.remarks }}</el-col>
            <el-col :span="18" class="other" v-else>暂无备注</el-col>
          </el-col>
          <el-col :span="24" class="bode">
            <el-col :span="6">下单时间</el-col>
            <el-col :span="18" class="other">{{ form.buy_time }}</el-col>
          </el-col>
          <el-col :span="24" class="bode" v-if="form.status == '3'">
            <el-col :span="6">寄出运单号</el-col>
            <el-col :span="18" class="other">{{ transport.shop_transport_no || '暂无单号' }}</el-col>
          </el-col>
          <el-col :span="24" class="bode" v-if="form.status == '3'">
            <el-col :span="6">寄出快递公司</el-col>
            <el-col :span="18" class="other">{{ transport.shop_transport_name || '暂无快递信息' }}</el-col>
          </el-col>
          <el-col :span="24" class="form">
            <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
              <el-form-item label="寄出运单号" prop="shop_transport_no">
                <el-input v-model="form.shop_transport_no" placeholder="请输入运单号,快递公司,同时填入" size="small"></el-input>
              </el-form-item>
              <el-form-item label="快递公司" prop="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>
              </el-form-item>
              <el-form-item label="快递类型" prop="transport_type">
                <el-select v-model="form.transport_type" clearable filterable placeholder="请选择快递类型" size="small" style="width: 100%">
                  <el-option v-for="i in transport_typeList" :key="i.label" :label="i.label" :value="i.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit('2')" v-if="form.status == '1'"> 发货 </el-button>
                <el-button type="primary" @click="onSubmit('3')" v-if="form.status == '2'"> 确认收货 </el-button>
                <el-button type="primary" @click="onSubmit('2')" v-if="form.status == '2'"> 保存 </el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-col>
        <el-col :span="9" class="one" v-if="transport.shop_transport_no">
          <el-col :span="24">{{ activit.is_check || '暂无快递信息' }}</el-col>
          <el-col :span="24">{{ transport.shop_transport_name || '暂无快递信息' }}: {{ activit.no || '暂无快递信息' }}</el-col>
          <el-col :span="24">
            <p>订单编号: {{ form.id }}</p>
          </el-col>
          <el-col :span="24">
            <p>收货地址：{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
          </el-col>
          <el-col :span="24">
            <el-timeline :reverse="reverse">
              <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time" :color="activity.color">
                {{ activity.context }}
              </el-timeline-item>
            </el-timeline>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

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

export default {
  name: 'form-1',
  props: { id: { type: String } },
  components: {},
  data: function () {
    return {
      loadings: true,
      form: {},
      // 地址
      address: {},
      // 实付金额
      total_detail: {},
      // 商铺
      shop: {},
      // 运单号
      transport: {},
      pay: {},
      url: '',
      // 商品列表
      goods: {},
      // 物流
      reverse: false,
      activities: [],
      activit: {},
      // 订单状态
      order_processList: [],
      // 快递公司
      shop_transport_typeList: [],
      transport_typeList: [],
      loading: false,
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...dictData({ dictQuery: 'query' }),
    ...sot({ sotFetch: 'fetch' }),
    ...mapActions(['query', 'fetch', 'create', 'update']),
    // 查询
    async search() {
      let res;
      res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `form`, res.data);
        // // 地址
        this.$set(this, `address`, res.data.address);
        this.$set(this, `shop`, res.data.shop);
        // // 商品
        this.$set(this, `goods`, res.data.goods);
        this.$set(this, `url`, res.data.goods.file[0].url);
        if (res.data.transport) {
          let arr = await this.dictQuery({ code: 'transport_company', value: res.data.transport.shop_transport_type });
          if (this.$checkRes(arr)) {
            let type = arr.data.find((i) => i.value == res.data.transport.shop_transport_type);
            if (type) {
              res.data.transport.shop_transport_name = type.label;
              this.querySearch(type.label);
            }
            this.$set(this, `transport`, res.data.transport);
            this.$set(this.form, `shop_transport_type`, this.transport.shop_transport_type);
            if (this.transport.transport_type == undefined) this.$set(this.form, `transport_type`, '0');
            else this.$set(this.form, `transport_type`, this.transport.transport_type);
            this.$set(this.form, `shop_transport_no`, this.transport.shop_transport_no);
          }
          res = await this.sotFetch(this.id);
          if (this.$checkRes(res)) {
            if (res.errcode == '0') {
              let activities = res.data.list;
              activities[0].color = '#0bbd87';
              this.$set(this, `activities`, activities);
              this.$set(this, `activit`, res.data);
            }
          }
        }
      }
      this.loadings = false;
    },
    async querySearch(value) {
      this.loading = true;
      let res = await this.dictQuery({ code: 'transport_company', label: value });
      if (this.$checkRes(res)) this.$set(this, 'shop_transport_typeList', res.data);
      this.loading = false;
    },
    handleSelect() {},
    // 提交
    async onSubmit(val) {
      var form = this.form;
      var transport = {};
      var res;
      if (form.shop_transport_no != undefined) transport.shop_transport_no = form.shop_transport_no;
      if (form.shop_transport_type != undefined) transport.shop_transport_type = form.shop_transport_type;
      if (form.transport_type) transport.transport_type = form.transport_type;
      form.transport = transport;
      if (val != undefined || val != '') form.status = val;
      if (form.shop_transport_no == undefined || form.shop_transport_type == undefined) {
        this.$confirm('快递信息未填写完整，是否保存发货', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          if (form.id) res = await this.update(form);
          if (this.$checkRes(res)) {
            this.$message({ type: `success`, message: `维护信息成功` });
            this.search();
          }
        });
      } else {
        this.$confirm('是否确认保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          if (form.id) res = await this.update(form);
          if (this.$checkRes(res)) {
            this.$message({ type: `success`, message: `维护信息成功` });
            this.search();
          }
        });
      }
    },
    // 返回
    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: 'transport_type' });
      if (this.$checkRes(res)) this.$set(this, `transport_typeList`, 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 5%;
    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;
      .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;
    }
  }
}

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