<template>
  <!-- 履约明细-->
  <Drawer :title="'履约明细'"
          :placement="'right'"
          class="bottomWidth"
          :visible="visible"
          @cancel="cancel">
    <div class="listed">
      <div class="condition">
        <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>
        <a-button class="conditionBtn">{{selectedRow.wrtypename}}</a-button>
        <a-button class="conditionBtn">{{selectedRow.warehousename}}</a-button>
      </div>
      <a-table class="dialogTable"
               :columns="columns"
               :data-source="performancePlanStepList"
               :pagination="false">
        <template #isauto="{ text }">
          <span>{{text ? '是' : '否'}}</span>
        </template>
        <template #stepvalue="{ text }">
          <span>{{(text* 100).toFixed(0)}}</span>
        </template>
        <template #stepstatus="{ text }">
          <span>{{getPerformanceStatusName(text)}}</span>
        </template>
      </a-table>
    </div>
  </Drawer>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import Drawer from '@/common/components/drawer/index.vue';
import { WrPerformancePlan } from '@/services/go/wrtrade/interface';
import { ModalEnum } from '@/common/constants/modalNameEnum';
import { _closeModal } from '@/common/setup/modal/modal';

import { BuyOrSell } from '@/common/constants/enumCommon';
import { handlePerformancePlanStep } from '../setup';
import { getPerformanceStatusName } from '@/common/constants/enumsName';

const columns = [
    { title: '履约步骤', dataIndex: 'steptypename', key: 'steptypename', align: 'center' },
    // { title: '天数', dataIndex: 'applytime', key: 'applytime', align: 'center' },
    { title: '剩余天数', dataIndex: 'remaindays', key: 'remaindays', align: 'center' },
    { title: '步骤值（%）', dataIndex: 'stepvalue', key: 'stepvalue', align: 'center', slots: { customRender: 'stepvalue' } },
    { title: '距离上一步', dataIndex: 'stepdays', key: 'stepdays', align: 'center' },
    { title: '自动', dataIndex: 'isauto', key: 'isauto', align: 'center', slots: { customRender: 'isauto' } },
    { title: '当前状态', dataIndex: 'stepstatus', key: 'stepstatus', align: 'center', slots: { customRender: 'stepstatus' } },
];

export default defineComponent({
    name: ModalEnum.performance_information_buy_performance_detail,
    components: { Drawer },
    emits: ['cancel', 'update'],
    props: {
        selectedRow: {
            type: Object as PropType<WrPerformancePlan>,
            default: {},
        },
        buyOrSell: {
            type: Number as PropType<BuyOrSell>,
            default: BuyOrSell.buy,
        },
    },
    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        const { performancePlanStepList } = handlePerformancePlanStep(props.selectedRow, true);
        return {
            visible,
            cancel,
            performancePlanStepList,
            columns,
            getPerformanceStatusName,
        };
    },
});
</script>

<style lang="less" scoped>
.performanceSteps {
    padding: 25px 40px;
    .btns {
        width: 100%;
        text-align: center;
        .ant-btn.closeBtn {
            width: 120px;
            height: 30px;
            background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
            .rounded-corners(3px);
            color: @m-white0;
            border: 0;
            font-size: 16px;
            &:hover {
                background: linear-gradient(0deg, @m-blue2-hover 0%, @m-blue0-hover 100%);
                color: @m-white0-hover;
            }
        }
    }
}
</style>;
