<template>
  <!--预授权费用数据-->
  <a-modal title="预授权费用数据" :visible="dialogShow1" width="900px" :maskClosable="false"
    :footer="null" @cancel="dialogShow1 = false">
    <a-table :columns="columns" :data-source="dataList" :pagination="false">
      <template slot="title">
        <div class="flex header-div">
          <div class="flex left-div">
            <div class="item">
              <span>批准次数/金额: </span>
              <span class="val money">{{detailObj.approvalAmount}}</span>
            </div>
            <div class="item">
              <span>是否已使用: </span>
              <span class="val">{{detailObj.isUse}}</span>
            </div>
          </div>
          <a-button type="primary" @click="editEvt({})">
            <Icon name="ssiadd" :size="14" />添 加
          </a-button>
        </div>
      </template>
      <template slot="userTime" slot-scope="text">
        {{text? moment(text).format('YYYY-MM-DD'): ''}}
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <a-button type="link" @click.stop="editEvt(index)">修改</a-button>
        <!-- <a-button v-if="record.eobNo" type="link" class="danger" @click.stop="delRecord(index)">删除</a-button> -->
      </template>
    </a-table>

    <a-modal title="编辑" :visible="dialogShow2" width="60%" :maskClosable="false"
      okText="确定" cancelText="取消"
      @ok="handleEditOK" @cancel="dialogShow2 = false">
      <a-form-model ref="editForm" :model="editFormObj" :rules="editRules">
        <a-row :gutter="30">
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="次数/金额" prop="userd">
              <a-input type="number" v-model.trim="editFormObj.userd" placeholder="次数/金额" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="日期" prop="userTime">
              <a-date-picker allow-clear v-model="editFormObj.userTime" placeholder="请选择日期" value-format="YYYY-MM-DD 00:00:00" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="剩余次数/金额" prop="surplus">
              <a-input type="number" v-model.trim="editFormObj.surplus" placeholder="剩余次数/金额" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </a-modal>
</template>

<script>
import moment from 'moment';
export default{
  data(){
    const columns = [
      { title: "次数/金额", dataIndex: "userd", align: 'center' },
      { title: "日期", dataIndex: "userTime",scopedSlots: { customRender: "userTime" }, align: 'center'},
      { title: "剩余次数/金额", dataIndex: "surplus", align: 'center'},
    ];
    return{
      columns,
      dialogShow1: false,
      dialogShow2: false,
      detailObj: {},
      dataList: [],
      editFormObj: {
        userd: '',
        userTime: '',
        surplus: ''
      },
      editRules: {
        userd: [{ required: true, message: "请输入", trigger: "blur" }],
        userTime: [{ required: true, message: "请选择", trigger: "change" }],
        surplus: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    }
  },
  created(){

  },
  methods: {
    moment,
    showModal1(data){
      this.dialogShow1 = true;
      this.detailObj = data || {};
      this.getData();
    },
    getData(){
      this.$apis.AUTHORIZEUSELIST({
        authorizeId: this.detailObj.id
      })
      .then((res)=>{
        if (res.returnCode == "0000") {
          this.dataList = res.content || [];
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },
    editEvt(record){
      this.editFormObj = {
        userd: record.userd || "",
        userTime: record.userTime? moment(record.userTime).format('YYYY-MM-DD 00:00:00'): '',
        surplus: record.surplus
      };
      this.dialogShow2 = true;
    },
    //编辑保存
    handleEditOK() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$apis.AUTHORIZEUSEADD({
            authorizeId: this.detailObj.id,
            ...this.editFormObj
          })
          .then((res)=>{
            if (res.returnCode == "0000") {
              this.dialogShow2 = false;
              this.getData();
            } else {
              this.$message.error(res.returnMsg);
            }
          });
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
.header-div{
  font-weight: bold;
  justify-content: space-between;
  .item{
    &:nth-child(2){
      margin-left: 50px;
    }
    .val{
      margin-left: 8px;
    }
    .money{
      color: red;
    }
  }
  
}
</style>