<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="4" :sm="6">
            <a-form-item label="选择年度">
              <a-date-picker
                             mode="year"
                             placeholder="请选择年份"
                             format='YYYY'
                             v-model="queryParam.year"
                             :open='yearShowOne'
                             @openChange="openChangeOne"
                             @panelChange="panelChangeOne" />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="6">
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
             </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
<!--      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
<!--      <a-button type="primary" icon="download" @click="handleExportXls('销售目标')">导出</a-button>-->
<!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
<!--        <a-button type="primary" icon="import">导入</a-button>-->
<!--      </a-upload>-->
<!--      &lt;!&ndash; 高级查询区域 &ndash;&gt;-->
<!--      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>-->
<!--      <a-dropdown v-if="selectedRowKeys.length > 0">-->
<!--        <a-menu slot="overlay">-->
<!--          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
<!--        </a-menu>-->
<!--        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
<!--      </a-dropdown>-->
    </div>

    <!-- table区域-begin -->
    <div>
<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
<!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
<!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
<!--      </div>-->

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        :columns="columns"
        rowKey="month"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
          <template slot="turnoverSlot" slot-scope="text,record">
              <a-input-number v-model="record.turnover"  style="width: 70%" :min="0" :step="1" :precision="2"/>
          </template>
          <template slot="rentalRateSlot" slot-scope="text,record">
<!--              <a-input-number :min="0" :step="1" :precision="2"-->
<!--                              :formatter="value => `${value}%`" :parser="value => value.replace('%', '')"-->
<!--                              addon-after=".com">-->
<!--                  <a-icon slot="prefix" type="user" />-->
<!--              </a-input-number>-->
<!--              <a-input addon-after="%" />-->
              <a-input-group compact>
                  <a-input-number v-model="record.rentalRate" style="width: 60%" :min="0" :step="1" :precision="2"/>
                  <a-input disabled value="%" style="width: 40px;"/>
              </a-input-group>
<!--              <div style="display: flex;flex-direction: row">-->
<!--                  <div style="flex: 3">-->
<!--                      <a-input-number :min="0" :step="1" :precision="2"/>-->
<!--                  </div>-->
<!--                  <div style="flex: 1">-->
<!--                      <a-input disabled="" value="%"/>-->
<!--                  </div>-->
<!--              </div>-->
          </template>
          <template slot="roomPriceSlot" slot-scope="text,record">
              <a-input-number v-model="record.roomPrice" style="width: 70%" :min="0" :step="1" :precision="2"/>
          </template>
          <template slot="revperSlot" slot-scope="text,record">
              <a-input-number v-model="record.revper" style="width: 70%" :min="0" :step="1" :precision="2"/>
          </template>
          <template slot="nightSlot" slot-scope="text,record">
              <a-input-number v-model="record.night" style="width: 70%" :min="0" :step="1" :precision="2"/>
          </template>
          <template slot="footer" slot-scope="currentPageData">
              <div class='subtotal'>
                  <div class='left'>合计</div>
                  <div class='number'>{{ total1.toFixed(2) }}</div>
                  <div class='number'>{{ total2.toFixed(2) }}</div>
                  <div class='number'>{{ total3.toFixed(2) }}</div>
                  <div class='number'>{{ total4.toFixed(2) }}</div>
                  <div class='number'>{{ total5.toFixed(2) }}</div>
                  <div class='number'>{{  }}</div>
              </div>
          </template>
      </a-table>
    </div>
    <a-button type="primary" @click="submitData" style="margin-top: 20px">保存</a-button>
<!--    <bus-market-objective-modal ref="modalForm" @ok="modalFormOk"></bus-market-objective-modal>-->
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import moment from "moment";
  import { httpAction, getAction } from '@/api/manage'
  // import BusMarketObjectiveModal from './modules/BusMarketObjectiveModal'

  export default {
      name: 'marketObjectiveList',
      mixins: [JeecgListMixin, mixinDevice],
      components: {
          // BusMarketObjectiveModal
      },
      data() {
          return {
              description: '销售目标管理页面',
              // 表头
              columns: [
                  {
                      title: '月份',
                      align: "center",
                      dataIndex: 'month',
                      width:200
                  },
                  {
                      title: '营业额销售目标',
                      align: "center",
                      dataIndex: 'turnover',
                      scopedSlots: { customRender: 'turnoverSlot' }
                  },
                  {
                      title: '出租率销售目标',
                      align: "center",
                      dataIndex: 'rentalRate',
                      scopedSlots: { customRender: 'rentalRateSlot' }
                  },
                  {
                      title: '平均房价销售目标',
                      align: "center",
                      dataIndex: 'roomPrice',
                      scopedSlots: { customRender: 'roomPriceSlot' }
                  },
                  {
                      title: 'RevPer销售目标',
                      align: "center",
                      dataIndex: 'revper',
                      scopedSlots: { customRender: 'revperSlot' }
                  },
                  {
                      title: '夜间数销售目标',
                      align: "center",
                      dataIndex: 'night',
                      scopedSlots: { customRender: 'nightSlot' }
                  },
              ],
              url: {
                  list: "/business/busMarketObjective/queryList",
                  delete: "/business/busMarketObjective/delete",
                  deleteBatch: "/business/busMarketObjective/deleteBatch",
                  exportXlsUrl: "/business/busMarketObjective/exportXls",
                  importExcelUrl: "business/busMarketObjective/importExcel",
                  batchAddOrUpdate: "/business/busMarketObjective/batchAddOrUpdate",
              },
              dictOptions: {},
              superFieldList: [],
              yearShowOne: false,
              hotelId:'',
              total1:0,
              total2:0,
              total3:0,
              total4:0,
              total5:0
          }
      },
      beforeCreate() {

      },
      created() {
          this.getSuperFieldList();
          this.queryParam.year = moment(new Date().getFullYear(),'YYYY')
          //new Date().getFullYear();//
      },
      mounted(){
          console.log(this.dataSource)
          // this.$nextTick(() => {
          //     console.log(this.$refs.table.dataSource)
          // })
          var info = JSON.parse(localStorage.getItem("storeInfo"));
          this.hotelId = info.id;
      },
      updated () {
          // this.handleAddStatistics()
          console.log(this.dataSource)
      },
      computed: {
          importExcelUrl: function () {
              return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
          },
      },
      methods: {
          initDictConfig() {
          },
          getSuperFieldList() {
              let fieldList = [];
              fieldList.push({type: 'string', value: 'tenantId', text: '关联租户'})
              fieldList.push({type: 'string', value: 'hotelId', text: '关联酒店'})
              fieldList.push({type: 'int', value: 'year', text: '年份'})
              fieldList.push({type: 'string', value: 'month', text: '月份'})
              fieldList.push({type: 'number', value: 'turnover', text: '营业额销售目标'})
              fieldList.push({type: 'number', value: 'rentalRate', text: '出租率销售目标'})
              fieldList.push({type: 'number', value: 'roomPrice', text: '平均房价销售目标'})
              fieldList.push({type: 'number', value: 'revper', text: 'RevPer销售目标'})
              fieldList.push({type: 'number', value: 'night', text: '夜间数销售目标'})
              fieldList.push({type: 'string', value: 'json', text: 'json'})
              fieldList.push({type: 'int', value: 'delFlag', text: '删除状态(0-正常,1-已删除)'})
              this.superFieldList = fieldList
          },
          // 弹出日历和关闭日历的回调
          openChangeOne(status) {
              if (status) {
                  this.yearShowOne = true
              }
          },
          // 得到年份选择器的值
          panelChangeOne(value) {
              this.queryParam.year = moment(new Date(value)).format('YYYY');
              this.yearShowOne = false;
          },
          handleAddStatistics() {
              console.log(this.$refs.table.dataSource)
              const { count, dataSource } = this.$refs.table;
              const newData = {
                  key: count,
                  month: '合计',
                  turnover: '0.00',
                  rentalRate: '0.00',
                  roomPrice: '0.00',
                  revper: '0.00',
                  night: '0.00',
              };
              this.$refs.table.dataSource = [...dataSource, newData];
              // this.$refs.table.count = count + 1;
          },
          submitData() {
              var _dataSource = this.$refs.table.dataSource
              _dataSource.forEach(t=>{
                  t.hotelId = this.hotelId
              })
              var data = JSON.stringify(_dataSource)
              console.log(data)
              const that = this;
              that.confirmLoading = true;
              httpAction(this.url.batchAddOrUpdate, _dataSource, 'POST').then((res) => {
                  if (res.success) {
                      that.$message.success(res.message);
                      that.$emit('ok');

                      if(that.queryParam.year._isAMomentObject){
                          that.queryParam.year = that.queryParam.year.format('YYYY')
                      }
                      that.loadData();
                  } else {
                      that.$message.warning(res.message);
                  }
              }).finally(() => {
                  that.confirmLoading = false;
              })
          },
      }
  }
</script>
<style scoped lang="less">
  @import '~@assets/less/common.less';
  .subtotal {
      height: 50px;
      position: absolute;
      bottom: -10px;
      width: 97%;
      border: 1px solid #e8e8e8;
      background: #F4F4F4;
      display: flex;
      align-items: center;
      font-weight: 900;
      overflow-x: scroll;
      overflow-y: hidden;

      .left {
          flex: none; /* div显示滚动条的重点 */
          width: 510px;
      }

      .number {
          flex: none;
          color: #666666;
          height: 100%;
          width: 150px;
          display: flex;
          align-items: center;
          padding-left: 15px;
      }
  }
</style>
