<template>
  <div>
    <div class="app-option">
    <el-tooltip effect="dark" content="详情" placement="top" style="margin-right: 10px;">
      <router-link target="_blank" :to="toLink(expressRow)">
        <el-button type="primary" size="small" icon="el-icon-view"></el-button>
      </router-link>
    </el-tooltip>
    <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>
<!--      <el-button-->
<!--        :key="event"-->
<!--        type="success"-->
<!--        size="mini"-->
<!--        @click="addExpress"-->
<!--        v-if="(orderType === 1 || orderType === 4)-->
<!--        && orderStatus === 1-->
<!--        && payStatus === 1-->
<!--        && event === 'upload_express_number'-->
<!--        && type === 2">-->
<!--        上传快递单号-->
<!--      </el-button>-->
    </template>
    </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" v-if="expressList&&expressList.length > 0">
        <el-form-item label="主订单号" prop="main_order_number">
          {{ orderNumber }}
          <el-input v-model="orderNumber" :readonly="true" style="display:none"/>
        </el-form-item>
        <el-form-item label="子订单号" prop="sub_order_number">
          {{ subOrderNumber }}
          <el-input v-model="subOrderNumber" :readonly="true" style="display:none"/>
        </el-form-item>
        <el-form-item label="快递信息">
          <xd-add-express
            v-if="expressList"
            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="dialogVisibleStore"
      :show.sync="dialogVisibleStore"
      width="50%"
      @onConfirm="handleCloseStore"
      @onClose="handleCloseStore"
      @onCancel="handleCloseStore"
    >
      <el-table :data="storeData" border fit highlight-current-row>

        <el-table-column align="center" prop="name" label="名称">
        </el-table-column>

        <el-table-column align="center" prop="phone" label="电话">
        </el-table-column>

        <el-table-column align="center" prop="distance" label="距离">
        </el-table-column>
      </el-table>
    </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">
        <el-form-item label="退款原因" prop="cancel_reason">
          <el-input v-model="reasonForm.cancel_reason" type="textarea"/>
        </el-form-item>
      </el-form>
    </xd-dialog>
  </div>
</template>

<script>

  import XdDialog from "@/components/XdDialog";
  import XdAddExpress from "@/components/XdAddExpress";
  import XdSelectList from "@/components/XdSelectList";
  import {mapActions} from 'vuex'

  export default {
    name: 'OrderOperation',
    components: {
      XdDialog,
      XdAddExpress,
      XdSelectList
    },
    props: {
      orderNumber: "",
      subOrderNumber: '',
      events: {
        type: Array,
        default: [],
      },
      expressDatas: {
        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: [],
        dialogVisibleStore: false,
        dialogVisibleCancel:false,
        storeData: [
          {
            name: '门店名称',
            phone: '18632363312',
            distance: '河北省三河市',
          }, {
            name: '门店名称',
            phone: '18632363312',
            distance: '河北省三河市',
          }, {
            name: '门店名称',
            phone: '18632363312',
            distance: '河北省三河市',
          },
        ],
        reasonForm:{
          cancel_reason:'',
        },
        rules: {
          cancel_reason: {
            required: true,
            message: '请输入原因',
            trigger: ['blur']
          }
        },
      }
    },
    created() {
      console.log(this.expressDatas,'expressDatas')
      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 = '';
      },

      getUploadExpressList() {
        console.log('this.expressName',this.expressNumName)
        this.getExpressList().then(res => {
          this.expressList = res.map(item => {
            if(this.expressNumName === item['express_name']) {
              this.defaultExpressId = item['express_id']
            }
            return {
              label: item['express_name'],
              value: item['express_id']
            }
          });
          this.dialogVisibleExpress = true;
          console.log('this.expressName', this.expressNumName, this.expressId)
        }).catch(err => {

        })
      },

      handleUploadEXpress(content) {
        console.log(this.xdAddExpressValue,'content')
        let list;
        if(this.xdAddExpressValue && this.xdAddExpressValue.length>0){
          list = this.xdAddExpressValue.map(item => {
            return {express_id: item.company, express_number: item.number, express_name: ''}
          })
        }else{
          list = this.expressDatas;
          console.log(list, 'list')
        }

        let params = {
          main_order_number: this.orderNumber,
          sub_order_number: this.subOrderNumber,
          express_data:JSON.stringify(list)
        }
        this.uploadExpress(params).then(res => {
          this.$message({
            message: '上传成功',
            type: 'success'
          });
          this.dialogVisibleExpress = false;
          this.completed()
        }).catch(err => {

        })
      },

      addExpress() {
        this.getUploadExpressList()
        this.expressNumber = this.expressNum;

      },

      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){
        this.expressData.splice(index,1)
      },
        //获取门店
      getStore(){
        this.dialogVisibleStore = true;
      },
      handleCloseStore(){
        this.dialogVisibleStore = false;
      },

      toLink(item) {
        return `/order/info/${item.sub_order_number}`;
      },
      //新退款确定
      handleCancel(){
        if(this.reasonForm.cancel_reason===''){
          this.$message({
            message: '请输入原因',
            type: 'error'
          });
          return;
        }
        if (this.reasonForm.cancel_reason.length>200) {
          this.$message({
            message: '输入内容不能大于200个字',
            type: 'error'
          });
          return;
        }
        this.cancelSubOrderNew({
          sub_order_number: this.subOrderNumber,
          cancel_reason:this.reasonForm.cancel_reason
        }).then(res=>{
          this.$message({
            message: '退款申请成功',
            type: 'success'
          });
          this.completed();
          this.dialogVisibleCancel = false;
        })
      },
      handleCancelClose(){
        this.dialogVisibleCancel =false;
        this.reasonForm.cancel_reason = '';
      },
    }
  }
</script>

<style lang="scss" scoped>
  .app-option{
    display:flex;
    align-items: flex-start;
    justify-items: center;
  }
</style>
