<template>
  <a-modal
    :title="modalTitle"
    :width="1300"
    class="ant-modal2"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <div>

<!--      <project-detail ref="projectDetail" v-if="pageName=== 'project'" :id="id"></project-detail>-->

      <a-card
        title="审批经办人"
        :bordered="false">
        <a-table
          :columns="auditColumns"
          :dataSource="auditData"
          :pagination="false"
        >
        </a-table>
      </a-card>
      <a-card
        :bordered="false">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="继续上报">
              <a-radio-group
                v-if="self"
                :defaultValue="1"
                v-model="flag">
                <a-radio :value="1">继续上报</a-radio>
                <a-radio :value="0">结束</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              v-if="!self"
              label="审批">
              <a-radio-group
                :defaultValue="1"
                v-model="flag">
                <a-radio :value="1">通过</a-radio>
                <a-radio :value="0">不通过</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 14, offset: 1}" :lg="{span: 12}" :md="{span: 12}" :sm="24" v-if="!self">
            <a-form-item
              label="审批意见">
              <a-textarea
                :rows="4"
                v-model="opinion" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

    </div>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">提交</a-button>
    </template>
  </a-modal>
</template>

<script>
// import ProjectDetail from './project/ProjectDetail'
import { mixin, mixinDevice } from '@/utils/mixin'
import { audit, getAuditRecord } from '@/api/activiti/activiti'

export default {
  name: 'Audit',
  mixins: [mixin, mixinDevice],
  components: {

  },
  data () {
    return {
      confirmLoading: false,
      pageName: '',
      id: '',
      modalTitle: '审核',
      visible: false,
      loading: false,
      flag: 1,
      opinion: '',
      form: this.$form.createForm(this),
      // table
      auditColumns: [
        {
          title: '审批人',
          dataIndex: 'userName',
          key: 'userName',
          width: '20%'
        },
        {
          title: '审批时间',
          dataIndex: 'createTime',
          key: 'auditTime',
          width: '30%',
          scopedSlots: { customRender: 'keyword' }
        },
        {
          title: '审批结果',
          dataIndex: 'flag',
          key: 'flag',
          width: '30%',
          customRender: (text, row, index) => {
            return text ? '通过' : '不通过'
          }
        },
        {
          title: '审批意见',
          dataIndex: 'opinion',
          key: 'opinion'
        }
      ],
      record: {},
      auditData: [],
      self: '',
      values: {}
    }
  },
  methods: {
    base (record) {
      this.visible = true
      this.record = record
      this.id = record.targetId
      this.self = record.self
      this.pageName = record.targetCode
      this.auditRecord()
    },
    // 最终全页面提交
    save () {
      this.confirmLoading = true
      audit({
        ...this.record,
        flag: this.flag === 1,
        opinion: this.opinion
      })
        .then(() => {
          this.handleCancel({})
        }).catch(() => {
          this.confirmLoading = false
        })
    },
    auditRecord () {
      getAuditRecord({ processInstanceId: this.record.processInstanceId })
        .then((res) => {
          this.auditData = res.data
        }).catch(() => {
          this.confirmLoading = false
        })
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.$emit('ok', values)
    }
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
  .popover-wrapper {
    /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
      min-width: 256px;
      max-height: 290px;
      padding: 0;
      overflow: auto;
    }
  }
  .antd-pro-pages-forms-style-errorIcon {
    user-select: none;
    margin-right: 24px;
    color: #f5222d;
    cursor: pointer;
    i {
          margin-right: 4px;
    }
  }
  .antd-pro-pages-forms-style-errorListItem {
    padding: 8px 16px;
    list-style: none;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      background: #e6f7ff;
    }
    .antd-pro-pages-forms-style-errorIcon {
      float: left;
      margin-top: 4px;
      margin-right: 12px;
      padding-bottom: 22px;
      color: #f5222d;
    }
    .antd-pro-pages-forms-style-errorField {
      margin-top: 2px;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }
  }
</style>
<style lang="less">
  .ant-modal2 {
    top: 10px !important;
  }
</style>
