<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.order_delete"
                   @click="handleDelete">删 除
        </el-button>
        <el-button type="primary"
                   size="small"
                   icon="el-icon-plus"
                   v-if="permission.customorder_add"
                   @click="handleAdd">新 增
        </el-button>
      </template>

      <template slot-scope="scope" slot="menu">
        <el-button v-if="scope.row.orderState == 2"
                   type="text"
                   size="small"
                   @click="handleSend(scope.row.id)"
        >发货</el-button>
        <el-button
                   type="text"
                   size="small"
                   @click="viewOrderDetail(scope.row.id)"
        >详情</el-button>
      </template>
    </avue-crud>

    <el-dialog title="发货" @close="refreshChange"
               append-to-body
               :visible.sync="bindBox"
               :before-close="handleClose"
               width="500px"
               heigh="40%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="物流公司:" placeholder="请选择物流公司">
          <el-select v-model="wlCompany" filterable placeholder="请选择物流公司">
            <el-option
                v-for="item in WL_COMPANY"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="物流单号:">
          <el-input v-model="wlNo" autocomplete="off" placeholder="请输入物流单号"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="deliverGoods()">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="详情" @close="refreshChange"
               append-to-body
               :visible.sync="detailDialog"
               :before-close="handleClose"
               width="900px">

      <el-collapse v-model="activeNames">
        <el-collapse-item title="订单信息" name="1">
          <el-descriptions border>
            <el-descriptions-item label="订单号">{{orderDetailData.orderNo}}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{orderDetailData.createTime}}</el-descriptions-item>
            <el-descriptions-item label="订单类型">{{orderDetailData.orderTypeDesc}}</el-descriptions-item>
            <el-descriptions-item label="数量">{{orderDetailData.quantity}}</el-descriptions-item>
            <el-descriptions-item label="订单状态">{{orderDetailData.orderStateDesc}}</el-descriptions-item>
            <el-descriptions-item label="订单金额">{{orderDetailData.totalAmount}}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="支付信息" name="2">
          <el-descriptions border>
            <el-descriptions-item label="支付金额">{{orderDetailData.paymentAmount}}</el-descriptions-item>
            <el-descriptions-item label="支付方式">{{orderDetailData.paymentModeDesc}}</el-descriptions-item>
            <el-descriptions-item label="支付时间">{{orderDetailData.paymentTime}}</el-descriptions-item>
            <el-descriptions-item label="支付状态">{{orderDetailData.paymentStateDesc}}</el-descriptions-item>
            <el-descriptions-item label="优惠金额">{{orderDetailData.discountAmount}}</el-descriptions-item>
            <el-descriptions-item label="邮费">{{orderDetailData.postage}}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="物流信息" name="3" >
          <el-descriptions border column="2">
            <el-descriptions-item label="收货地址">{{orderDetailData.addressDetail}}</el-descriptions-item>
            <el-descriptions-item label="配送方式">{{orderDetailData.distributeMode}}</el-descriptions-item>
            <el-descriptions-item label="收货人">{{orderDetailData.consignee}}</el-descriptions-item>
            <el-descriptions-item label="收货人电话">{{orderDetailData.consigneePhoneNumber}}</el-descriptions-item>
            <el-descriptions-item label="发货时间">{{orderDetailData.sendTime}}</el-descriptions-item>
            <el-descriptions-item label="收货时间">{{orderDetailData.recordTime}}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="酒盖信息" name="4" v-if="cwDetail.bottleCapId">
          <el-descriptions border>
            <el-descriptions-item label="图片">
              <el-image style="width: 30px; height: 30px" :src="cwDetail.bottleCapImage" fit="fit"
                        :preview-src-list="[cwDetail.bottleCapImage]"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="名称" span="2">{{cwDetail.bottleCapName || ''}}</el-descriptions-item>
            <el-descriptions-item label="价格">{{cwDetail.bottleCapPrice || ''}}</el-descriptions-item>
            <el-descriptions-item label="单位">{{cwDetail.bottleCapUnit || ''}}</el-descriptions-item>
            <el-descriptions-item label="数量">{{cwDetail.bottleCapQuantity || ''}}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="酒瓶信息" v-if="cwDetail.bottleBodyId">
          <el-descriptions border>
            <el-descriptions-item label="图片">
              <el-image style="width: 30px; height: 30px" :src="cwDetail.bottleBodyImage" fit="fit"
                        :preview-src-list="[cwDetail.bottleBodyImage]"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="名称" span="2">{{cwDetail.bottleBodyName || ''}}</el-descriptions-item>
            <el-descriptions-item label="价格">{{cwDetail.bottleBodyPrice || ''}}</el-descriptions-item>
            <el-descriptions-item label="单位">{{cwDetail.bottleBodyUnit || ''}}</el-descriptions-item>
            <el-descriptions-item label="数量">{{cwDetail.bottleBodyQuantity || ''}}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="基酒信息" v-if="cwDetail.baseWineId">
          <el-descriptions border>
            <el-descriptions-item label="图片">
              <el-image style="width: 30px; height: 30px" :src="cwDetail.baseWineImage" fit="fit"
                        :preview-src-list="[cwDetail.baseWineImage]"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="名称" span="2">{{cwDetail.baseWineName || ''}}</el-descriptions-item>
            <el-descriptions-item label="价格">{{cwDetail.baseWinePrice || ''}}</el-descriptions-item>
            <el-descriptions-item label="单位">{{cwDetail.baseWineUnit || ''}}</el-descriptions-item>
            <el-descriptions-item label="数量">{{cwDetail.baseWineQuantity || ''}}</el-descriptions-item>
            <el-descriptions-item label="口感">{{baseWineinfo.taste || ''}}</el-descriptions-item>
            <el-descriptions-item label="年份">{{baseWineinfo.year || ''}}年</el-descriptions-item>
            <el-descriptions-item label="类型">{{baseWineinfo.typeDesc || ''}}</el-descriptions-item>
            <el-descriptions-item label="酒厂">{{baseWineM.name || ''}}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="酒箱信息" v-if="cwDetail.wineCaseId">
          <el-descriptions border>
            <el-descriptions-item label="图片">
              <el-image style="width: 30px; height: 30px" :src="cwDetail.wineCaseImage" fit="fit"
                        :preview-src-list="[cwDetail.wineCaseImage]"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="名称" span="2">{{cwDetail.wineCaseName || ''}}</el-descriptions-item>
            <el-descriptions-item label="价格">{{cwDetail.wineCasePrice || ''}}</el-descriptions-item>
            <el-descriptions-item label="单位">{{cwDetail.wineCaseUnit || ''}}</el-descriptions-item>
            <el-descriptions-item label="数量">{{cwDetail.wineCaseQuantity || ''}}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="酒盒信息" v-if="cwDetail.wineBoxId">
          <el-descriptions border>
            <el-descriptions-item label="图片">
              <el-image style="width: 30px; height: 30px" :src="cwDetail.wineBoxImage" fit="fit"
                        :preview-src-list="[cwDetail.wineBoxImage]"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="名称" span="2">{{cwDetail.wineBoxName || ''}}</el-descriptions-item>
            <el-descriptions-item label="价格">{{cwDetail.wineBoxPrice || ''}}</el-descriptions-item>
            <el-descriptions-item label="单位">{{cwDetail.wineBoxUnit || ''}}</el-descriptions-item>
            <el-descriptions-item label="数量">{{cwDetail.wineBoxQuantity || ''}}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="手提袋信息" v-if="cwDetail.handbagId">
          <el-descriptions border>
            <el-descriptions-item label="图片">
              <el-image style="width: 30px; height: 30px" :src="cwDetail.handbagImage" fit="fit"
                        :preview-src-list="[cwDetail.handbagImage]"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="名称" span="2">{{cwDetail.handbagName || ''}}</el-descriptions-item>
            <el-descriptions-item label="价格">{{cwDetail.handbagPrice || ''}}</el-descriptions-item>
            <el-descriptions-item label="单位">{{cwDetail.handbagUnit || ''}}</el-descriptions-item>
            <el-descriptions-item label="数量">{{cwDetail.handbagQuantity || ''}}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="标贴信息" v-if="cwDetail.bottleLabelId">
          <el-descriptions border>
            <el-descriptions-item label="图片">
              <el-image style="width: 30px; height: 30px" :src="cwDetail.labelImage" fit="fit"
                        :preview-src-list="[cwDetail.labelImage]"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="名称" span="2">{{cwDetail.bottleLabelName || ''}}</el-descriptions-item>
            <el-descriptions-item label="价格">{{cwDetail.bottleLabelPrice || ''}}</el-descriptions-item>
            <el-descriptions-item label="单位">{{cwDetail.bottleLabelUnit || ''}}</el-descriptions-item>
            <el-descriptions-item label="数量">{{cwDetail.bottleLabelQuantity || ''}}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="DIY信息" v-if="diyInfo">
          <el-collapse v-model="diyActiveNames">
            <el-descriptions border name="1">
              <el-descriptions-item label="酒标diy图片">
                <el-image style="width: 50px; height: 50px" :src="diyInfo.wineLabelImage" fit="fit"
                          :preview-src-list="[diyInfo.wineLabelImage]">
                  <div slot="error" class="image-slot">
                    无
                  </div>
                </el-image>
              </el-descriptions-item>
              <el-descriptions-item label="酒箱diy图片">
                <el-image style="width: 50px; height: 50px" :src="diyInfo.wineCaseImage" fit="fit"
                          :preview-src-list="[diyInfo.wineCaseImage]">
                  <div slot="error" class="image-slot">
                    无
                  </div>
                </el-image>
              </el-descriptions-item>
              <el-descriptions-item label="酒盒diy图片">
                <el-image style="width: 50px; height: 50px" :src="diyInfo.wineBoxImage" fit="fit"
                          :preview-src-list="[diyInfo.wineBoxImage]">
                  <div slot="error" class="image-slot">
                    无
                  </div>
                </el-image>
              </el-descriptions-item>
              <el-descriptions-item label="手提包diy图片">
                <el-image style="width: 50px; height: 50px" :src="diyInfo.handbagImage" fit="fit"
                          :preview-src-list="[diyInfo.handbagImage]">
                  <div slot="error" class="image-slot">
                    无
                  </div>
                </el-image>
              </el-descriptions-item>
              <el-descriptions-item label="酒标diy图片">
                <el-image style="width: 50px; height: 50px" :src="diyInfo.labelImage" fit="fit"
                          :preview-src-list="[diyInfo.labelImage]">
                  <div slot="error" class="image-slot">
                    无
                  </div>
                </el-image>
              </el-descriptions-item>
            </el-descriptions>
            <el-collapse-item title="DIY字体" name="2">
              <el-descriptions border>
                <el-descriptions-item label="酒标字体">{{diyInfo.wineLabelFont || '无'}}</el-descriptions-item>
                <el-descriptions-item label="酒箱字体">{{diyInfo.wineCaseFont || '无'}}</el-descriptions-item>
                <el-descriptions-item label="酒盒字体">{{diyInfo.wineBoxFont || '无'}}</el-descriptions-item>
                <el-descriptions-item label="手提包字体">{{diyInfo.handbagFont || '无'}}</el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>

            <el-collapse-item title="DIY颜色" name="3">
              <el-descriptions border>
                <el-descriptions-item label="酒标颜色">{{diyInfo.wineLabelColor || '无'}}</el-descriptions-item>
                <el-descriptions-item label="酒箱颜色">{{diyInfo.wineCaseColor || '无'}}</el-descriptions-item>
                <el-descriptions-item label="酒盒颜色">{{diyInfo.wineBoxColor || '无'}}</el-descriptions-item>
                <el-descriptions-item label="手提包颜色">{{diyInfo.handbagColor || '无'}}</el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>

            <el-collapse-item title="DIY贴纸" name="4">
              <el-descriptions border>
                <el-descriptions-item label="酒标贴纸">{{diyInfo.wineLabelSticker || '无'}}</el-descriptions-item>
                <el-descriptions-item label="酒箱贴纸">{{diyInfo.wineCaseSticker || '无'}}</el-descriptions-item>
                <el-descriptions-item label="酒盒贴纸">{{diyInfo.wineBoxSticker || '无'}}</el-descriptions-item>
                <el-descriptions-item label="手提包贴纸">{{diyInfo.handbagSticker || '无'}}</el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>

            <el-collapse-item title="二维码" name="5">
              <el-image style="width: 30px; height: 30px" :src="diyInfo.qrCode" fit="fit"
                        :preview-src-list="[diyInfo.qrCode]">
                <div slot="error" class="image-slot">
                  无
                </div>
              </el-image>
            </el-collapse-item>

          </el-collapse>
        </el-collapse-item>
      </el-collapse>

    </el-dialog>


    <el-dialog
        title="新增" @close="refreshChange"
        append-to-body
        :visible.sync="addBox"
        :before-close="handleClose"
        width="60%">
      <avue-form :option="customOrderOption" v-model="orderForm"  @submit="orderSubmit" ></avue-form>
    </el-dialog>

  </basic-container>


</template>

<script>
import {getList, getDetail, add, update, remove, deliverGoods, saveCustomOrder} from "@/api/finance/order";
import {customOrderOption} from "@/option/finance/order";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      orderForm: {},
      customOrderOption: customOrderOption,
      addBox: false,
      diyInfo: {},
      baseWineinfo: {},
      baseWineM: {},
      orderDetailData: {},
      cwDetail: {},
      activeNames: ['1', '2', '3', '4'],
      diyActiveNames: ['1', '2', '3', '4', '5'],
      detailDialog: false,
      form: {
      },
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height:'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        menuWidth: 150,
        border: true,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "订单号",
            prop: "orderNo",
            search: true,
            viewDisplay: false,
            width: 180
          },
          {
            label: "商品图片",
            prop: "image",
            type: 'upload',
            listType: 'picture-img',
            viewDisplay: false,
            width: 90,
          },
          // {
          //   label: "订单类型",
          //   prop: "orderType",
          //   viewDisplay: false,
          //   type: "select",
          //   search: true,
          //   hide: true,
          //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=order_type",
          //   props: {
          //     label: "dictValue",
          //     value: "dictKey"
          //   },
          //   dataType: "number",
          // },
          // {
          //   label: "订单类型",
          //   viewDisplay: false,
          //   prop: "orderTypeDesc",
          // },
          {
            label: "订单状态",
            viewDisplay: false,
            prop: "orderState",
            type: "select",
            search: true,
            hide: true,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=order_state",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
          },
          {
            label: "订单状态",
            prop: "orderStateDesc",
            viewDisplay: false,
          },
          {
            label: "订单金额",
            prop: "totalAmount",
            viewDisplay: false,
          },
          {
            label: "支付金额",
            viewDisplay: false,
            prop: "paymentAmount"
          },
          {
            label: "收货人",
            prop: "consignee",
            viewDisplay: false,
            search: true
          },
          {
            label: "下单时间",
            prop: "createTime",
            viewDisplay: false,
            width: 150,
          },
        ]
      },
      data: [],
      WL_COMPANY: [{
        label: '圆通速递',
        value: 'yuantong'
      }, {
        label: '韵达快递',
        value: 'yunda'
      },{
        label: '申通快递',
        value: 'shentong'
      },{
        label: '中通快递',
        value: 'zhongtong'
      },{
        label: '极兔速递',
        value: 'jtexpress'
      },{
        label: '邮政快递包裹',
        value: 'youzhengguonei'
      },{
        label: '顺丰速运',
        value: 'shunfeng'
      },{
        label: '京东物流',
        value: 'jd'
      },{
        label: '百世快递',
        value: 'huitongkuaidi'
      },{
        label: '德邦快递',
        value: 'debangkuaidi'
      },{
        label: '邮政标准快递',
        value: 'youzhengbk'
      }],
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      wlCompany: '',
      wlNo: '',
      viewDetail: false,
      bindBox: false,
      orderId: 0,
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.order_add, false),
        viewBtn: this.vaildData(this.permission.order_view, false),
        delBtn: this.vaildData(this.permission.order_delete, false),
        editBtn: this.vaildData(this.permission.order_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          let orderDetail = res.data.data.orderDetail;
          this.form = res.data.data;
          this.form.addressDetail = orderDetail.province + orderDetail.city + orderDetail.district + orderDetail.street + orderDetail.address;
          console.log(this.form)
          this.detailDialog = true;
        });
      }
      done();
    },
    viewOrderDetail(id) {
      getDetail(id).then(res => {
        let orderDetail = res.data.data.orderDetail;
        this.orderDetailData = res.data.data;
        this.orderDetailData.addressDetail = orderDetail.province + orderDetail.city + orderDetail.district + orderDetail.street + orderDetail.address;
        console.log(this.orderDetailData)
        this.cwDetail = res.data.data.customWineOrderVO;
        this.baseWineinfo = res.data.data.baseWineVO;
        if (res.data.data.baseWineVO) {
          this.baseWineM = res.data.data.baseWineVO.manufacturer;
        }
        this.diyInfo = res.data.data.diyInfo;
        this.detailDialog = true;
      });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage){
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize){
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      this.query.orderType = 2;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    handleSend(id) {
      this.bindBox = true;
      this.orderId = id;
    },
    handleClose() {
      this.bindBox = false;
      this.detailDialog = false;
      this.wlCompany = '';
      this.addBox = false;
      this.wlNo = '';
    },
    deliverGoods() {
      deliverGoods({
        orderId: this.orderId,
        wlCompany: this.wlCompany,
        wlNo: this.wlNo
      }).then(res => {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.onLoad(this.page, this.query);
        this.handleClose();
      })
    },
    orderSubmit(form,done) {
      form.orderType = 2;
      form.distributeMode = 1;
      form.baseWineType = 1;
      saveCustomOrder(form).then(res => {
        this.addBox = false;
        done()
      }).catch(e => {
        done()
      })
    },
    handleAdd() {
      this.addBox = true;
    },
  }
};
</script>

<style>
</style>
