<template>
  <page-header-wrapper title="确认方案功能" v-if="!loading">
    <a-card :bordered="true" style="margin-top: 24px">
      <div class="row">
        <div class="row-item">
          <a-descriptions title="预估方案" layout="horizontal" bordered>
            <a-descriptions-item v-for="item in scheme" :key="item.key" :label="item.title" :span="3">
              {{ item.value }}
            </a-descriptions-item>
          </a-descriptions>
          <div style="margin-top:30px;"></div>
          <a-descriptions title="基本信息" layout="horizontal" bordered>
            <a-descriptions-item v-for="item in base" :key="item.key" :label="item.title" :span="3">
              {{ item.type === 'price'?'￥'+item.value : item.value }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <div class="row-item-line"></div>
        <div class="row-item">
          <a-form
            ref="form"
            v-bind="formItemLayout"
            :form="form"
          >
            <a-descriptions :title="status.value === 0?'结案方案（待配置结案方案）':status.value === 1?'结案方案（待用户确认方案)':status.value === 2?'结案方案（用户已确认结案方案)':'结案方案（用户驳回结案方案)'" layout="horizontal" bordered>
              <a-descriptions-item v-for="item in params" :key="item.key" :label="item.title" :span="6">
                <a-form-item>
                  <a-input
                    :disabled="status.disabled"
                    :prefix="item.type === 'price'?'￥':''"
                    :suffix="item.type === 'price'?'RMB':item.type == 'day'?'天':''"
                    v-decorator="[
                      item.key,
                      {
                        rules: [
                          { required: true, message: '请输入'+item.title+'!', type: 'string' },
                        ]
                      }
                    ]"
                    :placeholder="'请输入'+item.title+'!'"
                  />
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item label="是否直接完成方案" :span="6" >
                <a-switch @change="onFinishPlanChange" v-model="is_complate" :disabled="status.disabled" />
              </a-descriptions-item>
            </a-descriptions>
            <a-popconfirm
              placement="bottomRight"
              title="是否确认该方案"
              ok-text="确认"
              cancel-text="取消"
              @confirm="onOk"
              v-if="!status.disabled"
            >
              <a-button class="submit" type="primary">确认提交</a-button>
            </a-popconfirm>
            <div style="margin-top:30px;color:red;" v-if="remark!== ''">备注原因：{{ remark }}</div>
          </a-form>
        </div>
      </div>
      <!-- <a-result v-else status="404" title="抱歉！" sub-title="未查询到任何记录..." /> -->
    </a-card>
  </page-header-wrapper>
</template>

<script>
import {
  getSchemes,
  addSchemes
} from '@/api/order'
import { STable } from '@/components'

export default {
  name: 'ConfirmPlan',
  components: {
    STable
  },
  data () {
    return {
      bankInfo: {},
      params: [],
      scheme: [],
      base: [],
      orderId: '',
      itemId: '',
      loading: true,
      form: this.$form.createForm(this),
      formItemLayout: {
        wrapperCol: { span: 24 }
      },
      remark: '',
      is_complate: false
    }
  },
  activated () {
    this.itemId = this.$route.params.itemId
    this.orderId = this.$route.params.orderId
    this.getInfo()
  },
  methods: {
    onOk () {
      return new Promise(resolve => {
        this.form.validateFields((errors, values) => {
          if (!errors) {
            addSchemes(this.orderId,
              this.itemId,
              { params: values, is_complate: this.is_complate }
            ).then(() => {
              this.$notification.success({
                message: '成功',
                description: '确认方案成功，等待用户确认！'
              })
              this.getInfo()
              resolve(true)
            }).catch((err) => {
              this.$notification.error({
                message: '失败',
                description: err.message
              })
              this.getInfo()
            })
          }
        })
      })
    },
    getInfo () {
      this.form.resetFields()
      getSchemes(this.orderId, this.itemId).then(
        res => {
          this.params = res.params
          this.scheme = res.scheme.params
          this.base = res.base
          this.status = res.status
          this.loading = false
          this.remark = res.remark
          this.is_complate = res.is_complate === 1
          if (res.status !== 0) {
            const lists = res.params
            const defaultItem = {}
            lists.map(item => {
              defaultItem[item.key] = item.value
            })
            this.$nextTick(() => {
              this.form.setFieldsValue(defaultItem)
            })
          }
        }).catch(
        err => {
          this.$notification.error(err)
        }
      )
    },
    // 是否直接完成
    onFinishPlanChange (checked) {
      this.is_complate = checked
    }
  }
}
</script>

<style lang="less" scoped>
.row{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  .row-item-line{
    padding: 0 30px;
  }
  .row-item{
    flex:1;
  }
}
.ant-form-item{
  margin-bottom: 0;
}
.submit{
  margin:40px 20px 20px 0;
  text-align: right;
  float: right;
}
</style>
