<template>
  <div style="width:550px">
    <div class="OrderCancelReason">
        <p style=' font-size: 14px;margin-bottom:10px; '>您确定要执行操作（订单拦截）？请选择拦截原因：</p>
        <div class='interceptionList'>
            <RadioGroup v-model="interceptionChoosed" type="button">
                <Radio v-for="(interception, index) in interceptionList" :key="index" :label="interception.id" :title="interception.INTERCEPTION_CAUSE">
                    {{ interception.INTERCEPTION_CAUSE }}
                </Radio>
            </RadioGroup>
        </div>
        <div style="margin-top: 16px;">
          <span>拦截截止时间:</span>
          <Tooltip max-width="200" content="选择后，到拦截截止时间后自动取消拦截；不选择，需要手工取消拦截" placement="bottom">
            <img class="img-framelanflag" src="../../assets/icon/help.png">
          </Tooltip>
          <DatePicker v-model="automatic_release_intercept_time" type="datetime" :options="options" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" style="width: 100%;max-width:240px;min-width: 200px;" :transfer="transfer" :clearable="clearable" @on-change="rangeDate"></DatePicker>
        </div>
        <footer style="display: flex; justify-content: flex-end; margin-top: 16px">
            <Button
            type="fcdefault"
            style="width: 80px; height: 34px; font-size: 14px"
            @click="cancelModal"
            >
            取消
            </Button>
            <Button
            type="posdefault"
            style="width: 80px; height: 34px; font-size: 14px; margin-left: 8px"
            @click="okToInterception"
            >
            确定
            </Button>
        </footer>
    </div>
  </div>
</template>
<script>
  const R3 = window.R3;
  const { network } = R3;
  export default {
    props: {
      idArray: { // 获取ID用于多选
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        interceptionList: [], // 拦截原因list
        interceptionChoosed: '', // 已经选择的拦截原因
        automatic_release_intercept_time: '', // 订单拦截截止时间
        options: {
              disabledDate(date) {
                return date && date.valueOf() < Date.now() - 86400000;
              }
        },
      };
    },
    created() {
        this.getInterceptionList();
    },
    methods: {
        // 获取拦截原因列表
        getInterceptionList() {
            let params = {
                page:1,
                pageSize: 1000
            }
            network.post('/p/cs/order/interception/query', params).then((res)=>{
                if(res.data.code == 0){
                    this.interceptionList = res.data.data.resultList
                }
            })
        },
        rangeDate(e) {
          this.automatic_release_intercept_time = e;
        },
        //   取消按钮
        cancelModal() {
            this.$emit('closeActionDialog', false);
        },
        // 确定拦截订单
        okToInterception() {
            if (!this.interceptionChoosed) {
                return this.$Message.warning('拦截原因不能为空！');
            }
            // 校验自动释放拦截时间不能小于当前时间
            if (this.automatic_release_intercept_time) {
              const now = new Date();
              const selected = new Date(this.automatic_release_intercept_time);
              if (selected < now) {
                return this.$Message.warning('拦截截止时间不能小于当前时间！');
              }
            }
            let params = {
                tableName:"T_V_OMSONLINEORDER",
                ids:this.idArray,
                actionName:"T_V_OMSONLINEORDER_订单拦截",
                interceptionCauseId: this.interceptionChoosed,
                automatic_release_intercept_time: this.automatic_release_intercept_time,
            }
            network.post('/p/cs/batch/order/interecept', params).then((res)=>{
                if(res.data.code == 0){
                    this.$emit('closeActionDialog', true);
                    this.$Message.success(res.data.message);
                }else {
                    this.$Message.warning(res.data.message);
                }
            })
        },
    }
  };
</script>
<style lang="less">
  .interceptionList .ark-radio-group-item {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #eee;
    margin-right: 8px;
    margin-top: 12px;
    border-radius: 20px;
  }
  .interceptionList .ark-radio-group-button .ark-radio-wrapper:first-child,.interceptionList .ark-radio-group-button .ark-radio-wrapper:last-child {
    border: 1px solid #eee;
    border-radius: 20px;
  }
  .interceptionList .ark-radio-group-button .ark-radio-wrapper:hover,.interceptionList .ark-radio-group-button .ark-radio-wrapper-checked:hover {
    color: rgb(250, 135, 5);
    border: 1px solid rgb(250, 135, 5);
    box-shadow: none;
  }
  .interceptionList .ark-radio-group-button .ark-radio-wrapper.ark-radio-wrapper-checked {
    color: rgb(250, 135, 5);
    border: 1px solid rgb(250, 135, 5);
    box-shadow: none;
  }
  .interceptionList .ark-radio-group-button .ark-radio-wrapper:before, .interceptionList .ark-radio-group-button .ark-radio-wrapper:after {
    display: none;
  }
  .cancelResult .ark-btn-text {
    display: none;
  }
</style>
<style lang="less" scoped>
    .interceptionList {
        max-height: 400px;
        overflow-y: auto;
    }
    .img-framelanflag{
      cursor: pointer;
      vertical-align: middle;
      margin-top: -3px;
      margin-right: 5px;
      width: 16px;
    }
</style>
