<template>
  <!-- 现货仓单 议价 议价单 -->
  <Drawer :title="'议价单'" :placement="'right'" class="delistingBottom" :visible="visible" @cancel="cancel">
    <div class="listed">
      <a-form class="inlineForm dialogForm">
        <div class="formBar">
          <a-table :columns="columns" class="dialogTable dialogTable2 expandLeftTable" :pagination="false" :expandIcon="expandIcon" :expandedRowKeys="expandedRowKeys" :loading="loading" :customRow="Rowclick" :expandIconAsCell="false" :rowKey="(record,index)=>index" :data-source="tableList">
            <!-- 额外的展开行 -->
            <template #expandedRowRender="{ record }">
              <BtnList :btnList="handleBtnList(record)" class="btn-list-sticky" :record="record" @click="action" />
            </template>
            <template #applystatus="{ text }">
              <span>{{ getBarmaginApplyStatus(text) }}</span>
            </template>
          </a-table>
        </div>
        <a-row :gutter="24" type="flex" justify="center">
          <a-col :span="24" class="fixedBtns">
            <a-form-item class="btnCenter">
              <a-button class="cancelBtn" @click="cancel">取消</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </Drawer>
</template>

<script lang="ts">
import { BtnListType } from '@/common/components/btnList/interface';
import Drawer from '@/common/components/drawer/index.vue';
import { getBarmaginApplyStatus } from '@/common/constants/enumsName';
import { BtnList, ModalEnum, queryTableList } from '@/common/export/commonTable';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { _closeModal } from '@/common/setup/modal/modal';
import { getTableEvent } from '@/common/setup/table';
import { expandIcon } from '@/common/setup/table/clolumn';
import { queryQueryWrTradeBargainApply } from '@/services/go/wrtrade';
import { QueryWrTradeBargainApplyQsp, QueryWrTradeBargainApplyReq, WrOrderDetail } from '@/services/go/wrtrade/interface';
import { wrBargainBack, wrBargainNoAgree } from '@/services/proto/WrBargain';
import { WrBargainBackReq, WrBargainNoAgreeReq } from '@/services/proto/WrBargain/interface';
import Long from 'long';
import { defineComponent, PropType, ref } from 'vue';
import { getSpotWarrantBargainDetailColumns } from '../../setup';

export default defineComponent({
  name: ModalEnum.spot_warrant_bargain_detail,
  components: { Drawer, BtnList },
  emits: ['cancel', 'update'],
  props: {
    selectedRow: {
      type: Object as PropType<QueryWrTradeBargainApplyQsp | WrOrderDetail>,
      default: {},
    },
    isMy: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, context) {
    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<QueryWrTradeBargainApplyQsp>();
    const { visible, cancel } = _closeModal(context);
    const param: QueryWrTradeBargainApplyReq = {
      haswr: 1,
      wrtradeorderid: props.selectedRow.wrtradeorderid,
    };
    queryTable(queryQueryWrTradeBargainApply, param).then((res) => {
      const arr = res.map((el) => {
        return Object.assign(el, { key: el.wrbargainid });
      });
      // 时间 倒序排序
      tableList.value = arr.sort((a, b) => {
        const time1 = new Date(a.applytime).getTime();
        const time2 = new Date(b.applytime).getTime();
        return time2 - time1;
      });
    });

    function isShowBtn() {
      let result = false;
      tableList.value.forEach((el) => {
        if (el.applystatus === 1) {
          result = true;
        }
      });
      return result;
    }
    // 我对别人的 => 撤销
    // 别人对我的 => 确认、拒绝
    const { getColums, isMy } = getSpotWarrantBargainDetailColumns(props.isMy);
    function handleBtnList(record: QueryWrTradeBargainApplyQsp) {
      const result = ref<BtnListType[]>([]);
      if (isMy()) {
        result.value = [{ lable: '撤销', code: 'cancel', className: 'btnDanger' }];
      } else {
        result.value = [
          { lable: '确认', code: 'submit', className: 'operBtn' },
          { lable: '拒绝', code: 'refuse', className: 'btnDanger' },
        ];
      }
      return record.applystatus === 1 ? result.value : [];
    }
    function action({ code }: BtnListType, { wrbargainid }: QueryWrTradeBargainApplyQsp) {
      switch (code) {
        case 'cancel':
          cancelAction(wrbargainid);
          break;
        case 'submit':
          submit(wrbargainid);
          break;
        case 'refuse':
          refuse(wrbargainid);
          break;
      }
    }

    // 确认
    function submit(wrbargainid: string) {
      const param: WrBargainNoAgreeReq = {
        WrBargainID: Long.fromString(wrbargainid),
        Status: 1,
      };
      requestResultLoadingAndInfo(wrBargainNoAgree, param, loading, ['确认成功', '确认失败:']).then(() => {
        cancel(true);
      });
    }
    // 拒绝
    function refuse(wrbargainid: string) {
      const param: WrBargainNoAgreeReq = {
        WrBargainID: Long.fromString(wrbargainid),
        Status: 2,
      };
      requestResultLoadingAndInfo(wrBargainNoAgree, param, loading, ['拒绝成功', '拒绝失败:']).then(() => {
        cancel(true);
      });
    }
    // 撤销
    function cancelAction(wrbargainid: string) {
      const param: WrBargainBackReq = {
        WrBargainID: Long.fromString(wrbargainid),
      };
      requestResultLoadingAndInfo(wrBargainBack, param, loading, ['撤销成功', '撤销失败:']).then(() => {
        cancel(true);
      });
    }
    return {
      visible,
      columns: getColums(),
      loading,
      tableList,
      isMy,
      submit,
      refuse,
      cancelAction,
      cancel,
      getBarmaginApplyStatus,
      isShowBtn,
      handleBtnList,
      action,
      expandIcon,
      ...getTableEvent<QueryWrTradeBargainApplyQsp>(),
    };
  },
});
</script>

<style lang="less" scoped>
.listed {
    width: 100%;
    height: 100%;
    .flex;
    flex-direction: column;
    overflow: hidden;
    .ant-form {
        height: 100%;
        .formBar {
            height: 100%;
            max-height: 100%;
        }
    }
    .condition {
        width: 100%;
        height: 48px;
        padding: 10px 16px;
        border-bottom: 1px solid @m-black6;
        .inlineflex;
        .conditionBtn {
            align-self: center;
            align-items: center;
            border: 0;
            min-width: 80px;
            height: 28px;
            line-height: 28px;
            background: @m-black7;
            .rounded-corners(3px);
            font-size: 14px;
            color: @m-blue0;
            &:hover {
                background: @m-black7-hover;
                color: @m-blue0-hover;
            }
        }
        .conditionBtn + .conditionBtn {
            margin-left: 10px;
        }
    }
}
</style>
