<template>
  <div class="eibs-tab">
    <!-- ----------左 ---------->
    <c-col :span="24">
      <el-form-item label="币种" prop="cur">
        <c-select
            v-model="model.cur"
            placeholder="请选择币种"
            :code="getCodesByKey('cur')"
        ></c-select>
      </el-form-item>
    </c-col>
    <c-col :span="12" class="col-left">


<!--      <c-col :span="24">-->
<!--        <el-form-item label="BEGDAT" prop="BEGDAT">-->
<!--          <c-input-->
<!--              v-model="model.BEGDAT"-->
<!--              placeholder="请输入BEGDAT"-->
<!--          ></c-input>-->
<!--        </el-form-item>-->
<!--      </c-col>-->

      <c-col :span="24">
        <el-form-item
            label="开始日期"
            prop="model.begdat"
            style="width: 100%"
        >
          <c-col :span="11">
            <c-date-picker
                type="date"
                v-model="model.begdat"
                style="width: 100%"
                placeholder="请选择起始日期"
                value-format="yyyy-MM-dd"
            ></c-date-picker>
          </c-col>
        </el-form-item>
      </c-col>
    </c-col>
    <!------------- 右 ---------->
    <c-col :span="12" class="col-right">
      <c-col :span="24">
<!--        <el-form-item label="Party No." prop="extkey">-->
<!--          <c-input-->
<!--            v-model="model.extkey"-->
<!--            maxlength="24"-->
<!--            placeholder="请输入Party No."-->
<!--          ></c-input>-->
<!--        </el-form-item>-->
      </c-col>

      <c-col :span="24">
        <el-form-item
            label="结束日期"
            prop="model.enddat"
            style="width: 100%"
        >
          <c-col :span="11">
            <c-date-picker
                type="date"
                v-model="model.enddat"
                style="width: 100%"
                placeholder="请选择结束日期"
                value-format="yyyy-MM-dd"
            ></c-date-picker>
          </c-col>
        </el-form-item>
      </c-col>

    </c-col>



    <c-col :span="24">
      <c-col :span="12" style="text-align: left">
<!--        <el-button type="primary" size="small" @click="zmqxrtAdd" :disabled="model.cur===''" >新增</el-button>-->
        <el-button type="primary" size="small" @click="zmqxrtAdd" >新增</el-button>
      </c-col>
      <c-col :span="12" style="text-align: right">
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="onSearch()"
          >查询
        </el-button>
      </c-col>
    </c-col>
    <c-col :span="24">
      <c-paging-table 
        :data="zmqxrtData"
        :columns="zmqxrtColumns"
        :pageNumber="model.pageNum"
        :pageSize="model.pageSize"
        :total="model.total"
        v-on:queryFunc="queryFunc"
        :border="true"
      >
        <c-table-column fixed="right" prop="op" label="操作" width="240px">
          <template slot-scope="{ scope }">
            <c-button
              style="margin-left: 0"
              size="small"
              @click="zmqxrtInfo(scope.$index, scope.row)"
              >详情</c-button
            >
            <c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              @click="zmqxrtEdit(scope.$index, scope.row)"
            >修改</c-button
            >
            <c-button
              size="small"
              style="margin-left: 5px"
              @click="zmqxrtDelete(scope.$index, scope.row)"
              >删除</c-button
            >
            <el-popover placement="top-start" width="50" trigger="click">
              <ul class="table-button-item-list">
                <li>
                  <c-button size="small" style="margin-left: 0">指派</c-button>
                </li>
                <li>
                  <c-button size="small" style="margin-left: 0">删除</c-button>
                </li>
              </ul>
              <a
                slot="reference"
                href="javascript:void(0)"
                style="margin-left: 5px"
              >
                <i class="el-icon-more"></i>
              </a>
            </el-popover>
          </template>
        </c-table-column>
      </c-paging-table>
    </c-col>
  </div>
</template>

<script>
import codes from "~/config/CodeTable";

import { queryByPage } from "~/service/test/zmqxrt.js";

export default {
  name: "",
  props: ["model"],
  inject: ["root"],
  data() {
    return {
      zmqxrtData: [],
      zmqxrtColumns: [
        { label: 'INR', prop: 'inr', width: '120' },
				{ label: '币种', prop: 'cur', width: '120' },
				{ label: '起始日期', prop: 'begdat', width: '150' },
				{ label: '终止日期', prop: 'enddat', width: '200' },
				{ label: '买入价', prop: 'buyrat', width: '100' },
				{ label: '中间价', prop: 'midrat', width: '200' },
				{ label: '卖出价', prop: 'selrat', width: '98' },
				// { label: 'TTRRAT', prop: 'ttrrat', width: '98' },
				// { label: 'ODRRAT', prop: 'odrrat', width: '200' },
				// { label: 'VER', prop: 'ver', width: '120' },
				// { label: 'RESRAT', prop: 'resrat', width: '200' },
				// { label: 'REBRAT', prop: 'rebrat', width: '98' },
				// { label: 'IBRRAT', prop: 'ibrrat', width: '200' },
				// { label: 'SEL1RAT', prop: 'sel1rat', width: '100' },
				// { label: 'BUY1RAT', prop: 'buy1rat', width: '150' },
				{ label: '实体组代码', prop: 'etgextkey', width: '120' },
				{ label: '牌价时间', prop: 'xrttim', width: '98' },
				// { label: 'CAOZBZ', prop: 'caozbz', width: '98' },
				// { label: 'CANSSM', prop: 'canssm', width: '98' },
			],
    };
  },
  computed: {
    seatypb: {
      get: function () {
        return this.model.zmqxrttyp === "B";
      },
      set: function (val) {
        this.model.zmqxrttyp = val ? "B" : "";
      },
    },
    seatypc: {
      get: function () {
        return this.model.zmqxrttyp === "C";
      },
      set: function (val) {
        this.model.zmqxrttyp = val ? "C" : "";
      },
    },
    seatypa: {
      get: function () {
        return this.model.zmqxrttyp === "A";
      },
      set: function (val) {
        this.model.zmqxrttyp = val ? "A" : "";
      },
    },
    seatypo: {
      get: function () {
        return this.model.zmqxrttyp === "O";
      },
      set: function (val) {
        this.model.zmqxrttyp = val ? "O" : "";
      },
    },
    seatyph: {
      get: function () {
        return this.model.zmqxrttyp === "H";
      },
      set: function (val) {
        this.model.zmqxrttyp = val ? "H" : "";
      },
    },
  },
  activated() {
    const { update } = this.$route.params
    if (update) {
      this.onInfzmqxrtSearch()
    }
  },
  methods: {
    handleReset() {
      this.root.$refs.modelForm.resetFields();
    },
    onSearch(){
        this.model.pageNum = 1;
        this.model.pageSize = 5;
        this.onInfzmqxrtSearch();
    },
    onInfzmqxrtSearch() {
			queryByPage(this.model).then(res => {
        /**
         * pageNumber: 0
         * pageSize:	0
         * total: 69
         * totalPage: 0
         */
        const list = res.list
        this.zmqxrtData = list
        this.model.pageNum = res.pageNumber
        this.model.pageSize = res.pageSize
        this.model.total = res.total
      }) 
		},
    queryFunc(pageNumber, pageSize) {
      this.model.pageNum = pageNumber
      this.model.pageSize = pageSize
      this.onInfzmqxrtSearch()
    },
    zmqxrttypeChange(val) {
      this.model.zmqxrttyp = val;
    },
    getCodesByKey(key) {
      return codes[key] ?? [];
    },
    zmqxrtAdd() {
      this.$router.push(`/statics/dbazmq`)
		},
    zmqxrtInfo(index, row) {
			this.$router.push(`/statics/dbizmqxrt/${row.inr}`)
		},
    zmqxrtEdit(index, row) {
			this.$router.push(`/statics/dbezmq/${row.inr}`)
		},
    zmqxrtDelete(index, row) {
			this.$router.push(`/statics/dbdzmq/${row.inr}`)
		},
  },
};
</script>

<style scoped>
.table-button-item-list {
  padding: 0;
  margin: 0;
}
.table-button-item-list li {
  list-style: none;
  padding: 5px 0;
  text-align: center;
  color: #606266;
  cursor: pointer;
}</style>