<template>
  <view
    class="fixed shadow-2xl"
    style="z-index: 1000"
    :style="{
      left: client.left + 'px',
      top: height - client.top > 110 ? client.top + 'px' : '',
      bottom: height - client.top > 110 ? '' : '10px',
    }"
    id="u-icard"
  >
    <u-card
      :title="title"
      style="width: 500rpx; margin: 0 !important"
      v-if="showTips"
      titleSize="28"
      :headStyle="headStyle"
      :footStyle="footStyle"
    >
      <view class="" slot="body"> {{ tipsContent }} </view>
      <view class="flex ustify-between" slot="foot">
        <u-button size="mini" @tap="clickCancel">取消</u-button>
        <u-button v-if="status === 1" size="mini" @tap="clickCancel">暂停</u-button>
        <u-button v-if="status === 2" size="mini" @tap="clickCancel">继续</u-button>
        <u-button v-if="status === 1 || status === 2" size="mini" @tap="clickCancel">重新开始</u-button>
        <u-button v-if="status === 1 || status === 2" type="primary" size="mini" @tap="clickCancel">结束</u-button>
        <u-button v-if="status === 0 || status === 3" type="primary" size="mini" @tap="clickOk">确定</u-button>
      </view>
    </u-card>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'Tips',
  props: {
    title: {
      default: '提示',
      type: String,
    },
  },
  computed: mapState('task', ['client', 'showTips', 'status', 'tipsContent']),
  data() {
    return {
      footStyle: { padding: '4px 15px' },
      headStyle: { paddingTop: '8px', paddingBottom: '8px' },
      height: 0,
    };
  },
  mounted() {
    this.height = window.screen.height;
  },
  methods: {
    ...mapMutations('task', ['setTips']),
    clickOk() {
      this.$refs.uToast.show({
        title: '点击了确定',
        type: 'success',
      });
      this.setTips(false);
    },
    clickCancel() {
      this.$refs.uToast.show({
        title: '点击了取消',
        type: 'error',
      });
      this.setTips(false);
    },
  },
};
</script>
