<template>
  <div class="col-sm-12" style="margin: 20px 0px;">
    <data-grid :model="model" v-ref:grid class="list_area table_sy" style="padding: 0px">
      <template partial='head'>
        <tr>
          <th class="textNoLineBreak">序号</th>
          <th class="textNoLineBreak">合同类型</th>
          <th class="textNoLineBreak">合同金额</th>
          <th class="textNoLineBreak">签订日期</th>
          <th class="textNoLineBreak">提交人</th>
          <th class="textNoLineBreak">备注</th>
          <th class="textNoLineBreak">状态</th>
          <th class="textNoLineBreak">作废人员</th>
          <th class="textNoLineBreak">作废时间</th>
          <th class="textNoLineBreak">作废原因</th>
          <th class="textNoLineBreak">
            <button
              type="button"
              class="btn btn-info head-but"
              :disabled="$parent.$parent.mark === 1"
              @click="$parent.$parent.showSupplement = !$parent.$parent.showSupplement"
            >补充协议</button>
          </th>
        </tr>
      </template>
      <template partial='body'>
        <tr>
          <td style="text-align: center;">
            <nobr>{{$index+1}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_contract_type}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_contract_money}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_contract_time}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_operator}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_remarks}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_contract_status}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_void_staff}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_void_date}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_void_remarks}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>
              <button
                type="button"
                name="button"
                class="btn btn-link"
                :disabled="$parent.$parent.mark === 1 || row.f_contract_status === '作废'"
                @click="$parent.$parent.showInvalidModal(row)"
              >作废</button>
            </nobr>
          </td>
        </tr>
      </template>
    </data-grid>

    <validator name="v">
      <modal v-if="showSupplement" :show.sync="showSupplement" v-ref:modal :large="true" :backdrop="false">
        <header slot="modal-header" class="modal-header">
          <button type="button" class="close" @click="closeModal"><span>&times;</span></button>
          <h4 class="modal-title">协议明细</h4>
        </header>
        <article slot="modal-body" class="modal-body clearfix">
          <div class="form-group col-sm-12">
            <label class="col-sm-2 control-label">合同编号：</label>
            <div class="col-sm-10">
              <input type="text"
                     class="form-control input_view"
                     style="width: 100%"
                     readonly
                     :value="selectdata.f_contract_number"
                     v-model="contract.f_contract_number" />
            </div>
          </div>
          <div class="form-group col-sm-12" :class="[$v.f_contract_type.required ? 'has-error' : '']">
            <label class="col-sm-2 control-label">合同类型：</label>
            <div class="col-sm-10">
              <input type="text" v-show="false"
                     class="form-control input_view"
                     v-validate:f_contract_type = "['required']"
                     v-model="contract.f_contract_type" />
              <input-select
                class="select select_list"
                :value.sync="contract.f_contract_type"
                v-model="contract.f_contract_type"
                :options="contractType"
                :valueSingle="true"></input-select>
            </div>
          </div>
          <div class="form-group col-sm-12" :class="[$v.f_contract_money.required ? 'has-error' : '']">
            <label class="col-sm-2 control-label">合同金额：</label>
            <div class="col-sm-10">
              <input type="number" style="width: 100%"
                     class="form-control input_view"
                     v-validate:f_contract_money = "['required']"
                     v-model="contract.f_contract_money" />
            </div>
          </div>
          <div class="form-group col-sm-12">
            <label class="col-sm-2 control-label">备注：</label>
            <div class="col-sm-10">
              <input type="text"
                     class="form-control input_view"
                     style="width: 100%"
                     v-model="contract.f_remarks" />
            </div>
          </div>
        </article>
        <footer slot="modal-footer" class="modal-footer">
          <button type="button" class="btn btn-primary" :disabled='!$v.valid' @click="saveContract()">新增协议</button>
        </footer>
      </modal>

      <modal v-if="showInvalid" :show.sync="showInvalid" v-ref:modal :large="true" :backdrop="false" title="作废协议">
        <header slot="modal-header" class="modal-header">
          <button type="button" class="close" @click="closeModal"><span>&times;</span></button>
          <h4 class="modal-title">作废协议</h4>
        </header>
        <article slot="modal-body" class="modal-body clearfix">
          <div class="form-group col-sm-12">
            <label class="col-sm-2 control-label">合同编号：</label>
            <div class="col-sm-10">
              <input type="text"
                     class="form-control input_view"
                     style="width: 100%"
                     readonly
                     v-model="contract.f_contract_number" />
            </div>
          </div>
          <div class="form-group col-sm-12">
            <label class="col-sm-2 control-label">合同类型：</label>
            <div class="col-sm-10">
              <input type="text"
                     class="form-control input_view"
                     style="width: 100%"
                     readonly
                     v-model="contract.f_contract_type" />
            </div>
          </div>
          <div class="form-group col-sm-12">
            <label class="col-sm-2 control-label">合同金额：</label>
            <div class="col-sm-10">
              <input type="text"
                     class="form-control input_view"
                     style="width: 100%"
                     readonly
                     v-model="contract.f_contract_money" />
            </div>
          </div>
          <div class="form-group col-sm-12">
            <label class="col-sm-2 control-label">提交人员：</label>
            <div class="col-sm-10">
              <input type="text"
                     class="form-control input_view"
                     style="width: 100%"
                     readonly
                     v-model="contract.f_operator" />
            </div>
          </div>
          <div class="form-group col-sm-12" :class="[$v.f_void_remarks.required ? 'has-error' : '']">
            <label class="col-sm-2 control-label">作废原因：</label>
            <div class="col-sm-10">
              <input type="text" style="width: 100%"
                     class="form-control input_view"
                     v-validate:f_void_remarks = "['required']"
                     v-model="contract.f_void_remarks" />
            </div>
          </div>
        </article>
        <footer slot="modal-footer" class="modal-footer">
          <button type="button" class="btn btn-primary" :disabled='!$v.valid' @click="invalidContract()">确认作废</button>
        </footer>
      </modal>
    </validator>
  </div>
</template>
<script>
import {getNowDate,isEmpty} from '../../../Util'
import {PagedList} from 'vue-client'
import {HttpResetClass} from 'vue-client'
export default {
  title: '补充协议',
  props: {
    selectdata: {
      type: Object
    },
    mark: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      showSupplement: false,
      showInvalid: false,
      model: {
        data: null
      },
      contract: {}
    }
  },
  ready () {
    this.search()
  },
  methods: {
    async invalidContract() {
      let http = new HttpResetClass()
      let data = {
        selectdata: this.selectdata,
        user: this.$login.f,
        contract: this.contract
      }
      let res = await http.load('POST', 'rs/logic/deleteApplyContract', {data: data}, {
        resolveMsg: null,
        rejectMsg: '作废失败'
      })
      this.$dispatch('breakControl', this.selectdata)
    },
    showInvalidModal(row) {
      this.contract = row
      this.showInvalid = true
    },
    async saveContract() {
      if (isEmpty(this.selectdata.f_contract_money)) {
        this.$showMessage('请先录入主合同金额！！！')
        return
      }
      let http = new HttpResetClass()
      let data = {
        contract: this.contract,
        user: this.$login.f,
        selectdata: this.selectdata
      }
        let res = await http.load('POST', 'rs/logic/addApplyContract', {data: data}, {
        resolveMsg: null,
        rejectMsg: '添加失败'
      })
      this.$dispatch('breakControl', this.selectdata)
    },
    async search () {
      let http = new HttpResetClass()
      let data = {
        tablename: 't_contract',
        condition: `f_process_id = '${this.selectdata.f_process_id}'`
      }
      let res = await http.load('POST', 'rs/sql/applySingleTable', {data: data}, {
        resolveMsg: null,
        rejectMsg: '补充协议查询失败'
      })
      this.model.data = res.data
    },
    closeModal() {
      this.showSupplement = false
      this.showInvalid = false
      this.contract = {}
      this.search()
    }
  },
  events: {
  },
  computed: {
    contractType () {
      return this.$appdata.getParam('合同类型')
    }
  },
  watch: {
  }
}
</script>
<style scoped>
  .textNoLineBreak {
    white-space: nowrap;
  }
  .head-but{
    margin-left: 5px;
    height: 34px;
    /*background-color: #6aa6e2;*/
    border-radius: 4px;
    font-family: PingFang;
    color: #ffffff;
  }
</style>
