<template>
  <div>
    <div class="app-container__list-table-option">
      <template v-for="event in events">
        <el-button :key="event" type="danger" size="small" @click="handleCancelSubOrder"
                   v-if="event === 'cancel_sub_order'" plain>
          取消
        </el-button>
        <el-button :key="event" type="primary" size="small" @click="handleReceiveOrder"
                   v-if="event === 'receive_order'">
          接单
        </el-button>
        <el-button :key="event" type="primary" size="small" @click="handleDeliverOrder"
                   v-if="event === 'delivery_order'">
          发货
        </el-button>
        <el-button :key="event" type="primary" size="small" @click="handleCompleteOrder"
                   v-if="event === 'complete_order'">
          完成订单
        </el-button>
      </template>
      <el-button :key="event" type="primary" size="small" @click="handleCancelOrder">
        退款
      </el-button>
      <el-button :key="event" type="primary" size="small" @click="handleSaveOrder">
        发货
      </el-button>
      <el-button :key="event" type="primary" size="small" @click="handleChangeOrder">
        换货
      </el-button>
    </div>
    <xd-dialog
      title="发货管理"
      v-if="dialogVisibleExpress"
      :show.sync="dialogVisibleExpress"
      width="50%"
      @onConfirm="handleUploadEXpress"
      @onClose="handleClose"
      @onCancel="handleClose"
    >
      <el-form :model="experssForm" label-width="100px">
        <div class="app-container__list-table">
          <xd-table
            ref="saveTableRef"
            :headers="headers"
            :list="tables"
            @change="saveTableChange"
            is-border
          >
          </xd-table>
        </div>
        <div style="margin-bottom:10px">
          <el-card>
            <xd-detail
              label-width="100"
              :is-border="isBorder"
              :list="subBaseData"
              size=""
            >
            </xd-detail>
          </el-card>
        </div>
        <el-form-item label="快递信息">
          <xd-add-express
            v-model="xdAddExpressValue"
            :express="expressList"
            :defaultValue="expressDatas"
            btn-name="提交"
            width="450px"
            :is-submit="false"
            :isComment="false"
          ></xd-add-express>
        </el-form-item>
      </el-form>
    </xd-dialog>
    <xd-dialog
      title="退款"
      v-if="dialogVisibleCancel"
      :show.sync="dialogVisibleCancel"
      width="50%"
      @onConfirm="handleCancel"
      @onClose="handleCancelClose"
      @onCancel="handleCancelClose"
    >
      <el-form :model="reasonForm" :rules="rules" label-width="100px">
        <div class="app-container__list-table">
          <xd-table
            ref="tableRef"
            :headers="headers"
            :list="tables"
            @change="tableChange"
            is-border
          >
          </xd-table>
        </div>
        <el-form-item
          label="退款渠道"
          prop="remoteInput"
        >
          <el-radio v-model="reasonForm.qd" label="1">原路返回</el-radio>
          <el-radio v-model="reasonForm.qd" label="2">线下转账</el-radio>
        </el-form-item>
      </el-form>
    </xd-dialog>
    <xd-dialog
      title="换货"
      v-if="dialogVisibleChange"
      :show.sync="dialogVisibleChange"
      width="50%"
      @onConfirm="handleChange"
      @onClose="handleChangeClose"
      @onCancel="handleChangeClose"
    >
      <div class="app-container__list-table">
        <el-card header="商品信息" style="margin-bottom: 5px">
        <el-table
          @row-click="getRowInfo"
          :data="changeTableData"
        >
          <el-table-column label="商品信息" width="300" align="left">
            <template slot-scope="scope">
              <div class="change_product" style="display: flex">
                <el-radio v-model="radio" :label="scope.row.id"
                          style="align-items: center;justify-items: center"></el-radio>
                <img style="width: 50px;height: 50px" src="" alt="">
                <div style="margin-top: 10px">
                  <div>名称</div>
                  <div>商品规格（xl-红色）</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单价&数量" align="center">
            <template slot-scope="scope">
              <div style="color: red">¥1.00</div>
              <div>1件</div>
            </template>
          </el-table-column>
          <el-table-column label="供货商" align="center" prop="company"></el-table-column>
          <el-table-column label="平台进货价" align="center" prop="g_price"></el-table-column>
          <el-table-column label="售价" align="center" prop="s_price"></el-table-column>
        </el-table>
        </el-card>
        <el-card header="选择商品">
          <el-form :model="changeForm" :rules="rules" label-width="100px">
            <div>
              <el-form-item
                style="display: inline-block"
                label="供应商选择"
                prop="remoteInput"
              >
                <el-select v-model="changeForm.company" filterable placeholder="请选择供货商">
                  <el-option
                    v-for="item in companyOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                style="display: inline-block"
                label=""
                prop="remoteInput"
              >
                <el-select v-model="changeForm.product_id" filterable placeholder="请选择商品">
                  <el-option
                    v-for="item in productOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button style="display: inline-block;margin-left: 10px" size="mini" type="primary" @click="handleAdd">
                添加
              </el-button>
              <div style="margin-left:20px">已选换货商品 总价：<span style="color: red">60元</span></div>
            </div>
            <div class="app-container__list-table">
              <xd-table
                :headers="changeHeaders"
                :list="changeTables"
                is-border
                @onClick="handleCilck"
              >
              </xd-table>
            </div>
            <el-form-item label="换货备注">
              <el-input v-model="changeForm.remake" type="textarea"></el-input>
            </el-form-item>
          </el-form>

        </el-card>

      </div>

    </xd-dialog>
  </div>
</template>

<script>

  import XdDialog from "@/components/XdDialog";
  import XdAddExpress from "./expressCopy";
  import XdSelectList from "@/components/XdSelectList";
  import XdTable from "@/components/XdTable";
  import {mapActions} from 'vuex'
  import XdDetail from "@/components/XdDetail";

  export default {
    name: 'OrderOperation',
    components: {
      XdDialog,
      XdAddExpress,
      XdSelectList,
      XdTable,
      XdDetail
    },
    props: {
      orderNumber: "",
      subOrderNumber: '',
      events: {
        type: Array,
        default: () => {
        }
      },
      orderType: 0,
      orderStatus: 0,
      payStatus: 0,
      expressNum: '',
      expressNumName: '',
      type: '',
      expressRow: {
        type: Object,
        default: function () {
          return {id: 1}
        }
      },
    },
    data() {
      return {
        target_shop_id: '',
        dialogShopFormVisible: false,
        dialogVisibleExpress: false,
        experssForm: {},
        expForm: {},
        expressId: '',
        defaultExpressId: '',
        expressNumber: '',
        expressName: '',
        expressList: null,
        expressData: [{
          expressNumber: '',
          expressId: '',
        }],
        xdAddExpressValue: [],
        dialogVisibleCancel: false,
        reasonForm: {
          qd: '1'
        },
        rules: {
          cancel_reason: {
            required: true,
            message: '请输入原因',
            trigger: ['blur']
          }
        },
        headers: [{"type": "selection"},
          {"type": "normal", "prop": "product", "align": "center", "width": 120, "label": "商品信息"},
          {"type": "normal", "prop": "number", "align": "center", "minWidth": 120, "label": "已换数量"},
          {
            type: 'priceNumber',
            prop: "priceNumber",
            align: 'center',
            width: 150,
            label: '价格&数量',
            message: ['price', 'number']
          },
          {"type": "normal", "prop": "t_price", "align": "center", "minWidth": 120, "label": "可退金额"},
          {"type": "input", "prop": "s_price", "align": "center", "minWidth": 120, "label": "退款金额"},
        ],
        tables: [
          {
            order_id: '12987122',
            info: '好滋好味鸡蛋仔',
            total: 8000,
            price: 8000,
            status: '待支付',
            number: '1',
            created: '2022-10-28 14:14:46',
            in: true,
            s_price: 1
          },
          {
            order_id: '12987123',
            info: '荷兰优质淡奶',
            total: 80000,
            price: 80000,
            status: '已完成',
            number: '1',
            created: '2022-10-28 14:14:46',
            in: true,
            s_price: 2
          },
        ],
        isBorder: false,
        subBaseData: [{
          title: '',
          items: [
            {
              label: '收货人',
              value: '123***123', type: 'normal',
              field: 'number',
              params: {
                handle: true,
                name: '查看用户信息',
                type: 'default'
              }
            },
            {
              label: '手机号',
              value: '186****1245', type: 'normal',
              field: 'iPhone',
              params: {
                handle: true,
                name: '查看联系电话',
                type: 'default'
              }
            },
            {label: '收货地址', value: '100', type: 'normal', field: 'address'},
            {label: '配送时间', value: '22', type: 'normal', field: 'time'},
            {label: '订单备注', value: '22', type: 'normal', field: 'remake'},
            {label: '祝福语', value: '22', type: 'normal', field: 'wish'},
          ],
        },],
        dialogVisibleChange: false,
        changeForm: {
          company: '',
          product_id: '',
          remake:'',
        },
        radio: '',
        changeTableData: [
          {id: 1, name: 1},
          {id: 2, name: 2},
        ],
        companyOptions: [{
          value: '1',
          label: '供货商1'
        }, {
          value: '2',
          label: '供货商2'
        },],
        productOptions: [{
          value: '1',
          label: '商品1'
        }, {
          value: '2',
          label: '商品2'
        },],
        changeHeaders: [
          {"type": "normal", "prop": "product", "align": "center", "width": 120, "label": "商品信息"},
          {
            type: 'priceNumber',
            prop: "priceNumber",
            align: 'center',
            width: 150,
            label: '价格&数量',
            message: ['price', 'number']
          },
          {"type": "normal", "prop": "company", "align": "center", "minWidth": 120, "label": "供货商"},
          {"type": "normal", "prop": "g_price", "align": "center", "minWidth": 120, "label": "平台进货价"},
          {"type": "normal", "prop": "s_price", "align": "center", "minWidth": 120, "label": "售价"},
          {
            "type": "operate",
            "align": "center",
            "width": 170,
            "label": "操作",
            "values": [
              {"ui": "button", "icon": "el-icon-delete", "target": "_blank", "name": "移除", "type": "primary"}]
          }],
        changeTables: [{
          order_id: '12987122',
          info: '好滋好味鸡蛋仔',
          total: 8000,
          price: 8000,
          status: '待支付',
          number: '1',
          created: '2022-10-28 14:14:46',
          in: true,
          s_price: 1
        },
          {
            order_id: '12987123',
            info: '荷兰优质淡奶',
            total: 80000,
            price: 80000,
            status: '已完成',
            number: '1',
            created: '2022-10-28 14:14:46',
            in: true,
            s_price: 2
          },],
        rowInfo: null,
      }
    },
    created() {
      this.experssForm = {
        main_order_number: this.orderNumber,
        sub_order_number: this.subOrderNumber
      }

    },
    methods: {
      ...mapActions('order',
        [
          'cancelOrder',
          'receiveOrder',
          'deliverOrder',
          'getExpressList',
          'uploadExpress',
          'completeOrder',
          'getCancelType',
          'cancelSubOrderNew'
        ]
      ),

      handleClose() {
        console.log('handleClose')
        this.expressName = '';
        this.expressNumber = '';
        this.expressId = '';
      },


      handleCancelSubOrder() {
        this.$confirm('订单取消后不可恢复，是否继续？', '取消订单', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.getCancelType({
            sub_order_number: this.subOrderNumber
          }).then(res => {
            if (res.type === 0) {
              this.cancelOrder({
                sub_order_number: this.subOrderNumber
              }).then(() => {
                this.$message({
                  message: '订单取消成功',
                  type: 'success'
                });
                this.completed()
              })
            } else {
              this.dialogVisibleCancel = true;
            }
          })
        });
      },

      // 接单
      handleReceiveOrder() {
        this.$confirm('是否继续？', '接受订单', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.receiveOrder({
            sub_order_number: this.subOrderNumber
          }).then(() => {
            this.$message({
              message: '接单成功',
              type: 'success'
            });
            this.completed()
          }).catch(err => {
            console.log(err, 'aapapapa')
          })
        });
      },

      // 发货
      handleDeliverOrder() {
        this.$confirm('是否确认发货？', '订单发货', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.deliverOrder({
            sub_order_number: this.subOrderNumber
          }).then(() => {
            this.$message({
              message: '订单发货成功',
              type: 'success'
            });
            this.completed()
          })
        });
      },

      // 完成订单
      handleCompleteOrder() {
        this.$confirm('是否完成订单？', '完成订单', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.completeOrder({
            sub_order_number: this.subOrderNumber
          }).then(() => {
            this.$message({
              message: '订单完成成功',
              type: 'success'
            });
            this.completed()
          })
        });
      },

      completed() {
        this.$emit('completed')
      },
      add() {
        this.expressData.push({
          expressNumber: '',
          expressId: '',
        })
      },
      deleteExpress(index) {
        console.log(index, 111)

        this.expressData.splice(index, 1)
      },
      //新退款确定
      handleCancel() {
        console.log(this.$refs.tableRef.getTableData(), this.reasonForm.qd, 'tables')
        return;
      },

      handleCancelClose() {
        this.dialogVisibleCancel = false;
        this.reasonForm.cancel_reason = '';
      },
      /**退款**/
      handleCancelOrder() {
        this.dialogVisibleCancel = true;
      },

      tableChange() {
        console.log(this.$refs.tableRef.getTableData(), 'eeee')
      },
      /**发货**/
      handleSaveOrder() {
        this.dialogVisibleExpress = true;
      },
      /**发货确认**/
      handleUploadEXpress() {
        console.log(this.$refs.saveTableRef.getTableData(), this.xdAddExpressValue, 'expresss')
      },
      /**发货改变金额**/
      saveTableChange() {
        console.log(this.$refs.saveTableRef.getTableData(), 'eeee')
      },
      /**换货**/
      handleChangeOrder() {
        this.dialogVisibleChange = true;
      },
      /**换货确定**/
      handleChange() {

      },
      /**换货取消**/
      handleChangeClose() {
        this.dialogVisibleChange = false;
      },

      getRowInfo(row) {
        console.log(row, 'row')
        this.radio = row.id;
        this.rowInfo = row;
      },
      /**移除已选**/
      handleCilck({row, value, index}) {
        console.log(row, value, index)
        this.changeTables.splice(index, 1)
      },
      /**添加商品**/
      handleAdd() {
        console.log(this.changeForm, this.radio, 'changeForm')
        this.changeTables.unshift({
          order_id: '12987122',
          info: '好滋好味鸡蛋仔',
          total: 8000,
          price: 8000,
          status: '待支付',
          number: '1',
          created: '2022-10-28 14:14:46',
          in: true,
          s_price: 1
        },)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .change_product {
    ::v-deep .el-radio__input {
      top: 38% !important;
    }

    ::v-deep .el-radio__label {
      display: none;
    }

    img {
      margin: 10px 5px;
    }
  }
</style>
