<template>
  <div style="display: inline-block">
    <el-dialog
      :visible.sync="dialog"
      :close-on-click-modal="false"
      title="协议详情"
      append-to-body
      width="500px"
      @close="cancel"
    >
      <div class="portfolio-verify">
        <div
          v-for="(item, key) in data"
          :key="key"
          class="contractList"
          style="margin:30px 0px 0px 20px"
        >
          <el-link
            type="primary"
            :href="item.linkAddr"
            target="_blank"
          >{{ item.contractName }}</el-link>
          <!-- <div>{{ '《' + item.fileName + '》' + getStatus(item.status) }}</div> -->
        </div>
      </div>
      <el-button
        style="margin:30px 0px 0px 380px"
        @click="dialog = false"
      >取消</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { updateStatus } from '@/utils/portfolio'
import { mapGetters } from 'vuex'
// import { queryContractList } from '@/api/order'

export default {
  data() {
    return {
      error: null,
      loading: false,
      dialog: false,
      form: {
        applyReason: '',
        cancelAmount: null
      },
      data: [],
      status: 0
    }
  },
  created() {},
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
    updateStatus,
    getError() {
      // this.$message.error(this.error)
      // this.$message({
      //   message: this.error,
      //   type:'error',
      //   customClass:'message',
      //   duration: 1500
      // });
    },
    cancel() {
      this.resetForm()
    },
    resetForm() {
      // console.log('clear')
      this.error = null
      this.status = 0
      this.form = {
        applyReason: '',
        cancelAmount: null
      }
      this.data = []
      this.dialog = false
      // this.$parent.getOrderList()
    },
    getStatus(val) {
      switch (val) {
        case 1:
          return '(待签署)'
        case 2:
          return '(签署中)'
        case 3:
          return '(已完成)'
        case 4:
          return '(已过期)'
        case 5:
          return '(已解约)'
        case 6:
          return '(已拒签)'
        default:
          return ''
      }
    }
  },
  watch: {
    error: {
      handler(newName) {
        if (newName) {
          this.getError()
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
.portfolio-verify {
  margin: 15px;
  padding: 0px;
  width: calc(100% - 100px);
  height: 100%;
}
.portfolio-form {
  height: 100%;
  width: 100%;
}
.portfolio-no{
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  text-align: center;
}
</style>

<style>
.el-message{
  z-index: 5000 !important;
}
</style>
