<style scoped>
  .suject-title-box {
    border-bottom: 1px solid #dedede;
  }

  .suject-title-box span {
    padding: 0 5px 10px 5px;
    display: inline-block;
    margin-right: 15px;
    cursor: pointer;
  }

  .suject-title-box span.active {
    color: #2961fe;
    border-bottom: 2px solid #2961fe;
  }

  ._vMG_edit {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: 'PingFangSc-Fine';
    border-top: 3px solid #38425d;
    background-color: #fff;
    padding: 10px;
    z-index: 999;
    /* margin: 15px;
      width: calc(100% - 30px); */
  }

  ._vMG_edit ._tit {
    padding-left: 10px;
    border-left: 3px solid #E95252;
    font-size: 16px;
    color: #000000
  }

  ._vMG_edit ._tit span {
    color: #666666;
    font-size: 14px
  }

  ._edHeight {
    height: 400px;
  }

  .edHeight {
    display: block !important;
    min-height: 230px;
  }

  ._add_saveBtn {
    text-align: right;
  }

</style>
<template>
  <div class="flexOne currentManage page-body" style="position: relative;">
    <div class="query-box" style="border-bottom:0">
      <ul>

        <li>
          <q-btn color="primary" size="11px" label="新增"  @click="resetForm('addMsg'),clickEdit()" />
        </li>
      </ul>
      <!-- <div class="suject-title-box">
          <span>
            
          </span>
        </div> -->
    </div>
    <div class="cm_content _scrollbar"
      style="position: absolute;top:83px;bottom: 20px;left: 15px;right:15px;overflow-y: scroll;">
      <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0"
        v-loading="loading">
        <tr>
          <th>币种名称</th>
          <th>汇率类型</th>
          <th>金蝶币别名</th>
          <th>金蝶币别代码</th>
          <th width="150px">操作</th>
        </tr>
        <tr v-for="(item,index) in dataList" :key="index">
          <td>{{item.CurrencyName}}</td>
          <td>{{item.RateType}}</td>
          <td>{{item.Name}}</td>
          <td style="white-space: warp;">
            {{item.Code}}
          </td>
          <td width="150px">
            <span class="a" style="cursor: pointer;color:blue;text-decoration:underline;margin-right: 5px"
              @click="clickEdit(item)">编辑</span>
            <span style="cursor: pointer;color:red;text-decoration:underline;" @click="Delete(item)">删除</span>
          </td>
        </tr>
      </table>
      <div class="noData" v-if="dataList&&dataList.length==0">
        {{$t('system.content_noData')}}
      </div>
    </div>
    <div class="_vMG_edit" :class="addShow==true?'edHeight':''">
      <el-row style="height:48px">
        <el-col :span="20">
          <p class="_tit">{{text}}</p>
        </el-col>
        <el-col :span="4" class="_add_saveBtn">
          <q-btn color="primary" size="11px" :label="$t('pub.saveBtn')" @click="addLoading?submitForm('addMsg'):''" style="marginRight:10px" />
          <q-btn text-color="primary" size="11px" :label="$t('pub.cancelBtn')" @click="cancelEdit(),resetForm('addMsg'),addShow=false" />
        </el-col>
      </el-row>
      <el-form class="clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
        <el-row>

          <el-col :span="5">
            <el-form-item label="币种类型" prop="CurrencyId">
              <el-select filterable v-model='addMsg.CurrencyId' @change="getType">
                <el-option v-for="item in currencyTypeList" :key="item.ID" :value="item.ID" :label="item.Name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="汇率类型" prop="RateType">
              <el-input v-model="addMsg.RateType" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="别名" prop="Name">
              <el-input v-model="addMsg.Name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="别代码" prop="Code">
              <el-input v-model="addMsg.Code" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

  </div>
</template>
<script>
  import bankForm from './suject/bank'
  import cashForm from './suject/cash'
  import costForm from './suject/cost'
  export default {
    components: {
      bankForm,
      cashForm,
      costForm
    },
    data() {
      return {
        title: '',
        addLoading: true,
        text: '新增银行对照表',
        rules: { //表单必填验证
          CurrencyId: [{
            required: true,
            message: '请选择币种类型',
            trigger: 'change'
          }],
          RateType: [{
            required: true,
            message: '请输入汇率类型',
            trigger: 'blur'
          }],
          Name: [{
            required: true,
            message: '请输入金蝶币别名称',
            trigger: 'blur'
          }],
          Code: [{
            required: true,
            message: '请输入金蝶币别代码',
            trigger: 'blur'
          }]
        },
        addMsg: {
          Id: 0,
          CurrencyId: '',
          CurrencyName: '',
          RateType: '',
          Name: '',
          Code: '',
        },
        addShow: false,
        titleType: 2,
        titleList: [{
            Name: '银行对照表',
            Id: 2
          },
          {
            Name: '现金对照表',
            Id: 3
          },
          {
            Name: '费用对照表',
            Id: 1
          },
        ],
        msg: {

        },
        dataList: [],
        loading: false,
        currencyTypeList: []
      }
    },
    created() {
      this.getList();
      this.financeinfo_post_GetList()
    },
    mounted() {

    },
    methods: {
      Delete(item) {
        let _this = this
        let msg = {
          Id: item.Id
        }
        this.$q.dialog({
          title: '将删除此金蝶币种',
          message: '是否继续?',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          this.apipost('Financial_post_DelKingdeeCurrency', msg, res => {
            if (res.data.resultCode == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '操作成功',
                position: 'top'
              });
              this.getList();
            } else {
              this.Error(res.data.message);
            }
          }, err => {

          })
        }).onCancel(() => {

        });
      },
      // 获取币种名称
      getType(ID) {
        this.currencyTypeList.forEach(item => {
          if (item.ID == ID) {
            this.addMsg.CurrencyName = item.Name
          }
        })
      },
      financeinfo_post_GetList() { // 币种类型
        this.apipost('financeinfo_post_GetList', {
          Name: ''
        }, res => {
          if (res.data.resultCode == 1) {
            this.currencyTypeList = res.data.data;
          } else {

          }
        }, err => {})
      },
      submitForm(addMsg) { //提交创建、修改表单
        let that = this;
        that.$refs[addMsg].validate((valid) => {
          if (valid) {
            that.addFlightmodule()
          } else {
            return false;
          }
        });
      },
      addFlightmodule() { //添加
        this.addLoading = false
        this.apipost('Financial_post_SetKingdeeCurrency', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.addLoading = true
            this.addShow = false;
            this.Success(res.data.message);
            this.getList()
          } else {
            this.addLoading = true
            this.Error(res.data.message);
          }
        }, err => {})
      },
      resetForm(formName) { //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
        this.cancelEdit()
      },
      cancelEdit(t) { // 取消修改、新增
        this.addMsg = {
          Id: 0,
          CurrencyId: '',
          CurrencyName: '',
          RateType: '',
          Name: '',
          Code: '',
        }
        if (!t) {
          this.addShow = false
        }
      },
      //重置表单
      resetInfo() {
        var msg = {
          Id: 0,
          CurrencyId: '',
          CurrencyName: '',
          RateType: '',
          Name: '',
          Code: '',
        }
        this.addMsg = msg;
      },
      clickEdit(item) {
        this.addShow = false
        if (item) {
          this.text = '编辑金蝶币种'
          this.addMsg = JSON.parse(JSON.stringify(item))
        } else {
          this.text = '新增金蝶币种'
        }
        this.addShow = true
      },
      getList() {
        this.loading = true;
        this.apipost('Financial_post_GetKingdeeCurrency', this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
    },
  }

</script>
